Refactor "flex-list" to "flex-divided-list" (#37505)

Purpose:

1. Make the whole code base have unified "item" layout
2. Clarify our "list" styles: "flex-relaxed-list", "flex-divided-list"
3. Prepare to replace legacy "ui relaxed list"
* https://github.com/go-gitea/gitea/pull/37445#discussion_r3144458865
4. Prepare for refactoring the "pull merge box", it needs the
"flex-divided-list"
    * related to "Refactor pull request view (*)" like #37451
5. Fix legacy abuses of "flex-list", e.g.: repo home sidebar
This commit is contained in:
wxiaoguang
2026-05-03 00:10:52 +08:00
committed by GitHub
parent f049668c21
commit 134e86c78c
54 changed files with 560 additions and 557 deletions
-29
View File
@@ -1,29 +0,0 @@
.repository .secondary-nav {
padding-top: 12px;
}
.repository .secondary-nav .fork-flag {
margin-top: 0.5rem;
font-size: 12px;
}
.repo-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 4px;
}
.repo-header .flex-item {
padding: 0;
}
.repo-header .flex-item-main {
flex: 0;
flex-basis: unset;
}
.repo-header .flex-item-trailing {
flex-wrap: nowrap;
}
+5 -4
View File
@@ -21,8 +21,10 @@
grid-row: 2;
}
.repo-home-sidebar-bottom .flex-list > :first-child {
border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
.repo-home-sidebar-header {
font-weight: var(--font-weight-semibold);
font-size: 16px;
margin-top: 0.5em;
}
@media (max-width: 767.98px) {
@@ -87,8 +89,7 @@
border-radius: 5px;
overflow: hidden;
width: 100%;
margin-top: 1rem;
margin-bottom: 5px;
margin: 5px 0;
}
.language-stats-details {
+6 -6
View File
@@ -34,17 +34,17 @@
}
}
#issue-list .flex-item-body .branches {
#issue-list .branches {
display: inline-flex;
}
#issue-list .flex-item-body .branches .branch {
#issue-list .branches .branch {
background-color: var(--color-secondary-alpha-50);
border-radius: var(--border-radius);
padding: 0 4px;
}
#issue-list .flex-item-body .branches .truncated-name {
#issue-list .branches .truncated-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -53,18 +53,18 @@
vertical-align: top;
}
#issue-list .flex-item-body .checklist progress {
#issue-list .checklist progress {
margin-left: 2px;
width: 80px;
height: 6px;
display: inline-block;
}
#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
#issue-list .checklist progress::-webkit-progress-value {
background-color: var(--color-secondary-dark-4);
}
#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
#issue-list .checklist progress::-moz-progress-bar {
background-color: var(--color-secondary-dark-4);
}