finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refix notification bell placement (#20251)

Browse source 
The use of `m-4 text black` for the notification bell results in this
icon being shifted upwards. Instead we should use the `item` class but
adjust `not-mobile` and `mobile-only` to make their `display: none`
settings `!important`.

(As an aside: This is probably one of the only times we should use
`!important` in our less files and the rest should be avoided or
removed.)

Ref #20069
Revert #20236

Signed-off-by: Andrew Thornton <art27@cantab.net>
This commit is contained in:
zeripath 2022-07-06 18:33:10 +01:00 committed by GitHub
parent acbbbbfaf6
commit 1e43a88578
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/base/head_navbar.tmpl
View file

@ -114,7 +114,7 @@
</div> </div>
</div> </div>
<a href="{{AppSubUrl}}/notifications" class="m-4 text black tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'> <a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>
<span class="text"> <span class="text">
<span class="fitted">{{svg "octicon-bell"}}</span> <span class="fitted">{{svg "octicon-bell"}}</span>
<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count"> <span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">

4
web_src/less/_base.less
View file

@ -1329,7 +1329,7 @@ footer {
@media @mediaMdAndUp { @media @mediaMdAndUp {
.mobile-only, .mobile-only,
.ui.button.mobile-only { .ui.button.mobile-only {
display: none; display: none !important;
} }
// has the same behaviour of sr-only, hiding the content for // has the same behaviour of sr-only, hiding the content for
@ -1341,7 +1341,7 @@ footer {
@media @mediaSm { @media @mediaSm {
.not-mobile { .not-mobile {
display: none; display: none !important;
} }
} }