Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

By default force vertical tabs on mobile #19486

Merged
merged 7 commits into from
Apr 26, 2022

Conversation

Gusted
Copy link
Contributor

@Gusted Gusted commented Apr 25, 2022

  • While experimenting with using vertical tabs instead of horizontal tabs on gitea for a better mobile experience, I made a recent PR(Use horizontal tabs for repo header on mobile #19468) in order to see if there was any objections to this new behavior for the repo headers(one of the most annoying horizontal tabs). This PR had no objections and even a user commenting that this change is brilliant.
  • This PR now improves upon the previous PR by making this the de-facto behavior for all menu's on mobile. The only exemption is the navbar which also uses the menu but caught some layout errors with the changes.

Before:

image
image

After:

image
image

- While experimenting with using vertical tabs instead of horizontal
tabs on gitea for a better mobile experience, I made a recent
PR(go-gitea#19468) in order to see if
there was any objections to this new behavior for the repo headers(one
of the most annoying horizontal tabs). This PR had no objections and
even a user commenting that this change is brilliant.
- This PR now improves upon the previous PR by making this the de-facto
behavior for all menu's on mobile. The only exemption is the navbar
which also uses the menu but caught some layout errors with the changes.
@Gusted Gusted added this to the 1.17.0 milestone Apr 25, 2022
@Gusted Gusted added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI topic/mobile labels Apr 25, 2022
@GiteaBot GiteaBot added the lgtm/need 1 This PR needs approval from one additional maintainer to be merged. label Apr 25, 2022
@codecov-commenter
Copy link

Codecov Report

❗ No coverage uploaded for pull request base (main@1ebb30e). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main   #19486   +/-   ##
=======================================
  Coverage        ?   47.30%           
=======================================
  Files           ?      950           
  Lines           ?   132272           
  Branches        ?        0           
=======================================
  Hits            ?    62573           
  Misses          ?    62158           
  Partials        ?     7541           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1ebb30e...8da16ff. Read the comment docs.

@GiteaBot 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 Apr 26, 2022
@Gusted
Copy link
Contributor Author

Gusted commented Apr 26, 2022

Latest commit fixes issue to force organisation's headers to also be vertical:

Before:

image

After:

image

@Gusted
Copy link
Contributor Author

Gusted commented Apr 26, 2022

Also excluded the repo/wiki buttons from being into vertical tabs... They aren't really a list-like, they should be fixed by correct positioning them. Really ready now 😅

@techknowlogick techknowlogick merged commit 89eec15 into go-gitea:main Apr 26, 2022
@Gusted Gusted deleted the use-more-vertical-tab branch April 26, 2022 20:35
zjjhot added a commit to zjjhot/gitea that referenced this pull request Apr 28, 2022
* giteaofficial/main: (21 commits)
  Prevent intermittent race in attribute reader close (go-gitea#19537)
  Make repository file list useable on mobile (go-gitea#19515)
  Update image URL for Discord webhook (go-gitea#19536)
  [skip ci] Updated translations via Crowdin
  Fix 64-bit atomic operations on 32-bit machines (go-gitea#19531)
  Fix `upgrade.sh` script error with `su -c` (go-gitea#19483)
  When view _Siderbar or _Footer, just display once (go-gitea#19501)
  Fix migrate release from github (go-gitea#19510)
  Prevent dangling archiver goroutine (go-gitea#19516)
  Don't let repo clone URL overflow (go-gitea#19517)
  Add commit status popup to issuelist (go-gitea#19375)
  Disable unnecessary GitHooks elements (go-gitea#18485)
  Disable unnecessary GitHooks elements
  Improve dashboard's repo list performance (go-gitea#18963)
  By default force vertical tabs on mobile (go-gitea#19486)
  Refactor readme file renderer (go-gitea#19502)
  Allow package dump skipping (go-gitea#19506)
  Unset git author/committer variables when running integration tests (go-gitea#19512)
  Allow commit status popup on /pulls page (go-gitea#19507)
  Use router param for filepath in GetRawFile (go-gitea#19499)
  ...
@Gusted Gusted mentioned this pull request Apr 29, 2022
Gusted pushed a commit to Gusted/gitea that referenced this pull request Jun 15, 2022
- Fomantic tries to prevent overflowing on the `y/x`-as by default on
stackable menu's on mobile screens. We already solve this issue by
forcing overflow on x as and hide it on y as(due to some issues with
other menu's), since go-gitea#19486.
- However this edge case does require a y-overflow to show the dropdown,
because you cannot easily adjust this with CSS, once you're fiddling
with overflow's (https://stackoverflow.com/a/6433475). However
interesting behavior is noted
https://css-tricks.com/popping-hidden-overflow/ when you remove the
position: relative, it will suddenly work again. Well because this is
the only solution without redesigning dropdowns, I think we can live
with the side-effect of the dropdown items being full-width instead
"relative" width to their parent.
- Resolves go-gitea#19976
lunny added a commit that referenced this pull request Jun 16, 2022
- Fomantic tries to prevent overflowing on the `y/x`-as by default on
stackable menu's on mobile screens. We already solve this issue by
forcing overflow on x as and hide it on y as(due to some issues with
other menu's), since #19486.
- However this edge case does require a y-overflow to show the dropdown,
because you cannot easily adjust this with CSS, once you're fiddling
with overflow's (https://stackoverflow.com/a/6433475). However
interesting behavior is noted
https://css-tricks.com/popping-hidden-overflow/ when you remove the
position: relative, it will suddenly work again. Well because this is
the only solution without redesigning dropdowns, I think we can live
with the side-effect of the dropdown items being full-width instead
"relative" width to their parent.
- Resolves #19976

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
vsysoev pushed a commit to IntegraSDL/gitea that referenced this pull request Aug 10, 2022
- Fomantic tries to prevent overflowing on the `y/x`-as by default on
stackable menu's on mobile screens. We already solve this issue by
forcing overflow on x as and hide it on y as(due to some issues with
other menu's), since go-gitea#19486.
- However this edge case does require a y-overflow to show the dropdown,
because you cannot easily adjust this with CSS, once you're fiddling
with overflow's (https://stackoverflow.com/a/6433475). However
interesting behavior is noted
https://css-tricks.com/popping-hidden-overflow/ when you remove the
position: relative, it will suddenly work again. Well because this is
the only solution without redesigning dropdowns, I think we can live
with the side-effect of the dropdown items being full-width instead
"relative" width to their parent.
- Resolves go-gitea#19976

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this pull request Aug 24, 2022
* By default force vertical tabs on mobile

- While experimenting with using vertical tabs instead of horizontal
tabs on gitea for a better mobile experience, I made a recent
PR(go-gitea#19468) in order to see if
there was any objections to this new behavior for the repo headers(one
of the most annoying horizontal tabs). This PR had no objections and
even a user commenting that this change is brilliant.
- This PR now improves upon the previous PR by making this the de-facto
behavior for all menu's on mobile. The only exemption is the navbar
which also uses the menu but caught some layout errors with the changes.

* Fix organisation

* Fix repo/wiki buttons

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this pull request Aug 24, 2022
- Fomantic tries to prevent overflowing on the `y/x`-as by default on
stackable menu's on mobile screens. We already solve this issue by
forcing overflow on x as and hide it on y as(due to some issues with
other menu's), since go-gitea#19486.
- However this edge case does require a y-overflow to show the dropdown,
because you cannot easily adjust this with CSS, once you're fiddling
with overflow's (https://stackoverflow.com/a/6433475). However
interesting behavior is noted
https://css-tricks.com/popping-hidden-overflow/ when you remove the
position: relative, it will suddenly work again. Well because this is
the only solution without redesigning dropdowns, I think we can live
with the side-effect of the dropdown items being full-width instead
"relative" width to their parent.
- Resolves go-gitea#19976

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This was referenced Apr 24, 2023
@go-gitea go-gitea locked and limited conversation to collaborators May 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. topic/mobile topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants