amorfo77/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2026-08-25 20:23:18 +00:00
Code Issues Projects Releases Wiki Activity

Fix navbar button alignment + hover consistency

Browse Source
This commit is contained in:
shamoon
2026-08-24 08:47:27 -07:00
parent e3e4b26944
commit 5f70b6eee7
5 changed files with 24 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-ui/src/app/components/app-frame/app-frame.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
}
<pngx-toasts-dropdown></pngx-toasts-dropdown>
<li ngbDropdown class="nav-item dropdown">
<button class="btn border-0" id="userDropdown" ngbDropdownToggle aria-label="User menu" i18n-aria-label>
<button class="btn navbar-action border-0" id="userDropdown" ngbDropdownToggle aria-label="User menu" i18n-aria-label>
<i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
<span class="small ms-2 d-none d-sm-inline">
{{this.settingsService.displayName}}
src-ui/src/app/components/app-frame/app-frame.component.scss
+19 -14
View File
@@ -415,21 +415,21 @@ main {
align-items: center;
gap: .125rem;
padding-right: .5rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
padding: .45rem .55rem;
border-radius: .6rem;
transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
:host ::ng-deep .navbar-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
padding: .45rem .55rem;
border-radius: .6rem;
transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
&:hover,
&:focus-visible {
background-color: rgba(0, 0, 0, .14);
}
&:hover,
&:focus-visible {
background-color: rgba(0, 0, 0, .14);
}
}
@@ -492,8 +492,13 @@ main {
padding-right: .25rem;
}
#userDropdown {
:host ::ng-deep .navbar-action {
min-width: 2.25rem;
padding-right: .4rem;
padding-left: .4rem;
}
#userDropdown {
padding-right: .35rem;
padding-left: .45rem;
}
src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
+2 -2
View File
@@ -1,9 +1,9 @@
<li ngbDropdown class="nav-item mx-1 position-relative" (openChange)="onOpenChange($event)">
<li ngbDropdown class="nav-item position-relative" (openChange)="onOpenChange($event)">
@if (toasts().length) {
<span class="notification-count badge rounded-pill z-3 pe-none bg-secondary position-absolute">{{ toasts().length }}</span>
}
<button class="btn border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
<button class="btn navbar-action border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
<i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
</button>
<div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="notificationsDropdown">
src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss
-26
View File
@@ -21,37 +21,11 @@
line-height: 1;
}
.nav-item > .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
padding: .45rem .55rem;
border-radius: .6rem;
&:hover,
&:focus-visible {
background-color: rgba(0, 0, 0, .14);
}
}
.dropdown-item {
white-space: initial;
}
@media screen and (max-width: 400px) {
.nav-item {
margin-right: 0 !important;
margin-left: 0 !important;
}
.nav-item > .btn {
min-width: 2.25rem;
padding-right: .4rem;
padding-left: .4rem;
}
:host ::ng-deep .dropdown-menu-end {
right: -3rem;
}
src-ui/src/app/components/chat/chat/chat.component.html
+2 -2
View File
@@ -1,6 +1,6 @@
<li ngbDropdown class="nav-item me-n2" (openChange)="onOpenChange($event)">
<button class="btn border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
<li ngbDropdown class="nav-item" (openChange)="onOpenChange($event)">
<button class="btn navbar-action border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
<i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
</button>
<div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="chatDropdown">