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 {
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>

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];
}
.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>

14
src/components/Navbar.astro
View File

@ -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>

7
src/components/PostMetadata.astro
View File

@ -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>

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={["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

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

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

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

@ -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">

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

2
src/layouts/Layout.astro
View File

@ -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 />

2
src/layouts/MainGridLayout.astro
View File

@ -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", {

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

@ -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>

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}>
<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 -->