diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index aa6abf05110b8..802571293c65b 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,17 +177,17 @@ {{end}} {{end}} - #{{.Index}} {{.Title}} + #{{.Index}} {{.Title}}
{{- if .MilestoneID }} -
+
- {{svg "octicon-milestone"}} {{ .Milestone.Name }} + {{svg "octicon-milestone" 16 "mr-2"}}{{ .Milestone.Name }}
{{- end }} {{- range index $.LinkedPRs .ID }} -
+
{{svg "octicon-git-merge"}} {{ .Title}} (#{{ .Index }}) @@ -195,11 +195,13 @@
{{- 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 91e5c208500e2..0d619cab70ba5 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 cb1cd18e3d662..366ee073b4c03 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 6042a7594899e..7e6f398f3f3bd 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 0000000000000..238d0db6c284c --- /dev/null +++ b/web_src/less/features/projects.less @@ -0,0 +1,77 @@ +.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: 3px !important; + border-radius: 5px !important; + cursor: move; + width: calc(100% - 6px) !important; + padding: .5rem !important; +} + +.board-card .header { + 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 f1ac49a5136b9..c125ccac318d8 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 cd381973c5786..7c084284d1053 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); }