Updated pagination design. Improved tag category bar scroll behavior.

This commit is contained in:
DebaucheryLibrarian 2024-03-21 05:37:50 +01:00
parent 2ad40de889
commit 4a4898b73b
2 changed files with 14 additions and 3 deletions

View File

@ -219,6 +219,7 @@ function getPath(page) {
.pages { .pages {
display: flex; display: flex;
gap: 0 .25rem;
} }
.wrap { .wrap {
@ -227,6 +228,11 @@ function getPath(page) {
.before { .before {
flex-direction: row-reverse; flex-direction: row-reverse;
margin-right: .25rem;
}
.after {
margin-left: .25rem;
} }
.index { .index {
@ -240,6 +246,7 @@ function getPath(page) {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: .5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background: var(--background); background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30); box-shadow: 0 0 3px var(--shadow-weak-30);
@ -254,7 +261,8 @@ function getPath(page) {
} }
&.active { &.active {
color: var(--primary); background: var(--primary);
color: var(--text-light);
} }
&.disabled .icon { &.disabled .icon {
@ -283,7 +291,7 @@ function getPath(page) {
} }
.page { .page {
width: 2rem; width: 2.25rem;
height: 2.5rem; height: 2.5rem;
} }
} }

View File

@ -106,7 +106,10 @@ function calculateActiveCategory() {
const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`); const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);
activeLink.scrollIntoView(); activeLink.scrollIntoView({
behavior: 'smooth',
inline: 'center',
});
navigate(`#${activeCategory.value}`, null, { replace: true }); navigate(`#${activeCategory.value}`, null, { replace: true });
} }