feat(directory): mobile layout update

2023-10-23 15:08:42 -04:00
parent 39b32dd3d9
commit f361049de0
14 changed files with 133 additions and 90 deletions
--- a/directory/index.html
+++ b/directory/index.html
@@ -35,7 +35,7 @@
      border-bottom: 0.3rem solid;
      border-right: 0.3rem solid;
      border-top: 0.3rem solid;
-      transform: translateY(-0.3rem) rotate(-45deg);
+      transform: rotate(-45deg);
      box-shadow: inset 0 0 16px 2px rgb(200 14 0), 0 0 18px 5px rgb(200 14 0);
      border-color: rgba(54, 0, 0, 87%);
    }
--- a/directory/src/App.scss
+++ b/directory/src/App.scss
@@ -73,6 +73,27 @@
  min-height: 100vh;
 }

+:root::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+#root::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+:root::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border: 5px solid transparent;
+  background-clip: padding-box;
+  transition: all 0.3s ease-in-out;
+}
+
+:root::-webkit-scrollbar-thumb:hover {
+  border: 4px solid transparent;
+  background-color: var(--text-color);
+}
+
 a {
  color: var(--text-color);
  text-decoration: none;
--- a/directory/src/component/dropdown.jsx
+++ b/directory/src/component/dropdown.jsx
@@ -13,7 +13,7 @@ export default function Dropdown(props) {

  return (
    <>
-      <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''}`}>
+      <section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''} ${props.left ? classes.left : ''}`}>
        <section
          className={classes.text}
          onClick={() => toggleDropdown()}
@@ -90,4 +90,5 @@ Dropdown.propTypes = {
  activeRule: PropTypes.func,
  altText: PropTypes.string,
  iconStyle: PropTypes.object,
+  left: PropTypes.bool,
 };
--- a/directory/src/component/scss/border.module.scss
+++ b/directory/src/component/scss/border.module.scss
@@ -2,6 +2,11 @@
  position: relative;
  bottom: 1px;
  border-bottom: 1px solid var(--text-color);
+  @media only screen and (max-width: 430px) {
+    & {
+      margin: 0 1rem;
+    }
+  }

  &:before,
  &:after {
@@ -18,11 +23,5 @@
  }
  &:after {
    left: 100%;
-    @media only screen and (max-width: 430px) {
-      & {
-        width: 0;
-        height: 0;
-      }
-    }
  }
 }
--- a/directory/src/component/scss/dropdown.module.scss
+++ b/directory/src/component/scss/dropdown.module.scss
@@ -6,6 +6,13 @@
  padding: 0.5em;
  cursor: pointer;

