By default force vertical tabs on mobile (#19486)

* 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(https://github.com/go-gitea/gitea/pull/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>
This commit is contained in:
Gusted 2022-04-26 20:31:58 +00:00 committed by GitHub
parent d71df01077
commit 89eec15dd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 33 deletions

View file

@ -1350,12 +1350,6 @@ footer {
overflow: auto;
}
@media @mediaSm {
.ui.menu.new-menu {
overflow: visible !important;
}
}
.ui.menu.new-menu .new-menu-inner {
display: flex;
margin-left: auto;
@ -1363,14 +1357,6 @@ footer {
overflow-x: auto;
}
@media @mediaSm {
.ui.menu.new-menu .new-menu-inner {
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
}
.ui.menu.new-menu::after {
position: absolute;
display: block;
@ -2194,3 +2180,16 @@ table th[data-sortt-desc] {
height: 15px;
}
}
@media @mediaSm {
.ui.stackable.menu:not(.no-vertical-tabs) {
overflow-y: hidden;
overflow-x: auto;
flex-direction: row;
flex-wrap: nowrap !important;
.item {
width: initial !important;
}
}
}

View file

@ -3237,18 +3237,3 @@ td.blob-excerpt {
transform: scale(105%);
box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
}
@media @mediaSm {
.repo-header-container {
overflow-x: auto;
overflow-y: hidden;
.ui.stackable.menu {
flex-direction: row;
.item {
width: initial !important;
}
}
}
}