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:
parent
d71df01077
commit
89eec15dd9
6 changed files with 17 additions and 33 deletions
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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"}}">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue