Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: much better mobile view design (#11)

Browse Source
This commit is contained in:
saica.go
2024-01-22 02:06:24 +08:00
committed by GitHub
parent 6ba4db0ef8
commit 025953bca3
15 changed files with 50 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>