dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: mobile design for dashboard

Browse source
This commit is contained in:
EETagent 2022-11-22 20:01:35 +01:00
parent e5be4c6204
commit 6a98da7158
1 changed files with 59 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/routes/dashboard/+page.svelte
View file

@ -1,11 +1,14 @@
<script lang="ts">
import FullLayout from '$lib/components/layout/FullLayout.svelte';
import { Swiper, SwiperSlide } from 'swiper/svelte';
import 'swiper/css';
</script>
<FullLayout>
<div class="dashboard">
<div class="dashboard dashboardDesktop">
<div class="card name col-span-2 relative">
<div class="circles relative -left-10 -top-1/3">
<div class="circles relative -left-16 -top-20">
<span
class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100"
/>
@ -18,7 +21,7 @@
</div>
<div class="mt-[50%] flex flex-col">
<h3>Damián</h3>
<span class="mt-3 text-sspsBlue text-xs">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>
</div>
</div>
@ -65,12 +68,63 @@
</div>
</div>
</div>
<div class="dashboard dashboardMobile">
<div class="mt-10 card name relative mb-10">
<div class="circles relative -left-10 -top-13">
<span
class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100"
/>
<span
class="shadow-md left-14 -top-6 absolute p-1 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50"
/>
<span
class="shadow-md absolute p-1 w-28 h-28 rounded-full bg-black bg-[#55b1bd] opacity-60"
/>
</div>
<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-sspsGray text-xs">Uchazeč na SSPŠ</span>
</div>
</div>
<Swiper slidesPerView={1} spaceBetween={20} class="h-full">
{#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>
</SwiperSlide>
{/each}
</Swiper>
</div>
</FullLayout>
<style>
.dashboard {
.dashboardDesktop {
@apply w-[70vw] h-[70vh];
@apply grid grid-cols-7 grid-rows-2 gap-10;
@apply hidden md:grid grid-cols-7 grid-rows-2 gap-10;
}
.dashboardMobile {
@apply w-[100vw] h-[90vh];
@apply md:hidden;
}
.dashboardMobile .card {
@apply w-[90%] mx-auto;
}
.dashboard .card {
@apply bg-[#f8fbfc] p-1;