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 <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
index aa6abf05110b8cd1eea911d9a8697ac0831836e7..59939af6b93601e0d616eb7030fbe30d0a06833c 100644 (file)
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@@ -73,13 +73,13 @@
                        {{ range $board := .Boards }}
 
                        <div class="ui segment board-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
-                               <div class="board-column-header">
-                                       <div class="ui large label board-label">{{.Title}}</div>
+                               <div class="board-column-header df ac sb">
+                                       <div class="ui large label board-label py-2">{{.Title}}</div>
                                        {{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
-                                               <div class="ui dropdown jump item poping up right" data-variation="tiny inverted">
-                                                       <span class="ui text">
-                                                               <span class="fitted not-mobile" tabindex="-1">{{svg "octicon-kebab-horizontal" 24}}</span>
-                                                       </span>
+                                               <div class="ui dropdown jump item poping up" data-variation="tiny inverted">
+                                                       <div class="not-mobile px-3" tabindex="-1">
+                                                               {{svg "octicon-kebab-horizontal"}}
+                                                       </div>
                                                        <div class="menu user-menu" tabindex="-1">
                                                                <a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
                                                                        {{svg "octicon-pencil"}}
@@ -156,9 +156,9 @@
 
                                        <!-- start issue card -->
                                        <div class="card board-card" data-issue="{{.ID}}">
-                                               <div class="content">
+                                               <div class="content p-0">
                                                        <div class="header">
-                                                               <span>
+                                                               <span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">
                                                                        {{if .IsPull}}
                                                                                {{if .PullRequest.HasMerged}}
                                                                                        {{svg "octicon-git-merge" 16 "text purple"}}
@@ -177,29 +177,47 @@
                                                                                {{end}}
                                                                        {{end}}
                                                                </span>
-                                                               <a class="project-board-title" href="{{$.RepoLink}}/issues/{{.Index}}">#{{.Index}} {{.Title}}</a>
+                                                               <a class="project-board-title vm" href="{{$.RepoLink}}/issues/{{.Index}}">
+                                                                       {{.Title}}
+                                                               </a>
+                                                       </div>
+                                                       <div class="meta my-2">
+                                                               <span class="text light grey">
+                                                                       #{{.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}}
+                                                               </span>
                                                        </div>
                                                        {{- if .MilestoneID }}
-                                                       <div class="meta">
+                                                       <div class="meta my-2">
                                                                <a class="milestone" href="{{$.RepoLink}}/milestone/{{ .MilestoneID}}">
-                                                                       {{svg "octicon-milestone"}} {{ .Milestone.Name }}
+                                                                       {{svg "octicon-milestone" 16 "mr-2 vm"}}
+                                                                       <span class="vm">{{ .Milestone.Name }}</span>
                                                                </a>
                                                        </div>
                                                        {{- end }}
                                                        {{- range index $.LinkedPRs .ID }}
-                                                       <div class="meta">
+                                                       <div class="meta my-2">
                                                                <a href="{{$.RepoLink}}/pulls/{{ .Index }}">
-                                                                       <span class="{{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge"}}</span>
-                                                                       {{ .Title}} (#{{ .Index }})
+                                                                       <span class="m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "mr-2 vm"}}</span>
+                                                                       <span class="vm">{{ .Title}} <span class="text light grey">#{{.Index}}</span></span>
                                                                </a>
                                                        </div>
                                                        {{- end }}
                                                </div>
-                                               <div class="extra content">
-                                                       {{ range .Labels }}
-                                                       <a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}; margin-bottom: 3px;" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
-                                                       {{ end }}
-                                               </div>
+                                               {{if .Labels}}
+                                                       <div class="extra content labels-list p-0 pt-2">
+                                                               {{ range .Labels }}
+                                                               <a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
+                                                               {{ end }}
+                                                       </div>
+                                               {{end}}
                                        </div>
                                        <!-- stop issue card -->
 

diff --git a/web_src/js/features/projects.js b/web_src/js/features/projects.js
index 91e5c208500e293dcda2fb99d5fb7a3abc53cca8..0d619cab70ba5628c42361fb7a1049563141fbd4 100644 (file)
--- 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 cb1cd18e3d662d56eca326253a879d203209f47c..366ee073b4c038f424d2a8c0fadfb1f6f475b264 100644 (file)
--- 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,<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>');
   --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,
   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 6042a7594899e9033c1540c9bf04f98b18377469..7e6f398f3f3bde4bd6784585d4340f0e301e5842 100644 (file)
--- 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 (file)
index 0000000..f9d97a2
--- /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 f1ac49a5136b9d3161025105e7cf2d91243a8180..c125ccac318d8b07c0073a75e64254f9178a8eeb 100644 (file)
--- 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 cd381973c5786d82be1a9c553c9e9a54a96d866a..7c084284d1053060a8b8ed7cf1bf108f4fad3a55 100644 (file)
--- 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);
 }