diff options
| -rw-r--r-- | templates/repo/clone_buttons.tmpl | 2 | ||||
| -rw-r--r-- | templates/repo/home.tmpl | 12 | ||||
| -rw-r--r-- | web_src/css/modules/input.css | 4 | ||||
| -rw-r--r-- | web_src/css/repo.css | 53 |
4 files changed, 52 insertions, 19 deletions
diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl index 89daba9dc9..91952c8a06 100644 --- 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 eb9eb9c149..6df9f7d72a 100644 --- 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 18b785ac82..d39377b4e1 100644 --- 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 a930e130f8..408b62ad3c 100644 --- 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; } |