From be23b73e8523738a1d3c214a01c0f162146da1c0 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Sun, 9 Jul 2023 21:38:01 +0200 Subject: Restructure issue list template, styles (#25750) This PR does various modifications on the issue list shared template: - restructure layout to achieve better responsiveness - fix various style issues - restructure styles (better result with less code :) - remove numerous `gt-*` patches and other unneeded classes -> use existing css classes
Before: ![Bildschirmfoto vom 2023-07-07 14-35-00](https://github.com/go-gitea/gitea/assets/47871822/5301fc80-d58b-41c2-8090-5867e2e8459c) ![Bildschirmfoto vom 2023-07-07 14-35-19](https://github.com/go-gitea/gitea/assets/47871822/d36ab691-7dc4-44bb-a8f6-a4105a2a6777) ![Bildschirmfoto vom 2023-07-07 14-35-43](https://github.com/go-gitea/gitea/assets/47871822/0762c852-eb40-4b00-8757-c5dbfd2ae569)
After: ![Bildschirmfoto vom 2023-07-07 14-32-04](https://github.com/go-gitea/gitea/assets/47871822/0ac42d36-f98f-451a-b556-70c913d19df8) ![Bildschirmfoto vom 2023-07-07 14-31-32](https://github.com/go-gitea/gitea/assets/47871822/520fac9c-33e3-4290-bfe1-6e941f1100f8) ![Bildschirmfoto vom 2023-07-07 14-31-14](https://github.com/go-gitea/gitea/assets/47871822/05ad46bb-3c67-403d-85b8-d12d64f99c59)
--------- Co-authored-by: silverwind --- web_src/css/shared/issuelist.css | 118 ++++++++++++++------------------------- 1 file changed, 41 insertions(+), 77 deletions(-) (limited to 'web_src') diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index 7f9e49831a..82fafedec0 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -3,6 +3,30 @@ margin-top: 1rem; } +.issue.list .item { + display: flex; + align-items: baseline; + padding: 8px 0; +} + +.issue.list .item .issue-item-left { + display: flex; + align-items: flex-start; +} + +.issue.list .item .issue-item-main { + display: flex; + flex-direction: column; + width: 100%; +} + +.issue.list .item .issue-item-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + .issue.list a:not(.label):hover { color: var(--color-primary) !important; } @@ -12,14 +36,13 @@ margin-top: 1px; } -.issue.list > .item .issue-item-icons-right > * + * { - margin-left: 0.5rem; +.issue.list .item .issue-item-right { + display: flex; + gap: 0.5rem; } -.issue.list > .item .issue-item-main { - flex: 1; - display: flex; - flex-direction: column; +.issue.list > .action-item { + align-items: normal; } .issue.list > .item .action-item-center { @@ -37,7 +60,7 @@ color: var(--color-text-light); } -.issue.list > .item .issue-item-top-row { +.issue.list > .item .issue-item-title { max-width: 100%; color: var(--color-text); font-size: 16px; @@ -45,7 +68,7 @@ font-weight: var(--font-weight-semibold); } -.issue.list > .item .issue-item-top-row a.index { +.issue.list > .item .issue-item-title a.index { max-width: fit-content; display: -webkit-box; -webkit-box-orient: vertical; @@ -54,108 +77,49 @@ word-break: break-all; } -.issue.list > .item .labels-list { - position: relative; - top: -1.5px; +.issue.list > .item .title { + color: var(--color-text); + overflow-wrap: anywhere; } -.issue.list > .item .issue-item-bottom-row { +.issue.list > .item .issue-item-body { font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; - margin: .125rem 0; -} - -.issue.list > .item .title { - color: var(--color-text); - word-break: break-word; -} - -.issue.list > .item .issue-item-icon-right { - min-width: 2rem; -} - -.issue.list > .item .assignee { - position: relative; - top: -2px; -} - -.issue.list > .item .assignee img { - margin-right: 2px; -} - -.issue.list > .item .desc { + gap: .25rem; color: var(--color-text-light-2); } -.issue.list > .item .desc a { +.issue.list > .item .issue-item-body a { color: inherit; word-break: break-word; } -.issue.list > .item .desc .time-since, -.issue.list > .item .desc a { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - -.issue.list > .item .desc .waiting, -.issue.list > .item .desc .approvals, -.issue.list > .item .desc .rejects { - padding-left: 5px; -} - -.issue.list > .item .desc .checklist { - padding-left: 5px; -} - -.issue.list > .item .desc .checklist progress { +.issue.list > .item .issue-item-body .checklist progress { margin-left: 2px; width: 80px; height: 6px; display: inline-block; border-radius: 3px; - vertical-align: 2px !important; } -.issue.list > .item .desc .checklist progress::-webkit-progress-value { +.issue.list > .item .issue-item-body .checklist progress::-webkit-progress-value { background-color: var(--color-secondary-dark-4); } -.issue.list > .item .desc .checklist progress::-moz-progress-bar { +.issue.list > .item .issue-item-body .checklist progress::-moz-progress-bar { background-color: var(--color-secondary-dark-4); } -.issue.list > .item .desc .conflicting { - padding-left: 5px; -} - -.issue.list > .item .desc .due-date { - padding-left: 5px; -} - -.issue.list > .item .desc a.milestone, -.issue.list > .item .desc a.project { - margin-left: 5px; -} - -.issue.list > .item .desc a.ref { - margin-left: 8px; -} - -.issue.list > .item .desc a.ref span { - margin-right: -4px; -} - .issue.list .branches { display: inline-flex; - padding: 0 4px; } .issue.list .branches .branch { background-color: var(--color-secondary-alpha-40); border-radius: 3px; + padding: 0 4px; } .issue.list .branches .truncated-name { -- cgit v1.2.3