From be23b73e8523738a1d3c214a01c0f162146da1c0 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Sun, 9 Jul 2023 21:38:01 +0200 Subject: [PATCH] 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 --- templates/package/shared/list.tmpl | 6 +- templates/package/shared/versionlist.tmpl | 6 +- templates/repo/actions/runs_list.tmpl | 12 +-- templates/shared/issuelist.tmpl | 120 +++++++++++----------- web_src/css/shared/issuelist.css | 118 ++++++++------------- 5 files changed, 114 insertions(+), 148 deletions(-) diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl index b2f339285f..79a2d885fb 100644 --- a/templates/package/shared/list.tmpl +++ b/templates/package/shared/list.tmpl @@ -14,13 +14,13 @@
{{range .PackageDescriptors}} -
  • +
  • -
    +
    {{.Package.Name}} {{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}
    -
    +
    {{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}} {{$hasRepositoryAccess := false}} {{if .Repository}} diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl index afd92efff9..feba8ef145 100644 --- a/templates/package/shared/versionlist.tmpl +++ b/templates/package/shared/versionlist.tmpl @@ -20,12 +20,12 @@
    {{range .PackageDescriptors}} -
  • +
  • -
    + -
    +
    {{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}}
    diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index ce664eb458..87b5ed69de 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -6,17 +6,17 @@
    {{end}} {{range .Runs}} -
  • -
    +
  • +
    {{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
    -
    + -
    +
    {{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}} : {{$.locale.Tr "actions.runs.commit"}} {{ShortSha .CommitSHA}} @@ -32,8 +32,8 @@ {{end}}
    -
    {{svg "octicon-calendar" 16 "gt-mr-2"}}{{TimeSinceUnix .Updated $.locale}}
    -
    {{svg "octicon-stopwatch" 16 "gt-mr-2"}}{{.Duration}}
    +
    {{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated $.locale}}
    +
    {{svg "octicon-stopwatch" 16}}{{.Duration}}
  • {{end}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 6d61b9fa99..7d80e04736 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -1,8 +1,8 @@
    {{$approvalCounts := .ApprovalCounts}} {{range .Issues}} -
  • -
    +
  • +
    {{if $.CanWriteIssuesOrPulls}} {{end}} @@ -11,21 +11,49 @@
  • -
    - {{RenderEmoji $.Context .Title | RenderCodeBlock}} - {{if .IsPull}} - {{if (index $.CommitStatuses .PullRequest.ID)}} - {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} +
    +
    + {{RenderEmoji $.Context .Title | RenderCodeBlock}} + {{if .IsPull}} + {{if (index $.CommitStatuses .PullRequest.ID)}} + {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} + {{end}} {{end}} + + {{range .Labels}} + {{RenderLabel $.Context .}} + {{end}} + +
    + {{if or .TotalTrackedTime .Assignees .NumComments}} +
    + {{if .TotalTrackedTime}} +
    + {{svg "octicon-clock" 16}} + {{.TotalTrackedTime | Sec2Time}} +
    + {{end}} + {{if .Assignees}} +
    + {{range .Assignees}} + + {{avatar $.Context . 20}} + + {{end}} +
    + {{end}} + {{if .NumComments}} + + {{end}} +
    {{end}} - - {{range .Labels}} - {{RenderLabel $.Context .}} - {{end}} -
    -
    - +
    + {{if eq $.listType "dashboard"}} {{.Repo.FullName}}#{{.Index}} {{else}} @@ -41,14 +69,14 @@ {{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}} {{end}} {{if .IsPull}} -
    +
    - {{svg "gitea-double-chevron-left" 12 "gt-mx-1"}} + {{svg "gitea-double-chevron-left" 12}} {{if .PullRequest.HeadRepo}} {{end}} {{if and .Milestone (ne $.listType "milestone")}} - - {{svg "octicon-milestone" 14 "gt-mr-2"}}{{.Milestone.Name}} + + {{svg "octicon-milestone" 14}}{{.Milestone.Name}} {{end}} {{if .Project}} - - {{svg .Project.IconName 14 "gt-mr-2"}}{{.Project.Title}} + + {{svg .Project.IconName 14}}{{.Project.Title}} {{end}} {{if .Ref}} - - {{svg "octicon-git-branch" 14 "gt-mr-2"}}{{index $.IssueRefEndNames .ID}} + + {{svg "octicon-git-branch" 14}}{{index $.IssueRefEndNames .ID}} {{end}} {{$tasks := .GetTasks}} {{if gt $tasks 0}} {{$tasksDone := .GetTasksDone}} - - {{svg "octicon-checklist" 14 "gt-mr-2"}}{{$tasksDone}} / {{$tasks}} + + {{svg "octicon-checklist" 14}}{{$tasksDone}} / {{$tasks}} {{end}} {{if ne .DeadlineUnix 0}} - + - {{svg "octicon-calendar" 14 "gt-mr-2"}} + {{svg "octicon-calendar" 14}} {{DateTime "short" .DeadlineUnix}} @@ -95,25 +123,25 @@ {{$rejectOfficial := call $approvalCounts .ID "reject"}} {{$waitingOfficial := call $approvalCounts .ID "waiting"}} {{if gt $approveOfficial 0}} - - {{svg "octicon-check" 14 "gt-mr-1"}} + + {{svg "octicon-check" 14}} {{$.locale.TrN $approveOfficial "repo.pulls.approve_count_1" "repo.pulls.approve_count_n" $approveOfficial}} {{end}} {{if gt $rejectOfficial 0}} - - {{svg "octicon-diff" 14 "gt-mr-2"}} + + {{svg "octicon-diff" 14}} {{$.locale.TrN $rejectOfficial "repo.pulls.reject_count_1" "repo.pulls.reject_count_n" $rejectOfficial}} {{end}} {{if gt $waitingOfficial 0}} - - {{svg "octicon-eye" 14 "gt-mr-2"}} + + {{svg "octicon-eye" 14}} {{$.locale.TrN $waitingOfficial "repo.pulls.waiting_count_1" "repo.pulls.waiting_count_n" $waitingOfficial}} {{end}} {{if and (not .PullRequest.HasMerged) (gt (len .PullRequest.ConflictedFiles) 0)}} - + {{svg "octicon-x" 14}} {{$.locale.TrN (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n" (len .PullRequest.ConflictedFiles)}} @@ -121,32 +149,6 @@ {{end}}
    - {{if or .TotalTrackedTime .Assignees .NumComments}} -
    - {{if .TotalTrackedTime}} -
    - {{svg "octicon-clock" 16 "gt-mr-2"}} - {{.TotalTrackedTime | Sec2Time}} -
    - {{end}} - {{if .Assignees}} -
    - {{range .Assignees}} - - {{avatar $.Context . 20}} - - {{end}} -
    - {{end}} - {{if .NumComments}} - - {{end}} -
    - {{end}} {{end}} {{if .IssueIndexerUnavailable}} 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 {