Adjust class for mobile has the problem of double small bells #20236

tyroneyeh · 2022-07-05T01:43:53Z

Sorry, I didn't notice that the item class has a display property, and I will see two small bells on the phone
for #20069 improve

Before:

After:

templates/base/head_navbar.tmpl

Co-authored-by: Gusted <williamzijl7@hotmail.com>

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf

this does indeed hide the "non-mobile" bell in the mobile view, however, the bell in my "non-mobile" toolbar got a little messed up as a result.

pic:

tyroneyeh · 2022-07-05T10:40:39Z

What is your browser?

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T10:49:28Z

What is your browser?

tried with Chromium-backed QuteBrowser and Firefox Aurora and Firefox Dev (both > v10x).

wxiaoguang · 2022-07-05T10:53:21Z

I can not reproduce it on try.gitea.io (this PR has been deployed there)

Is it related to your theme? Or do you have more clues?

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T11:08:44Z

Or do you have more clues?

not really, it's the same for all themes on my instance (including the default gitea theme).

pic:

I can not reproduce it on try.gitea.io (this PR has been deployed there)

no chance there are stale caches?

zeripath · 2022-07-05T11:17:50Z

@wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf double check that you have #20236 and not #20108

Please provide us with the sha of your head version and ensure that it is at least v1.18.0-dev-64-ga168609e8

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T11:28:56Z

@wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf double check that you have #20236 and not #20108

Please provide us with the sha of your head version and ensure that it is at least v1.18.0-dev-64-ga168609e8

I integrated both, the former only caused the double bell in mobile view, the latter (chronologically) causes the bell to be shifted upwards for me.
I am indeed building from latest (1.18.0+dev-64-ga168609e8).

zeripath · 2022-07-05T11:41:07Z

I suspect you've not quite integrated correctly.

Check your version of this line:

gitea/templates/base/head_navbar.tmpl

Line 117 in 8ee8230

    
           <a href="{{AppSubUrl}}/notifications" class="m-4 text black tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>

In #20108 this was:

gitea/templates/base/head_navbar.tmpl

Line 117 in c174bdc

    
           <a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>

And before that it was:

gitea/templates/base/head_navbar.tmpl

Line 103 in 2921d3c

    
           <a href="{{AppSubUrl}}/notifications" class="item tooltip" data-content='{{.locale.Tr "notifications"}}'>

it might be that it needs the item class or may not need the item class depending on fonts.

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T11:48:36Z

I suspect you've not quite integrated correctly.

Check your version of this line:

gitea/templates/base/head_navbar.tmpl

Line 117 in 8ee8230

<a href="{{AppSubUrl}}/notifications" class="m-4 text black tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>

In #20108 this was:

gitea/templates/base/head_navbar.tmpl

Line 117 in c174bdc

<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>

And before that it was:

gitea/templates/base/head_navbar.tmpl

Line 103 in 2921d3c

<a href="{{AppSubUrl}}/notifications" class="item tooltip" data-content='{{.locale.Tr "notifications"}}'>

it might be that it needs the item class or may not need the item class depending on fonts.

thanks for all the effort.

line 117 in my head_navbar.tmpl (including leading whitespace) is:
<a href="/notifications" class="m-4 text black tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>
that same tmpl is also deployed on my instance.

the previous version worked fine for me (except the double bells), the one with class="item tooltip not-mobile".
the issue for me seems to be the m-4 text black part of the latest change...

depending on fonts

I may try with item and I bet it will be fine again.

however, how could fonts make an svg shift its position? I thought the bell is just "paths", there is no text to render using any font, is there?

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T11:52:07Z

indeed, adding item before the m-4 part positions the bell "correctly" for me.

if it doesn't do any harm (and it's for non-mobile anyway), wouldn't it be more {fool,future}proof to just keep the item before m-4, resulting in class="item m-4 text black tooltip not-mobile"..?

zeripath · 2022-07-05T11:56:21Z

yeah I suspect we should be putting the item back in.

Looking at it again when changing the m-4 to item I see that the bell has been moved up and so I think that it should be changed back to item!

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T11:57:45Z

Looking at it again when changing the m-4 to item I see that the bell has been moved up

yay, so it's not just me? :D

why isn't it manifested on try, though? caches again?

zeripath · 2022-07-05T11:58:48Z

it's not as obvious on different fonts.

zeripath · 2022-07-05T12:01:21Z

m-4:

item:

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T12:03:12Z

it's not as obvious on different fonts.

I am using FiraCode in all browsers (rejecting remote fonts) and I even have a patch preprending FiraCode to the list of Gitea fonts (something.less) at build time (as that list is hardcoded).
the issue appears more pronounced with it than with other fonts, it would seem.

Looking at it again when changing the m-4 to item...

btw I am no expert in the web stuff used in Gitea, but in my experience, adding anything else apart from item to toolbar has proven tricky at least.

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T12:07:59Z

m-4:

item:

so is it with just item (as it was before) or with item prepended to the change as it is currently (as mentioned in #20236 (comment)), or even sth else?

i.e., which one is it:

a): class="item tooltip not-mobile"
b): class="item m-4 text black tooltip not-mobile"
c): class="item text black tooltip not-mobile"
d): sth else

