* 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
{{template "custom/body_inner_pre" .}} | {{template "custom/body_inner_pre" .}} | ||||
{{if not .PageIsInstall}} | {{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" .}} | {{template "base/head_navbar" .}} | ||||
</div><!-- end bar --> | </div><!-- end bar --> | ||||
{{end}} | {{end}} |
</div><!-- end grid --> | </div><!-- end grid --> | ||||
</div><!-- end container --> | </div><!-- end container --> | ||||
{{end}} | {{end}} | ||||
<div class="ui tabs container repo-header-container"> | |||||
<div class="ui tabs container"> | |||||
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} | {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} | ||||
<div class="ui tabular stackable menu navbar"> | <div class="ui tabular stackable menu navbar"> | ||||
{{if .Permission.CanRead $.UnitTypeCode}} | {{if .Permission.CanRead $.UnitTypeCode}} |
</div> | </div> | ||||
{{end}} | {{end}} | ||||
{{template "repo/sub_menu" .}} | {{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" .}} | {{template "repo/branch_dropdown" dict "root" .}} | ||||
{{ $n := len .TreeNames}} | {{ $n := len .TreeNames}} | ||||
{{ $l := Subtract $n 1}} | {{ $l := Subtract $n 1}} |
{{template "repo/header" .}} | {{template "repo/header" .}} | ||||
{{ $title := .title}} | {{ $title := .title}} | ||||
<div class="ui container"> | <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="fitted item"> | ||||
<div class="choose page"> | <div class="choose page"> | ||||
<div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}"> | <div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}"> |
overflow: auto; | overflow: auto; | ||||
} | } | ||||
@media @mediaSm { | |||||
.ui.menu.new-menu { | |||||
overflow: visible !important; | |||||
} | |||||
} | |||||
.ui.menu.new-menu .new-menu-inner { | .ui.menu.new-menu .new-menu-inner { | ||||
display: flex; | display: flex; | ||||
margin-left: auto; | margin-left: auto; | ||||
overflow-x: auto; | 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 { | .ui.menu.new-menu::after { | ||||
position: absolute; | position: absolute; | ||||
display: block; | display: block; | ||||
height: 15px; | 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; | |||||
} | |||||
} | |||||
} |
transform: scale(105%); | transform: scale(105%); | ||||
box-shadow: 0 .5rem 1rem var(--color-shadow) !important; | 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; | |||||
} | |||||
} | |||||
} | |||||
} |