fix: Align card details better to take less space
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
@@ -249,7 +249,6 @@ export default {
|
||||
padding: $stack-spacing;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
padding-top: 15px;
|
||||
margin-top: -10px;
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@@ -346,7 +346,7 @@ export default {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: calc(100% - 16px);
|
||||
height: 20px;
|
||||
top: 30px;
|
||||
left: 0px;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<div class="avatars">
|
||||
<div class="avatar-list" @click.stop="togglePopover">
|
||||
<div v-if="popover.length > 0">
|
||||
<div class="avatardiv icon-more" />
|
||||
<AccountMultiple class="avatardiv more-avatars" :size="24" />
|
||||
</div>
|
||||
<div v-for="user in firstUsers" :key="user.id">
|
||||
<NcAvatar v-if="user.type === 0"
|
||||
@@ -72,12 +72,14 @@
|
||||
<script>
|
||||
import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
|
||||
|
||||
export default {
|
||||
name: 'AvatarList',
|
||||
components: {
|
||||
NcAvatar,
|
||||
NcPopoverMenu,
|
||||
AccountMultiple,
|
||||
},
|
||||
directives: {
|
||||
tooltip: Tooltip,
|
||||
@@ -151,7 +153,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.avatars {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
:deep(.popovermenu) {
|
||||
@@ -173,25 +174,29 @@ export default {
|
||||
display: inline-flex;
|
||||
padding-right: $avatar-offset;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
& > div {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.avatardiv,
|
||||
:deep(.avatardiv) {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: content-box !important;
|
||||
margin-right: -$avatar-offset;
|
||||
transition: margin-right 0.2s ease-in-out;
|
||||
border: 2px solid var(--color-main-background);
|
||||
}
|
||||
|
||||
&.icon-more {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
opacity: .5;
|
||||
background-color: var(--color-background-dark) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover div:nth-child(n+2) :deep(.avatardiv) {
|
||||
margin-right: 1px;
|
||||
.more-avatars {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--color-background-dark) !important;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popovermenu {
|
||||
|
||||
@@ -22,46 +22,66 @@
|
||||
|
||||
<template>
|
||||
<div v-if="card" class="badges">
|
||||
<CardId v-if="idBadge" class="icon-badge" :card="card" />
|
||||
<div v-if="card.commentsCount > 0"
|
||||
v-tooltip="commentsHint"
|
||||
class="icon-badge"
|
||||
@click.stop="openComments">
|
||||
<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
|
||||
<CommentIcon v-else :size="16" />
|
||||
<span>{{ card.commentsCount }}</span>
|
||||
<div class="badge-left">
|
||||
<DueDate v-if="card.duedate || card.done" :card="card" />
|
||||
|
||||
<div class="inline-badges">
|
||||
<CardId v-if="idBadge" class="icon-badge" :card="card" />
|
||||
|
||||
<div v-if="card.commentsCount > 0"
|
||||
v-tooltip="commentsHint"
|
||||
class="icon-badge"
|
||||
@click.stop="openComments">
|
||||
<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
|
||||
<CommentIcon v-else :size="16" />
|
||||
<span>{{ card.commentsCount }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="card.description && checkListCount > 0" class="icon-badge">
|
||||
<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
|
||||
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="card.description && card.description.trim() && checkListCount == 0" class="icon-badge">
|
||||
<TextIcon :size="16" decorative />
|
||||
</div>
|
||||
|
||||
<div v-if="card.attachmentCount > 0" class="icon-badge">
|
||||
<AttachmentIcon :size="16" />
|
||||
<span>{{ card.attachmentCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="card.description && checkListCount > 0" class="icon-badge">
|
||||
<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
|
||||
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
|
||||
<div class="badge-right">
|
||||
<NcAvatarList :users="card.assignedUsers" :size="32" />
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<TextIcon v-else-if="card.description && card.description.trim() && checkListCount == 0" :size="16" decorative />
|
||||
|
||||
<div v-if="card.attachmentCount > 0" class="icon-badge">
|
||||
<AttachmentIcon :size="16" />
|
||||
<span>{{ card.attachmentCount }}</span>
|
||||
</div>
|
||||
|
||||
<NcAvatarList :users="card.assignedUsers" />
|
||||
|
||||
<CardMenu class="card-menu" :card="card" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import NcAvatarList from './AvatarList.vue'
|
||||
import CardId from './badges/CardId.vue'
|
||||
import CardMenu from './CardMenu.vue'
|
||||
import TextIcon from 'vue-material-design-icons/Text.vue'
|
||||
import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
|
||||
import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
|
||||
import CommentIcon from 'vue-material-design-icons/Comment.vue'
|
||||
import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
|
||||
import DueDate from './badges/DueDate.vue'
|
||||
|
||||
export default {
|
||||
name: 'CardBadges',
|
||||
components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon, CardId },
|
||||
components: {
|
||||
DueDate,
|
||||
NcAvatarList,
|
||||
TextIcon,
|
||||
AttachmentIcon,
|
||||
CheckmarkIcon,
|
||||
CommentIcon,
|
||||
CommentUnreadIcon,
|
||||
CardId,
|
||||
},
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
@@ -102,26 +122,33 @@ export default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
gap: 3px;
|
||||
|
||||
.icon-badge {
|
||||
opacity: .7;
|
||||
color: var(--color-text-maxcontrast);
|
||||
display: flex;
|
||||
margin-right: 2px;
|
||||
|
||||
span,
|
||||
&:deep(span) {
|
||||
padding: 10px 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline-badges {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.badges .icon.due {
|
||||
background-position: 4px center;
|
||||
border-radius: 3px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px;
|
||||
font-size: 90%;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: .5;
|
||||
@@ -153,6 +180,31 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.badge-left, .badge-right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.badge-left {
|
||||
align-self: end;
|
||||
margin-bottom: 8px;
|
||||
flex-basis: auto;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-end;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.badge-right {
|
||||
align-items: center;
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
max-width: 165px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .125s;
|
||||
}
|
||||
@@ -166,9 +218,5 @@ export default {
|
||||
align-items: flex-start;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.card-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,6 +85,10 @@ export default {
|
||||
.card-cover {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
margin-top: -8px;
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
|
||||
.image-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
@@ -64,24 +64,29 @@
|
||||
<input type="submit" value="" class="icon-confirm">
|
||||
</form>
|
||||
|
||||
<DueDate v-if="!editing && !card.done" :card="card" />
|
||||
<Done v-else-if="!editing && card.done" :card="card" />
|
||||
|
||||
<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
|
||||
<CardMenu v-if="showMenuAtTitle" :card="card" class="right card-menu" />
|
||||
</div>
|
||||
|
||||
<transition-group v-if="card.labels && card.labels.length"
|
||||
name="zoom"
|
||||
tag="ul"
|
||||
class="labels"
|
||||
@click.stop="openCard">
|
||||
<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
|
||||
<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
|
||||
</li>
|
||||
</transition-group>
|
||||
<div v-if="hasLabels" class="card-labels">
|
||||
<transition-group v-if="card.labels && card.labels.length"
|
||||
name="zoom"
|
||||
tag="ul"
|
||||
class="labels"
|
||||
@click.stop="openCard">
|
||||
<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
|
||||
<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
|
||||
</li>
|
||||
</transition-group>
|
||||
<CardMenu v-if="showMenuAtLabels" :card="card" class="right" />
|
||||
</div>
|
||||
|
||||
<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
|
||||
<CardBadges :card="card" />
|
||||
<div v-if="hasBadges"
|
||||
v-show="!compactMode"
|
||||
class="card-controls compact-item"
|
||||
@click="openCard">
|
||||
<CardBadges :card="card">
|
||||
<CardMenu v-if="showMenuAtBadges" :card="card" class="right" />
|
||||
</CardBadges>
|
||||
</div>
|
||||
</div>
|
||||
</AttachmentDragAndDrop>
|
||||
@@ -95,13 +100,11 @@ import Color from '../../mixins/color.js'
|
||||
import labelStyle from '../../mixins/labelStyle.js'
|
||||
import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
|
||||
import CardMenu from './CardMenu.vue'
|
||||
import Done from './badges/Done.vue'
|
||||
import DueDate from './badges/DueDate.vue'
|
||||
import CardCover from './CardCover.vue'
|
||||
|
||||
export default {
|
||||
name: 'CardItem',
|
||||
components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate, CardCover, Done },
|
||||
components: { CardBadges, AttachmentDragAndDrop, CardMenu, CardCover },
|
||||
directives: {
|
||||
ClickOutside,
|
||||
},
|
||||
@@ -165,6 +168,39 @@ export default {
|
||||
labelsSorted() {
|
||||
return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
|
||||
},
|
||||
hasLabels() {
|
||||
return this.card.labels.length > 0
|
||||
},
|
||||
hasBadges() {
|
||||
return this.card.done
|
||||
|| this.card.duedate
|
||||
|| this.idBadge
|
||||
|| this.card.commentsCount > 0
|
||||
|| this.card.description
|
||||
|| this.card.attachmentCount > 0
|
||||
|| this.card.assignedUsers.length > 0
|
||||
},
|
||||
idBadge() {
|
||||
return this.$store.getters.config('cardIdBadge')
|
||||
},
|
||||
showMenuAtTitle() {
|
||||
if (this.editing) {
|
||||
return false
|
||||
}
|
||||
return this.compactMode || (!this.compactMode && !this.hasBadges && !this.hasLabels)
|
||||
},
|
||||
showMenuAtLabels() {
|
||||
if (this.compactMode) {
|
||||
return false
|
||||
}
|
||||
return !this.hasBadges && this.hasLabels
|
||||
},
|
||||
showMenuAtBadges() {
|
||||
if (this.compactMode) {
|
||||
return false
|
||||
}
|
||||
return this.hasBadges
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentCard(newValue) {
|
||||
@@ -219,8 +255,12 @@ export default {
|
||||
font-size: 100%;
|
||||
background-color: var(--color-main-background);
|
||||
margin-bottom: $card-spacing;
|
||||
padding: var(--default-grid-baseline) $card-padding;
|
||||
border: 2px solid var(--color-border);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
&:deep(*) {
|
||||
cursor: pointer;
|
||||
@@ -240,7 +280,6 @@ export default {
|
||||
|
||||
.card-upper {
|
||||
display: flex;
|
||||
min-height: 44px;
|
||||
form {
|
||||
display: flex;
|
||||
padding: 3px 5px;
|
||||
@@ -251,13 +290,14 @@ export default {
|
||||
|
||||
}
|
||||
h3 {
|
||||
margin: 5px $card-padding;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
flex-grow: 1;
|
||||
font-size: 100%;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
padding-left: 4px;
|
||||
align-self: center;
|
||||
&.editable {
|
||||
cursor: text;
|
||||
|
||||
@@ -270,6 +310,10 @@ export default {
|
||||
input[type=text] {
|
||||
font-size: 100%;
|
||||
}
|
||||
.card-menu {
|
||||
height: 44px;
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
|
||||
@@ -277,13 +321,6 @@ export default {
|
||||
|
||||
.card-controls {
|
||||
display: flex;
|
||||
margin-left: $card-padding;
|
||||
margin-right: $card-padding;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
max-height: 44px;
|
||||
}
|
||||
}
|
||||
&.card__editable .card-controls {
|
||||
margin-right: 0;
|
||||
@@ -291,10 +328,16 @@ export default {
|
||||
&.card__archived {
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
}
|
||||
.card-labels {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
margin-bottom: var(--default-grid-baseline);
|
||||
|
||||
.duedate {
|
||||
margin-right: 9px;
|
||||
.labels {
|
||||
flex-wrap: wrap;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
@@ -346,6 +389,11 @@ export default {
|
||||
.card {
|
||||
@include dark-card;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.card-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="card">
|
||||
<div v-if="card" class="card-menu">
|
||||
<div @click.stop.prevent>
|
||||
<NcActions>
|
||||
<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
<!--
|
||||
- @copyright Copyright (c) 2022 Thanos Kamber <thanos.kamber@gmail.com>
|
||||
-
|
||||
- @author Thanos Kamber <thanos.kamber@gmail.com>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="card" class="done">
|
||||
<transition name="zoom">
|
||||
<div class="icon-check-circle">
|
||||
<CheckCircle :size="20" :title="formatReadableDate(card.done)" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
|
||||
import readableDate from '../../../mixins/readableDate.js'
|
||||
|
||||
export default {
|
||||
name: 'Done',
|
||||
components: {
|
||||
CheckCircle,
|
||||
},
|
||||
mixins: [
|
||||
readableDate,
|
||||
],
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-check-circle {
|
||||
color: var(--color-success);
|
||||
margin: 14px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.icon-check-circle {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: var(--color-text-lighter);
|
||||
content: 'Done';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,8 +23,9 @@
|
||||
<template>
|
||||
<div v-if="card" class="duedate" :data-due-state="dueState">
|
||||
<transition name="zoom">
|
||||
<div v-if="card.duedate" class="due" :title="absoluteDate">
|
||||
<Clock v-if="overdue" :size="16" />
|
||||
<div v-if="card.duedate || card.done" class="due" :title="absoluteDate">
|
||||
<CheckCircle v-if="card.done" :size="16" />
|
||||
<Clock v-else-if="overdue" :size="16" />
|
||||
<ClockOutline v-else :size="16" />
|
||||
<span v-if="!compactMode" class="due--label">{{ relativeDate }}</span>
|
||||
</div>
|
||||
@@ -37,8 +38,10 @@ import { mapState } from 'vuex'
|
||||
import moment from '@nextcloud/moment'
|
||||
import Clock from 'vue-material-design-icons/Clock.vue'
|
||||
import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
|
||||
import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
|
||||
|
||||
const DueState = {
|
||||
Done: 'Done',
|
||||
Future: 'Future',
|
||||
Next: 'Next',
|
||||
Now: 'Now',
|
||||
@@ -47,6 +50,7 @@ const DueState = {
|
||||
export default {
|
||||
name: 'DueDate',
|
||||
components: {
|
||||
CheckCircle,
|
||||
Clock,
|
||||
ClockOutline,
|
||||
},
|
||||
@@ -61,6 +65,9 @@ export default {
|
||||
compactMode: state => state.compactMode,
|
||||
}),
|
||||
dueState() {
|
||||
if (this.card.done) {
|
||||
return DueState.Done
|
||||
}
|
||||
const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
|
||||
if (days < 0) {
|
||||
return DueState.Overdue
|
||||
@@ -78,14 +85,16 @@ export default {
|
||||
return this.dueState === DueState.Overdue
|
||||
},
|
||||
relativeDate() {
|
||||
const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
|
||||
const date = this.card.done ? this.card.done : this.card.duedate
|
||||
const diff = moment(this.$root.time).diff(date, 'seconds')
|
||||
if (diff >= 0 && diff < 45) {
|
||||
return t('core', 'seconds ago')
|
||||
}
|
||||
return moment(this.card.duedate).fromNow()
|
||||
return moment(date).fromNow()
|
||||
},
|
||||
absoluteDate() {
|
||||
return moment(this.card.duedate).format('LLLL')
|
||||
const date = this.card.done ? this.card.done : this.card.duedate
|
||||
return moment(date).format('LLLL')
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -94,10 +103,8 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.due {
|
||||
background-position: 4px center;
|
||||
border-radius: var(--border-radius-large);
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--border-radius-pill);
|
||||
padding: 1px 8px;
|
||||
font-size: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -105,22 +112,24 @@ export default {
|
||||
z-index: 2;
|
||||
|
||||
[data-due-state='Overdue'] & {
|
||||
color: var(--color-main-background);
|
||||
background-color: var(--color-error-text);
|
||||
color: var(--color-error-text);
|
||||
background-color: rgba(var(--color-error-rgb), .1);
|
||||
}
|
||||
[data-due-state='Now'] & {
|
||||
color: var(--color-main-background);
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-warning-text);
|
||||
background-color: rgba(var(--color-warning-rgb), .1);
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
[data-due-state='Done'] & {
|
||||
color: var(--color-success-text);
|
||||
background-color: rgba(var(--color-success-rgb), .1);
|
||||
}
|
||||
|
||||
.due--label {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-left: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,9 +7,7 @@ $card-padding: 10px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: $card-padding;
|
||||
margin-right: $card-padding;
|
||||
margin-top: -5px;
|
||||
gap: 3px;
|
||||
|
||||
li {
|
||||
flex-grow: 0;
|
||||
@@ -17,11 +15,9 @@ $card-padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
padding: 0px 5px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 15px;
|
||||
font-size: 85%;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
overflow: unset;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$card-spacing: 16px;
|
||||
$card-padding: 8px;
|
||||
$stack-spacing: 12px;
|
||||
$stack-width: 260px;
|
||||
$stack-width: 280px;
|
||||
$board-spacing: 16px;
|
||||
|
||||
Reference in New Issue
Block a user