edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

[UI] Minor navbar tweaks (#853)

Browse Source 
* [UI] Adjust the secondary link section
* Set the minimum searchbar width
* Re-fix the searchbox to stop breaking the mobile UI
* Add some shadows to make the toggled menu stand out
* Adjust the z-index to avoid layering issues
This commit is contained in:
Cinder 2025-01-24 05:30:49 -08:00 committed by GitHub
parent ccd3e7978f
commit 85b8aa2309
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/javascript/src/styles/common/navigation.scss
View File

@ -5,7 +5,7 @@ nav.navigation {
grid-template-rows: min-content auto min-content min-content;
width: 100%; // otherwise narrow when fixed
z-index: 10; // otherwise post labels layered above
z-index: 20; // otherwise post labels layered above
pointer-events: none; // allow clicking through offset
& > menu { pointer-events: auto; }
@ -113,7 +113,10 @@ nav.navigation {
height: 0.25em;
}
form input[type="text"] { width: 100%; }
form input[type="text"] {
width: 100%;
box-sizing: border-box;
}
}
}
@ -221,6 +224,9 @@ body.nav-toggled {
.nav-tools, .nav-help {
display: grid;
}
.nav-primary, .nav-tools, .nav-help {
box-shadow: -1px 0 5px -1px var(--color-background);
}
}
}
@ -233,7 +239,7 @@ nav.navigation, body.nav-toggled nav.navigation {
"logo secondary secondary secondary"
;
grid-template-columns: min-content min-content minmax(0, 1fr) min-content;
grid-template-rows: 1.75em 1.75em;
grid-template-rows: 1.75em 2em;
padding: 0 1em 0.5em;
box-sizing: border-box;
@ -272,7 +278,6 @@ nav.navigation, body.nav-toggled nav.navigation {
.nav-secondary {
display: flex;
flex-flow: row;
align-items: center;
padding: 0 0.25em;
font-size: 1.05em;
@ -282,7 +287,11 @@ nav.navigation, body.nav-toggled nav.navigation {
overflow: hidden;
li {
display: flex;
a {
align-content: center;
border-bottom: 0;
padding: 0 0.75em;
white-space: nowrap;
@ -291,8 +300,17 @@ nav.navigation, body.nav-toggled nav.navigation {
&.divider {
display: flex;
align-items: center;
height: 100%;
&::after { content: "|"; }
}
form {
display: flex;
align-items: center;
input[type="text"] { min-width: 10em; }
}
}
}
@ -340,6 +358,8 @@ nav.navigation, body.nav-toggled nav.navigation {
i { display: none; }
}
}
.nav-primary, .nav-tools, .nav-help { box-shadow: unset; }
}
}

4
app/javascript/src/styles/specific/guest_warning.scss
View File

@ -4,11 +4,11 @@
top: 0;
height: 100vh;
width: 100vw;
z-index: 10;
z-index: 500;
background-color: themed("color-background");
.guest-warning-dialog {
z-index: 100;
z-index: 500;
position: relative;
top: 20vh;
margin-left: auto;