mirror of
https://github.com/danbulant/Portfolio
synced 2026-05-24 12:35:31 +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/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>
|
||||
|
||||
<FullLayout>
|
||||
<div class="dashboard dashboardDesktop">
|
||||
<div class="card name col-span-2 relative">
|
||||
<span class="absolute -left-8 -top-8">
|
||||
<Circles />
|
||||
</span>
|
||||
<div class="mt-[50%] flex flex-col">
|
||||
<h3>Damián</h3>
|
||||
<div class="name col-span-3">
|
||||
<DashboardInfoCard title="Damián">
|
||||
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
|
||||
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
|
||||
</div>
|
||||
</DashboardInfoCard>
|
||||
</div>
|
||||
<div class="card coverletter col-span-5 flex flex-col justify-between">
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<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 class="coverletter col-span-5">
|
||||
<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
|
||||
</div>
|
||||
<div class="card portfolio col-span-3 flex flex-col justify-between">
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<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 class="portfolio col-span-4">
|
||||
<DashboardUploadCard title="Portfolio" filetype="PDF" filesize="10 MB" />
|
||||
</div>
|
||||
<div class="card moreData col-span-4 flex flex-col justify-between">
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<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 class="moreData col-span-4">
|
||||
<DashboardUploadCard title="Další data" filetype="ZIP" filesize="100 MB" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard dashboardMobile">
|
||||
<div class="mt-10 card name relative mb-10">
|
||||
<span class="absolute -left-6 -top-6">
|
||||
<Circles />
|
||||
</span>
|
||||
<div class="mt-24 flex flex-col">
|
||||
<h3 class="!text-3xl">Damián</h3>
|
||||
<div class="my-10 name">
|
||||
<DashboardInfoCard title="Damián">
|
||||
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
|
||||
<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
|
||||
</div>
|
||||
</DashboardInfoCard>
|
||||
</div>
|
||||
<Swiper slidesPerView={1} spaceBetween={20} class="h-full">
|
||||
<Swiper slidesPerView={1} spaceBetween={20} >
|
||||
{#each [0, 0, 0] as _}
|
||||
<SwiperSlide>
|
||||
<div class="card min-h-64 coverletter h-full col-span-5 flex flex-col justify-between">
|
||||
<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>
|
||||
<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
|
||||
</SwiperSlide>
|
||||
{/each}
|
||||
</Swiper>
|
||||
|
|
@ -102,25 +46,15 @@
|
|||
<style>
|
||||
.dashboardDesktop {
|
||||
@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 {
|
||||
@apply w-[100vw] h-[90vh];
|
||||
@apply w-[90vw] h-[90vh];
|
||||
@apply md:hidden;
|
||||
}
|
||||
.dashboardMobile .card {
|
||||
@apply w-[90%] mx-auto;
|
||||
}
|
||||
.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;
|
||||
|
||||
.dashboardMobile :global(.uploadCard) {
|
||||
@apply min-h-72;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue