[gem-book] Improve mobile

mantou132 · Dec 27, 2023 · 6c34b9d · 6c34b9d
1 parent 890af84
commit 6c34b9d
Show file tree

Hide file tree

Showing 22 changed files with 231 additions and 93 deletions.
diff --git a/packages/duoyun-ui/docs/zh/02-elements/README.md b/packages/duoyun-ui/docs/zh/02-elements/README.md
@@ -2,7 +2,7 @@
 
 <style>
   a, gem-link {
-    text-wrap: nowrap;
+    white-space: nowrap;
   }
 </style>
 

diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "A lightweight desktop UI component library, implemented using Gem",
   "keywords": [
     "frontend",
@@ -48,7 +48,7 @@
     "elkjs": "^0.7.1"
   },
   "peerDependencies": {
-    "@mantou/gem": "^1.7.2"
+    "@mantou/gem": "^1.7.6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",

diff --git a/packages/gem-book/src/element/elements/404.ts b/packages/gem-book/src/element/elements/404.ts
@@ -7,6 +7,7 @@ import { selfI18n } from '../helper/i18n';
 import { icons } from './icons';
 
 import '@mantou/gem/elements/reflect';
+import '@mantou/gem/elements/title';
 
 @customElement('gem-book-404')
 @connectStore(selfI18n.store)
@@ -53,7 +54,7 @@ export class Meta extends GemElement {
           margin-right: 10px;
         }
       </style>
-      <h1>404 - Not found</h1>
+      <h1><gem-title inert>Not Found</gem-title></h1>
       ${noGithub
         ? ''
         : html`

diff --git a/packages/gem-book/src/element/elements/icons.ts b/packages/gem-book/src/element/elements/icons.ts
@@ -1,6 +1,23 @@
 import { raw } from '@mantou/gem';
 
 export const icons = {
+  github: raw`
+    <svg width="16" height="16" viewBox="0 0 16 16">
+      <path fill="currentColor" d="M8 0a8.1 8.1 0 0 0-8 8.2c0 3.63 2.3 6.7 5.47 7.79l.14.01c.3 0 .4-.22.4-.4v-1.4c-.3.06-.57.1-.81.1-1.54 0-1.89-1.2-1.89-1.2-.36-.95-.89-1.2-.89-1.2-.7-.5 0-.5.05-.5.8.06 1.23.84 1.23.84.4.7.94.9 1.41.9.38 0 .72-.12.92-.21.07-.53.28-.9.5-1.1-1.77-.2-3.64-.91-3.64-4.05 0-.9.31-1.63.82-2.2-.08-.21-.35-1.05.08-2.18l.18-.01c.3 0 .94.1 2.02.86a7.5 7.5 0 0 1 4.01 0c1.08-.75 1.73-.86 2.02-.86l.18.01c.44 1.13.16 1.97.08 2.18.5.57.82 1.3.82 2.2 0 3.15-1.87 3.84-3.65 4.04.28.25.54.75.54 1.52l-.01 2.25c0 .2.1.41.4.41l.15-.01A8.19 8.19 0 0 0 16 8.2 8.1 8.1 0 0 0 8 0Z"/>
+    </svg>
+  `,
+  menu: raw`
+    <svg part="icon" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+    </svg>
+  `,
+  close: raw`
+    <svg part="icon" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+    </svg>
+  `,
   i18n: raw`
     <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none"></path>

diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
@@ -296,10 +296,11 @@ export class Main extends GemElement {
         gem-book-pre {
           z-index: 2;
           margin: 2rem 0px;
+          border-radius: ${theme.normalRound};
         }
         @media ${mediaQuery.PHONE} {
           .header-anchor {
-            display: none;
+            opacity: 1;
           }
           h1 {
             font-size: 2.5rem;

diff --git a/packages/gem-book/src/element/elements/nav-logo.ts b/packages/gem-book/src/element/elements/nav-logo.ts
@@ -1,4 +1,5 @@
 import { GemElement, html, adoptedStyle, customElement, createCSSSheet, css, connectStore } from '@mantou/gem';
+import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { bookStore } from '../store';
 import { theme } from '../helper/theme';
@@ -14,7 +15,9 @@ const style = createCSSSheet(css`
     flex-shrink: 0;
   }
   gem-link {
-    display: contents;
+    display: flex;
+    align-items: center;
+    height: 100%;
     text-decoration: none;
     color: inherit;
   }
@@ -24,8 +27,12 @@ const style = createCSSSheet(css`
     object-fit: contain;
     transform: translateX(-10%);
   }
+  @media ${mediaQuery.PHONE} {
+    span {
+      display: none;
+    }
+  }
 `);
-
 /**
  * @customElement gem-book-nav-logo
  */
@@ -38,7 +45,8 @@ export class GemBookNavLogoElement extends GemElement {
     const { icon = '', title = '' } = config || {};
     return html`
       <gem-link path="/">
-        ${icon ? html`<img alt=${title} src=${icon} aria-hidden="true" />` : null} ${title}
+        ${icon ? html`<img alt=${title} src=${icon} aria-hidden="true" />` : null}
+        <span>${title}</span>
       </gem-link>
     `;
   };

diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts
@@ -7,6 +7,7 @@ import {
   globalemitter,
   connectStore,
   boolattribute,
+  classMap,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -16,6 +17,7 @@ import { capitalize, isSameOrigin } from '../lib/utils';
 import { bookStore } from '../store';
 
 import { icons } from './icons';
+import { sidebarStore, toggleSidebar } from './sidebar';
 
 import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
@@ -28,6 +30,7 @@ import './nav-logo';
  */
 @customElement('gem-book-nav')
 @connectStore(bookStore)
+@connectStore(sidebarStore)
 export class Nav extends GemElement {
   @boolattribute logo: boolean;
 
@@ -38,10 +41,8 @@ export class Nav extends GemElement {
   renderI18nSelect = () => {
     const { langList = [], lang } = bookStore;
     if (lang) {
-      const name = langList.find(({ code }) => code === lang)?.name;
       return html`
-        <div class="item">
-          ${mediaQuery.isPhone ? '' : name || lang}
+        <div class="icon item">
           <gem-use @click=${() => this.i18nRef.element?.click()} .element=${icons.i18n}></gem-use>
           <select
             aria-label="language select"
@@ -55,12 +56,12 @@ export class Nav extends GemElement {
     }
   };
 
-  renderExternalItem = ({ navTitle, title, link }: NavItem) => {
+  renderExternalItem = ({ navTitle, title, link }: NavItem, icon?: string | Element | DocumentFragment) => {
     if (link) {
       return html`
-        <gem-link class="external item" href=${link}>
-          ${capitalize(navTitle || title)}
-          <gem-use .element=${icons.link}></gem-use>
+        <gem-link class=${classMap({ item: true, icon: !!icon })} href=${link} title=${title}>
+          <span>${capitalize(navTitle || title)}</span>
+          <gem-use .element=${icon || icons.link}></gem-use>
         </gem-link>
       `;
     }
@@ -79,7 +80,7 @@ export class Nav extends GemElement {
   render() {
     const { config, nav = [] } = bookStore;
     const { github = '' } = config || {};
-    const githubLink = config ? this.renderExternalItem({ title: 'github', link: github }) : null;
+    const githubLink = config ? this.renderExternalItem({ title: 'github', link: github }, icons.github) : null;
     const internals = nav?.filter((e) => isSameOrigin(e.link)) || [];
     const externals = nav?.filter((e) => !isSameOrigin(e.link)) || [];
 
@@ -91,8 +92,8 @@ export class Nav extends GemElement {
           height: ${theme.headerHeight};
           border-bottom: 1px solid ${theme.borderColor};
         }
-        gem-book-nav-logo + .item {
-          margin-left: 3rem;
+        gem-book-nav-logo {
+          margin-right: 3rem;
         }
         .item {
           display: flex;
@@ -101,8 +102,8 @@ export class Nav extends GemElement {
           cursor: pointer;
           overflow: hidden;
         }
-        .item gem-use {
-          margin-left: 0.3rem;
+        :where(.item + .item) {
+          margin-left: 1rem;
         }
         .item select {
           -webkit-appearance: none;
@@ -112,27 +113,22 @@ export class Nav extends GemElement {
           inset: 0;
           opacity: 0;
         }
-        .internals {
+        .left {
           flex-grow: 1;
           display: flex;
         }
-        .internals .item {
+        .left .item {
           padding: 0 1rem;
         }
-        :where(.item + .item:not(.slot)),
-        .slot::slotted(*) {
-          margin-left: 1rem;
-          display: block;
-        }
         gem-link,
         gem-active-link {
           text-decoration: none;
           color: inherit;
         }
-        gem-active-link:active {
+        gem-active-link:not(.icon):active {
           background: rgba(${theme.primaryColorRGB}, 0.1);
         }
-        gem-active-link:hover,
+        gem-active-link:not(.icon):hover,
         gem-active-link:where(:state(active), [data-active]) {
           color: ${theme.primaryColor};
         }
@@ -145,26 +141,44 @@ export class Nav extends GemElement {
           background: currentColor;
           width: 100%;
         }
-        gem-use {
+        .item:not(.icon) gem-use {
           width: 1em;
+          margin-left: 0.3rem;
+        }
+        .icon span {
+          display: none;
+        }
+        .icon gem-use {
+          opacity: 0.6;
+          width: 1.5em;
+        }
+        .icon:hover gem-use {
+          opacity: 0.8;
+        }
+        .menu {
+          display: none;
+          opacity: 0.8;
+          width: 1.5em;
+          padding-inline: 1rem;
+          margin-inline-start: -1rem;
         }
         @media ${mediaQuery.PHONE} {
-          gem-book-nav-logo + .item {
-            margin-left: 0;
-          }
-          .internals .item {
-            padding: 0 0.3rem;
+          .menu {
+            display: block;
           }
-          .external {
+          .left * {
             display: none;
           }
         }
       </style>
-      <div class="internals">
-        ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''} ${internals.map(this.renderInternalItem)}
+      <gem-use class="menu" @click=${toggleSidebar} .element=${sidebarStore.open ? icons.close : icons.menu}></gem-use>
+      ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''}
+      <div class="left">
+        ${internals.map((item) => this.renderInternalItem(item))}
+        ${externals.map((item) => this.renderExternalItem(item))}
       </div>
-      ${externals.map(this.renderExternalItem)} ${githubLink} ${this.renderI18nSelect()}
-      <slot class="slot item"></slot>
+      <slot class="item"></slot>
+      ${this.renderI18nSelect()} ${githubLink}
     `;
   }
 

diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts
@@ -362,7 +362,6 @@ export class Pre extends GemElement {
           display: block;
           font-size: 0.875em;
           background: rgba(${theme.textColorRGB}, 0.05);
-          border-radius: ${theme.normalRound};
           --comment-color: var(--code-comment-color, #6e6e6e);
           --section-color: var(--code-section-color, #c9252d);
           --title-color: var(--code-title-color, #4646c6);