mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-05-22 01:34:18 +00:00
Issue and Pulls lists rework (#13594)
* Issue and Pulls lists rework Reorganized and restyled the issue and pull request lists. * color and layout tweaks * use new issue list on dashboard as well * move pagination into template * misc tweaks * fix label hover * fix milestone list * fix discrepancies between issue and milestone list, add new 'merge' helper * fmt * simplify merge helper * remove whitespace * fix startIndex * further simplify dict merging * rename helper to 'mergeinto' for clarity * allow bottom-row to wrap Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
silverwind
GitHub
parent
00ec651270
commit
6d93a3ab18
12 changed files with 342 additions and 479 deletions
|
|
@ -76,6 +76,7 @@
|
|||
/* target-based colors */
|
||||
--color-body: #ffffff;
|
||||
--color-text: #212121;
|
||||
--color-text-light: #444444;
|
||||
--color-box-header: #f7f7f7;
|
||||
--color-box-body: #ffffff;
|
||||
--color-timeline: #ececec;
|
||||
|
|
@ -141,6 +142,15 @@ strong {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-body);
|
||||
overflow-y: auto;
|
||||
|
|
@ -448,7 +458,7 @@ a:hover,
|
|||
color: var(--color-red) !important;
|
||||
|
||||
a {
|
||||
color: var(--color-red) !important;
|
||||
color: inherit !important;
|
||||
|
||||
&:hover {
|
||||
color: #e67777 !important;
|
||||
|
|
@ -457,19 +467,19 @@ a:hover,
|
|||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--color-primary-dark-1) !important;
|
||||
color: var(--color-primary) !important;
|
||||
|
||||
a {
|
||||
color: var(--color-primary) !important;
|
||||
color: inherit !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-dark-2) !important;
|
||||
color: var(--color-primary-dark-1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.black {
|
||||
color: #444444;
|
||||
color: var(--color-body);
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
|
|
@ -477,13 +487,13 @@ a:hover,
|
|||
}
|
||||
|
||||
&.grey {
|
||||
color: var(--color-grey) !important;
|
||||
color: var(--color-text-light) !important;
|
||||
|
||||
a {
|
||||
color: #444444 !important;
|
||||
color: inherit !important;
|
||||
|
||||
&:hover {
|
||||
color: #000000 !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2586,111 +2586,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.ui.checkbox.issue-checkbox {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.menu .item > img:not(.ui) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.issue.list {
|
||||
list-style: none;
|
||||
|
||||
> .item {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed #aaaaaa;
|
||||
|
||||
.title {
|
||||
color: #444444;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin: 0 6px;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding-right: 10px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding-top: 5px;
|
||||
color: #999999;
|
||||
|
||||
.waiting,
|
||||
.approvals,
|
||||
.rejects {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.checklist {
|
||||
padding-left: 5px;
|
||||
|
||||
.progress-bar {
|
||||
margin-left: 2px;
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
background-color: #eeeeee;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
vertical-align: 2px !important;
|
||||
|
||||
.progress {
|
||||
background-color: #cccccc;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conflicting {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.due-date {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
a.milestone {
|
||||
margin-left: 5px;
|
||||
color: #999999 !important;
|
||||
|
||||
&:hover {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.ref {
|
||||
margin-left: 8px;
|
||||
color: #999999 !important;
|
||||
|
||||
&:hover {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.assignee {
|
||||
margin-top: -5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.overdue {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page.buttons {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
|
@ -2975,15 +2874,31 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.labels.list .item {
|
||||
.labels.list .item,
|
||||
.timeline-item .label {
|
||||
padding: .3em .5em !important;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.labels.list .item + .item {
|
||||
margin-left: 3px;
|
||||
.issue-item-top-row .label {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 1.5px;
|
||||
margin-bottom: 1.5px;
|
||||
}
|
||||
|
||||
.labels.list .item,
|
||||
.timeline-item .label,
|
||||
.issue-item-top-row .label {
|
||||
margin-right: 3px;
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.timeline-item .label:last-of-type,
|
||||
.issue-item-top-row .label:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
tbody.commit-list {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.sb { justify-content: space-between !important; }
|
||||
.fc { flex-direction: column !important; }
|
||||
.f1 { flex: 1 !important; }
|
||||
.fw { flex-wrap: wrap !important; }
|
||||
|
||||
.mono {
|
||||
font-family: var(--fonts-monospace) !important;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import "~font-awesome/css/font-awesome.css";
|
||||
|
||||
@import "./variables.less";
|
||||
@import "./shared/issuelist.less";
|
||||
@import "./features/gitgraph.less";
|
||||
@import "./features/animations.less";
|
||||
@import "./features/heatmap.less";
|
||||
|
|
|
|||
127
web_src/less/shared/issuelist.less
Normal file
127
web_src/less/shared/issuelist.less
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
.issue.list {
|
||||
list-style: none;
|
||||
margin-top: 1rem;
|
||||
|
||||
a:not(.label):hover {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
> .item {
|
||||
.issue-checkbox {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.issue-item-icon svg {
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.issue-item-icons-right > * + * {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.issue-item-main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.issue-item-top-row {
|
||||
max-width: 100%;
|
||||
color: var(--color-text);
|
||||
font-size: 16px;
|
||||
min-width: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.issue-item-bottom-row {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--color-text);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.issue-item-icon-right {
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.assignee {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.assignee img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.time-since,
|
||||
a {
|
||||
margin-left: .25rem;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
.waiting,
|
||||
.approvals,
|
||||
.rejects {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.checklist {
|
||||
padding-left: 5px;
|
||||
|
||||
.progress-bar {
|
||||
margin-left: 2px;
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
background-color: #eeeeee;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
vertical-align: 2px !important;
|
||||
|
||||
.progress {
|
||||
background-color: #cccccc;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conflicting {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.due-date {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
a.milestone {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
a.ref {
|
||||
margin-left: 8px;
|
||||
|
||||
span {
|
||||
margin-right: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.overdue {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item + .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -73,6 +73,7 @@
|
|||
--color-box-header: #454a57;
|
||||
--color-box-body: #353945;
|
||||
--color-text: #b6bac5;
|
||||
--color-text-light: #969aa5;
|
||||
--color-timeline: #4a505c;
|
||||
--color-input-text: #dcdcdc;
|
||||
--color-input-background: #2e323e;
|
||||
|
|
@ -680,18 +681,6 @@ a.ui.basic.label:hover {
|
|||
background-color: #383c4a;
|
||||
}
|
||||
|
||||
.issue.list > .item .title {
|
||||
color: #87ab63;
|
||||
}
|
||||
|
||||
.issue.list > .item .title:hover {
|
||||
color: #a0cc75;
|
||||
}
|
||||
|
||||
.issue.list > .item {
|
||||
border-bottom: 1px dashed #475767;
|
||||
}
|
||||
|
||||
.ui.green.label,
|
||||
.ui.green.labels .label,
|
||||
.ui.basic.green.label {
|
||||
|
|
@ -708,10 +697,6 @@ a.ui.basic.green.label:hover {
|
|||
color: #fff !important;
|
||||
}
|
||||
|
||||
.issue.list > .item .comment {
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
|
||||
.ui.basic.red.active.button,
|
||||
.ui.basic.red.buttons .active.button {
|
||||
box-shadow: 0 0 0 1px #b75252 inset !important;
|
||||
|
|
@ -1019,10 +1004,6 @@ a.ui.basic.green.label:hover {
|
|||
text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
|
||||
}
|
||||
|
||||
.ui .text.grey a {
|
||||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment .content .header {
|
||||
color: #dbdbdb;
|
||||
background-color: var(--color-secondary);
|
||||
|
|
@ -1045,10 +1026,6 @@ a.ui.basic.green.label:hover {
|
|||
background: #353945;
|
||||
}
|
||||
|
||||
.ui .text.grey a:hover {
|
||||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.ui.basic.green.active.button,
|
||||
.ui.basic.green.buttons .active.button {
|
||||
color: #87ab63 !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue