From f361049de0ac0d6366f9088e784d38e7fc4d1e2a Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Mon, 23 Oct 2023 15:08:42 -0400
Subject: [PATCH] feat(directory): mobile layout update

---
 directory/index.html                          |  2 +-
 directory/src/App.scss                        | 21 ++++++++
 directory/src/component/dropdown.jsx          |  3 +-
 .../src/component/scss/border.module.scss     | 11 ++--
 .../src/component/scss/dropdown.module.scss   | 17 ++++++-
 .../src/component/scss/search_box.module.scss | 16 +++---
 .../src/component/scss/switch.module.scss     | 20 ++++----
 directory/src/component/totop_button.jsx      |  2 +-
 directory/src/i18n.json                       |  4 ++
 directory/src/routes/Root.jsx                 | 50 ++++++++++---------
 directory/src/scss/_main_share.scss           |  6 +--
 directory/src/scss/_page_base.scss            |  1 -
 directory/src/scss/root/Root.module.scss      | 39 +++------------
 directory/src/scss/root/header.module.scss    | 31 +++++++++++-
 14 files changed, 133 insertions(+), 90 deletions(-)

diff --git a/directory/index.html b/directory/index.html
index cec761f..cf1bea5 100644
--- 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%);
     }
diff --git a/directory/src/App.scss b/directory/src/App.scss
index dd8dd14..a171714 100644
--- 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;
diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx
index 7e236c0..08ffdb0 100644
--- 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,
 };
\ No newline at end of file
diff --git a/directory/src/component/scss/border.module.scss b/directory/src/component/scss/border.module.scss
index d14284a..be46195 100644
--- 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;
-      }
-    }
   }
 }
diff --git a/directory/src/component/scss/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss
index 8bf3622..7661f91 100644
--- 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;
diff --git a/directory/src/component/scss/search_box.module.scss b/directory/src/component/scss/search_box.module.scss
index ca0aa1d..7e72f59 100644
--- 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 {
diff --git a/directory/src/component/scss/switch.module.scss b/directory/src/component/scss/switch.module.scss
index f4c7ad3..621bff1 100644
--- 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;
diff --git a/directory/src/component/totop_button.jsx b/directory/src/component/totop_button.jsx
index 4da7ee9..8db38c7 100644
--- 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)
diff --git a/directory/src/i18n.json b/directory/src/i18n.json
index 90ff10f..bf91e69 100644
--- 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"
diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx
index 3cf2ed3..81987f8 100644
--- 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>
+    )  
   }
 }
\ No newline at end of file
diff --git a/directory/src/scss/_main_share.scss b/directory/src/scss/_main_share.scss
index 5a646d2..24309d4 100644
--- 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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/directory/src/scss/_page_base.scss b/directory/src/scss/_page_base.scss
index f12a05a..36334d5 100644
--- 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;
     }
   }
diff --git a/directory/src/scss/root/Root.module.scss b/directory/src/scss/root/Root.module.scss
index 0fd4008..58befa1 100644
--- 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;
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/directory/src/scss/root/header.module.scss b/directory/src/scss/root/header.module.scss
index 8a20ef2..a9c3b0e 100644
--- 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;
-}
\ No newline at end of file
+}
+
+.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);
+  }
+}