dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-08 09:12:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add filedrop to dashboard

Browse source
This commit is contained in:
EETagent 2022-11-29 16:49:13 +01:00
parent 090abd090d
commit 2104362b32
1 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
View file

@ -5,22 +5,23 @@
export let filetype: 'PDF' | 'ZIP'; export let filetype: 'PDF' | 'ZIP';
export let filesize: string; export let filesize: string;
let dashAnimationProgress = 0; import FileDrop from 'filedrop-svelte';
let dashAnimationInterval: NodeJS.Timer;
const dashAnimationStart = () => { let dashAnimationProgress = 0;
dashAnimationInterval = setInterval(() => { let dashAnimationInterval: NodeJS.Timer;
dashAnimationProgress += 1;
if (dashAnimationProgress == 20) {
dashAnimationProgress = 0;
}
}, 30);
};
const dashAnimationStop = () => { const dashAnimationStart = () => {
clearInterval(dashAnimationInterval); dashAnimationInterval = setInterval(() => {
}; dashAnimationProgress += 1;
if (dashAnimationProgress == 20) {
dashAnimationProgress = 0;
}
}, 30);
};
const dashAnimationStop = () => {
clearInterval(dashAnimationInterval);
};
</script> </script>
<div class="card uploadCard"> <div class="card uploadCard">
@ -30,14 +31,18 @@
<FileType {filetype} {filesize} /> <FileType {filetype} {filesize} />
</div> </div>
</div> </div>
<div <div class="flex-1 mt-6">
class="drag group" <FileDrop on:filedrop={null} on:filedragenter={dashAnimationStart} on:filedragleave={dashAnimationStop}>
on:mouseenter={dashAnimationStart} <div
on:mouseleave={dashAnimationStop} class="drag group"
style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9' stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`} on:mouseenter={dashAnimationStart}
> on:mouseleave={dashAnimationStop}
<span class="text-[#406280]">Sem přetáhněte,</span> style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9' stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span> >
<span class="text-[#406280]">Sem přetáhněte,</span>
<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
</div>
</FileDrop>
</div> </div>
</div> </div>
@ -48,24 +53,25 @@
@apply bg-[#f8fbfc]; @apply bg-[#f8fbfc];
@apply rounded-3xl; @apply rounded-3xl;
@apply px-7 py-10; @apply px-7 py-7;
} }
.card h3 { .card h3 {
@apply text-sspsBlue text-2xl xl:text-4xl font-semibold; @apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
} }
.card span { .card span {
@apply opacity-60 text-sm; @apply opacity-60 text-sm;
@apply transition-all duration-300 @apply transition-all duration-300;
} }
.card .drag { .card .drag {
@apply transition duration-200; @apply transition duration-200;
@apply flex-grow; @apply min-h-full;
@apply flex flex-col items-center justify-center; @apply flex flex-col items-center justify-center;
@apply mt-10;
border-radius: 9px; border-radius: 9px;
/* TODO: Fix this hack */
@apply p-10 sm:p-20 md:p-0;
}
.card .drag:hover span {
@apply opacity-100;
} }
.card .drag:hover span{
@apply opacity-100;
}
</style> </style>