From 025953bca3979196b13161e076a1375be3f10231 Mon Sep 17 00:00:00 2001
From: "saica.go" <zephyird@gmail.com>
Date: Mon, 22 Jan 2024 02:06:24 +0800
Subject: [PATCH] feat: much better mobile view design (#11)

---
 src/components/ArchivePanel.astro          | 16 ++++----
 src/components/GlobalStyles.astro          |  5 ++-
 src/components/Navbar.astro                | 14 +++----
 src/components/PostMetadata.astro          |  7 ++--
 src/components/TitleCardNew.astro          | 10 ++---
 src/components/control/Button.astro        |  2 +-
 src/components/control/ButtonLink.astro    |  2 +-
 src/components/control/ButtonTag.astro     |  2 +-
 src/components/control/Pagination.astro    |  4 +-
 src/components/widget/DisplaySetting.astro | 44 ++++++----------------
 src/components/widget/NavMenuPanel.astro   | 15 --------
 src/layouts/Layout.astro                   |  2 +-
 src/layouts/MainGridLayout.astro           |  2 +-
 src/pages/page/[page].astro                |  5 +--
 src/pages/posts/[...slug].astro            |  2 +-
 15 files changed, 50 insertions(+), 82 deletions(-)

diff --git a/src/components/ArchivePanel.astro b/src/components/ArchivePanel.astro
index 4a1a783..5b040d1 100644
--- a/src/components/ArchivePanel.astro
+++ b/src/components/ArchivePanel.astro
@@ -1,5 +1,4 @@
 ---
-import {UNCATEGORIZED} from "@constants/constants";
 interface Props {
     keyword: string;
     tags: string[];
@@ -12,6 +11,7 @@ import {getSortedPosts} from "../utils/content-utils";
 import {getPostUrlBySlug} from "../utils/url-utils";
 import {i18n} from "../i18n/translation";
 import I18nKey from "../i18n/i18nKey";
+import {UNCATEGORIZED} from "@constants/constants";
 
 let posts = await getSortedPosts()
 
@@ -66,20 +66,20 @@ function formatTag(tag: string[]) {
         groups.map(group => (
                 <div>
                     <div class="flex flex-row w-full items-center h-[60px]">
-                        <div class="w-[10%] transition text-2xl font-bold text-right text-black/75 dark:text-white/75">{group.year}</div>
-                        <div class="w-[10%]">
+                        <div class="w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-black/75 dark:text-white/75">{group.year}</div>
+                        <div class="w-[15%] md:w-[10%]">
                             <div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>
                         </div>
-                        <div class="w-[80%] transition text-left text-black/50 dark:text-white/50">{group.posts.length} {i18n(I18nKey.postsCount)}</div>
+                        <div class="w-[70%] md:w-[80%] transition text-left text-black/50 dark:text-white/50">{group.posts.length} {i18n(I18nKey.postsCount)}</div>
                     </div>
                     {group.posts.map(post => (
                             <a href={getPostUrlBySlug(post.slug)} aria-label={post.data.title} class="group">
                                 <Button light height="40px" class="w-full rounded-lg hover:text-[initial]">
                                     <div class="flex flex-row justify-start items-center h-full">
                                         <!-- date -->
-                                        <div class="w-[10%] transition text-sm text-right text-black/50 dark:text-white/50">{formatDate(post.data.published)}</div>
+                                        <div class="w-[15%] md:w-[10%] transition text-sm text-right text-black/50 dark:text-white/50">{formatDate(post.data.published)}</div>
                                         <!-- dot and line -->
-                                        <div class="w-[10%] relative dash-line h-full flex items-center">
+                                        <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
                                             <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
                                             bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
                                             outline outline-4 z-50
@@ -90,14 +90,14 @@ function formatTag(tag: string[]) {
                                             ></div>
                                         </div>
                                         <!-- post title -->
-                                        <div class="max-w-[65%] w-[65%] text-left font-bold
+                                        <div class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
                                             group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
                                             text-black/80 dark:text-white/80 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
                                         >
                                                 {post.data.title}
                                         </div>
                                         <!-- tag list -->
-                                        <div class="w-[15%] text-left text-sm transition
+                                        <div class="hidden md:block md:w-[15%] text-left text-sm transition
                                         whitespace-nowrap overflow-ellipsis overflow-hidden
                                         text-black/30 dark:text-white/30"
                                         >{formatTag(post.data.tags)}</div>
diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 170fe9c..a009b25 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -190,7 +190,10 @@ color_set({
         @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px];
     }
     .float-panel {
-        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
+        @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
+    }
+    .float-panel.closed {
+        @apply top-[4.75rem] opacity-0 pointer-events-none
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 9803f88..9d56afd 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -43,10 +43,10 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
 ---
 <div transition:animate="none" class:list={[
     className,
-    "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[72px] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
+    "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
     <a href="/page/1"><Button height="52px" class="px-5 font-bold rounded-lg active:scale-95" light>
         <div class="flex flex-row text-[var(--primary)] items-center text-md">
-            <Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
+            <Icon name="material-symbols:home-outline-rounded" size={"1.75rem"} class="mb-1 mr-2" />
             {siteConfig.title}
         </div>
     </Button></a>
@@ -64,16 +64,16 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
     </div>
     <div class="flex">
         <div>
-            <Button name="Display Settings" class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
+            <Button name="Display Settings" class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={"1.25rem"} isIcon light></Button>
         </div>
         <div>
-            <Button name="Light/Dark Mode" class="rounded-lg flex items-center justify-center active:scale-90" id="scheme-switch" light height="44px" width="44px">
-                <Icon name="material-symbols:wb-sunny-outline-rounded" size={20} class="absolute opacity-[var(--display-light-icon)]"></Icon>
-                <Icon name="material-symbols:dark-mode-outline-rounded" size={20} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
+            <Button name="Light/Dark Mode" class="rounded-lg flex items-center justify-center active:scale-90" id="scheme-switch" light height="2.75rem" width="2.75rem">
+                <Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
+                <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
             </Button>
         </div>
         <div>
-            <Button name="Nav Menu" class="rounded-lg active:scale-90 block md:hidden" id="nav-menu-switch" iconName="material-symbols:menu-rounded" iconSize={20} isIcon light></Button>
+            <Button name="Nav Menu" class="rounded-lg active:scale-90 block md:hidden" id="nav-menu-switch" iconName="material-symbols:menu-rounded" iconSize={"1.25rem"} isIcon light></Button>
         </div>
 
     </div>
diff --git a/src/components/PostMetadata.astro b/src/components/PostMetadata.astro
index 7b5919d..7303516 100644
--- a/src/components/PostMetadata.astro
+++ b/src/components/PostMetadata.astro
@@ -9,8 +9,9 @@ interface Props {
     published: Date;
     tags: string[];
     category: string;
+    hideTagsForMobile: boolean;
 }
-const {published, tags, category} = Astro.props;
+const {published, tags, category, hideTagsForMobile} = Astro.props;
 const className = Astro.props.class;
 ---
 
@@ -24,7 +25,7 @@ const className = Astro.props.class;
         <span class="text-black/50 dark:text-white/50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
     </div>
 
-    <!-- categoriy -->
+    <!-- categories -->
     <div class="flex items-center">
         <div class="meta-icon"
         >
@@ -40,7 +41,7 @@ const className = Astro.props.class;
     </div>
 
     <!-- tags -->
-    <div class="flex items-center">
+    <div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>
         <div class="meta-icon"
         >
             <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
diff --git a/src/components/TitleCardNew.astro b/src/components/TitleCardNew.astro
index 4f2b3d7..95b3aa6 100644
--- a/src/components/TitleCardNew.astro
+++ b/src/components/TitleCardNew.astro
@@ -33,20 +33,20 @@ const { remarkPluginFrontmatter } = await entry.render();
 
 ---
 <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
-    <div class:list={["pl-9 pr-9 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
+    <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
         <a href={url}
            class="transition w-full block font-bold mb-3 text-3xl
         text-black/90 dark:text-white/90
         hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
         active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
-        before:absolute before:top-[32px] md:before:top-[35px] before:left-[18px]
+        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
         ">
-            {title}
+            {title}<Icon class="inline text-[var(--primary)] md:hidden -translate-y-[0.15rem]" name="material-symbols:chevron-right-rounded" size={28} ></Icon>
         </a>
 
         <!-- metadata -->
-        <PostMetadata published={published} tags={tags} category={category} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
+        <PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
 
         <div class="transition text-black/75 dark:text-white/75 mb-3.5">
             { description }
@@ -85,8 +85,8 @@ const { remarkPluginFrontmatter } = await entry.render();
             </Button>
         </a>
     }
-
 </div>
+<div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>
 
 <style lang="stylus" define:vars={{coverWidth}}>
 :root
diff --git a/src/components/control/Button.astro b/src/components/control/Button.astro
index 015bd73..75cb414 100644
--- a/src/components/control/Button.astro
+++ b/src/components/control/Button.astro
@@ -20,7 +20,7 @@ const {
     isIcon = false,
     iconName,
     width,
-    height = '44px',
+    height = '2.75rem',
     regular,
     light,
     iconSize = 24,
diff --git a/src/components/control/ButtonLink.astro b/src/components/control/ButtonLink.astro
index 4990f91..b58d920 100644
--- a/src/components/control/ButtonLink.astro
+++ b/src/components/control/ButtonLink.astro
@@ -31,7 +31,7 @@ const { badge, url, name } = Astro.props
                 <slot></slot>
             </div>
             { badge !== undefined && badge !== null && badge !== '' &&
-                <div class="transition h-[28px] ml-4 min-w-[32px] rounded-lg text-sm font-bold
+                <div class="transition h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
                     text-[var(--btn-content)] dark:text-[var(--deep-text)]
                     bg-[oklch(0.95_0.025_var(--hue))] dark:bg-[var(--primary)]
                     flex items-center justify-center">
diff --git a/src/components/control/ButtonTag.astro b/src/components/control/ButtonTag.astro
index 1f87fc8..14cbc55 100644
--- a/src/components/control/ButtonTag.astro
+++ b/src/components/control/ButtonTag.astro
@@ -9,7 +9,7 @@ interface Props {
 const { size, dot, href, label }: Props = Astro.props;
 ---
 <a href={href} aria-label={label}>
-    <Button regular height="32px" class="text-[15px] px-3 flex flex-row items-center rounded-lg">
+    <Button regular height="2rem" class="text-sm px-3 flex flex-row items-center rounded-lg">
         {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
         <slot></slot>
     </Button>
diff --git a/src/components/control/Pagination.astro b/src/components/control/Pagination.astro
index 415b4d4..c9bbc6d 100644
--- a/src/components/control/Pagination.astro
+++ b/src/components/control/Pagination.astro
@@ -64,13 +64,13 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
             if (p == HIDDEN)
                 return <Icon name="material-symbols:more-horiz" class="mx-1"/>;
             if (p == page.currentPage)
-                return <div class="h-[44px] w-[44px] rounded-lg bg-[var(--primary)] flex items-center justify-center
+                return <div class="h-11 w-11 rounded-lg bg-[var(--primary)] flex items-center justify-center
                     font-bold text-white dark:text-black/70"
                 >
                     {p}
                 </div>
             return <a href={commonUrl + p} aria-label=`Page ${p}`>
-                <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="44px" width="44px">
+                <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="2.75rem" width="2.75rem">
                     {p}
                 </Button>
             </a>
diff --git a/src/components/widget/DisplaySetting.astro b/src/components/widget/DisplaySetting.astro
index 057a000..812285f 100644
--- a/src/components/widget/DisplaySetting.astro
+++ b/src/components/widget/DisplaySetting.astro
@@ -6,11 +6,11 @@ import {siteConfig} from "../../config";
 const enableBanner = siteConfig.banner.enable;
 
 ---
-<div id="display-setting" class:list={["float-panel closed absolute transition-all w-[320px] fixed right-4 px-4 py-4"]}>
+<div id="display-setting" class:list={["float-panel closed absolute transition-all w-80 fixed right-4 px-4 py-4"]}>
     <div class="flex flex-row gap-2 mb-3 items-center justify-between">
         <div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
             before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
-            before:absolute before:left-[-12px] before:top-[5.5px]"
+            before:absolute before:-left-3 before:top-[0.33rem]"
         >
             {i18n(I18nKey.primaryColor)}
         </div>
@@ -29,16 +29,16 @@ const enableBanner = siteConfig.banner.enable;
 #display-setting
     input[type="range"]
         -webkit-appearance: none;
-        height: 24px;
+        height: 1.5rem;
         background-image: var(--color-selection-bar)
         transition: background-image 0.15s ease-in-out
 
     /* Input Thumb */
     ::-webkit-slider-thumb
         -webkit-appearance: none;
-        height: 16px;
-        width: 8px;
-        border-radius: 2px;
+        height: 1rem;
+        width: 0.5rem;
+        border-radius: 0.125rem;
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
         &:hover
@@ -48,9 +48,9 @@ const enableBanner = siteConfig.banner.enable;
 
     ::-moz-range-thumb
         -webkit-appearance: none;
-        height: 16px;
-        width: 8px;
-        border-radius: 2px;
+        height: 1rem;
+        width: 0.5rem;
+        border-radius: 0.125rem;
         border-width: 0
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
@@ -61,33 +61,13 @@ const enableBanner = siteConfig.banner.enable;
 
     &::-ms-thumb
         -webkit-appearance: none;
-        height: 16px;
-        width: 8px;
-        border-radius: 2px;
+        height: 1rem;
+        width: 0.5rem;
+        border-radius: 0.125rem;
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
         &:hover
           background: rgba(255, 255, 255, 0.8);
         &:active
           background: rgba(255, 255, 255, 0.6);
-
-
-.banner-closed
-  #display-setting
-    border-width: 3px
 </style>
-
-<style>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-    #display-setting {
-        @apply top-[84px]
-    }
-    #display-setting.closed {
-        @apply top-[76px] opacity-0 pointer-events-none
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/widget/NavMenuPanel.astro b/src/components/widget/NavMenuPanel.astro
index 590d24e..7506a4e 100644
--- a/src/components/widget/NavMenuPanel.astro
+++ b/src/components/widget/NavMenuPanel.astro
@@ -33,18 +33,3 @@ const enableBanner = siteConfig.banner.enable;
         </a>
     ))}
 </div>
-
-<style>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-    #nav-menu-panel {
-        @apply top-[84px]
-    }
-    #nav-menu-panel.closed {
-        @apply top-[76px] opacity-0 pointer-events-none
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 91b7e09..dc1d6c3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -64,7 +64,7 @@ if (title) {
 ---
 
 <!DOCTYPE html>
-<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition">
+<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
 	<head>
 		<ViewTransitions />
 
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 87aef91..2d4b68b 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -23,7 +23,7 @@ const enableBanner = siteConfig.banner.enable;
 
 <Layout title={title} banner={banner}>
 <div class=`max-w-[var(--page-width)] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] 
-    mx-auto gap-4 relative px-3 md:px-4 lg:px-0`
+    mx-auto gap-4 relative px-0 md:px-4`
      transition:animate="none"
 >
     <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
diff --git a/src/pages/page/[page].astro b/src/pages/page/[page].astro
index c9ceb9a..c269629 100644
--- a/src/pages/page/[page].astro
+++ b/src/pages/page/[page].astro
@@ -15,7 +15,7 @@ const {page} = Astro.props;
 ---
 
 <MainGridLayout>
-    <div class="flex flex-col gap-4 mb-4">
+    <div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
         {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
             return (
                 <TitleCard
@@ -29,9 +29,8 @@ const {page} = Astro.props;
                     description={entry.data.description}
                     draft={entry.data.draft}
                 ></TitleCard>
-
             );
         })}
     </div>
     <Pagination class="mx-auto" page={page}></Pagination>
-</MainGridLayout>
+</MainGridLayout>
\ No newline at end of file
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index fd1b2c2..3d4eed1 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -30,7 +30,7 @@ const { remarkPluginFrontmatter } = await entry.render();
 ---
 <MainGridLayout banner={entry.data.image} title={entry.data.title}>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
-        <div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-4 relative w-full ",
+        <div class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
             {}
         ]}>
             <!-- word count and reading time -->