Add `flex` or `inline-flex` to the direct parent element of the SVG icon in the navigation bar to make the overall alignment look better.
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11259
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: panc <pan0xc@foxmail.com>
Co-committed-by: panc <pan0xc@foxmail.com>
Replaces https://codeberg.org/forgejo/forgejo/pulls/11271
This rule was problematic and didn't quite make sense:
* the intention is to have a navbar that is 48px+1px border
* we apply `min-height:49px` to: `#navbar` with intention of making it 49px tall total, with border
* but we also apply it to `#navbar .navbar-left/right`
* elements `#navbar .navbar-left/right` become 49px tall
* their parent `#navbar` becomes 49px+1px border = 50px, overriding what was done in step 2
This height missmatch had an incompatibility with this definition for open menu inside of navbar on mobile, causing jitter when the menu is opened/closed, because it was expecting navbar body to be 48px, but due to the rule that was removed it was actually 49px.
```css
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
min-height: 48px;
}
```
The fix is to only apply `min-height` to `#navbar`'s children. At least `.navbar-left` is always expected to be present unconditionally on all pages. This does make the navbar 1px shorter. If we still want a 50px navbar but without the bug let me know and I'll adjust.
### Preview by @panc
From https://codeberg.org/forgejo/forgejo/pulls/11271, also applies to this PR.
| Before | After |
|----|----|
| <video src="/attachments/515fdfc1-cb97-46af-88ac-9bb0e216a996" title="Screencast From 2026-02-13 19-56-32" controls></video> | <video src="/attachments/133d1499-4660-402d-8082-f407b3644e5c" title="Screencast From 2026-02-13 19-57-29" controls></video> |
Reported-by: panc <panc@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11274
Reviewed-by: Robert Wolff <mahlzahn@posteo.de>
The navigation menu on mobile is divided into two sections, but there is no gap between them. I referred to the following code and set the gap to `gap: .35714286em`
```CSS
.ui.secondary.menu {
margin-left: 0;
margin-right: 0;
gap: .35714286em;
}
```
| Before | After |
|--------|-------|
|  |  |
| Before | After |
|--------|-------|
|  |  |
Another thing to note is that the dot of the stopwatch extends beyond the background.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11262
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: panc <pan0xc@foxmail.com>
Co-committed-by: panc <pan0xc@foxmail.com>
This variable isn't needed because all themes are setting it to `--color-text`, but the relevant UI elements are already inheriting it from `body`.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10898
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
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>
Create a new `issue-navbar` class specifically for this bar, previous
class used in many places and I thought I had them all removed, but not
this one.
Fixes: https://github.com/go-gitea/gitea/issues/30226
(cherry picked from commit 944c76e78423405a33450eb3d07cd2b772f4a81c)
Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.
If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:
- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
Conflict resolution: Trivial conflict & changed selector to reflect new
classes.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818)
1. Use general "mobile-only" and "not-mobile" CSS styles, remove some`@media (max-width: 767.98px)` tricks
2. Use `CountFmt` for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page)
(cherry picked from commit bfa160fc98a23923b6ce1cd4d99e8970d937d6ec)
Conflicts:
templates/explore/repo_list.tmpl
templates/repo/header.tmpl
web_src/css/repo/header.css
Resolved the template conflicts by porting the changes to Forgejo (in
case of `header.tmpl`, applying the changes in `header_fork.tmpl). In
case of the CSS change, opted to take Gitea's version and drop the
entire media query.
## Changes
- no more hardcoded `border-radius`es (apart from `0`)
- no more value inconsistencies
- no more guessing what pixel value you should use
- two new variables:
- `--border-radius-medium` (for elements where the normal border radius
does not suffice)
- `--border-radius-circle` (for displaying circles)
---------
Co-authored-by: silverwind <me@silverwind.io>
