mirror of
https://github.com/go-gitea/gitea
synced 2024-12-23 00:54:28 +00:00
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:
parent
e67fbe4f15
commit
c445a85528
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user