mirror of
https://github.com/danbulant/Portfolio
synced 2026-05-27 14:02:14 +00:00
feat: refactor dashboard, support for mobile screens, animated dash border
This commit is contained in:
EETagent
parent
3cb2e8dbef
commit
c219ec6cc8
4 changed files with 141 additions and 89 deletions
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Circles from '../icon/Circles.svelte';
|
||||||
|
|
||||||
|
export let title: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="card infoCard relative">
|
||||||
|
<span class="absolute -left-8 -top-8">
|
||||||
|
<Circles />
|
||||||
|
</span>
|
||||||
|
<div class="mt-20 flex flex-col">
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
@apply h-full;
|
||||||
|
@apply flex flex-col justify-between;
|
||||||
|
|
||||||
|
@apply bg-[#f8fbfc];
|
||||||
|
@apply rounded-3xl;
|
||||||
|
@apply px-7 py-10;
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
@apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import FileType from './FileType.svelte';
|
||||||
|
|
||||||
|
export let title: string;
|
||||||
|
export let filetype: 'PDF' | 'ZIP';
|
||||||
|
export let filesize: string;
|
||||||
|
|
||||||
|
let dashAnimationProgress = 0;
|
||||||
|
let dashAnimationInterval: NodeJS.Timer;
|
||||||
|
|
||||||
|
const dashAnimationStart = () => {
|
||||||
|
dashAnimationInterval = setInterval(() => {
|
||||||
|
dashAnimationProgress += 1;
|
||||||
|
if (dashAnimationProgress == 100) {
|
||||||
|
dashAnimationProgress = 0;
|
||||||
|
}
|
||||||
|
}, 30);
|
||||||
|
};
|
||||||
|
|
||||||
|
const dashAnimationStop = () => {
|
||||||
|
clearInterval(dashAnimationInterval);
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="card uploadCard">
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between sm:items-center">
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<div class="mt-3 sm:mt-0">
|
||||||
|
<FileType {filetype} {filesize} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="drag group"
|
||||||
|
on:mouseenter={dashAnimationStart}
|
||||||
|
on:mouseleave={dashAnimationStop}
|
||||||
|
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-[#406280]">Sem přetáhněte,</span>
|
||||||
|
<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
@apply h-full;
|
||||||
|
@apply flex flex-col justify-between;
|
||||||
|
|
||||||
|
@apply bg-[#f8fbfc];
|
||||||
|
@apply rounded-3xl;
|
||||||
|
@apply px-7 py-10;
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
|
||||||
|
}
|
||||||
|
.card span {
|
||||||
|
@apply opacity-60 text-sm;
|
||||||
|
@apply transition-all duration-300
|
||||||
|
}
|
||||||
|
.card .drag {
|
||||||
|
@apply transition duration-200;
|
||||||
|
@apply flex-grow;
|
||||||
|
@apply flex flex-col items-center justify-center;
|
||||||
|
@apply mt-10;
|
||||||
|
|
||||||
|
border-radius: 9px;
|
||||||
|
}
|
||||||
|
.card .drag:hover span{
|
||||||
|
@apply opacity-100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
18
frontend/src/lib/components/dashboard/FileType.svelte
Normal file
18
frontend/src/lib/components/dashboard/FileType.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let filetype: 'PDF' | 'ZIP';
|
||||||
|
export let filesize: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="text-sspsBlue italic text-sm">{filetype}</span>
|
||||||
|
<span class="mx-2 text-sspsGray">/</span>
|
||||||
|
<span class="text-sspsBlue italic text-sm">Max {filesize}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
@apply flex items-center justify-between;
|
||||||
|
@apply py-1 px-4;
|
||||||
|
@apply bg-white rounded-xl shadow-md;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,96 +3,40 @@
|
||||||
|
|
||||||
import { Swiper, SwiperSlide } from 'swiper/svelte';
|
import { Swiper, SwiperSlide } from 'swiper/svelte';
|
||||||
import 'swiper/css';
|
import 'swiper/css';
|
||||||
import Circles from '$lib/components/icon/Circles.svelte';
|
|
||||||
|
import DashboardUploadCard from '$lib/components/dashboard/DashboardUploadCard.svelte';
|
||||||
|
import DashboardInfoCard from '$lib/components/dashboard/DashboardInfoCard.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullLayout>
|
<FullLayout>
|
||||||
<div class="dashboard dashboardDesktop">
|
<div class="dashboard dashboardDesktop">
|
||||||
<div class="card name col-span-2 relative">
|
<div class="name col-span-3">
|
||||||
<span class="absolute -left-8 -top-8">
|
<DashboardInfoCard title="Damián">
|
||||||
<Circles />
|
|
||||||
</span>
|
|
||||||
<div class="mt-[50%] flex flex-col">
|
|
||||||
<h3>Damián</h3>
|
|
||||||
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
|
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
|
||||||
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
|
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
|
||||||
</div>
|
</DashboardInfoCard>
|
||||||
</div>
|
</div>
|
||||||
<div class="card coverletter col-span-5 flex flex-col justify-between">
|
<div class="coverletter col-span-5">
|
||||||
<div class="flex flex-row justify-between items-center">
|
<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
|
||||||
<h3>Motivační dopis</h3>
|
|
||||||
<div class="py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md">
|
|
||||||
<span class="text-sspsBlue italic text-sm">PDF</span>
|
|
||||||
<span class="mx-2 text-sspsGray">/</span>
|
|
||||||
<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="drag mt-10 h-full flex flex-col items-center justify-center">
|
|
||||||
<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
|
|
||||||
<span class="text-sspsGray opacity-60 text-sm">nebo nahrajte svůj motivační dopis</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card portfolio col-span-3 flex flex-col justify-between">
|
<div class="portfolio col-span-4">
|
||||||
<div class="flex flex-row justify-between items-center">
|
<DashboardUploadCard title="Portfolio" filetype="PDF" filesize="10 MB" />
|
||||||
<h3>Portfolio</h3>
|
|
||||||
<div class="py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md">
|
|
||||||
<span class="text-sspsBlue italic text-sm">PDF</span>
|
|
||||||
<span class="mx-2 text-sspsGray">/</span>
|
|
||||||
<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="drag mt-10 h-full flex flex-col items-center justify-center">
|
|
||||||
<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
|
|
||||||
<span class="text-sspsGray opacity-60 text-sm">nebo nahrajte svůj motivační dopis</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card moreData col-span-4 flex flex-col justify-between">
|
<div class="moreData col-span-4">
|
||||||
<div class="flex flex-row justify-between items-center">
|
<DashboardUploadCard title="Další data" filetype="ZIP" filesize="100 MB" />
|
||||||
<h3>Další data</h3>
|
|
||||||
<div class="py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md">
|
|
||||||
<span class="text-sspsBlue italic text-sm">ZIP</span>
|
|
||||||
<span class="mx-2 text-sspsGray">/</span>
|
|
||||||
<span class="text-sspsBlue italic text-sm">Max 100 MB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="drag mt-10 h-full flex flex-col items-center justify-center">
|
|
||||||
<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
|
|
||||||
<span class="text-sspsGray opacity-60 text-sm">nebo nahrajte svůj motivační dopis</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard dashboardMobile">
|
<div class="dashboard dashboardMobile">
|
||||||
<div class="mt-10 card name relative mb-10">
|
<div class="my-10 name">
|
||||||
<span class="absolute -left-6 -top-6">
|
<DashboardInfoCard title="Damián">
|
||||||
<Circles />
|
|
||||||
</span>
|
|
||||||
<div class="mt-24 flex flex-col">
|
|
||||||
<h3 class="!text-3xl">Damián</h3>
|
|
||||||
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
|
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
|
||||||
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
|
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
|
||||||
</div>
|
</DashboardInfoCard>
|
||||||
</div>
|
</div>
|
||||||
<Swiper slidesPerView={1} spaceBetween={20} class="h-full">
|
<Swiper slidesPerView={1} spaceBetween={20} >
|
||||||
{#each [0, 0, 0] as _}
|
{#each [0, 0, 0] as _}
|
||||||
<SwiperSlide>
|
<SwiperSlide>
|
||||||
<div class="card min-h-64 coverletter h-full col-span-5 flex flex-col justify-between">
|
<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
|
||||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
|
|
||||||
<h3>Motivační dopis</h3>
|
|
||||||
<div
|
|
||||||
class="mt-3 sm:mt-0 py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md"
|
|
||||||
>
|
|
||||||
<span class="text-sspsBlue italic text-sm">PDF</span>
|
|
||||||
<span class="mx-2 text-sspsGray">/</span>
|
|
||||||
<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow drag mt-6 h-full flex flex-col items-center justify-center">
|
|
||||||
<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
|
|
||||||
<span class="text-sspsGray opacity-60 text-sm"
|
|
||||||
>nebo nahrajte svůj motivační dopis</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
{/each}
|
{/each}
|
||||||
</Swiper>
|
</Swiper>
|
||||||
|
|
@ -102,25 +46,15 @@
|
||||||
<style>
|
<style>
|
||||||
.dashboardDesktop {
|
.dashboardDesktop {
|
||||||
@apply w-[70vw] h-[70vh];
|
@apply w-[70vw] h-[70vh];
|
||||||
@apply hidden md:grid grid-cols-7 grid-rows-2 gap-10;
|
@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardMobile {
|
.dashboardMobile {
|
||||||
@apply w-[100vw] h-[90vh];
|
@apply w-[90vw] h-[90vh];
|
||||||
@apply md:hidden;
|
@apply md:hidden;
|
||||||
}
|
}
|
||||||
.dashboardMobile .card {
|
|
||||||
@apply w-[90%] mx-auto;
|
.dashboardMobile :global(.uploadCard) {
|
||||||
}
|
@apply min-h-72;
|
||||||
.dashboard .card {
|
|
||||||
@apply bg-[#f8fbfc] p-1;
|
|
||||||
@apply rounded-3xl;
|
|
||||||
@apply px-7 py-10;
|
|
||||||
}
|
|
||||||
.dashboard .card h3 {
|
|
||||||
@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
|
|
||||||
}
|
|
||||||
.drag {
|
|
||||||
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='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
||||||
border-radius: 9px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue