Rework repo buttons (#20602)

* Rework repo buttons

- Replace "New PR" and "Go to File" button with Icon Button
- Move all "Add File" actions into a dropdown button
- Remove most custom styling of clone buttons
- Margin and wiki tweaks

Buttons are now all equal height, mobile layout wraps gracefully.

Fixes: https://github.com/go-gitea/gitea/issues/13671
Replaces: https://github.com/go-gitea/gitea/pull/20375

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

1 files changed, 51 insertions, 72 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5aed4dcf72..fa634479f6 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -67,22 +67,6 @@
     min-width: 40% !important;
   }
 
-  #file-buttons {
-    /* The reason for the !important is that Semantic itself has
-    margin-left: 0 !important on right items on mobile, which is mostly
-    to make sure elements which on menus would otherwise be on the right
-    align correctly with other elements when stacked.
-    Unfortunately, this brings some weird alignment on this particular
-    element, so we need to override it. */
-    margin-left: auto !important;
-    font-weight: normal;
-
-    .ui.button {
-      padding: 8px 10px;
-      font-weight: normal;
-    }
-  }
-
   .unicode-escaped .escaped-code-point {
     &[data-escaped]::before {
       visibility: visible;
@@ -223,22 +207,15 @@
   }
 
   #clone-panel {
-    width: 350px;
+    #repo-clone-url {
+      width: 320px;
 
-    @media @mediaSm {
-      width: 100%;
-    }
-
-    input {
-      border-radius: 0;
-      padding: 5px 10px;
-      width: 50%;
-      line-height: 1.4;
-    }
-
-    .clone.button {
-      font-size: 13px;
-      padding: 7.5px 5px;
+      @media @mediaMd {
+        width: 200px;
+      }
+      @media @mediaSm {
+        width: 200px;
+      }
     }
 
     #repo-clone-https,
@@ -258,10 +235,6 @@
       border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
     }
 
-    .icon.button {
-      padding: 0 10px;
-    }
-
     .dropdown .menu {
       right: 0 !important;
       left: auto !important;
@@ -293,25 +266,6 @@
       }
     }
 
-    #file-buttons {
-      font-weight: normal;
-
-      .ui.button {
-        padding: 8px 10px;
-        font-weight: normal;
-      }
-
-      .ui.tiny.primary.buttons {
-        @media @mediaSm {
-          width: 100%;
-        }
-      }
-
-      .button + .button {
-        border-left: none;
-      }
-    }
-
     #repo-files-table {
       thead {
         th {
@@ -2109,10 +2063,6 @@
     }
 
     &.view {
-      .choose.page {
-        margin-top: -5px;
-      }
-
       > .markup {
         padding: 15px 30px;
 
@@ -2139,6 +2089,12 @@
         margin-bottom: 2px;
       }
     }
+
+    @media @mediaSm {
+      #clone-panel #repo-clone-url {
+        width: 160px;
+      }
+    }
   }
 
   &.settings {
@@ -2829,6 +2785,31 @@
   line-height: 1.3em; // there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly
 }
 
+.repo-button-row {
+  margin-bottom: 10px;
+}
+
+.repo-button-row > * {
+  margin-top: 10px;
+}
+
+.wiki .repo-button-row {
+  margin-bottom: 0;
+}
+
+.wiki .repo-button-row > * {
+  margin-top: 0;
+}
+
+.repo-button-row .button {
+  padding: 6px 10px !important;
+  height: 30px;
+}
+
+.repo-button-row input {
+  height: 30px;
+}
+
 tbody.commit-list {
   vertical-align: baseline;
 }
@@ -2906,20 +2887,6 @@ tbody.commit-list {
   text-align: left;
 }
 
-@media @mediaSm {
-  .ui.stackable.menu {
-    &.mobile--margin-between-items > .item {
-      margin-top: 5px;
-      margin-bottom: 5px;
-    }
-
-    &.mobile--no-negative-margins {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-}
-
 #topic_edit {
   margin-top: 5px;
 }
@@ -3431,3 +3398,15 @@ td.blob-excerpt {
     }
   }
 }
+
+.branch-dropdown-button {
+  max-width: 340px;
+  vertical-align: bottom !important;
+
+  @media @mediaMd {
+    max-width: 185px;
+  }
+  @media @mediaSm {
+    max-width: 165px;
+  }
+}