By default force vertical tabs on mobile (go-gitea#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(go-gitea#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 <[email protected]>
kitspace · Aug 23, 2022 · d842c7e · d842c7e
1 parent a9fc686
commit d842c7e
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1350,27 +1350,13 @@ footer {
   overflow: auto;
 }
 
-@media @mediaSm {
-  .ui.menu.new-menu {
-    overflow: visible !important;
-  }
-}
-
 .ui.menu.new-menu .new-menu-inner {
   display: flex;
   margin-left: auto;
   margin-right: 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 {
   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
@@ -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;
-      }
-    }
-  }
-}