+  &.left {
+    .popup, .menu {
+      left: 0;
+      right: unset;
+    }
+  }
+
  .text {
    display: flex;
    flex-direction: row;
@@ -60,7 +67,7 @@
    border-bottom: 0.15em solid var(--text-color);
    border-right: 0.15em solid var(--text-color);
    border-top: 0.15em solid var(--text-color);
-    transform: translateY(-0.15em) rotate(-45deg);
+    transform: translateY(-0.2em) rotate(-45deg);
  }

  .menu {
@@ -87,8 +94,14 @@
    color: var(--link-highlight-color);
    cursor: auto;

+    &.left {
+      left: 0;
+      right: unset;
+    }
+
    .date {
-      font-family: "Bender", 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif;
+      font-family: "Bender", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR",
+        "Noto Sans", sans-serif;
      font-weight: bold;
      font-size: 1.5rem;
      display: flex;
--- a/directory/src/component/scss/search_box.module.scss
+++ b/directory/src/component/scss/search_box.module.scss
@@ -11,19 +11,19 @@
    height: 0.8rem;
    display: inline-block;
    vertical-align: middle;
-    border-left: 0.15em solid var(--text-color-full);
-    border-bottom: 0.15em solid var(--text-color-full);
-    border-right: 0.15em solid var(--text-color-full);
-    border-top: 0.15em solid var(--text-color-full);
-    transform: translate(0rem, 0.2rem) rotate(-45deg);
+    border-left: 0.15rem solid var(--text-color-full);
+    border-bottom: 0.15rem solid var(--text-color-full);
+    border-right: 0.15rem solid var(--text-color-full);
+    border-top: 0.15rem solid var(--text-color-full);
+    transform: translate(0.2rem, 0.3rem) rotate(-45deg);
  }

  .icon_dot {
    position: absolute;
    background-color: var(--text-color-full);
-    width: 0.1em;
-    height: 0.4em;
-    transform: translate(1.2rem, 1.2rem) rotate(-45deg);
+    width: 0.15rem;
+    height: 0.6rem;
+    transform: translate(1.2rem, 1.1rem) rotate(-45deg);
  }

  .input {
--- a/directory/src/component/scss/switch.module.scss
+++ b/directory/src/component/scss/switch.module.scss
@@ -20,26 +20,26 @@

    .icon {
      position: absolute;
-      bottom: 8px;
+      bottom: 0.65em;
      right: 18px;
-      width: 8px;
-      height: 8px;
+      width: 0.5em;
+      height: 0.5em;
      display: inline-block;
      vertical-align: middle;
-      border-left: 2px solid currentColor;
-      border-bottom: 2px solid currentColor;
-      border-right: 2px solid currentColor;
-      border-top: 2px solid currentColor;
-      transform: translate(0, -2px) rotate(-45deg);
+      border-left: 0.15em solid currentColor;
+      border-bottom: 0.15em solid currentColor;
+      border-right: 0.15em solid currentColor;
+      border-top: 0.15em solid currentColor;
+      transform: translate(0, -0.15em) rotate(-45deg);
      transition: right cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s,
        background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
    }
    .line {
      position: absolute;
-      bottom: 15px;
+      bottom: 1.1em;
      right: 6px;
      width: 18px;
-      height: 2px;
+      height: 0.15em;
      display: inline-block;
      vertical-align: middle;
      background-color: currentColor;
--- a/directory/src/component/totop_button.jsx
+++ b/directory/src/component/totop_button.jsx
@@ -12,7 +12,7 @@ export default function ToTopButton(props) {

  useEffect(() => {
    const handleButton = () => {
-      const scrollBarPos = window.pageYOffset || 0;
+      const scrollBarPos = window.scrollY || 0;
      setHidden(!(scrollBarPos > 100))
    }
    window.addEventListener('scroll', handleButton)
--- a/directory/src/i18n.json
+++ b/directory/src/i18n.json
@@ -151,6 +151,10 @@
        "zh-CN": "🧭 快速导航",
        "en-US": "🧭 Fast Navigation"
      },
+      "return": {
+        "zh-CN": "↩️ 返回",
+        "en-US": "↩️ Return"
+      },
      "search_by_name": {
        "zh-CN": "名字搜索",
        "en-US": "Search by Name"
--- a/directory/src/routes/Root.jsx
+++ b/directory/src/routes/Root.jsx
@@ -26,7 +26,6 @@ import {
 } from '@/state/language'
 import Dropdown from '@/component/dropdown';
 import Popup from '@/component/popup';
-import ReturnButton from '@/component/return_button';
 import Border from '@/component/border';
 import CharIcon from '@/component/char_icon';
 import ToTopButton from '@/component/totop_button';
@@ -81,7 +80,7 @@ export default function Root() {
      document.querySelector('.loader').style.display = 'none'
    }, 500)
  }
-  , [])
+    , [])

  return (
    <>
@@ -94,6 +93,7 @@ export default function Root() {
          <section className={header.bar} />
          <section className={header.bar} />
        </section>
+        <HeaderButton />
        <section className={header.spacer} />
        <section className={header['extra-area']}>
          {extraArea}
@@ -104,7 +104,7 @@ export default function Root() {
        <section
          className={drawer.links}
        >
-          <DrawerDestinations 
+          <DrawerDestinations
            toggleDrawer={toggleDrawer}
          />
        </section>
@@ -132,7 +132,7 @@ export default function Root() {
            {headerTabs}
          </section>
        </section>
-        <HeaderButton />
+        <Border />
        <ToTopButton />
        <Outlet />
        <ScrollRestoration />
@@ -288,28 +288,30 @@ function HeaderButton() {

  if (fastNavigation.length > 0) {
    return (
-      <Border>
-        <Dropdown
-          menu={fastNavigation}
-          altText={i18n("fast_navigation")}
-          onClick={(item) => {
-            navigate(item.value)
-          }}
-          className={classes['fast-navigate']}
-          iconStyle={{
-            borderWidth: '0.1em',
-          }}
-        />
-      </Border>
+      <Dropdown
+        menu={fastNavigation}
+        altText={i18n("fast_navigation")}
+        onClick={(item) => {
+          navigate(item.value)
+        }}
+        className={header['fast-navigate']}
+        iconStyle={{
+          borderWidth: '0.15em',
+          width: '1em',
+          transform: 'translateY(0.1rem) translateX(0.1rem) rotate(-45deg)',
+          height: '1em',
+        }}
+        left={true}
+      />
    )
  } else {
    return (
-      <Border>
-        <ReturnButton
-          className={classes['return-button']}
-          onClick={() => navigate("/")}
-        />
-      </Border>
-    )
+      <section className={header['back-arrow']}>
+        <Link to="/" className={header.link}>
+          <section className={header.arrow1} />
+          <section className={header.arrow2} />
+        </Link>
+      </section>
+    )  
  }
 }
--- a/directory/src/scss/_main_share.scss
+++ b/directory/src/scss/_main_share.scss
@@ -13,8 +13,8 @@

  @media only screen and (max-width: 430px) {
    & {
-      width: calc(100vw - 2rem);
-      margin-left: 2rem;
+      width: 100vw;
+      margin-left: 0;
    }
  }
-}
+}
--- a/directory/src/scss/_page_base.scss
+++ b/directory/src/scss/_page_base.scss
@@ -192,7 +192,6 @@
    & {
      align-items: flex-start;
      flex-direction: column-reverse;
-      padding-right: 0;
      padding-bottom: 0;
    }
  }
--- a/directory/src/scss/root/Root.module.scss
+++ b/directory/src/scss/root/Root.module.scss
@@ -1,4 +1,4 @@
-@use '@/scss/_main_share.scss';
+@use "@/scss/_main_share.scss";

 .main {
  .header {
@@ -8,7 +8,12 @@
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
-    padding-right: 2rem;
+
+    @media only screen and (max-width: 430px) {
+      & {
+        margin: 0 1rem;
+      }
+    }
    .title {
      font-size: 3rem;
      font-weight: 700;
@@ -80,32 +85,4 @@
      }
    }
  }
-  .fast-navigate {
-    position: absolute;
-    right: -2em;
-    bottom: calc(-1em - 2px);
-    font-size: 32px;
-
-    @media only screen and (max-width: 430px) {
-      & {
-        display: none;
-      }
-    }
-  }
-
-  .return-button {
-    position: absolute;
-    right: -4rem;
-    bottom: -24px;
-    color: var(--button-color);
-    transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
-
-    &:hover {
-      color: var(--text-color);
-    }
-
-    @media (max-width: 768px) {
-      right: -3.4rem;
-    }
-  }
-}
+}
--- a/directory/src/scss/root/header.module.scss
+++ b/directory/src/scss/root/header.module.scss
@@ -5,7 +5,7 @@
  top: 0;
  right: 0;
  padding: 1rem;
-  z-index: 3;
+  z-index: 4;
  height: 3rem;
  display: flex;
  flex-direction: row;
@@ -14,6 +14,11 @@
  justify-content: flex-start;
  pointer-events: none;

+  .fast-navigate {
+    pointer-events: auto;
+    margin-left: 0.6rem;
+  }
+
  .dropdown {
    margin-left: auto;
  }
@@ -71,4 +76,26 @@

 .spacer {
  flex-grow: 1;
-}
+}
+
+.back-arrow {
+  padding-left: 1rem;
+  height: 2rem;
+  width: 2rem;
+  pointer-events: auto;
+
+  .arrow1 {
+    height: 1rem;
+    width: 1rem;
+    border-left: 0.15rem solid;
+    border-bottom: 0.15rem solid;
+    transform: translateY(0.38rem) rotate(45deg);
+  }
+
+  .arrow2 {
+    width: 1.2rem;
+    height: 0.15rem;
+    background-color: currentColor;
+    transform: translate(0.5rem, -0.25rem);
+  }
+}