mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-02-13 20:09:48 +02:00
f0b4e3b943
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>
171 lines
3.6 KiB
CSS
171 lines
3.6 KiB
CSS
#navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--color-nav-bg);
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
margin: 0 !important;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#navbar,
|
|
#navbar .navbar-left,
|
|
#navbar .navbar-right {
|
|
min-height: 49px; /* +1px border-bottom */
|
|
}
|
|
|
|
#navbar .navbar-left,
|
|
#navbar .navbar-right {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#navbar-logo {
|
|
margin: 0;
|
|
}
|
|
|
|
#navbar .item {
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
display: flex;
|
|
}
|
|
|
|
#navbar > .menu > .item {
|
|
color: var(--color-nav-text);
|
|
}
|
|
|
|
#navbar .dropdown .item {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
#navbar a.item:hover, #navbar a.item:focus,
|
|
#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);
|
|
}
|
|
|
|
#navbar .secondary.menu > .item > .svg,
|
|
#navbar .right.menu > .item > .svg {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
#navbar {
|
|
align-items: stretch;
|
|
}
|
|
/* hide all items */
|
|
#navbar .item {
|
|
display: none;
|
|
}
|
|
#navbar #navbar-logo {
|
|
display: flex;
|
|
}
|
|
/* show the first navbar item (logo and its mobile right items) */
|
|
#navbar .navbar-left {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#navbar .navbar-mobile-right {
|
|
display: flex;
|
|
margin-left: auto !important;
|
|
width: auto !important;
|
|
}
|
|
#navbar .navbar-mobile-right > .item {
|
|
display: flex;
|
|
width: auto !important;
|
|
}
|
|
/* show items if the navbar is open */
|
|
#navbar.navbar-menu-open {
|
|
padding-bottom: 8px;
|
|
}
|
|
#navbar.navbar-menu-open,
|
|
#navbar.navbar-menu-open .navbar-right {
|
|
flex-direction: column;
|
|
}
|
|
#navbar.navbar-menu-open .navbar-left {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
#navbar.navbar-menu-open .item {
|
|
display: flex;
|
|
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;
|
|
}
|
|
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
|
|
justify-content: flex-end;
|
|
width: 50%;
|
|
min-height: 48px;
|
|
}
|
|
#navbar #mobile-notifications-icon {
|
|
margin-right: 6px !important;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
#navbar a.item:hover .notification_count,
|
|
#navbar a.item:hover .header-stopwatch-dot {
|
|
border-color: var(--color-nav-hover-bg);
|
|
}
|
|
|
|
#navbar a.item .notification_count,
|
|
#navbar a.item .header-stopwatch-dot {
|
|
background: var(--color-primary);
|
|
border: 2px solid var(--color-nav-bg);
|
|
position: absolute;
|
|
left: 6px;
|
|
top: -9px;
|
|
min-width: 17px;
|
|
height: 17px;
|
|
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1; /* prevent menu button background from overlaying icon */
|
|
}
|
|
|
|
.secondary-nav {
|
|
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
|
}
|
|
|
|
.issue-navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|