From 89eec15dd90e50c36051eb3f6a2ed2616c513ad8 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Tue, 26 Apr 2022 20:31:58 +0000
Subject: [PATCH] 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>
---
templates/base/head.tmpl | 2 +-
templates/repo/header.tmpl | 2 +-
templates/repo/home.tmpl | 2 +-
templates/repo/wiki/view.tmpl | 2 +-
web_src/less/_base.less | 27 +++++++++++++--------------
web_src/less/_repository.less | 15 ---------------
6 files changed, 17 insertions(+), 33 deletions(-)
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index 35157e9b9..f3dcfe842 100644
--- a/templates/base/head.tmpl
+++ b/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}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 588cfc771..624eb17a5 100644
--- a/templates/repo/header.tmpl
+++ b/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}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index c146f474e..afdb176bb 100644
--- a/templates/repo/home.tmpl
+++ b/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}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index ce1b00b4f..04faa90b9 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/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"}}">
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index deb129c7c..5584a6c35 100644
--- a/web_src/less/_base.less
+++ b/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;
+ }
+ }
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 70f8b077d..67a79d45e 100644
--- a/web_src/less/_repository.less
+++ b/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;
- }
- }
- }
-}