Skip to content

Commit 990c608

Browse files
silverwindlunny6543techknowlogick
authored
Project board improvements (#15429) (#15560)
* Project board improvements - Fix link colors - Extract CSS to own file - Various minor tweaks to make it look better Fixes: #15424 Fixes: #15506 Fixes: #15511 * fix squashed cards on small view area * more css fixes, add second row from issue list Co-authored-by: Lunny Xiao <[email protected]> Co-authored-by: 6543 <[email protected]> Co-authored-by: techknowlogick <[email protected]> Co-authored-by: Lunny Xiao <[email protected]> Co-authored-by: 6543 <[email protected]> Co-authored-by: techknowlogick <[email protected]>
1 parent 5da024a commit 990c608

File tree

7 files changed

+141
-104
lines changed

7 files changed

+141
-104
lines changed

‎templates/repo/projects/view.tmpl

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,13 @@
7373
{{ range $board := .Boards }}
7474

7575
<div class="ui segment board-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
76-
<div class="board-column-header">
77-
<div class="ui large label board-label">{{.Title}}</div>
76+
<div class="board-column-header df ac sb">
77+
<div class="ui large label board-label py-2">{{.Title}}</div>
7878
{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
79-
<div class="ui dropdown jump item poping up right" data-variation="tiny inverted">
80-
<span class="ui text">
81-
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-kebab-horizontal" 24}}</span>
82-
</span>
79+
<div class="ui dropdown jump item poping up" data-variation="tiny inverted">
80+
<div class="not-mobile px-3" tabindex="-1">
81+
{{svg "octicon-kebab-horizontal"}}
82+
</div>
8383
<div class="menu user-menu" tabindex="-1">
8484
<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
8585
{{svg "octicon-pencil"}}
@@ -156,9 +156,9 @@
156156

157157
<!-- start issue card -->
158158
<div class="card board-card" data-issue="{{.ID}}">
159-
<div class="content">
159+
<div class="content p-0">
160160
<div class="header">
161-
<span>
161+
<span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">
162162
{{if .IsPull}}
163163
{{if .PullRequest.HasMerged}}
164164
{{svg "octicon-git-merge" 16 "text purple"}}
@@ -177,29 +177,47 @@
177177
{{end}}
178178
{{end}}
179179
</span>
180-
<a class="project-board-title" href="{{$.RepoLink}}/issues/{{.Index}}">#{{.Index}} {{.Title}}</a>
180+
<a class="project-board-title vm" href="{{$.RepoLink}}/issues/{{.Index}}">
181+
{{.Title}}
182+
</a>
183+
</div>
184+
<div class="meta my-2">
185+
<span class="text light grey">
186+
#{{.Index}}
187+
{{ $timeStr := TimeSinceUnix .GetLastEventTimestamp $.Lang }}
188+
{{if .OriginalAuthor }}
189+
{{$.i18n.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor | Safe}}
190+
{{else if gt .Poster.ID 0}}
191+
{{$.i18n.Tr .GetLastEventLabel $timeStr .Poster.HomeLink (.Poster.GetDisplayName | Escape) | Safe}}
192+
{{else}}
193+
{{$.i18n.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
194+
{{end}}
195+
</span>
181196
</div>
182197
{{- if .MilestoneID }}
183-
<div class="meta">
198+
<div class="meta my-2">
184199
<a class="milestone" href="{{$.RepoLink}}/milestone/{{ .MilestoneID}}">
185-
{{svg "octicon-milestone"}} {{ .Milestone.Name }}
200+
{{svg "octicon-milestone" 16 "mr-2 vm"}}
201+
<span class="vm">{{ .Milestone.Name }}</span>
186202
</a>
187203
</div>
188204
{{- end }}
189205
{{- range index $.LinkedPRs .ID }}
190-
<div class="meta">
206+
<div class="meta my-2">
191207
<a href="{{$.RepoLink}}/pulls/{{ .Index }}">
192-
<span class="{{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge"}}</span>
193-
{{ .Title}} (#{{ .Index }})
208+
<span class="m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "mr-2 vm"}}</span>
209+
<span class="vm">{{ .Title}} <span class="text light grey">#{{.Index}}</span></span>
194210
</a>
195211
</div>
196212
{{- end }}
197213
</div>
198-
<div class="extra content">
199-
{{ range .Labels }}
200-
<a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}; margin-bottom: 3px;" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
201-
{{ end }}
202-
</div>
214+
{{if .Labels}}
215+
<div class="extra content labels-list p-0 pt-2">
216+
{{ range .Labels }}
217+
<a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
218+
{{ end }}
219+
</div>
220+
{{end}}
203221
</div>
204222
<!-- stop issue card -->
205223

‎web_src/js/features/projects.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default async function initProject() {
1414
group: 'board-column',
1515
draggable: '.board-column',
1616
animation: 150,
17+
ghostClass: 'card-ghost',
1718
onSort: () => {
1819
const board = document.getElementsByClassName('board')[0];
1920
const boardColumns = board.getElementsByClassName('board-column');
@@ -42,6 +43,7 @@ export default async function initProject() {
4243
{
4344
group: 'shared',
4445
animation: 150,
46+
ghostClass: 'card-ghost',
4547
onAdd: (e) => {
4648
$.ajax(`${e.to.dataset.url}/${e.item.dataset.issue}`, {
4749
headers: {

‎web_src/less/_base.less

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
--color-expand-button: #d8efff;
112112
--color-placeholder-text: #aaa;
113113
--color-editor-line-highlight: var(--color-primary-light-6);
114+
--color-project-board-bg: var(--color-secondary-light-4);
114115
/* backgrounds */
115116
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
116117
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -442,6 +443,16 @@ a.muted:hover,
442443
color: var(--color-text);
443444
}
444445

446+
.ui.cards > .card .meta > a:not(.ui),
447+
.ui.card .meta > a:not(.ui) {
448+
color: var(--color-text-light-2);
449+
}
450+
451+
.ui.cards > .card .meta > a:not(.ui):hover,
452+
.ui.card .meta > a:not(.ui):hover {
453+
color: var(--color-text);
454+
}
455+
445456
.ui.cards a.card:hover,
446457
.ui.link.cards .card:not(.icon):hover,
447458
a.ui.card:hover,
@@ -450,6 +461,12 @@ a.ui.card:hover,
450461
background: var(--color-card);
451462
}
452463

464+
.ui.cards > .card > .extra,
465+
.ui.card > .extra {
466+
color: var(--color-text);
467+
border-top-color: var(--color-secondary-light-1) !important;
468+
}
469+
453470
.ui.comments .comment .text,
454471
.ui.comments .comment .author {
455472
color: var(--color-text);
@@ -1733,11 +1750,6 @@ a.ui.basic.label:hover {
17331750
margin-bottom: .4em;
17341751
}
17351752

1736-
.ui.cards > .card > .extra,
1737-
.ui.card > .extra {
1738-
color: var(--color-text);
1739-
}
1740-
17411753
.color-icon {
17421754
display: inline-block;
17431755
border-radius: 100%;

‎web_src/less/_repository.less

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -2874,82 +2874,6 @@ tbody.commit-list {
28742874
padding-top: 0 !important;
28752875
}
28762876

2877-
.board {
2878-
display: flex;
2879-
flex-direction: row;
2880-
flex-wrap: nowrap;
2881-
overflow-x: auto;
2882-
margin: 0 .5em;
2883-
}
2884-
2885-
.board-column {
2886-
background-color: rgba(0, 0, 0, .05) !important;
2887-
border: 1px solid var(--color-secondary) !important;
2888-
margin: 0 .5rem !important;
2889-
padding: .5rem !important;
2890-
width: 320px;
2891-
height: 60vh;
2892-
overflow-y: scroll;
2893-
flex: 0 0 auto;
2894-
overflow: visible;
2895-
display: flex;
2896-
flex-direction: column;
2897-
}
2898-
2899-
.board-column-header {
2900-
display: flex;
2901-
justify-content: space-between;
2902-
}
2903-
2904-
.board-label {
2905-
background: none !important;
2906-
line-height: 1.25 !important;
2907-
}
2908-
2909-
.board-column > .cards {
2910-
flex: 1;
2911-
display: flex;
2912-
flex-direction: column;
2913-
margin: 0 !important;
2914-
padding: 0 !important;
2915-
2916-
.card .meta > a.milestone {
2917-
color: #999999;
2918-
}
2919-
}
2920-
2921-
.board-column > .divider {
2922-
margin: 5px 0;
2923-
}
2924-
2925-
.board-column:first-child {
2926-
margin-left: auto !important;
2927-
}
2928-
2929-
.board-column:last-child {
2930-
margin-right: auto !important;
2931-
}
2932-
2933-
.board-card {
2934-
margin: 3px !important;
2935-
width: auto !important;
2936-
background-color: #fff;
2937-
border-radius: 5px;
2938-
cursor: pointer;
2939-
}
2940-
2941-
.board-card .header {
2942-
font-size: 1.1em !important;
2943-
}
2944-
2945-
.board-card .content {
2946-
padding: 8px 8px 5px !important;
2947-
}
2948-
2949-
.board-card .extra.content {
2950-
padding: 5px 8px !important;
2951-
}
2952-
29532877
td.blob-excerpt {
29542878
background-color: #fafafa;
29552879
}

‎web_src/less/features/projects.less

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.board {
2+
display: flex;
3+
flex-direction: row;
4+
flex-wrap: nowrap;
5+
overflow-x: auto;
6+
margin: 0 .5em;
7+
}
8+
9+
.board-column {
10+
background-color: var(--color-project-board-bg) !important;
11+
border: 1px solid var(--color-secondary) !important;
12+
margin: 0 .5rem !important;
13+
padding: .5rem !important;
14+
width: 320px;
15+
height: 60vh;
16+
overflow-y: scroll;
17+
flex: 0 0 auto;
18+
overflow: visible;
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
23+
.board-column-header {
24+
display: flex;
25+
justify-content: space-between;
26+
}
27+
28+
.board-label {
29+
background: none !important;
30+
line-height: 1.25 !important;
31+
}
32+
33+
.board-column > .cards {
34+
flex: 1;
35+
display: flex;
36+
margin: 0 !important;
37+
padding: 0 !important;
38+
flex-wrap: nowrap !important;
39+
flex-direction: column;
40+
}
41+
42+
.project-board-title {
43+
word-break: break-word;
44+
}
45+
46+
.board-column > .divider {
47+
margin: 5px 0;
48+
}
49+
50+
.board-column:first-child {
51+
margin-left: auto !important;
52+
}
53+
54+
.board-column:last-child {
55+
margin-right: auto !important;
56+
}
57+
58+
.board-card {
59+
margin: 4px 2px !important;
60+
border-radius: 5px !important;
61+
cursor: move;
62+
width: calc(100% - 4px) !important;
63+
padding: .5rem !important;
64+
min-height: auto !important;
65+
}
66+
67+
.board-card .meta * {
68+
margin-right: 0 !important;
69+
}
70+
71+
.board-card .header {
72+
margin-top: 0 !important;
73+
font-size: 16px !important;
74+
}
75+
76+
.card-ghost {
77+
border-style: dashed !important;
78+
background: none !important;
79+
}
80+
81+
.card-ghost * {
82+
opacity: 0;
83+
}

‎web_src/less/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "./features/heatmap.less";
99
@import "./features/imagediff.less";
1010
@import "./features/codeeditor.less";
11+
@import "./features/projects.less";
1112
@import "./markdown/mermaid.less";
1213

1314
@import "./chroma/base.less";

‎web_src/less/themes/theme-arc-green.less

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
--color-expand-button: #3c404d;
108108
--color-placeholder-text: #6a737d;
109109
--color-editor-line-highlight: var(--color-primary-light-5);
110+
--color-project-board-bg: var(--color-secondary-light-2);
110111
}
111112

112113
.ui.horizontal.segments > .segment {
@@ -690,10 +691,6 @@ footer .container .links > * {
690691
border-color: #383c4a;
691692
}
692693

693-
.board-column {
694-
background-color: rgba(0, 0, 0, .2) !important;
695-
}
696-
697694
.tribute-container {
698695
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
699696
}

0 commit comments

Comments
 (0)