Refactor clone-panel styles (#29861)
1. The borders were doubled on the "empty" page, fix it. 2. Remove unnecessary CSS classes like "clone", "compact", etc 3. Use CSS class "clone-panel" instead of ID "clone-panel" 4. Use `tw-flex-1` instead of `gt-f1` 5. Remove unnecessary ID "more-btn" (cherry picked from commit 673286d8c8a00bf7240a93187d767fb5a5e32a31)
This commit is contained in:
parent
cd28684ac3
commit
2141bc3298
|
@ -1,15 +1,15 @@
|
||||||
<!-- there is always at least one button (by context/repo.go) -->
|
<!-- there is always at least one button (by context/repo.go) -->
|
||||||
{{if $.CloneButtonShowHTTPS}}
|
{{if $.CloneButtonShowHTTPS}}
|
||||||
<button class="ui small compact clone button" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
|
<button class="ui small button" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
|
||||||
HTTPS
|
HTTPS
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if $.CloneButtonShowSSH}}
|
{{if $.CloneButtonShowSSH}}
|
||||||
<button class="ui small compact clone button" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
|
<button class="ui small button" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
|
||||||
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="20" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
|
||||||
<button class="ui basic small compact 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>
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
</a>
|
</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
<div class="ui action small input gt-df gt-f1">
|
<div class="clone-panel ui action small input tw-flex-1">
|
||||||
{{template "repo/clone_buttons" .}}
|
{{template "repo/clone_buttons" .}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -132,9 +132,9 @@
|
||||||
<div class="gt-df gt-ac">
|
<div class="gt-df gt-ac">
|
||||||
<!-- Only show clone panel in repository home page -->
|
<!-- Only show clone panel in repository home page -->
|
||||||
{{if eq $n 0}}
|
{{if eq $n 0}}
|
||||||
<div class="ui action tiny input" id="clone-panel">
|
<div class="clone-panel ui action tiny input">
|
||||||
{{template "repo/clone_buttons" .}}
|
{{template "repo/clone_buttons" .}}
|
||||||
<button id="more-btn" class="ui basic small compact jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
|
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
|
||||||
{{svg "octicon-kebab-horizontal"}}
|
{{svg "octicon-kebab-horizontal"}}
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
{{if not $.DisableDownloadSourceArchives}}
|
{{if not $.DisableDownloadSourceArchives}}
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui eight wide column text right">
|
<div class="ui eight wide column text right">
|
||||||
<div class="ui action small input" id="clone-panel">
|
<div class="clone-panel ui action small input">
|
||||||
{{template "repo/clone_buttons" .}}
|
{{template "repo/clone_buttons" .}}
|
||||||
{{template "repo/clone_script" .}}
|
{{template "repo/clone_script" .}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui action small input gt-df gt-ac" id="clone-panel">
|
<div class="clone-panel ui action small input">
|
||||||
{{template "repo/clone_buttons" .}}
|
{{template "repo/clone_buttons" .}}
|
||||||
{{template "repo/clone_script" .}}
|
{{template "repo/clone_script" .}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -143,41 +143,31 @@
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository #clone-panel #repo-clone-url {
|
.repository .clone-panel #repo-clone-url {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
@media (max-width: 991.98px) {
|
||||||
.repository #clone-panel #repo-clone-url {
|
.repository .clone-panel #repo-clone-url {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
.repository .ui.action.input.clone-panel > button + button,
|
||||||
.repository #clone-panel #repo-clone-url {
|
.repository .ui.action.input.clone-panel > button + input {
|
||||||
width: 200px;
|
margin-left: -1px; /* make the borders overlap to avoid double borders */
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository #clone-panel #repo-clone-https,
|
.repository .clone-panel > button:first-of-type {
|
||||||
.repository #clone-panel #repo-clone-ssh {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository #clone-panel #more-btn {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository #clone-panel button:first-of-type {
|
|
||||||
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
|
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository #clone-panel button:last-of-type {
|
.repository .clone-panel > button:last-of-type {
|
||||||
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
|
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository #clone-panel .dropdown .menu {
|
.repository .clone-panel .dropdown .menu {
|
||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
left: auto !important;
|
left: auto !important;
|
||||||
}
|
}
|
||||||
|
@ -1758,10 +1748,6 @@
|
||||||
font-weight: var(--font-weight-normal);
|
font-weight: var(--font-weight-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository.quickstart .guide .clone.button:first-child {
|
|
||||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository.quickstart .guide #repo-clone-url {
|
.repository.quickstart .guide #repo-clone-url {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
|
|
@ -58,7 +58,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
.repository.wiki #clone-panel #repo-clone-url {
|
.repository.wiki .clone-panel #repo-clone-url {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
.repository.wiki .wiki-content-main.with-sidebar,
|
.repository.wiki .wiki-content-main.with-sidebar,
|
||||||
|
|
Loading…
Reference in a new issue