dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-04 07:11:29 +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>
</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> <div>
<span class="absolute -left-16 -top-36"> <span class="absolute -left-16 -top-36">
<Circles /> <Circles />
</span> </span>
<div class="flex flex-col xl:mt-10"> <div class="flex flex-col mt-[5%]">
<h3>{title}</h3> <h3>{title}</h3>
<slot /> <slot />
</div> </div>
</div> </div>
{#if showDetails} {#if showDetails}
<svg <div class="overflow-scroll">
class="ml-12 mr-8 hidden h-40 xl:block" <div
viewBox="0 0 2 80" use:tippy={{
xmlns="http://www.w3.org/2000/svg" content: '<span>Vámi vyplněné osobní údaje</span>',
> allowHTML: true,
<line placement: 'top',
x1="0" showOnCreate: false,
y="0" delay: 0
x2="0" }}
y2="80" class="flex flex-col justify-between leading-10 mt-4"
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
> >
<span <span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</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 {#each $candidateData.parents as parent}
>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span <div class="flex flex-col">
></span <span class="text-sspsBlue text-xl font-bold">{parent.name + ' ' + parent.surname}</span
> >
<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span> <span>Email: <span class="font-bold">{parent.email}</span></span>
</div> <span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
<div </div>
use:tippy={{ {/each}
content: '<span>Vámi vyplněné osobní údaje</span>', </div>
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}
</div> </div>
{/if} {/if}
</div> </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 on:click on:keydown class="flex flex-col">
<div class="info flex flex-col {status}"> <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} {#if loading}
<div role="status"> <div role="status">
<svg <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> <span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
</DashboardInfoCard> </DashboardInfoCard>
</div> </div>
<div class="movable coverletter col-span-5 row-span-4" class:showDetailsUploadCard={showDetails}> <div class="movable coverletter col-span-5 row-span-4">
<CoverLetterUploadCard compact={showDetails} /> <CoverLetterUploadCard />
</div> </div>
<div class="portfolio col-span-4 row-span-4"> <div class="portfolio col-span-4 row-span-4" class:showDetailsPortfolio={showDetails}>
<PortfolioLetterUploadCard /> <PortfolioLetterUploadCard />
</div> </div>
<div class="moreData col-span-4 row-span-4"> <div class="moreData col-span-4 row-span-4" class:showDetailsMoreData={showDetails}>
<PortfolioZipUploadCard /> <PortfolioZipUploadCard />
</div> </div>
</div> </div>
@ -93,10 +93,13 @@
<style> <style>
.showDetailsInfoCard { .showDetailsInfoCard {
@apply <2xl:col-span-5 <2xl:row-span-5 col-span-6; @apply md:row-span-8;
} }
.showDetailsUploadCard { .showDetailsPortfolio {
@apply <2xl:col-span-3 <2xl:row-span-5 col-span-2; @apply md:hidden;
}
.showDetailsMoreData {
@apply md:col-span-5;
} }
.dashboardDesktop { .dashboardDesktop {
@apply h-[85vh] w-[85vw]; @apply h-[85vh] w-[85vw];