-
-
Notifications
You must be signed in to change notification settings - Fork 5.6k
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
Conversation
- 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.
Codecov Report
@@ 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.
|
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 😅 |
* 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) ...
- 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
- 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>
- 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>
* 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>
- 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>
Before:
After: