nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve repo button row layout (#30668) (#30839)

Browse source 
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="8135a572-aa67-4672-ad49-b76b06890b52">

## Medium
<img width="870" alt="Screenshot 2024-04-23 at 22 25 34"
src="9e93f61c-3315-4a78-8328-8cefad5b50fa">

## Mobile
<img width="416" alt="Screenshot 2024-04-23 at 22 25 52"
src="859e341f-807a-48e6-8bcf-31715963216c">

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot 2024-05-03 03:38:37 +08:00 • committed by GitHub
parent 6d83f5eddc
commit 41f8ef8af5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 52 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web_src/css/modules/input.css
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 + .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 {

53
web_src/css/repo.css
View file

@ -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;
}