EDIT: a) and b) both work for me (mentioned a couple of comments earlier), but I don't know which one is the preffered one..

zeripath · 2022-07-05T12:17:49Z

the change I was making was simply switching the m-4 for item

I'm not certain that "text black" will be needed if "item" is set.

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf · 2022-07-05T12:20:56Z

the change I was making was simply switching the m-4 for item

I'm not certain that "text black" will be needed if "item" is set.

so that is essentially a revert to where we've been before this change.

zeripath · 2022-07-05T12:55:45Z

ah crap the original problem is the display property on the item class.

zeripath · 2022-07-05T13:00:09Z

OK it looks like the .not-mobile class selector needs a !important

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 go-gitea#20069 Revert go-gitea#20236 Signed-off-by: Andrew Thornton <art27@cantab.net>

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>

…itea#20236, go-gitea#20251) Backport go-gitea#20108 Backport go-gitea#20236 Backport go-gitea#20251 Make notification bell more prominent on mobile Co-authored-by: Andrew Thornton <art27@cantab.net> Co-authored-by: Tyrone Yeh <siryeh@gmail.com> Signed-off-by: Andrew Thornton <art27@cantab.net>

* upstream/main: Modify milestone search keywords to be case insensitive (go-gitea#20266) Fix toolip on mobile notification bell (go-gitea#20270) Allow RSA 2047 bit keys (go-gitea#20272) Refix notification bell placement (go-gitea#20251) Bump mermaid from 9.1.1 to 9.1.2 (go-gitea#20256) EscapeFilter the group dn membership (go-gitea#20200) Only show Followers that current user can access (go-gitea#20220) Init popup for new code comment (go-gitea#20234) Bypass Firefox (iOS) bug (go-gitea#20244) Adjust max-widths for the repository file table (go-gitea#20243) Display full name (go-gitea#20171) Adjust class for mobile has the problem of double small bells (go-gitea#20236) Adjust template for go-gitea#20069 smallbell (go-gitea#20108) Add integration tests for the Gitea migration form (go-gitea#20121) Allow dev i18n to be more concurrent (go-gitea#20159) Allow enable LDAP source and disable user sync via CLI (go-gitea#20206)

…) (#20269) Backport #20108 Backport #20236 Backport #20251 Make notification bell more prominent on mobile Co-authored-by: Andrew Thornton <art27@cantab.net> Co-authored-by: Tyrone Yeh <siryeh@gmail.com> Signed-off-by: Andrew Thornton <art27@cantab.net>

…ea#20236) * Adjust class for mobile has the problem of double small bells * Update templates/base/head_navbar.tmpl Co-authored-by: Gusted <williamzijl7@hotmail.com> Co-authored-by: Gusted <williamzijl7@hotmail.com>

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 go-gitea#20069 Revert go-gitea#20236 Signed-off-by: Andrew Thornton <art27@cantab.net>

…ea#20236) * Adjust class for mobile has the problem of double small bells * Update templates/base/head_navbar.tmpl Co-authored-by: Gusted <williamzijl7@hotmail.com> Co-authored-by: Gusted <williamzijl7@hotmail.com>

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 go-gitea#20069 Revert go-gitea#20236 Signed-off-by: Andrew Thornton <art27@cantab.net>

Adjust class for mobile has the problem of double small bells

70078ad

Gusted added this to the 1.18.0 milestone Jul 5, 2022

Gusted reviewed Jul 5, 2022

View reviewed changes

templates/base/head_navbar.tmpl Outdated Show resolved Hide resolved

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 5, 2022

Update templates/base/head_navbar.tmpl

98d4b38

Co-authored-by: Gusted <williamzijl7@hotmail.com>

Gusted approved these changes Jul 5, 2022

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jul 5, 2022

lunny approved these changes Jul 5, 2022

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jul 5, 2022

lunny merged commit a168609 into go-gitea:main Jul 5, 2022

lunny added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Jul 5, 2022

tyroneyeh deleted the smallbell_mobile_issue branch July 5, 2022 10:26

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf reviewed Jul 5, 2022

View reviewed changes

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf mentioned this pull request Jul 5, 2022

fix for mobile view messed up non-mobile view #20245

Closed

zeripath mentioned this pull request Jul 5, 2022

Refix notification bell placement #20251

Merged

zeripath mentioned this pull request Jul 6, 2022

Make notification bell more prominent on mobile (#20108, #20236, #20251) #20269

Merged

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjust class for mobile has the problem of double small bells #20236

Adjust class for mobile has the problem of double small bells #20236

tyroneyeh commented Jul 5, 2022 •

edited

Loading

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf left a comment

tyroneyeh commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

wxiaoguang commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022 •

edited

Loading

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

zeripath commented Jul 5, 2022

Adjust class for mobile has the problem of double small bells #20236

Adjust class for mobile has the problem of double small bells #20236

Conversation

tyroneyeh commented Jul 5, 2022 • edited Loading

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf left a comment

Choose a reason for hiding this comment

tyroneyeh commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

wxiaoguang commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022 • edited Loading

zeripath commented Jul 5, 2022

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022

zeripath commented Jul 5, 2022

zeripath commented Jul 5, 2022

tyroneyeh commented Jul 5, 2022 •

edited

Loading

wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf commented Jul 5, 2022 •

edited

Loading