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: make more details responsive

Browse source
This commit is contained in:
EETagent 2022-12-23 21:39:42 +01:00
parent 019a4076cb
commit 4be811d3e7
3 changed files with 55 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
View file

@ -75,74 +75,61 @@
</div>
</div>
</div>
<div class="relative flex flex-col md:flex-row h-full justify-between my-2">
<div class="relative flex flex-col my-2 overflow-hidden">
<div>
<span class="absolute -left-16 -top-36">
<Circles />
</span>
<div class="flex flex-col xl:mt-10">
<div class="flex flex-col mt-[5%]">
<h3>{title}</h3>
<slot />
</div>
</div>
{#if showDetails}
<svg
class="ml-12 mr-8 hidden h-40 xl:block"
viewBox="0 0 2 80"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="0"
y="0"
x2="0"
y2="80"
stroke="#406280ff"
stroke-width="2"
stroke-dasharray="3"
/>
</svg>
<div
use:tippy={{
content: '<span>Vámi vyplněné osobní údaje</span>',
allowHTML: true,
placement: 'top',
showOnCreate: false,
delay: 0
}}
class="flex flex-col justify-around <2xl:text-xs"
>
<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
<span
>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span></span
<div class="overflow-scroll">
<div
use:tippy={{
content: '<span>Vámi vyplněné osobní údaje</span>',
allowHTML: true,
placement: 'top',
showOnCreate: false,
delay: 0
}}
class="flex flex-col justify-between leading-10 mt-4"
>
<span
>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
></span
<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
<span
>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span></span
>
<span
>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
></span
>
<span
>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
></span
>
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
</div>
<div
use:tippy={{
content: '<span>Vámi vyplněné osobní údaje</span>',
allowHTML: true,
placement: 'top',
showOnCreate: false,
delay: 0
}}
class="flex flex-col leading-10 mt-4"
>
<span
>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
></span
>
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
</div>
<div
use:tippy={{
content: '<span>Vámi vyplněné osobní údaje</span>',
allowHTML: true,
placement: 'top',
showOnCreate: false,
delay: 0
}}
class="md:ml-4 flex flex-col <2xl:text-xs"
>
{#each $candidateData.parents as parent}
<div class="flex flex-col">
<span class="text-sspsBlue text-xl font-bold">{parent.name + ' ' + parent.surname}</span
>
<span>Email: <span class="font-bold">{parent.email}</span></span>
<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
</div>
{/each}
{#each $candidateData.parents as parent}
<div class="flex flex-col">
<span class="text-sspsBlue text-xl font-bold">{parent.name + ' ' + parent.surname}</span
>
<span>Email: <span class="font-bold">{parent.email}</span></span>
<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
</div>
{/each}
</div>
</div>
{/if}
</div>

2
frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
View file

@ -24,7 +24,7 @@
<div on:click on:keydown class="flex flex-col">
<div class="info flex flex-col {status}">
<span class="text-xl font-bold text-white">{title}</span>
<span class="2xl:text-xl font-bold text-white">{title}</span>
{#if loading}
<div role="status">
<svg

17
frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
View file

@ -51,13 +51,13 @@
<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
</DashboardInfoCard>
</div>
<div class="movable coverletter col-span-5 row-span-4" class:showDetailsUploadCard={showDetails}>
<CoverLetterUploadCard compact={showDetails} />
<div class="movable coverletter col-span-5 row-span-4">
<CoverLetterUploadCard />
</div>
<div class="portfolio col-span-4 row-span-4">
<div class="portfolio col-span-4 row-span-4" class:showDetailsPortfolio={showDetails}>
<PortfolioLetterUploadCard />
</div>
<div class="moreData col-span-4 row-span-4">
<div class="moreData col-span-4 row-span-4" class:showDetailsMoreData={showDetails}>
<PortfolioZipUploadCard />
</div>
</div>
@ -93,10 +93,13 @@
<style>
.showDetailsInfoCard {
@apply <2xl:col-span-5 <2xl:row-span-5 col-span-6;
@apply md:row-span-8;
}
.showDetailsUploadCard {
@apply <2xl:col-span-3 <2xl:row-span-5 col-span-2;
.showDetailsPortfolio {
@apply md:hidden;
}
.showDetailsMoreData {
@apply md:col-span-5;
}
.dashboardDesktop {
@apply h-[85vh] w-[85vw];