From 5e85cdad29aaca31e40ca2238974f9e3a0ecb1c0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 20 Apr 2021 06:13:03 +0200 Subject: [PATCH] Project board improvements (#15429) * Project board improvements - Fix link colors - Extract CSS to own file - Various minor tweaks to make it look better Fixes: https://github.com/go-gitea/gitea/issues/15424 Fixes: https://github.com/go-gitea/gitea/issues/15506 Fixes: https://github.com/go-gitea/gitea/pull/15511 * fix squashed cards on small view area * more css fixes, add second row from issue list Co-authored-by: Lunny Xiao Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: techknowlogick --- templates/repo/projects/view.tmpl | 56 ++++++++++------ web_src/js/features/projects.js | 2 + web_src/less/_base.less | 22 +++++-- web_src/less/_repository.less | 76 ---------------------- web_src/less/features/projects.less | 83 ++++++++++++++++++++++++ web_src/less/index.less | 1 + web_src/less/themes/theme-arc-green.less | 5 +- 7 files changed, 141 insertions(+), 104 deletions(-) create mode 100644 web_src/less/features/projects.less diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index aa6abf0511..59939af6b9 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -73,13 +73,13 @@ {{ range $board := .Boards }}
-
-
{{.Title}}
+
+
{{.Title}}
{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}} -
- - {{svg "octicon-kebab-horizontal" 24}} - +
+
+ {{svg "octicon-kebab-horizontal"}} +
{{svg "octicon-pencil"}} @@ -156,9 +156,9 @@
-
+
- + {{if .IsPull}} {{if .PullRequest.HasMerged}} {{svg "octicon-git-merge" 16 "text purple"}} @@ -177,29 +177,47 @@ {{end}} {{end}} - #{{.Index}} {{.Title}} + + {{.Title}} + +
+
+ + #{{.Index}} + {{ $timeStr := TimeSinceUnix .GetLastEventTimestamp $.Lang }} + {{if .OriginalAuthor }} + {{$.i18n.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor | Safe}} + {{else if gt .Poster.ID 0}} + {{$.i18n.Tr .GetLastEventLabel $timeStr .Poster.HomeLink (.Poster.GetDisplayName | Escape) | Safe}} + {{else}} + {{$.i18n.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}} + {{end}} +
{{- if .MilestoneID }} -
+
- {{svg "octicon-milestone"}} {{ .Milestone.Name }} + {{svg "octicon-milestone" 16 "mr-2 vm"}} + {{ .Milestone.Name }}
{{- end }} {{- range index $.LinkedPRs .ID }} -
+
- {{svg "octicon-git-merge"}} - {{ .Title}} (#{{ .Index }}) + {{svg "octicon-git-merge" 16 "mr-2 vm"}} + {{ .Title}} #{{.Index}}
{{- end }}
-
- {{ range .Labels }} - {{.Name | RenderEmoji}} - {{ end }} -
+ {{if .Labels}} +
+ {{ range .Labels }} + {{.Name | RenderEmoji}} + {{ end }} +
+ {{end}}
diff --git a/web_src/js/features/projects.js b/web_src/js/features/projects.js index 91e5c20850..0d619cab70 100644 --- a/web_src/js/features/projects.js +++ b/web_src/js/features/projects.js @@ -14,6 +14,7 @@ export default async function initProject() { group: 'board-column', draggable: '.board-column', animation: 150, + ghostClass: 'card-ghost', onSort: () => { const board = document.getElementsByClassName('board')[0]; const boardColumns = board.getElementsByClassName('board-column'); @@ -42,6 +43,7 @@ export default async function initProject() { { group: 'shared', animation: 150, + ghostClass: 'card-ghost', onAdd: (e) => { $.ajax(`${e.to.dataset.url}/${e.item.dataset.issue}`, { headers: { diff --git a/web_src/less/_base.less b/web_src/less/_base.less index cb1cd18e3d..366ee073b4 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -111,6 +111,7 @@ --color-expand-button: #d8efff; --color-placeholder-text: #aaa; --color-editor-line-highlight: var(--color-primary-light-6); + --color-project-board-bg: var(--color-secondary-light-4); /* backgrounds */ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); @@ -442,6 +443,16 @@ a.muted:hover, color: var(--color-text); } +.ui.cards > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: var(--color-text-light-2); +} + +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: var(--color-text); +} + .ui.cards a.card:hover, .ui.link.cards .card:not(.icon):hover, a.ui.card:hover, @@ -450,6 +461,12 @@ a.ui.card:hover, background: var(--color-card); } +.ui.cards > .card > .extra, +.ui.card > .extra { + color: var(--color-text); + border-top-color: var(--color-secondary-light-1) !important; +} + .ui.comments .comment .text, .ui.comments .comment .author { color: var(--color-text); @@ -1733,11 +1750,6 @@ a.ui.basic.label:hover { margin-bottom: .4em; } -.ui.cards > .card > .extra, -.ui.card > .extra { - color: var(--color-text); -} - .color-icon { display: inline-block; border-radius: 100%; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 6042a75948..7e6f398f3f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2940,82 +2940,6 @@ tbody.commit-list { padding-top: 0 !important; } -.board { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - overflow-x: auto; - margin: 0 .5em; -} - -.board-column { - background-color: rgba(0, 0, 0, .05) !important; - border: 1px solid var(--color-secondary) !important; - margin: 0 .5rem !important; - padding: .5rem !important; - width: 320px; - height: 60vh; - overflow-y: scroll; - flex: 0 0 auto; - overflow: visible; - display: flex; - flex-direction: column; -} - -.board-column-header { - display: flex; - justify-content: space-between; -} - -.board-label { - background: none !important; - line-height: 1.25 !important; -} - -.board-column > .cards { - flex: 1; - display: flex; - flex-direction: column; - margin: 0 !important; - padding: 0 !important; - - .card .meta > a.milestone { - color: #999999; - } -} - -.board-column > .divider { - margin: 5px 0; -} - -.board-column:first-child { - margin-left: auto !important; -} - -.board-column:last-child { - margin-right: auto !important; -} - -.board-card { - margin: 3px !important; - width: auto !important; - background-color: #fff; - border-radius: 5px; - cursor: pointer; -} - -.board-card .header { - font-size: 1.1em !important; -} - -.board-card .content { - padding: 8px 8px 5px !important; -} - -.board-card .extra.content { - padding: 5px 8px !important; -} - td.blob-excerpt { background-color: #fafafa; } diff --git a/web_src/less/features/projects.less b/web_src/less/features/projects.less new file mode 100644 index 0000000000..f9d97a2086 --- /dev/null +++ b/web_src/less/features/projects.less @@ -0,0 +1,83 @@ +.board { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + margin: 0 .5em; +} + +.board-column { + background-color: var(--color-project-board-bg) !important; + border: 1px solid var(--color-secondary) !important; + margin: 0 .5rem !important; + padding: .5rem !important; + width: 320px; + height: 60vh; + overflow-y: scroll; + flex: 0 0 auto; + overflow: visible; + display: flex; + flex-direction: column; +} + +.board-column-header { + display: flex; + justify-content: space-between; +} + +.board-label { + background: none !important; + line-height: 1.25 !important; +} + +.board-column > .cards { + flex: 1; + display: flex; + margin: 0 !important; + padding: 0 !important; + flex-wrap: nowrap !important; + flex-direction: column; +} + +.project-board-title { + word-break: break-word; +} + +.board-column > .divider { + margin: 5px 0; +} + +.board-column:first-child { + margin-left: auto !important; +} + +.board-column:last-child { + margin-right: auto !important; +} + +.board-card { + margin: 4px 2px !important; + border-radius: 5px !important; + cursor: move; + width: calc(100% - 4px) !important; + padding: .5rem !important; + min-height: auto !important; +} + +.board-card .meta * { + margin-right: 0 !important; +} + +.board-card .header { + margin-top: 0 !important; + font-size: 16px !important; +} + +.card-ghost { + border-style: dashed !important; + background: none !important; +} + +.card-ghost * { + opacity: 0; +} diff --git a/web_src/less/index.less b/web_src/less/index.less index f1ac49a513..c125ccac31 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -8,6 +8,7 @@ @import "./features/heatmap.less"; @import "./features/imagediff.less"; @import "./features/codeeditor.less"; +@import "./features/projects.less"; @import "./markdown/mermaid.less"; @import "./chroma/base.less"; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index cd381973c5..7c084284d1 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -107,6 +107,7 @@ --color-expand-button: #3c404d; --color-placeholder-text: #6a737d; --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); } .ui.horizontal.segments > .segment { @@ -690,10 +691,6 @@ footer .container .links > * { border-color: #383c4a; } -.board-column { - background-color: rgba(0, 0, 0, .2) !important; -} - .tribute-container { box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6); }