Merge pull request #6640 from ludij/feature/3331-dynamic-column-width
Feature/3331 dynamic column width
This commit is contained in:
Luka Trovic
GitHub
@@ -14,6 +14,7 @@
|
||||
|
||||
input[type=submit].icon-confirm {
|
||||
border-color: var(--color-border-maxcontrast) !important;
|
||||
border-style: solid;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -276,18 +276,15 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 50px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.board {
|
||||
padding-left: $board-spacing;
|
||||
position: relative;
|
||||
max-height: calc(100% - var(--default-clickable-area));
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
flex-grow: 1;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -297,11 +294,15 @@ export default {
|
||||
.smooth-dnd-container.horizontal {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: $board-gap;
|
||||
padding: 0 $board-gap;
|
||||
height: 100%;
|
||||
|
||||
&:deep(.stack-draggable-wrapper.smooth-dnd-draggable-wrapper) {
|
||||
display: flex;
|
||||
height: auto;
|
||||
flex: 0 1 $card-max-width;
|
||||
min-width: $card-min-width;
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
@@ -309,16 +310,13 @@ export default {
|
||||
position: relative;
|
||||
|
||||
.smooth-dnd-container.vertical {
|
||||
flex-grow: 1;
|
||||
$margin-x: calc($stack-gap * -1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// Margin left instead of padidng to avoid jumps on dropping a card
|
||||
margin-left: $stack-spacing;
|
||||
padding-right: $stack-spacing;
|
||||
overflow-x: hidden;
|
||||
gap: $stack-gap;
|
||||
padding: $stack-gap;
|
||||
margin: 0 $margin-x;
|
||||
overflow-y: auto;
|
||||
padding-top: 15px;
|
||||
margin-top: -10px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,10 +14,10 @@
|
||||
{{ stack.title }}
|
||||
</h3>
|
||||
<h3 v-else-if="!editing"
|
||||
title="stack.title"
|
||||
dir="auto"
|
||||
tabindex="0"
|
||||
:aria-label="stack.title"
|
||||
:title="stack.title"
|
||||
class="stack__title"
|
||||
@click="startEditing(stack)"
|
||||
@keydown.enter="startEditing(stack)">
|
||||
@@ -108,7 +108,7 @@
|
||||
</Container>
|
||||
|
||||
<transition name="slide-bottom" appear>
|
||||
<div v-show="showAddCard" class="stack__card-add">
|
||||
<div v-if="showAddCard" class="stack__card-add">
|
||||
<form :class="{ 'icon-loading-small': stateCardCreating }"
|
||||
@submit.prevent.stop="clickAddCard()">
|
||||
<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
|
||||
@@ -365,37 +365,31 @@ export default {
|
||||
@import './../../css/variables';
|
||||
|
||||
.stack {
|
||||
width: $stack-width + $stack-spacing * 3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stack__header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: var(--default-clickable-area);
|
||||
z-index: 100;
|
||||
padding-left: $card-spacing;
|
||||
padding-right: $card-spacing;
|
||||
margin: 6px;
|
||||
margin-top: 0;
|
||||
cursor: grab;
|
||||
background-color: var(--color-main-background);
|
||||
|
||||
// Smooth fade out of the cards at the top
|
||||
&:before {
|
||||
content: ' ';
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc(100% - 16px);
|
||||
height: 20px;
|
||||
top: 30px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: $stack-gap;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
transition: top var(--animation-slow);
|
||||
|
||||
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
body.theme--dark & {
|
||||
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
& > * {
|
||||
@@ -404,8 +398,10 @@ export default {
|
||||
}
|
||||
|
||||
h3, form {
|
||||
flex-grow: 1;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: inherit;
|
||||
margin: 0;
|
||||
|
||||
@@ -418,9 +414,8 @@ export default {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc($stack-width - 60px);
|
||||
border-radius: 3px;
|
||||
padding: 4px 4px;
|
||||
padding: $card-padding;
|
||||
font-size: var(--default-font-size);
|
||||
|
||||
&:focus-visible {
|
||||
@@ -430,7 +425,6 @@ export default {
|
||||
}
|
||||
|
||||
form {
|
||||
margin: -4px;
|
||||
input {
|
||||
font-weight: bold;
|
||||
padding: 0 6px;
|
||||
@@ -453,14 +447,25 @@ export default {
|
||||
flex-shrink: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
padding-top: var(--default-grid-baseline);
|
||||
padding-bottom: $stack-gap;
|
||||
background-color: var(--color-main-background);
|
||||
position: relative;
|
||||
|
||||
// Smooth fade out of the cards at the top
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $stack-gap;
|
||||
z-index: 99;
|
||||
transition: bottom var(--animation-slow);
|
||||
background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
margin-left: $stack-spacing;
|
||||
margin-right: $stack-spacing;
|
||||
width: 100%;
|
||||
border: 2px solid var(--color-border-maxcontrast);
|
||||
border-radius: var(--border-radius-large);
|
||||
@@ -481,7 +486,6 @@ export default {
|
||||
input {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -101,6 +101,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './../../css/variables';
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -111,6 +113,7 @@ export default {
|
||||
.icon-badge {
|
||||
color: var(--color-text-maxcontrast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 2px;
|
||||
|
||||
span,
|
||||
@@ -125,6 +128,7 @@ export default {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
height: var(--default-clickable-area);
|
||||
}
|
||||
|
||||
.badges .icon.due {
|
||||
|
||||
@@ -4,13 +4,10 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="referencePreview" class="card-cover">
|
||||
<div class="image-wrapper rounded-left rounded-right" :style="{ backgroundImage: `url(${referencePreview})`}" />
|
||||
</div>
|
||||
<div v-else-if="cardId && ( attachments.length > 0 )" class="card-cover">
|
||||
<div v-for="(attachment, index) in attachments"
|
||||
<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
|
||||
<div v-for="attachment in attachments"
|
||||
:key="attachment.id"
|
||||
:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
|
||||
class="image-wrapper"
|
||||
:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -77,9 +74,7 @@ export default {
|
||||
.card-cover {
|
||||
height: 90px;
|
||||
display: flex;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
margin-right: -4px;
|
||||
margin: $card-image-margin $card-image-margin 0;
|
||||
|
||||
.image-wrapper {
|
||||
flex: 1;
|
||||
@@ -87,12 +82,6 @@ export default {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
&.rounded-left {
|
||||
border-top-left-radius: calc(var(--border-radius-large) - 1px);
|
||||
}
|
||||
&.rounded-right {
|
||||
border-top-right-radius: calc(var(--border-radius-large) - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<template>
|
||||
<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
|
||||
<div :ref="`card${card.id}`"
|
||||
:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
|
||||
:class="{'compact': compactMode, 'current-card': currentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
|
||||
tag="div"
|
||||
:tabindex="0"
|
||||
class="card"
|
||||
@@ -331,12 +331,13 @@ export default {
|
||||
border-radius: var(--border-radius-large);
|
||||
font-size: 100%;
|
||||
background-color: var(--color-main-background);
|
||||
margin-bottom: $card-spacing;
|
||||
padding: var(--default-grid-baseline) $card-padding;
|
||||
padding: $card-padding;
|
||||
border: 2px solid var(--color-border-dark);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $card-gap;
|
||||
overflow: hidden;
|
||||
|
||||
&:deep(*) {
|
||||
cursor: pointer;
|
||||
@@ -359,12 +360,10 @@ export default {
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: var(--default-grid-baseline);
|
||||
flex-grow: 1;
|
||||
font-size: 100%;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
padding-left: 4px;
|
||||
align-self: center;
|
||||
|
||||
:deep(a) {
|
||||
@@ -374,9 +373,6 @@ export default {
|
||||
&.editable {
|
||||
span {
|
||||
cursor: text;
|
||||
padding-right: 8px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
|
||||
&:focus, &:focus-visible {
|
||||
outline: none;
|
||||
@@ -385,6 +381,7 @@ export default {
|
||||
|
||||
&:focus-within {
|
||||
outline: 2px solid var(--color-border-dark);
|
||||
outline-offset: 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
@@ -427,8 +424,6 @@ export default {
|
||||
.card-labels {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding-left: var(--default-grid-baseline);
|
||||
padding-top: var(--default-grid-baseline);
|
||||
|
||||
.labels {
|
||||
flex-wrap: wrap;
|
||||
@@ -444,7 +439,7 @@ export default {
|
||||
|
||||
.card-related {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
padding: 4px;
|
||||
padding-bottom: 0px;
|
||||
color: var(--color-text-maxcontrast);
|
||||
|
||||
@@ -469,8 +464,8 @@ export default {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
&.has-labels {
|
||||
padding-bottom: $card-padding;
|
||||
&.no-labels {
|
||||
padding-bottom: var(--default-grid-baseline);
|
||||
}
|
||||
.labels {
|
||||
height: 6px;
|
||||
|
||||
@@ -14,45 +14,25 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="isValidFilter" class="overview">
|
||||
<div class="dashboard-column">
|
||||
<h3>{{ t('deck', 'Overdue') }}</h3>
|
||||
<div v-for="card in sortCards('overdue')" :key="card.id">
|
||||
<CardItem :id="card.id" />
|
||||
<div v-for="columnProps in columnPropsList" :key="columnProps.title" class="dashboard-column">
|
||||
<div class="dashboard-column__header">
|
||||
<h3 class="dashboard-column__header-title"
|
||||
:title="columnProps.title"
|
||||
:aria-label="columnProps.title">
|
||||
{{ t('deck', columnProps.title) }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-column">
|
||||
<h3>{{ t('deck', 'Today') }}</h3>
|
||||
<div v-for="card in sortCards('today')" :key="card.id">
|
||||
<CardItem :id="card.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-column">
|
||||
<h3>{{ t('deck', 'Tomorrow') }}</h3>
|
||||
<div v-for="card in sortCards('tomorrow')" :key="card.id">
|
||||
<CardItem :id="card.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-column">
|
||||
<h3>{{ t('deck', 'Next 7 days') }}</h3>
|
||||
<div v-for="card in sortCards('nextSevenDays')" :key="card.id">
|
||||
<CardItem :id="card.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-column">
|
||||
<h3>{{ t('deck', 'Later') }}</h3>
|
||||
<div v-for="card in sortCards('later')" :key="card.id">
|
||||
<CardItem :id="card.id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-column">
|
||||
<h3>{{ t('deck', 'No due') }}</h3>
|
||||
<div v-for="card in assignedCardsDashboard.nodue" :key="card.id">
|
||||
<CardItem :id="card.id" />
|
||||
<div class="dashboard-column__list">
|
||||
<template v-if="columnProps.sort === false">
|
||||
<CardItem v-for="card in filterCards(columnProps.filter)"
|
||||
:id="card.id"
|
||||
:key="card.id" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<CardItem v-for="card in sortCards(filterCards(columnProps.filter))"
|
||||
:id="card.id"
|
||||
:key="card.id" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,6 +53,34 @@ const SUPPORTED_FILTERS = [
|
||||
FILTER_UPCOMING,
|
||||
]
|
||||
|
||||
const COLUMN_PROPS_LIST = [
|
||||
{
|
||||
title: 'Overdue',
|
||||
filter: 'overdue',
|
||||
},
|
||||
{
|
||||
title: 'Today',
|
||||
filter: 'today',
|
||||
},
|
||||
{
|
||||
title: 'Tomorrow',
|
||||
filter: 'tomorrow',
|
||||
},
|
||||
{
|
||||
title: 'Next 7 days',
|
||||
filter: 'nextSevenDays',
|
||||
},
|
||||
{
|
||||
title: 'Later',
|
||||
filter: 'later',
|
||||
},
|
||||
{
|
||||
title: 'No due',
|
||||
filter: 'nodue',
|
||||
sort: false,
|
||||
},
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Overview',
|
||||
components: {
|
||||
@@ -89,6 +97,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
columnPropsList: COLUMN_PROPS_LIST,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -125,16 +134,16 @@ export default {
|
||||
}
|
||||
this.loading = false
|
||||
},
|
||||
sortCards(when) {
|
||||
const cards = this.assignedCardsDashboard[when]
|
||||
|
||||
filterCards(when) {
|
||||
return this.assignedCardsDashboard[when]
|
||||
},
|
||||
sortCards(cards) {
|
||||
if (!cards) {
|
||||
return null
|
||||
} else {
|
||||
return cards.toSorted((current, next) => {
|
||||
const currentDueDate = new Date(current.duedate)
|
||||
const nextDueDate = new Date(next.duedate)
|
||||
|
||||
return currentDueDate - nextDueDate
|
||||
})
|
||||
}
|
||||
@@ -151,38 +160,75 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 50px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.overview {
|
||||
position: relative;
|
||||
height: calc(100% - var(--default-clickable-area));
|
||||
overflow-x: scroll;
|
||||
overflow-x: auto;
|
||||
flex-grow: 1;
|
||||
scrollbar-gutter: stable;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding-left: $board-spacing;
|
||||
padding-right: $board-spacing;
|
||||
gap: $board-gap;
|
||||
padding: 0 $board-gap;
|
||||
|
||||
.dashboard-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: $stack-width;
|
||||
width: $stack-width;
|
||||
margin-left: $stack-spacing;
|
||||
margin-right: $stack-spacing;
|
||||
flex: 0 1 $card-max-width;
|
||||
min-width: $card-min-width;
|
||||
|
||||
h3 {
|
||||
font-size: var(--default-font-size);
|
||||
margin: -6px;
|
||||
margin-bottom: 12px;
|
||||
padding: 6px 13px;
|
||||
.dashboard-column__header {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: var(--default-clickable-area);
|
||||
z-index: 100;
|
||||
margin-top: 0;
|
||||
background-color: var(--color-main-background);
|
||||
border: 1px solid var(--color-main-background);
|
||||
|
||||
// Smooth fade out of the cards at the top
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
top: 30px;
|
||||
left: 0px;
|
||||
z-index: 99;
|
||||
transition: top var(--animation-slow);
|
||||
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
|
||||
body.theme--dark & {
|
||||
background-image: linear-gradient(180deg, var(--color-main-background) 3px, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-column__header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--default-clickable-area);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: $card-padding;
|
||||
font-size: var(--default-font-size);
|
||||
}
|
||||
|
||||
.dashboard-column__list {
|
||||
$margin-x: calc($stack-gap * -1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $stack-gap;
|
||||
padding: $stack-gap;
|
||||
margin: 0 $margin-x;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,16 +4,19 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="searchQuery!==''" class="global-search">
|
||||
<h2>
|
||||
<NcRichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
|
||||
<div v-if="loading" class="icon-loading-small" />
|
||||
</h2>
|
||||
<NcActions>
|
||||
<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
|
||||
</NcActions>
|
||||
<section v-if="searchQuery!==''" class="global-search">
|
||||
<header class="search-header">
|
||||
<h2>
|
||||
<NcRichText :text="$route.params.id ? t('deck', 'Search for {searchQuery} in other boards') : t('deck', 'Search for {searchQuery} in all boards')"
|
||||
:arguments="queryStringArgs" />
|
||||
<span v-if="loading" class="icon-loading-small" />
|
||||
</h2>
|
||||
<NcActions>
|
||||
<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
|
||||
</NcActions>
|
||||
</header>
|
||||
<div class="search-wrapper">
|
||||
<div v-if="loading || filteredResults.length > 0" class="search-results">
|
||||
<template v-if="loading || filteredResults.length > 0">
|
||||
<CardItem v-for="card in filteredResults"
|
||||
:id="card.id"
|
||||
:key="card.id"
|
||||
@@ -26,12 +29,12 @@
|
||||
{{ t('deck', 'No results found') }}
|
||||
</div>
|
||||
</InfiniteLoading>
|
||||
</div>
|
||||
<div v-else>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>{{ t('deck', 'No results found') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -159,7 +162,7 @@ export default {
|
||||
|
||||
.global-search {
|
||||
width: 100%;
|
||||
padding: $board-spacing + $stack-spacing;
|
||||
padding: $board-gap;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
min-height: 35vh;
|
||||
@@ -169,17 +172,24 @@ export default {
|
||||
border-top: 1px solid var(--color-border);
|
||||
z-index: 1010;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.action-item.icon-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.search-wrapper {
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
|
||||
.search-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: var(--default-grid-baseline) var(--default-grid-baseline) $board-gap;
|
||||
}
|
||||
|
||||
h2 > div {
|
||||
@@ -189,23 +199,24 @@ export default {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h2:deep(span) {
|
||||
background-color: var(--color-background-dark);
|
||||
padding: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.search-results {
|
||||
.search-wrapper {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $stack-gap;
|
||||
|
||||
& > div {
|
||||
flex-grow: 0;
|
||||
& > .drop-upload--card {
|
||||
flex: 0 1 $card-max-width;
|
||||
min-width: $card-min-width;
|
||||
}
|
||||
}
|
||||
&:deep(.card) {
|
||||
width: $stack-width;
|
||||
margin-right: $stack-spacing;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,14 +62,13 @@ export default {
|
||||
$clickable-area: var(--default-clickable-area);
|
||||
|
||||
.card--placeholder {
|
||||
width: $stack-width;
|
||||
margin-right: $stack-spacing;
|
||||
min-width: $card-min-width;
|
||||
max-width: $card-min-width;
|
||||
padding: $card-padding;
|
||||
transition: box-shadow 0.1s ease-in-out;
|
||||
box-shadow: 0 0 2px 0 var(--color-box-shadow);
|
||||
border-radius: var(--border-radius-large);
|
||||
font-size: 100%;
|
||||
margin-bottom: $card-spacing;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
* SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
$card-spacing: 8px;
|
||||
$card-padding: 4px;
|
||||
$stack-spacing: 12px;
|
||||
$stack-width: 280px;
|
||||
$board-spacing: 16px;
|
||||
$card-min-width: 216px;
|
||||
$card-max-width: 300px;
|
||||
$card-padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline);
|
||||
$card-gap: calc(var(--default-grid-baseline) * 3);
|
||||
$card-image-margin: calc(var(--default-grid-baseline) * -2);
|
||||
$stack-gap: calc(var(--default-grid-baseline) * 3);
|
||||
$board-gap: calc(var(--default-grid-baseline) * 4);
|
||||
|
||||
@@ -189,7 +189,7 @@ export default {
|
||||
card.assignedUsers = card.assignedUsers || []
|
||||
const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
|
||||
if (existingIndex !== -1) {
|
||||
const existingCard = state.cards.find(_card => _card.id === card.id)
|
||||
const existingCard = state.cards[existingIndex]
|
||||
Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card))
|
||||
} else {
|
||||
state.cards.push(card)
|
||||
|
||||
Reference in New Issue
Block a user