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

fix: onload animation tweaks

Browse Source
This commit is contained in:
saicaca
2024-03-13 01:32:54 +08:00
parent 2ff9b8544e
commit df30781cdc
11 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/widget/Categories.astro
View File

@@ -15,12 +15,17 @@ const COLLAPSE_THRESHOLD = 5;
const isCollapsed = categories.length >= COLLAPSE_THRESHOLD;
interface Props {
categories: Category[];
class?: string;
style?: string;
}
const className = Astro.props.class
const style = Astro.props.style
---
<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
<WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}
class={className} style={style}
>
{categories.map((c) =>
<ButtonLink
url={getCategoryUrl(c.name)}

4
src/components/widget/SideBar.astro
View File

@@ -10,7 +10,7 @@ const className = Astro.props.class;
<Profile></Profile>
</div>
<div class="flex flex-col w-full gap-4 top-4 sticky top-4">
<Categories></Categories>
<Tag></Tag>
<Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
<Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
</div>
</div>

9
src/components/widget/Tags.astro
View File

@@ -12,8 +12,15 @@ const COLLAPSED_HEIGHT = "7.5rem";
const isCollapsed = tags.length >= 20;
interface Props {
class?: string;
style?: string;
}
const className = Astro.props.class
const style = Astro.props.style
---
<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
<div class="flex gap-2 flex-wrap">
{tags.map(t => (
<ButtonTag href={`/archive/tag/${t.name}`} label={`View all posts with the ${t.name} tag`}>

6
src/components/widget/WidgetLayout.astro
View File

@@ -7,6 +7,8 @@ interface Props {
name?: string;
isCollapsed?: boolean;
collapsedHeight?: string;
class?: string;
style?: string;
}
const props = Astro.props;
const {
@@ -14,10 +16,12 @@ const {
name,
isCollapsed,
collapsedHeight,
style,
} = Astro.props
const className = Astro.props.class
---
<widget-layout data-id={id} data-is-collapsed={isCollapsed} class="pb-4 card-base">
<widget-layout data-id={id} data-is-collapsed={isCollapsed} class={"pb-4 card-base " + className} style={style}>
<div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>