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: style and animation improvements

Browse Source 
(cherry picked from commit 69deabde36f96a96bc3c69775fa5a9b4eead0f01)
This commit is contained in:
saicaca
2023-10-16 22:45:30 +08:00
parent eb7c408b6a
commit dd9adb2ed6
11 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ import Button from "./Button.astro";
<!-- There can't be a filter on parent element, or it will break `fixed` -->
<div class="back-to-top-wrapper hidden lg:block" transition:persist>
<div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
<div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition active:scale-90" onclick="topFunction()">
<Button card height="60px" width="60px">
<Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
</Button>

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

@@ -55,7 +55,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
<div class:list={[className, "flex flex-row gap-3 justify-center"]}>
<a href={page.url.prev}>
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.prev != undefined}]} iconSize={28}
disabled = {page.url.prev == undefined}
></Button>
</a>
@@ -70,14 +70,14 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
{p}
</div>
return <a href={commonUrl + p}>
<Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg" height="44px" width="44px">
<Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="44px" width="44px">
{p}
</Button>
</a>
})}
</div>
<a href={page.url.next}>
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
disabled = {page.url.next == undefined}
></Button>
</a>