peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): JS-less dropdowns in navbar (#10025)

Browse source 
Replaced dropdowns in the navbar with JS-less ones from https://codeberg.org/forgejo/forgejo/pulls/7906.

Also made some changes to the dropdown component:
* fixed variable name
* painted backgrounds (hover, focus) are now consistently applied to the actual interactive items (`<a>`, `<button>`), not to `<li>`. This is consistent with how backgrounds are conditionally applied to pre-selected (`.active`) items and is better, as it allows to place additional things to `<li>`...
* ...`<hr>` can now be placed in some `<li>` instead of requiring splitting into multiple `<ul>`. This is simpler in code and I am guessing this should be better for a11y as screen readers can cast one continuous list instead of multiple ones. But have no hard proof that this is actually better. My main motivation was to avoid ugly mistake-prone tmpl logic where unconditional `<ul>` was getting closed and reopened inside of a condition.

I should note that on mobile all items, including these dropdowns, are hidden in another dropdown, and it stays JS-dependand for now. So this PR only makes this part of the UI JS-less for desktop.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10025
Reviewed-by: Robert Wolff <mahlzahn@posteo.de>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-11-16 14:56:42 +01:00 • committed by Gusted
parent 67df538958
commit f0b4e3b943
9 changed files with 348 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web_src/css/modules/dropdown.css
View file

@ -15,13 +15,13 @@
:root details.dropdown {
--dropdown-box-shadow: 0 6px 18px var(--color-shadow);
--dropdown-item-min-height: 34px;
--switch-padding-inline: 0.75rem;
--dropdown-padding-inline: 0.75rem;
}
@media (pointer: coarse) {
:root details.dropdown {
--dropdown-item-min-height: 40px;
--switch-padding-inline: 1rem;
--dropdown-padding-inline: 1rem;
}
}
@ -66,12 +66,12 @@ details.dropdown > summary {
}
details.dropdown > summary:hover,
details.dropdown > .content > ul > li:hover {
details.dropdown > .content > ul > li > :is(a, button):hover {
background: var(--color-hover);
}
details.dropdown[open] > summary,
details.dropdown > .content > ul > li:focus-within {
details.dropdown > .content > ul > li:focus-within > :is(a, button) {
background: var(--color-active);
}
@ -86,7 +86,7 @@ details.dropdown > .content {
margin-top: 0.5rem;
/* ToDo: upstream to base.css, remove from normalize.css */
> hr {
hr {
height: 1px;
margin-block: 0.25rem;
background-color: var(--color-secondary);
@ -112,17 +112,24 @@ details.dropdown > .content > ul {
/* General styling of list items */
details.dropdown > .content > ul > li {
width: 100%;
background: none;
> :is(a, button) {
padding-block: 0;
padding-inline: var(--switch-padding-inline);
min-height: var(--dropdown-item-min-height);
padding-block: 0;
width: 100%;
padding-inline: var(--dropdown-padding-inline);
display: flex;
gap: 0.75rem;
align-items: center;
color: var(--color-text);
/* Interactable items should be transparent by default. <button> can also have a default background set by the browser */
background: none;
/* Same rounding should apply to both <li> and it's items with paintable backgrounds */
border-radius: inherit;
/* Suppress underline - hover is indicated by background color */
text-decoration: none;
@ -132,11 +139,22 @@ details.dropdown > .content > ul > li {
font-weight: var(--font-weight-medium);
}
}
}
/* Suppress default styling of <button> */
> button {
background: none;
}
/* Special styling for "headers" */
/* A few dropdowns contain such headers, however, they are not semantically considered as headers */
details.dropdown > .content > .header {
display: flex;
padding-block: 0.5rem;
padding-inline: var(--dropdown-padding-inline);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
font-size: 0.8rem;
}
/* Decrease bottom padding if an <hr> follows, which adds it's own vertical padding */
details.dropdown > .content > .header:has(+ hr) {
padding-bottom: 0.25rem;
}
/* dir-auto option - switch the direction at a width point where most of layout changes occur */
@ -144,7 +162,7 @@ details.dropdown > .content > ul > li {
details.dropdown.dir-auto > .content {
inset-inline: 0 auto;
direction: rtl;
> ul > li {
> :is(span, ul) {
direction: ltr;
}
}
@ -154,7 +172,7 @@ details.dropdown > .content > ul > li {
details.dropdown.dir-rtl > .content {
inset-inline: 0 auto;
direction: rtl;
> ul > li {
> :is(span, ul) {
direction: ltr;
}
}

24
web_src/css/modules/navbar.css
View file

@ -42,7 +42,8 @@
}
#navbar a.item:hover, #navbar a.item:focus,
#navbar div.ui.dropdown:hover,
#navbar details.dropdown > summary:is(:hover, :focus),
#navbar details.dropdown[open] > summary,
#navbar button.item:hover, #navbar button.item:focus {
background: var(--color-nav-hover-bg);
}
@ -95,6 +96,21 @@
width: 100%;
margin: 0;
}
#navbar details.dropdown {
display: none;
}
#navbar.navbar-menu-open details.dropdown {
display: block;
width: 100%;
> summary {
width: 100%;
justify-content: start;
}
> .content {
width: 100%;
}
}
#navbar.navbar-menu-open .navbar-left #navbar-logo {
justify-content: flex-start;
width: auto;
@ -109,6 +125,12 @@
}
}
#navbar details.dropdown summary {
padding-inline-start: 0.75rem;
/* The min height is dictated by the largest dropdown, which is the one that has an avatar in the opener */
min-height: 38px;
}
#navbar a.item .notification_count {
color: var(--color-nav-bg);
padding: 0 3.75px;