mirror of
https://github.com/go-gitea/gitea
synced 2024-11-16 06:51:29 +01:00
fb1a2a13f0
Original Issue: https://github.com/go-gitea/gitea/issues/22102 This addition would be a big benefit for design and art teams using the issue tracking. The preview will be the latest "image type" attachments on an issue- simple, and allows for automatic updates of the cover image as issue progress is made! This would make Gitea competitive with Trello... wouldn't it be amazing to say goodbye to Atlassian products? Ha. First image is the most recent, the SQL will fetch up to 5 latest images (URL string). All images supported by browsers plus upcoming formats: *.avif *.bmp *.gif *.jpg *.jpeg *.jxl *.png *.svg *.webp The CSS will try to center-align images until it cannot, then it will left align with overflow hidden. Single images get to be slightly larger! Tested so far on: Chrome, Firefox, Android Chrome, Android Firefox. Current revision with light and dark themes:   --------- Co-authored-by: Jason Song <i@wolfogre.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: delvh <dev.lh@web.de>
147 lines
2.5 KiB
Text
147 lines
2.5 KiB
Text
.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: calc(100vh - 450px);
|
|
min-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;
|
|
|
|
&.dark-label {
|
|
color: var(--color-project-board-dark-label) !important;
|
|
|
|
.board-label {
|
|
color: var(--color-project-board-dark-label) !important;
|
|
}
|
|
}
|
|
&.light-label {
|
|
color: var(--color-project-board-light-label) !important;
|
|
|
|
.board-label {
|
|
color: var(--color-project-board-light-label) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.board-label {
|
|
background: none !important;
|
|
line-height: 1.25 !important;
|
|
}
|
|
|
|
.board-column > .cards {
|
|
flex: 1;
|
|
display: flex;
|
|
align-content: baseline;
|
|
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-column .ui.cards > .card > .content {
|
|
border: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.board-card .card-attachment-images {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.board-card .card-attachment-images img {
|
|
display: inline-block;
|
|
max-height: 50px;
|
|
border-radius: var(--border-radius);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.board-card .card-attachment-images img:only-child {
|
|
max-height: 90px;
|
|
margin: auto;
|
|
}
|
|
|
|
.card-ghost {
|
|
border-style: dashed !important;
|
|
background: none !important;
|
|
}
|
|
|
|
.card-ghost * {
|
|
opacity: 0;
|
|
}
|
|
|
|
.color-field .minicolors.minicolors-theme-default {
|
|
display: block;
|
|
|
|
.minicolors-input {
|
|
height: 38px;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.minicolors-swatch {
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.edit-project-board,
|
|
.new-board-modal {
|
|
.color.picker.column {
|
|
display: flex;
|
|
|
|
.minicolors {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|