TRKJ/gitea
2
0
Fork 0
mirror of https://gitee.com/gitea/gitea synced 2025-11-04 00:20:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Project board improvements (#15429) (#15560)

Browse Source 
* 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>

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind
2021-04-20 21:45:00 +02:00
committed by GitHub
parent 5da024a019
commit 990c6089db
7 changed files with 141 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/js/features/projects.js
View File

@@ -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: {

22
web_src/less/_base.less
View File

@@ -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%;

76
web_src/less/_repository.less
View File

@@ -2874,82 +2874,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;
}

83
web_src/less/features/projects.less Normal file
View File

@@ -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;
}

1
web_src/less/index.less
View File

@@ -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";

5
web_src/less/themes/theme-arc-green.less
View File

@@ -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);
}