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>tags/v1.22.0
@@ -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> |
@@ -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"> |
@@ -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 { |
@@ -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; | |||
} |