dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-07 16:50:13 +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

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

@ -75,32 +75,18 @@
</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"
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 <div
use:tippy={{ use:tippy={{
content: '<span>Vámi vyplněné osobní údaje</span>', content: '<span>Vámi vyplněné osobní údaje</span>',
@ -109,7 +95,7 @@
showOnCreate: false, showOnCreate: false,
delay: 0 delay: 0
}} }}
class="flex flex-col justify-around <2xl:text-xs" class="flex flex-col justify-between leading-10 mt-4"
> >
<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span> <span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
<span <span
@ -133,7 +119,7 @@
showOnCreate: false, showOnCreate: false,
delay: 0 delay: 0
}} }}
class="md:ml-4 flex flex-col <2xl:text-xs" class="flex flex-col leading-10 mt-4"
> >
{#each $candidateData.parents as parent} {#each $candidateData.parents as parent}
<div class="flex flex-col"> <div class="flex flex-col">
@ -144,6 +130,7 @@
</div> </div>
{/each} {/each}
</div> </div>
</div>
{/if} {/if}
</div> </div>
</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];