ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feature(3331): aligned stack children spacing and fixed linting issues

Browse Source 
Signed-off-by: Luutzen Dijkstra <luutzen.dijkstra@gmail.com>
This commit is contained in:
Luutzen Dijkstra
2025-01-05 21:41:06 +01:00
committed by Luka Trovic
parent 569a0961fd
commit 5a39996357
4 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/board/Board.vue
View File

@@ -310,11 +310,12 @@ export default {
position: relative;
.smooth-dnd-container.vertical {
$margin-x: calc($stack-gap * -1);
display: flex;
flex-direction: column;
gap: $stack-gap;
padding: 5px calc(#{$stack-gap / 2}) $stack-gap;
margin: 0 calc(#{$stack-gap / -2});
padding: $stack-gap;
margin: 0 $margin-x;
overflow-y: auto;
scrollbar-gutter: stable;
}

31
src/components/board/Stack.vue
View File

@@ -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>
@@ -384,16 +384,12 @@ export default {
display: block;
position: absolute;
width: 100%;
height: 20px;
top: 30px;
left: 0px;
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%);
}
& > * {
@@ -451,9 +447,22 @@ 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;

21
src/components/overview/Overview.vue
View File

@@ -14,19 +14,23 @@
</div>
<div v-else-if="isValidFilter" class="overview">
<div v-for="columnProps in columnPropsList" class="dashboard-column" :key="columnProps.title">
<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>
:aria-label="columnProps.title">
{{ t('deck', columnProps.title) }}
</h3>
</div>
<div class="dashboard-column__list">
<template v-if="columnProps.sort === false">
<CardItem :id="card.id" v-for="card in filterCards(columnProps.filter)" :key="card.id" />
<CardItem v-for="card in filterCards(columnProps.filter)"
:id="card.id"
:key="card.id" />
</template>
<template v-else>
<CardItem :id="card.id" v-for="card in sortCards(filterCards(columnProps.filter))"
<CardItem v-for="card in sortCards(filterCards(columnProps.filter))"
:id="card.id"
:key="card.id" />
</template>
</div>
@@ -131,7 +135,7 @@ export default {
this.loading = false
},
filterCards(when) {
return this.assignedCardsDashboard[when];
return this.assignedCardsDashboard[when]
},
sortCards(cards) {
if (!cards) {
@@ -217,11 +221,12 @@ export default {
}
.dashboard-column__list {
$margin-x: calc($stack-gap * -1);
display: flex;
flex-direction: column;
gap: $stack-gap;
padding: 5px calc(#{$stack-gap / 2}) $stack-gap;
margin: 0 calc(#{$stack-gap / -2});
padding: $stack-gap;
margin: 0 $margin-x;
overflow-y: auto;
scrollbar-gutter: stable;
}

8
src/components/search/GlobalSearchResults.vue
View File

@@ -7,8 +7,7 @@
<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')"
<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>
@@ -18,7 +17,10 @@
</header>
<div class="search-wrapper">
<template v-if="loading || filteredResults.length > 0">
<CardItem v-for="card in filteredResults" :id="card.id" :key="card.id" :standalone="true" />
<CardItem v-for="card in filteredResults"
:id="card.id"
:key="card.id"
:standalone="true" />
<Placeholder v-if="loading" />
<InfiniteLoading :identifier="searchQuery" @infinite="infiniteHandler">
<div slot="spinner" />