Improve issue list layout (#26983)

Align everything with a new layout.

* Use "baseline" for some special elements, the "flex-item-icon" is for
the issue list only at the moment and I think it should be general
enough now (but not using "flex-item-leading" anymore in this case).
* Make the labels stretch themselves.

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 8e91a58d5162cc4c2fbd47f945bc6c3163603ed3..80d4e3dd85e1cfc2ad96c4a142b21b73e111f966 100644 (file)
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -2,16 +2,14 @@
        {{$approvalCounts := .ApprovalCounts}}
        {{range .Issues}}
                <div class="flex-item">
-                       <div class="flex-item-leading">
+
+                       <div class="flex-item-icon">
                                {{if $.CanWriteIssuesOrPulls}}
-                               <div class="flex-item-icon">
-                                       <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
-                               </div>
+                               <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
                                {{end}}
-                               <div class="flex-item-icon">
-                                       {{template "shared/issueicon" .}}
-                               </div>
+                               {{template "shared/issueicon" .}}
                        </div>
+
                        <div class="flex-item-main">
                                <div class="flex-item-header">
                                        <div class="flex-item-title">

diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
index f76b690cb1020c6e242f6f5e1293fa7e7b09a150..17ae6ea38fc677686f77a373f0283dcdfc5cab98 100644 (file)
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -33,6 +33,22 @@
   }
 }
 
+#issue-list .flex-item-title .labels-list {
+  display: flex;
+  gap: 0.25em;
+}
+
+#issue-list .flex-item-title .labels-list a {
+  display: flex;
+  text-decoration: none;
+}
+
+#issue-list .flex-item-title .labels-list .label {
+  padding: 0 6px;
+  margin: 0;
+  min-height: 20px;
+}
+
 #issue-list .flex-item-body .branches {
   display: inline-flex;
 }

diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index b5ae5cbd49277b1aa1c74be4fd055d9d3552ce49..a7cfc8f163963969befdaacc444180c4a30e8578 100644 (file)
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -34,9 +34,11 @@
 }
 
 .flex-item .flex-item-icon {
-  display: flex;
-  align-items: center;
-  height: 20px; /* match the default flex-item-title height */
+  align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */
+}
+
+.flex-item .flex-item-icon + .flex-item-main {
+  align-self: baseline;
 }
 
 .flex-item .flex-item-trailing {
@@ -59,7 +61,6 @@
   font-weight: var(--font-weight-semibold);
   word-break: break-word;
   min-width: 0;
-  min-height: 20px;
 }
 
 .flex-item .flex-item-title a {