* 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>tags/v1.18.0-dev
@@ -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; | |||
} | |||
} | |||
} | |||
} |