Updated pagination design. Improved tag category bar scroll behavior.
This commit is contained in:
parent
2ad40de889
commit
4a4898b73b
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 });
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue