* 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>tags/v1.15.0-rc1
@@ -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 --> | |||
@@ -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: { |
@@ -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%; |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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"; |
@@ -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); | |||
} |