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

Side Nav UX Changes (#3345)

Browse source 
Co-authored-by: Christopher <39032787+MrRobotjs@users.noreply.github.com>
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-11-07 17:21:14 -06:00 • committed by GitHub
parent aa939edf6d
commit 3a0c796c08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 1193 additions and 664 deletions
Download patch file Download diff file Expand all files Collapse all files

205
UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss
View file

@ -1,91 +1,140 @@
.btn:focus, .btn:hover {
.btn:focus {
box-shadow: 0 0 0 0.1rem var(--navbar-btn-hover-outline-color);
}
.navbar {
background-color: var(--navbar-bg-color);
background-color: var(--navbar-bg-color);
.side-nav-toggle {
cursor: pointer;
margin-left: 13px;
font-size: 1.2rem;
i {
color: var(--navbar-fa-icon-color);
}
.navbar-nav {
.nav-item {
&.search {
width: 100%;
}
}
}
.side-nav-toggle {
cursor: pointer;
margin-left: 0.8125rem;
font-size: 1.2rem;
i {
color: var(--navbar-fa-icon-color);
opacity: 0.8;
}
&:hover {
i {
opacity: 1;
}
}
}
.nav-item:not(.search) {
display: unset;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
// On Really small screens, hide the server settings wheel and show it in nav
// TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
.xs-only {
display: none;
}
.not-xs-only {
display: inherit;
}
@media only screen and (max-width:300px) {
.xs-only {
display: inherit;
}
.not-xs-only {
display: none;
}
}
.nav-item.dropdown {
position: unset;
}
.navbar-brand {
font-family: var(--brand-font-family);
font-weight: bold;
margin: 0 2rem;
display: flex;
align-items: center;
&:hover {
text-decoration: none;
}
.logo-icon {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
height: 1.5rem;
width: 1.5rem;
margin-right: 0.5rem;
}
.logo {
vertical-align: text-top;
max-height: 1.75rem;
line-height: 2.0625rem;
margin-left: 0.3125rem;
}
.phone-hidden {
vertical-align: middle;
}
}
.focus-visible:focus {
visibility: visible;
color: var(--nav-header-text-color);
}
.ng-autocomplete {
margin-bottom: 0px;
}
.primary-text {
color: var(--nav-header-text-color);
border: none;
}
.search-result {
width: 1.5rem;
margin-top: 0.3125rem;
}
.scroll-to-top:hover {
animation: MoveUpDown 1s linear infinite;
}
.text-light {
color: var(--search-result-text-lite-color) !important;
}
/* small devices (phones, 650px and down) */
@media only screen and (max-width:650px) {
.navbar-nav {
width: 0;
.navbar-nav {
width: 0;
}
.navbar-brand {
margin: 0 1rem 0 1rem;
.logo-icon {
margin: unset;
}
}
// On Really small screens, hide the server settings wheel and show it in nav
// TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
.xs-only {
display: none;
}
.not-xs-only {
display: inherit;
}
@media only screen and (max-width:300px) {
.xs-only {
display: inherit;
}
.not-xs-only {
display: none;
}
}
.nav-item.dropdown {
position: unset;
}
.navbar-brand {
font-family: var(--brand-font-family);
font-weight: bold;
margin: 0 1rem;
&:hover {
text-decoration: none;
}
.logo {
max-height: 28px;
vertical-align: text-top;
}
.phone-hidden {
vertical-align: middle;
}
}
.focus-visible:focus {
visibility: visible;
color: var(--nav-header-text-color);
}
.ng-autocomplete {
margin-bottom: 0px;
}
.primary-text {
color: var(--nav-header-text-color);
border: none;
}
.search-result {
width: 24px;
margin-top: 5px;
}
.scroll-to-top:hover {
animation: MoveUpDown 1s linear infinite;
}
.text-light {
color: var(--search-result-text-lite-color) !important;
}
}