Improve repo button row layout (#30668) (#30839)

Backport #30668 by @silverwind

Since there is now a second `<input>` in the repo buttons, we can make a
better-looking layout with no empty space, except on mobile.

Also I fixed one bug with focus border on clone panel.

## Large

<img width="1163" alt="Screenshot 2024-04-23 at 22 25 22"
src="https://github.com/go-gitea/gitea/assets/115237/8135a572-aa67-4672-ad49-b76b06890b52">

## Medium
<img width="870" alt="Screenshot 2024-04-23 at 22 25 34"
src="https://github.com/go-gitea/gitea/assets/115237/9e93f61c-3315-4a78-8328-8cefad5b50fa">

## Mobile
<img width="416" alt="Screenshot 2024-04-23 at 22 25 52"
src="https://github.com/go-gitea/gitea/assets/115237/859e341f-807a-48e6-8bcf-31715963216c">

Co-authored-by: silverwind <me@silverwind.io>

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index 89daba9dc982777e54011cb5f11f0f8880337055..91952c8a06db202f918a8a06c5afa362a717a031 100644 (file)
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -9,7 +9,7 @@
                SSH
        </button>
 {{end}}
-<input id="repo-clone-url" size="20" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+<input id="repo-clone-url" size="10" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
 <button class="ui small icon button" id="clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{ctx.Locale.Tr "copy_url"}}">
        {{svg "octicon-copy" 14}}
 </button>

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index eb9eb9c14932f568443625dbfc123cd3232ab95f..6df9f7d72a952224aa821732d3de2b0eedb57ea8 100644 (file)
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -46,7 +46,7 @@
                {{$l := Eval $n "-" 1}}
                {{$isHomepage := (eq $n 0)}}
                <div class="repo-button-row">
-                       <div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2">
+                       <div class="repo-button-row-left">
                                {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
                                {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
                                        {{$cmpBranch := ""}}
@@ -66,7 +66,7 @@
                                {{end}}
 
                                {{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-                                       <button class="ui dropdown basic compact jump button tw-mr-1"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+                                       <button class="ui dropdown basic compact jump button"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
                                                {{ctx.Locale.Tr "repo.editor.add_file"}}
                                                {{svg "octicon-triangle-down" 14 "dropdown icon"}}
                                                <div class="menu">
@@ -93,9 +93,9 @@
                                {{if $isHomepage}}
                                        {{/* only show the "code search" on the repo home page, it only does global search,
                                                so do not show it when viewing file or directory to avoid misleading users (it doesn't search in a directory) */}}
-                                       <form class="ignore-dirty" action="{{.RepoLink}}/search" method="get">
-                                               <div class="ui small action input">
-                                                       <input name="q" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
+                                       <form class="ignore-dirty tw-flex tw-flex-1" action="{{.RepoLink}}/search" method="get">
+                                               <div class="ui small action input tw-flex-1">
+                                                       <input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
                                                        {{template "shared/search/button"}}
                                                </div>
                                        </form>
@@ -113,7 +113,7 @@
                                        </span>
                                {{end}}
                        </div>
-                       <div class="tw-flex tw-items-center">
+                       <div class="repo-button-row-right">
                                <!-- Only show clone panel in repository home page -->
                                {{if $isHomepage}}
                                        <div class="clone-panel ui action tiny input">

diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css
index 18b785ac8246cfe04cfdba9de7b35b30bfeb1ff9..d39377b4e1f7b31a1f7e347347c7f997f8275ddb 100644 (file)
--- a/web_src/css/modules/input.css
+++ b/web_src/css/modules/input.css
@@ -188,8 +188,8 @@
 .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
 .ui.action.input:not([class*="left action"]) > input:focus + .button,
 .ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
-.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
-.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
+.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
+.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
   border-left-color: var(--color-primary);
 }
 .ui.action.input:not([class*="left action"]) > input:focus {

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index a930e130f87204a05b5bd3a37d42f506a5bf32aa..408b62ad3c2b0d9864eca386b89168f896ac1a12 100644 (file)
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -128,15 +128,22 @@
   margin-bottom: 12px;
 }
 
-.repository .clone-panel #repo-clone-url {
-  width: 320px;
-  border-radius: 0;
+.repository .clone-panel {
+  display: flex;
+  flex: 1;
 }
 
-@media (max-width: 991.98px) {
-  .repository .clone-panel #repo-clone-url {
-    width: 200px;
-  }
+.repository.wiki .clone-panel {
+  flex: 0;
+}
+
+.repository.wiki .clone-panel input {
+  width: 20ch;
+}
+
+.repository .clone-panel #repo-clone-url {
+  border-radius: 0;
+  flex: 1;
 }
 
 .repository .ui.action.input.clone-panel > button + button,
@@ -2229,17 +2236,37 @@ td .commit-summary {
 }
 
 .repo-button-row {
-  margin: 10px 0;
+  margin: 8px 0;
   display: flex;
   align-items: center;
-  gap: 0.5em;
-  flex-wrap: wrap;
+  gap: 8px;
   justify-content: space-between;
 }
 
+.repo-button-row-left,
+.repo-button-row-right {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.repo-button-row-right {
+  justify-content: flex-end;
+}
+
+@media (max-width: 991px) {
+  .repository:not(.wiki) .repo-button-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
 .repo-button-row .button {
   padding: 6px 10px !important;
   height: 30px;
+  flex-shrink: 0;
+  margin: 0;
 }
 
 .repo-button-row .button.dropdown:not(.icon) {
@@ -2250,6 +2277,12 @@ td .commit-summary {
   height: 30px;
 }
 
+@media (max-width: 600px) {
+  .repo-button-row-left {
+    flex-wrap: wrap;
+  }
+}
+
 tbody.commit-list {
   vertical-align: baseline;
 }