Use horizontal tabs for repo header on mobile (#19468)

* Use horizontal tabs for repo header on mobile

- The current behavior of the repo header on mobile is to display them
vertically column-by-column. I've only experience annoyance due to this
while trying to visit gitea instanced on mobile. This commit changes
this behavior to use horizontal tabs, it uses less tabs and doesn't
bloat 60% of your mobile screen with the repo headers.
- A small fix added in this commit is to give some space around the repo
buttons, current behavior is that they are too "close" to the repo
title.

* Fix lint

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 83ad79e12d59b2e64d7deeb28037d190931b8544..198b05b4ba561a222c0a8637fdf2f825b5fae981 100644 (file)
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -144,7 +144,7 @@
                </div><!-- end grid -->
        </div><!-- end container -->
 {{end}}
-       <div class="ui tabs container">
+       <div class="ui tabs container repo-header-container">
                {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
                        <div class="ui tabular stackable menu navbar">
                                {{if .Permission.CanRead $.UnitTypeCode}}

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9a2ae994625e93790dc1874cd5f9fe1daea069b3..70f8b077ded85f7842c2805acd65cd8b6d9d0af0 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2956,11 +2956,21 @@ tbody.commit-list {
   justify-content: space-between;
   flex-wrap: wrap;
   word-break: break-word;
+
+  @media @mediaSm {
+    + .container {
+      margin-top: 7px;
+    }
+  }
 }
 
 .repo-buttons {
   display: flex;
   align-items: center;
+
+  @media @mediaSm {
+    margin-top: 1em;
+  }
 }
 
 .repo-buttons .ui.labeled.button > .label:hover {
@@ -3227,3 +3237,18 @@ 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;
+      }
+    }
+  }
+}