AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

preference sidebar incorrect render fix + badge center alignment (#3783)

Browse source
This commit is contained in:
Christopher 2025-06-02 05:01:40 -06:00 • committed by GitHub
parent 13dd2d7158
commit 0db4ca6faa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/sidenav/preference-nav/preference-nav.component.html
View file

@ -9,7 +9,7 @@
@for(section of sections; track section.title + section.children.length; let idx = $index;) { @for(section of sections; track section.title + section.children.length; let idx = $index;) {
@if (hasAnyChildren(user, section)) { @if (hasAnyChildren(user, section)) {
<h5 class="side-nav-header mb-2 ms-3" [ngClass]="{'mt-4': idx > 0}">{{t(section.title)}}</h5> <h5 class="side-nav-header mb-2" [ngClass]="{'mt-4': idx > 0}">{{t(section.title)}}</h5>
@for(item of section.children; track item.fragment) { @for(item of section.children; track item.fragment) {
@if (accountService.hasAnyRole(user, item.roles, item.restrictRoles)) { @if (accountService.hasAnyRole(user, item.roles, item.restrictRoles)) {
<app-side-nav-item [id]="'nav-item-' + item.fragment" [noIcon]="true" link="/settings" [fragment]="item.fragment" [title]="item.fragment | settingFragment" [badgeCount]="item.badgeCount$ | async"></app-side-nav-item> <app-side-nav-item [id]="'nav-item-' + item.fragment" [noIcon]="true" link="/settings" [fragment]="item.fragment" [title]="item.fragment | settingFragment" [badgeCount]="item.badgeCount$ | async"></app-side-nav-item>

32
UI/Web/src/theme/components/_sidenav.scss
View file

@ -28,7 +28,7 @@
} }
//START closed state of the sidebar //START closed state of the sidebar
&.closed { &.closed {
width: 2.825rem; width: 3.125rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
background-color: var(--side-nav-closed-bg-color); background-color: var(--side-nav-closed-bg-color);
@ -36,6 +36,11 @@
height: calc((var(--vh) * 100) - 6.5rem); height: calc((var(--vh) * 100) - 6.5rem);
border-radius: unset; border-radius: unset;
// For Firefox
@supports (-moz-appearance: none) {
width: 2.5rem;
}
.side-nav { .side-nav {
.side-nav-item { .side-nav-item {
color: var(--side-nav-item-closed-color); color: var(--side-nav-item-closed-color);
@ -46,6 +51,10 @@
} }
} }
.phone-hidden:first-of-type {
margin-left: unset;
}
.active-highlight { .active-highlight {
opacity: 0; opacity: 0;
} }
@ -83,10 +92,10 @@
display: flex; display: flex;
&:first-of-type { &:first-of-type {
text-align: center;
width: 2.5rem; width: 2.5rem;
min-width: 2.5rem; min-width: 2.5rem;
margin-left: 0.3rem; margin-left: 0.3rem;
justify-content: center;
} }
&:last-child { &:last-child {
@ -95,9 +104,7 @@
} }
div { div {
align-items: center;
height: 100%; height: 100%;
justify-content: inherit;
padding: 0 0.625rem; padding: 0 0.625rem;
i { i {
@ -193,10 +200,12 @@
.side-nav { .side-nav {
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 0.625rem; padding-bottom: 0.625rem;
padding-left: 1.125rem;
.side-nav-header { .side-nav-header {
color: #ffffff; color: #ffffff;
font-size: 1rem; font-size: 1rem;
margin-left: unset;
&:first-of-type { &:first-of-type {
margin-top: 0.7rem; margin-top: 0.7rem;
@ -207,7 +216,6 @@
font-size: 1rem; font-size: 1rem;
min-height: 1.875rem; min-height: 1.875rem;
justify-content: unset; justify-content: unset;
margin-left: 1.125rem;
&.active { &.active {
.side-nav-text { .side-nav-text {
@ -220,6 +228,14 @@
margin-left: 0.75rem; margin-left: 0.75rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #999999; color: #999999;
div {
display: flex;
.badge {
align-self: center;
}
}
} }
.card-actions { .card-actions {
@ -278,9 +294,9 @@
} }
} }
} }
//START sidebar closed //START sidebar bottom closed
&.closed { &.closed {
width: 3.4375rem; width: 2.5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: unset; background-color: unset;
@ -295,7 +311,7 @@
} }
} }
} }
//END sidebar closed //END sidebar bottom closed
} }
//END kavita+ subscription bottom heart button //END kavita+ subscription bottom heart button