Feature/css tweaks for tables and headers (#102)

* Improve table responsiveness on mobile * Improve headers responsiveness on mobile * Fix navbar issue not closing when clicking on background
magidoc-org · Jun 12, 2022 · e924d8c · e924d8c
1 parent a5f785a
commit e924d8c
Show file tree

Hide file tree

Showing 20 changed files with 276 additions and 224 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -16,7 +16,7 @@
     "release": "gh-pages --dist build --dotfiles true"
   },
   "devDependencies": {
-    "cspell": "^6.1.1",
+    "cspell": "^6.1.2",
     "gh-pages": "^4.0.0"
   }
 }
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -44,11 +44,11 @@
     "zod": "^3.17.3"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-typescript": "^8.3.3",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^28.1.1",
     "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
     "jest": "^28.1.1",
     "jest-extended": "^2.0.0",
     "rollup": "^2.75.6",

diff --git a/packages/plugins/query-generator/package.json b/packages/plugins/query-generator/package.json
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@types/jest": "^28.1.1",
     "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
     "@types/prettier": "^2.6.3",
     "graphql-query-compress": "^1.2.4",
     "jest": "^28.1.1",

diff --git a/packages/plugins/reverse-schema-mapper/package.json b/packages/plugins/reverse-schema-mapper/package.json
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
     "jest": "^28.1.1",
     "jest-extended": "^2.0.0",
     "rollup": "^2.75.6",

diff --git a/packages/plugins/rollup-fetch-gql-schema/package.json b/packages/plugins/rollup-fetch-gql-schema/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
     "@types/prettier": "^2.6.3",
     "jest": "^28.1.1",
     "jest-extended": "^2.0.0",

diff --git a/packages/plugins/rollup-parse-gql-schema/package.json b/packages/plugins/rollup-parse-gql-schema/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
     "@types/prettier": "^2.6.3",
     "jest": "^28.1.1",
     "jest-extended": "^2.0.0",

diff --git a/packages/plugins/starter-variables/package.json b/packages/plugins/starter-variables/package.json
@@ -26,10 +26,10 @@
     "release": "pnpm publish --no-git-checks --access public"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-typescript": "^8.3.3",
     "@types/jest": "^28.1.1",
     "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
     "jest": "^28.1.1",
     "lodash": "^4.17.21",
     "rollup": "^2.75.6",

diff --git a/packages/plugins/svelte-carbon-commons/package.json b/packages/plugins/svelte-carbon-commons/package.json
@@ -29,7 +29,7 @@
     "release": "cd package && pnpm publish --no-git-checks --access public"
   },
   "dependencies": {
-    "carbon-components-svelte": "^0.65.0",
+    "carbon-components-svelte": "^0.65.1",
     "marked": "^4.0.16",
     "prismjs": "^1.28.0"
   },

diff --git a/...ages/plugins/svelte-carbon-commons/src/lib/markdown/components/table/MarkdownTable.svelte b/...ages/plugins/svelte-carbon-commons/src/lib/markdown/components/table/MarkdownTable.svelte
@@ -15,26 +15,39 @@
   export let renderers: Renderers
 </script>
 
-<StructuredList>
-  <StructuredListHead>
-    <StructuredListRow head>
-      {#each token.header as item}
-        <StructuredListCell head>
-          <MarkdownTokens tokens={item.tokens} {options} {renderers} />
-        </StructuredListCell>
-      {/each}
-    </StructuredListRow>
-  </StructuredListHead>
-
-  <StructuredListBody>
-    {#each token.rows as row}
-      <StructuredListRow>
-        {#each row as col}
-          <StructuredListCell>
-            <MarkdownTokens tokens={col.tokens} {options} {renderers} />
+<div class="markdown-table-wrapper">
+  <StructuredList>
+    <StructuredListHead>
+      <StructuredListRow head>
+        {#each token.header as item}
+          <StructuredListCell head>
+            <MarkdownTokens tokens={item.tokens} {options} {renderers} />
           </StructuredListCell>
         {/each}
       </StructuredListRow>
-    {/each}
-  </StructuredListBody>
-</StructuredList>
+    </StructuredListHead>
+
+    <StructuredListBody>
+      {#each token.rows as row}
+        <StructuredListRow>
+          {#each row as col}
+            <StructuredListCell>
+              <MarkdownTokens tokens={col.tokens} {options} {renderers} />
+            </StructuredListCell>
+          {/each}
+        </StructuredListRow>
+      {/each}
+    </StructuredListBody>
+  </StructuredList>
+</div>
+
+<style>
+  .markdown-table-wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .markdown-table-wrapper :global(.bx--structured-list) {
+    margin-bottom: 0 !important;
+  }
+</style>
diff --git a/packages/plugins/svelte-carbon-commons/src/lib/text/AnchorHeader.svelte b/packages/plugins/svelte-carbon-commons/src/lib/text/AnchorHeader.svelte
@@ -3,34 +3,53 @@
   export let depth: number
 </script>
 
-<svelte:element this={`h${depth}`} {id} class="header">
-  <slot />
+<div class="parent">
+  <svelte:element this={`h${depth}`} {id} class="header header-base">
+    <slot />
+  </svelte:element>
   {#if depth > 1}
-    <a href={`#${id}`} class="hashtag">#</a>
-    <span {id} class="anchor" />
+    <svelte:element this={`h${depth}`} class="header-base header-hashtag">
+      <a href={`#${id}`} class="hashtag">#</a>
+    </svelte:element>
   {/if}
-</svelte:element>
+</div>
 
 <style>
-  .header {
+  .parent {
     display: flex;
+    flex-direction: row;
     align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  .header-base {
+    display: block;
     margin-top: 1.8rem;
   }
 
-  .header:hover .hashtag {
+  .header {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .parent:hover .hashtag {
     opacity: 1;
   }
 
+  .header-hashtag {
+    margin-bottom: 0.1rem;
+  }
+
   .hashtag {
     font-size: 70%;
     height: 100%;
-    padding-left: 0.5rem;
+    margin-left: 0.5rem;
     vertical-align: middle;
     cursor: pointer;
     opacity: 0;
     color: inherit;
     text-decoration: none;
+    flex: 2;
   }
 
   .hashtag:hover {

diff --git a/packages/plugins/svelte-carbon-commons/src/routes/index.svelte b/packages/plugins/svelte-carbon-commons/src/routes/index.svelte
@@ -4,14 +4,19 @@
   import 'prismjs/components/prism-graphql.js'
 </script>
 
-<body style="padding: 3rem">
+<body style="padding:1rem">
   <CarbonMarkdown
     options={{
       baseUrl: '/docs',
     }}
     source={`
+# someReallyLongTitleInOneline
+## someOther ReallyLongTitle
+
 # Markdown Tester
 ## Text
+
+
 ------
 ### Ordered list
 1. Here is a [relative URL](/test "with a title") that should point to \`/docs/test\`
@@ -40,8 +45,8 @@
 :::notification type="error" test="lol"
 **test** this
 
-:::notification type="info"
-You can nest them
+:::tags
+You,can,nest,them
 :::
 
 And add text below too!
@@ -101,6 +106,13 @@ You can also insert \`inline\` code blocks like this: \`"this"\`
 | Cow        | 🐄        | Moo       |
 
 
+### Mobile friendliness
+| Animal | Emoji | Sound |
+| ---------- | --------- | --------- |
+| \`Someverylongunsecablestringthatshouldmakethetableoverflow\`        | 🐶        | Woof!     |
+| Cat        | 🐱        | Meow!     |
+| Cow        | 🐄        | Moo       |
+
 ## Images 
 ------
 

diff --git a/packages/starters/carbon-multi-page/package.json b/packages/starters/carbon-multi-page/package.json
@@ -30,7 +30,7 @@
     "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
-    "carbon-components-svelte": "^0.65.0",
+    "carbon-components-svelte": "^0.65.1",
     "carbon-icons-svelte": "^11.1.0",
     "carbon-preprocess-svelte": "^0.9.0",
     "eslint": "^8.17.0",

diff --git a/packages/starters/carbon-multi-page/src/app.css b/packages/starters/carbon-multi-page/src/app.css
@@ -58,10 +58,6 @@ h6 {
   font-size: inherit !important;
 }
 
-.bx--structured-list {
-  margin-bottom: 0px !important;
-}
-
 .bx--structured-list-tbody .bx--structured-list-row:last-child {
   border-color: transparent !important;
 }

diff --git a/packages/starters/carbon-multi-page/src/app.html b/packages/starters/carbon-multi-page/src/app.html
@@ -11,7 +11,5 @@
 
     %sveltekit.head%
   </head>
-  <body>
-    <div>%sveltekit.body%</div>
-  </body>
+  <body>%sveltekit.body%</body>
 </html>
diff --git a/packages/starters/carbon-multi-page/src/lib/components/common/DefaultValueDisplay.svelte b/packages/starters/carbon-multi-page/src/lib/components/common/DefaultValueDisplay.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
-  import { CodeSpan } from '@magidoc/plugin-svelte-carbon-commons'
-
   export let value: unknown
 </script>
 
-<CodeSpan>
-  {#if typeof value == 'string'}
-    "{value}"
-  {:else if typeof value === 'object'}
-    {JSON.stringify(value, null, 2)}
-  {:else}
-    {value ?? '-'}
-  {/if}
-</CodeSpan>
+{#if typeof value == 'string'}
+  "{value}"
+{:else if typeof value === 'object'}
+  {JSON.stringify(value, null, 2)}
+{:else}
+  {value ?? '-'}
+{/if}
diff --git a/packages/starters/carbon-multi-page/src/lib/components/query/AppPrism.svelte b/packages/starters/carbon-multi-page/src/lib/components/query/AppPrism.svelte
@@ -33,27 +33,30 @@
   </div>
   <div class="button-bar">
     <Button
-      kind={'ghost'}
+      kind="ghost"
       icon={Copy}
       iconDescription={copyButtonText}
-      tooltipPosition={'left'}
+      tooltipPosition="left"
+      size="small"
       on:click={() => copy(code)}
     />
     <Button
-      kind={'ghost'}
+      kind="ghost"
       icon={Add}
-      iconDescription={'Increase query depth'}
-      tooltipPosition={'left'}
+      iconDescription="Increase query depth"
+      tooltipPosition="left"
+      size="small"
       on:click={() => graphqlQuery.increaseDepth()}
     />
     <p style="text-align:center">
       {$graphqlQuery.depth}
     </p>
     <Button
-      kind={'ghost'}
+      kind="ghost"
       icon={Subtract}
-      iconDescription={'Decrease query depth'}
-      tooltipPosition={'left'}
+      iconDescription="Decrease query depth"
+      tooltipPosition="left"
+      size="small"
       on:click={() => graphqlQuery.decreaseDepth()}
     />
   </div>

diff --git a/packages/starters/carbon-multi-page/src/lib/layout/AppHeader.svelte b/packages/starters/carbon-multi-page/src/lib/layout/AppHeader.svelte
@@ -8,7 +8,7 @@
   export let isSideNavOpen = true
 </script>
 
-<Header href={base || '/'} bind:isSideNavOpen>
+<Header href={base || '/'} bind:isSideNavOpen expandedByDefault>
   <div slot="platform" class="header-logo-wrapper">
     <AppIcon class="header-logo" />
   </div>

diff --git a/packages/starters/carbon-multi-page/src/lib/layout/nav/AppNavigation.svelte b/packages/starters/carbon-multi-page/src/lib/layout/nav/AppNavigation.svelte
@@ -7,7 +7,7 @@
   export let content: WebsiteContent[]
 </script>
 
-<SideNav {isOpen}>
+<SideNav bind:isOpen>
   <SideNavItems>
     {#each content as item}
       {#if item.type === 'page'}