teidesu/tei.su
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: moved shoutbox pagination to top

Browse source
This commit is contained in:
alina 🌸 2024-08-06 22:58:36 +03:00
parent b4fd6303f2
commit cafaf94e83
Signed by: teidesu
SSH key fingerprint: SHA256:uNeCpw6aTSU4aIObXLvHfLkDa82HWH9EiOj9AXOIRpI
2 changed files with 39 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/pages/PageMain/Shoutbox/Shoutbox.module.css
View file

@ -54,12 +54,16 @@
white-space: pre-wrap;
}
.formControls {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.pagination {
display: flex;
gap: 8px;
justify-content: flex-end;
color: var(--text-secondary);
margin-top: 8px;
}
.paginationLink {

65
src/components/pages/PageMain/Shoutbox/Shoutbox.tsx
View file

@ -146,43 +146,44 @@ function ShoutboxInner(props: {
<Icon glyph={GravityMegaphone} size={16} />
</Button>
</div>
<Checkbox
label="make it private"
name="private"
/>
<div class={css.formControls}>
<Checkbox
label="make it private"
name="private"
/>
<Show when={shouts.data && shouts.data.pageCount > 1}>
<div class={css.pagination}>
<Show when={page() > 0}>
<a
class={css.paginationLink}
rel="external"
href={page() === 1 ? '/' : `?shouts_page=${page() - 1}`}
onClick={onPageClick(false)}
data-astro-reload
>
&lt; prev
</a>
</Show>
<span>{page() + 1}</span>
<Show when={page() < shouts.data!.pageCount - 1}>
<a
class={css.paginationLink}
rel="external"
href={`?shouts_page=${page() + 1}`}
onClick={onPageClick(true)}
data-astro-reload
>
next &gt;
</a>
</Show>
</div>
</Show>
</div>
</form>
<div class={css.shouts}>
{shoutsRender()}
</div>
<Show when={shouts.data && shouts.data.pageCount > 1}>
<div class={css.pagination}>
<Show when={page() > 0}>
<a
class={css.paginationLink}
rel="external"
href={page() === 1 ? '/' : `?shouts_page=${page() - 1}`}
onClick={onPageClick(false)}
data-astro-reload
>
&lt; prev
</a>
</Show>
<span>{page() + 1}</span>
<Show when={page() < shouts.data!.pageCount - 1}>
<a
class={css.paginationLink}
rel="external"
href={`?shouts_page=${page() + 1}`}
onClick={onPageClick(true)}
data-astro-reload
>
next &gt;
</a>
</Show>
</div>
</Show>
</section>
)
}