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

Implement fading out the cards when scrolling

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-10-13 11:37:33 +02:00
parent d0147cb03e
commit 8ae580fd57
2 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -203,15 +203,17 @@ export default {
.stack { .stack {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.smooth-dnd-container.vertical { .smooth-dnd-container.vertical {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 3px;
padding: $stack-spacing; padding: $stack-spacing;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding-top: 15px;
margin-top: -10px;
} }
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper { .smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {

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

@@ -23,7 +23,7 @@
<template> <template>
<div class="stack"> <div class="stack">
<div v-click-outside="stopCardCreation" class="stack--header"> <div v-click-outside="stopCardCreation" class="stack--header" :class="{'stack--header--add': showAddCard }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<h3 v-if="!canManage || isArchived"> <h3 v-if="!canManage || isArchived">
{{ stack.title }} {{ stack.title }}
@@ -277,13 +277,33 @@ export default {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
padding: 3px; padding-left: $card-spacing;
margin: 3px -3px;
margin-right: -10px;
margin-top: 0;
margin-bottom: 3px;
cursor: grab; cursor: grab;
// Smooth fade out of the cards at the top
&:before {
content: ' ';
display: block;
position: absolute;
background-image: linear-gradient(180deg, var(--color-main-background) 3px, transparent 100%);
width: 100%;
height: 25px;
top: 35px;
right: 6px;
z-index: 99;
transition: top var(--animation-slow);
}
&--add:before {
height: 80px;
background-image: linear-gradient(180deg, var(--color-main-background) 68px, transparent 100%);
}
& > * {
position: relative;
z-index: 100;
}
h3, form { h3, form {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
@@ -303,13 +323,13 @@ export default {
} }
.stack--card-add { .stack--card-add {
position: sticky;
top: 52px;
height: 52px; height: 52px;
z-index: 100; z-index: 100;
display: flex; display: flex;
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;
margin-top: 5px;
margin-bottom: 20px;
background-color: var(--color-main-background); background-color: var(--color-main-background);
form { form {