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

web_src/css/actions.css

@@ -43,7 +43,7 @@
   align-items: center;
 }
 
-.run-list .flex-item-trailing {
+.run-list .item-trailing {
   flex-wrap: nowrap;
   width: 280px;
   flex: 0 0 280px;
@@ -55,7 +55,7 @@
 }
 
 @media (max-width: 767.98px) {
-  .run-list .flex-item-trailing {
+  .run-list .item-trailing {
     flex-direction: column;
     align-items: flex-end;
     width: auto;

web_src/css/base.css

@@ -872,13 +872,6 @@ table th[data-sortt-desc] .svg {
   align-items: stretch;
 }
 
-/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
-.flex-relaxed-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-block);
-}
-
 /* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */
 .flex-left-right {
   display: flex;

web_src/css/index.css

@@ -67,7 +67,6 @@
 @import "./repo/list-header.css";
 @import "./repo/file-view.css";
 @import "./repo/wiki.css";
-@import "./repo/header.css";
 @import "./repo/home.css";
 @import "./repo/home-file-list.css";
 @import "./repo/reactions.css";

web_src/css/repo.css

@@ -1,3 +1,12 @@
+.repo-header {
+  margin: 1em 0 0.5em;
+}
+
+.repo-header .secondary-info {
+  margin-top: 0.5rem;
+  font-size: 12px;
+}
+
 .repository .data-table .line-num,
 .repository .diff-file-box .file-body.file-code .lines-num,
 .repository .diff-file-box .code-diff tbody tr .lines-type-marker {

web_src/css/repo/header.css

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

web_src/css/repo/home.css

@@ -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 {

web_src/css/repo/issue-list.css

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

web_src/css/shared/flex-list.css

@@ -1,40 +1,61 @@
-.flex-list {
-  list-style: none;
+/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
+.flex-relaxed-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-block);
 }
 
-.flex-item {
+.flex-relaxed-list > .divider {
+  margin: 0;
+}
+
+/* items have dividers between them, the dividers align with items (use parent padding) */
+.flex-divided-list {
+  list-style: none;
   display: flex;
-  gap: 8px;
-  align-items: flex-start;
+  flex-direction: column;
+}
+
+.flex-divided-list > .item {
   padding: 10px 0;
 }
 
-.flex-item .flex-item-leading {
+.flex-divided-list > .item + .item {
+  border-top: 1px solid var(--color-secondary);
+}
+
+.items-with-main > .item {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.items-with-main > .item .item-leading {
   display: flex;
   align-items: flex-start;
 }
 
-.flex-item .flex-item-main {
+.items-with-main > .item .item-main {
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   flex-grow: 1;
-  flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
+  flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 }
 
-.flex-item-header {
+.items-with-main > .item .item-header {
   display: flex;
   gap: .25rem;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.flex-item a:not(.label, .button):hover {
+.items-with-main > .item a:not(.label, .button):hover {
   color: var(--color-primary) !important;
 }
 
-.flex-item .flex-item-trailing {
+.items-with-main > .item .item-trailing {
   display: flex;
   gap: 0.5rem;
   align-items: center;
@@ -43,7 +64,7 @@
   justify-content: end;
 }
 
-.flex-item .flex-item-title {
+.items-with-main > .item .item-title {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -58,12 +79,12 @@
   min-width: 0;
 }
 
-.flex-item .flex-item-title a {
+.items-with-main > .item .item-title a {
   color: var(--color-text);
   overflow-wrap: anywhere;
 }
 
-.flex-item .flex-item-body {
+.items-with-main > .item .item-body {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -72,32 +93,40 @@
   overflow-wrap: anywhere;
 }
 
-.flex-item .flex-item-body a {
+.items-with-main > .item .item-body a {
   color: inherit;
   overflow-wrap: anywhere;
 }
 
-.flex-list > .flex-item + .flex-item {
-  border-top: 1px solid var(--color-secondary);
+/* special rules to make the list work with existing UI elements */
+.container-segmented > .flex-divided-list > .item {
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
-/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `tw-hidden` siblings).
-Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */
-.flex-list.flex-space-fitted > .flex-item:first-child,
-.ui.segment > .flex-list > .flex-item:first-child {
+.ui.segment.fitted > .flex-divided-list > .item {
+  padding: 1em;
+}
+
+.container-padded > .flex-divided-list > .item:first-child,
+.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
   padding-top: 0;
 }
 
-.flex-list.flex-space-fitted > .flex-item:last-child,
-.ui.segment > .flex-list > .flex-item:last-child {
+.container-padded > .flex-divided-list > .item:last-child,
+.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
   padding-bottom: 0;
 }
 
 /* If there is a divider besides the flex-list, some padding/margin are not needs */
-.divider + .flex-list > .flex-item:first-child {
+.divider + .flex-divided-list > .item:first-child {
   padding-top: 0;
 }
 
-.flex-list + .divider {
+.flex-divided-list + .divider {
   margin-top: 0;
 }
+
+.container-padded > .flex-divided-list + .divider {
+  margin-top: 10px;
+}