Fixes: https://github.com/go-gitea/gitea/issues/25444
Followup for some regressions from
https://github.com/go-gitea/gitea/pull/25343. Before and after:
<img width="219" alt="Screenshot 2023-06-21 at 00 25 20"
src="https://github.com/go-gitea/gitea/assets/115237/
08fe8e01-0a16-4cdf-ad4d-
0a9048408e9e">
<img width="220" alt="Screenshot 2023-06-21 at 00 25 32"
src="https://github.com/go-gitea/gitea/assets/115237/
be25ae69-6ed0-4af5-8eeb-
d7b210e7c124">
Fixes mobile button background and margins:
<img width="836" alt="Screenshot 2023-06-21 at 00 39 58"
src="https://github.com/go-gitea/gitea/assets/115237/
d76ac1e9-747f-477c-9a42-
b73e129b72ee">
</a>
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
- <div class="ui secondary menu item navbar-mobile-right gt-gap-2">
+ <div class="ui secondary menu item navbar-mobile-right">
{{if .IsSigned}}
- <a class="item mobile-right-item gt-mr-2 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+ <a id="mobile-notifications-icon" class="item gt-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<div class="gt-relative">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div>
</a>
{{end}}
- <button class="item mobile-right-item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
+ <button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
</div>
.gt-self-start { align-self: flex-start !important; }
.gt-self-end { align-self: flex-end !important; }
.gt-no-underline { text-decoration-line: none !important; }
+.gt-w-auto { width: auto !important; }
.gt-overflow-x-auto { overflow-x: auto !important; }
.gt-overflow-x-scroll { overflow-x: scroll !important; }
justify-content: center;
}
+#navbar .dropdown .item {
+ justify-content: stretch;
+}
+
#navbar a.item:hover,
#navbar button.item:hover {
background: var(--color-nav-hover-bg);
#navbar.navbar-menu-open .item {
display: flex;
width: 100%;
+ margin: 0;
}
#navbar.navbar-menu-open .navbar-left #navbar-logo {
justify-content: flex-start;
- width: 50%;
- min-height: 48px;
+ width: auto;
}
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
justify-content: flex-end;
width: 50%;
min-height: 48px;
}
- #navbar.navbar-menu-open .mobile-right-item {
- width: auto !important;
+ #navbar #mobile-notifications-icon {
+ margin-right: 6px !important;
}
}