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

@ -85,7 +85,7 @@
{{template "custom/body_inner_pre" .}}
{{if not .PageIsInstall}}
<div class="ui top secondary stackable main menu following bar light">
<div class="ui top secondary stackable main menu following bar light no-vertical-tabs">
{{template "base/head_navbar" .}}
</div><!-- end bar -->
{{end}}

View file

@ -145,7 +145,7 @@
</div><!-- end grid -->
</div><!-- end container -->
{{end}}
<div class="ui tabs container repo-header-container">
<div class="ui tabs container">
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
<div class="ui tabular stackable menu navbar">
{{if .Permission.CanRead $.UnitTypeCode}}

View file

@ -60,7 +60,7 @@
</div>
{{end}}
{{template "repo/sub_menu" .}}
<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins">
<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
{{template "repo/branch_dropdown" dict "root" .}}
{{ $n := len .TreeNames}}
{{ $l := Subtract $n 1}}

View file

@ -3,7 +3,7 @@
{{template "repo/header" .}}
{{ $title := .title}}
<div class="ui container">
<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins">
<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins no-vertical-tabs">
<div class="fitted item">
<div class="choose page">
<div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">

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;
}
}
}
}