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>

Changes

6 changed files (+17/-33)

• templates/base/head.tmpl
  • @@ -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}}
• templates/repo/header.tmpl
  • @@ -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}}
• templates/repo/home.tmpl
  • @@ -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}}
• templates/repo/wiki/view.tmpl
  • @@ -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"}}">
• web_src/less/_base.less
  • @@ -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; + } + } + }
• web_src/less/_repository.less
  • @@ -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; - } - } - } - }