Improve repo button row layout (#30668)

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">
This commit is contained in:
silverwind 2024-05-02 21:10:49 +02:00 committed by GitHub
parent e67fbe4f15
commit c445a85528
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 52 additions and 19 deletions

View File

@ -9,7 +9,7 @@
SSH SSH
</button> </button>
{{end}} {{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"}}"> <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}} {{svg "octicon-copy" 14}}
</button> </button>

View File

@ -46,7 +46,7 @@
{{$l := Eval $n "-" 1}} {{$l := Eval $n "-" 1}}
{{$isHomepage := (eq $n 0)}} {{$isHomepage := (eq $n 0)}}
<div class="repo-button-row"> <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"}} {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
{{$cmpBranch := ""}} {{$cmpBranch := ""}}
@ -66,7 +66,7 @@
{{end}} {{end}}
{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}} {{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"}} {{ctx.Locale.Tr "repo.editor.add_file"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <div class="menu">
@ -93,9 +93,9 @@
{{if $isHomepage}} {{if $isHomepage}}
{{/* only show the "code search" on the repo home page, it only does global search, {{/* 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) */}} 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"> <form class="ignore-dirty tw-flex tw-flex-1" action="{{.RepoLink}}/search" method="get">
<div class="ui small action input"> <div class="ui small action input tw-flex-1">
<input name="q" placeholder="{{ctx.Locale.Tr "search.code_kind"}}"> <input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
{{template "shared/search/button"}} {{template "shared/search/button"}}
</div> </div>
</form> </form>
@ -113,7 +113,7 @@
</span> </span>
{{end}} {{end}}
</div> </div>
<div class="tw-flex tw-items-center"> <div class="repo-button-row-right">
<!-- Only show clone panel in repository home page --> <!-- Only show clone panel in repository home page -->
{{if $isHomepage}} {{if $isHomepage}}
<div class="clone-panel ui action tiny input"> <div class="clone-panel ui action tiny input">

View File

@ -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 + .ui.dropdown.selection:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .button, .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 + .button:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button, .ui.action.input:not([class*="left action"]) > input:focus + i.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:hover {
border-left-color: var(--color-primary); border-left-color: var(--color-primary);
} }
.ui.action.input:not([class*="left action"]) > input:focus { .ui.action.input:not([class*="left action"]) > input:focus {

View File

@ -128,15 +128,22 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.repository .clone-panel #repo-clone-url { .repository .clone-panel {
width: 320px; display: flex;
border-radius: 0; flex: 1;
} }
@media (max-width: 991.98px) { .repository.wiki .clone-panel {
.repository .clone-panel #repo-clone-url { flex: 0;
width: 200px; }
}
.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, .repository .ui.action.input.clone-panel > button + button,
@ -2229,17 +2236,37 @@ td .commit-summary {
} }
.repo-button-row { .repo-button-row {
margin: 10px 0; margin: 8px 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 8px;
flex-wrap: wrap;
justify-content: space-between; 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 { .repo-button-row .button {
padding: 6px 10px !important; padding: 6px 10px !important;
height: 30px; height: 30px;
flex-shrink: 0;
margin: 0;
} }
.repo-button-row .button.dropdown:not(.icon) { .repo-button-row .button.dropdown:not(.icon) {
@ -2250,6 +2277,12 @@ td .commit-summary {
height: 30px; height: 30px;
} }
@media (max-width: 600px) {
.repo-button-row-left {
flex-wrap: wrap;
}
}
tbody.commit-list { tbody.commit-list {
vertical-align: baseline; vertical-align: baseline;
} }