Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: much better mobile view design (#11)

This commit is contained in:
saica.go 2024-01-22 02:06:24 +08:00 committed by GitHub
parent 6ba4db0ef8
commit 025953bca3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 50 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ArchivePanel.astro
View File

@ -1,5 +1,4 @@
--- ---
import {UNCATEGORIZED} from "@constants/constants";
interface Props { interface Props {
keyword: string; keyword: string;
tags: string[]; tags: string[];
@ -12,6 +11,7 @@ import {getSortedPosts} from "../utils/content-utils";
import {getPostUrlBySlug} from "../utils/url-utils"; import {getPostUrlBySlug} from "../utils/url-utils";
import {i18n} from "../i18n/translation"; import {i18n} from "../i18n/translation";
import I18nKey from "../i18n/i18nKey"; import I18nKey from "../i18n/i18nKey";
import {UNCATEGORIZED} from "@constants/constants";
let posts = await getSortedPosts() let posts = await getSortedPosts()
@ -66,20 +66,20 @@ function formatTag(tag: string[]) {
groups.map(group => ( groups.map(group => (
<div> <div>
<div class="flex flex-row w-full items-center h-[60px]"> <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-[15%] md: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%]">
<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 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>
<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> </div>
{group.posts.map(post => ( {group.posts.map(post => (
<a href={getPostUrlBySlug(post.slug)} aria-label={post.data.title} class="group"> <a href={getPostUrlBySlug(post.slug)} aria-label={post.data.title} class="group">
<Button light height="40px" class="w-full rounded-lg hover:text-[initial]"> <Button light height="40px" class="w-full rounded-lg hover:text-[initial]">
<div class="flex flex-row justify-start items-center h-full"> <div class="flex flex-row justify-start items-center h-full">
<!-- date --> <!-- 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 --> <!-- 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 <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)] bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
outline outline-4 z-50 outline outline-4 z-50
@ -90,14 +90,14 @@ function formatTag(tag: string[]) {
></div> ></div>
</div> </div>
<!-- post title --> <!-- 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)] 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" text-black/80 dark:text-white/80 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
> >
{post.data.title} {post.data.title}
</div> </div>
<!-- tag list --> <!-- 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 whitespace-nowrap overflow-ellipsis overflow-hidden
text-black/30 dark:text-white/30" text-black/30 dark:text-white/30"
>{formatTag(post.data.tags)}</div> >{formatTag(post.data.tags)}</div>

5
src/components/GlobalStyles.astro
View File

@ -190,7 +190,10 @@ color_set({
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px]; @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px];
} }
.float-panel { .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> </style>

14
src/components/Navbar.astro
View File

@ -43,10 +43,10 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
--- ---
<div transition:animate="none" class:list={[ <div transition:animate="none" class:list={[
className, 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> <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"> <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} {siteConfig.title}
</div> </div>
</Button></a> </Button></a>
@ -64,16 +64,16 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
</div> </div>
<div class="flex"> <div class="flex">
<div> <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>
<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"> <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={20} class="absolute opacity-[var(--display-light-icon)]"></Icon> <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={20} class="absolute opacity-[var(--display-dark-icon)]"></Icon> <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
</Button> </Button>
</div> </div>
<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>
</div> </div>

7
src/components/PostMetadata.astro
View File

@ -9,8 +9,9 @@ interface Props {
published: Date; published: Date;
tags: string[]; tags: string[];
category: string; category: string;
hideTagsForMobile: boolean;
} }
const {published, tags, category} = Astro.props; const {published, tags, category, hideTagsForMobile} = Astro.props;
const className = Astro.props.class; 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> <span class="text-black/50 dark:text-white/50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
</div> </div>
<!-- categoriy --> <!-- categories -->
<div class="flex items-center"> <div class="flex items-center">
<div class="meta-icon" <div class="meta-icon"
> >
@ -40,7 +41,7 @@ const className = Astro.props.class;
</div> </div>
<!-- tags --> <!-- tags -->
<div class="flex items-center"> <div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>
<div class="meta-icon" <div class="meta-icon"
> >
<Icon name="material-symbols:tag-rounded" class="text-xl"></Icon> <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>

10
src/components/TitleCardNew.astro
View File

@ -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={["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} <a href={url}
class="transition w-full block font-bold mb-3 text-3xl class="transition w-full block font-bold mb-3 text-3xl
text-black/90 dark:text-white/90 text-black/90 dark:text-white/90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
active:text-[var(--title-active)] dark:active:text-[var(--title-active)] 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: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> </a>
<!-- metadata --> <!-- 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"> <div class="transition text-black/75 dark:text-white/75 mb-3.5">
{ description } { description }
@ -85,8 +85,8 @@ const { remarkPluginFrontmatter } = await entry.render();
</Button> </Button>
</a> </a>
} }
</div> </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}}> <style lang="stylus" define:vars={{coverWidth}}>
:root :root

2
src/components/control/Button.astro
View File

@ -20,7 +20,7 @@ const {
isIcon = false, isIcon = false,
iconName, iconName,
width, width,
height = '44px', height = '2.75rem',
regular, regular,
light, light,
iconSize = 24, iconSize = 24,

2
src/components/control/ButtonLink.astro
View File

@ -31,7 +31,7 @@ const { badge, url, name } = Astro.props
<slot></slot> <slot></slot>
</div> </div>
{ badge !== undefined && badge !== null && badge !== '' && { 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)] text-[var(--btn-content)] dark:text-[var(--deep-text)]
bg-[oklch(0.95_0.025_var(--hue))] dark:bg-[var(--primary)] bg-[oklch(0.95_0.025_var(--hue))] dark:bg-[var(--primary)]
flex items-center justify-center"> flex items-center justify-center">

2
src/components/control/ButtonTag.astro
View File

@ -9,7 +9,7 @@ interface Props {
const { size, dot, href, label }: Props = Astro.props; const { size, dot, href, label }: Props = Astro.props;
--- ---
<a href={href} aria-label={label}> <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>} {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
<slot></slot> <slot></slot>
</Button> </Button>

4
src/components/control/Pagination.astro
View File

@ -64,13 +64,13 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
if (p == HIDDEN) if (p == HIDDEN)
return <Icon name="material-symbols:more-horiz" class="mx-1"/>; return <Icon name="material-symbols:more-horiz" class="mx-1"/>;
if (p == page.currentPage) 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" font-bold text-white dark:text-black/70"
> >
{p} {p}
</div> </div>
return <a href={commonUrl + p} aria-label=`Page ${p}`> 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} {p}
</Button> </Button>
</a> </a>

44
src/components/widget/DisplaySetting.astro
View File

@ -6,11 +6,11 @@ import {siteConfig} from "../../config";
const enableBanner = siteConfig.banner.enable; 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="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 <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: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)} {i18n(I18nKey.primaryColor)}
</div> </div>
@ -29,16 +29,16 @@ const enableBanner = siteConfig.banner.enable;
#display-setting #display-setting
input[type="range"] input[type="range"]
-webkit-appearance: none; -webkit-appearance: none;
height: 24px; height: 1.5rem;
background-image: var(--color-selection-bar) background-image: var(--color-selection-bar)
transition: background-image 0.15s ease-in-out transition: background-image 0.15s ease-in-out
/* Input Thumb */ /* Input Thumb */
::-webkit-slider-thumb ::-webkit-slider-thumb
-webkit-appearance: none; -webkit-appearance: none;
height: 16px; height: 1rem;
width: 8px; width: 0.5rem;
border-radius: 2px; border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
box-shadow: none; box-shadow: none;
&:hover &:hover
@ -48,9 +48,9 @@ const enableBanner = siteConfig.banner.enable;
::-moz-range-thumb ::-moz-range-thumb
-webkit-appearance: none; -webkit-appearance: none;
height: 16px; height: 1rem;
width: 8px; width: 0.5rem;
border-radius: 2px; border-radius: 0.125rem;
border-width: 0 border-width: 0
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
box-shadow: none; box-shadow: none;
@ -61,33 +61,13 @@ const enableBanner = siteConfig.banner.enable;
&::-ms-thumb &::-ms-thumb
-webkit-appearance: none; -webkit-appearance: none;
height: 16px; height: 1rem;
width: 8px; width: 0.5rem;
border-radius: 2px; border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
box-shadow: none; box-shadow: none;
&:hover &:hover
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
&:active &:active
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
.banner-closed
#display-setting
border-width: 3px
</style> </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>

15
src/components/widget/NavMenuPanel.astro
View File

@ -33,18 +33,3 @@ const enableBanner = siteConfig.banner.enable;
</a> </a>
))} ))}
</div> </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>

2
src/layouts/Layout.astro
View File

@ -64,7 +64,7 @@ if (title) {
--- ---
<!DOCTYPE html> <!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> <head>
<ViewTransitions /> <ViewTransitions />

2
src/layouts/MainGridLayout.astro
View File

@ -23,7 +23,7 @@ const enableBanner = siteConfig.banner.enable;
<Layout title={title} banner={banner}> <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] <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" transition:animate="none"
> >
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", { <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {

5
src/pages/page/[page].astro
View File

@ -15,7 +15,7 @@ const {page} = Astro.props;
--- ---
<MainGridLayout> <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; }) => { {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
return ( return (
<TitleCard <TitleCard
@ -29,9 +29,8 @@ const {page} = Astro.props;
description={entry.data.description} description={entry.data.description}
draft={entry.data.draft} draft={entry.data.draft}
></TitleCard> ></TitleCard>
); );
})} })}
</div> </div>
<Pagination class="mx-auto" page={page}></Pagination> <Pagination class="mx-auto" page={page}></Pagination>
</MainGridLayout> </MainGridLayout>

2
src/pages/posts/[...slug].astro
View File

@ -30,7 +30,7 @@ const { remarkPluginFrontmatter } = await entry.render();
--- ---
<MainGridLayout banner={entry.data.image} title={entry.data.title}> <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="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 --> <!-- word count and reading time -->