dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-09 09:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve responsivness

Browse source
This commit is contained in:
Sebastian Pravda 2022-12-23 17:30:10 +01:00
parent 030e1a77d8
commit a463394aa3
No known key found for this signature in database
GPG key ID: F3BC84F08EFA3F57
4 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@
import DashboardUploadCard from './DashboardUploadCard.svelte'; import DashboardUploadCard from './DashboardUploadCard.svelte';
import type { ApiError } from '$lib/@api'; import type { ApiError } from '$lib/@api';
export let compact: boolean = false;
let error: string | null = null; let error: string | null = null;
const onFileDrop = async (detail: any) => { const onFileDrop = async (detail: any) => {
@ -26,6 +27,7 @@
<DashboardUploadCard <DashboardUploadCard
{error} {error}
compact
on:filedrop={(e) => onFileDrop(e.detail)} on:filedrop={(e) => onFileDrop(e.detail)}
on:delete={onDelete} on:delete={onDelete}
title="Motivační dopis" title="Motivační dopis"

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

@ -108,7 +108,7 @@
showOnCreate: false, showOnCreate: false,
delay: 0 delay: 0
}} }}
class="ml-10 flex flex-col justify-around mt-10"> class="ml-10 <xl:ml-4 flex flex-col justify-around mt-10">
{#each $candidateData.parents as parent} {#each $candidateData.parents as parent}
<div class="flex flex-col"> <div class="flex flex-col">
<span class="font-bold text-sspsBlue text-xl">{parent.name + " " + parent.surname}</span> <span class="font-bold text-sspsBlue text-xl">{parent.name + " " + parent.surname}</span>

47
frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
View file

@ -20,6 +20,7 @@
export let filesize: number; export let filesize: number;
export let fileType: number; export let fileType: number;
export let placeholder: string = ''; export let placeholder: string = '';
export let compact: boolean = false;
let fileDropped: boolean = false; let fileDropped: boolean = false;
let progress: number = 1; let progress: number = 1;
@ -101,9 +102,11 @@
<div class="card uploadCard relative"> <div class="card uploadCard relative">
<div class="header"> <div class="header">
<h3 class="mb-4 sm:mb-0">{title}</h3> <h3 class="mb-4 sm:mb-0">{title}</h3>
<div class="mb-4 mt-1 sm:mb-0 sm:mt-0"> {#if !compact}
<FileType {filetype} filesize={filesize + ' MB'} /> <div class="mb-4 mt-1 sm:mb-0 sm:mt-0">
</div> <FileType {filetype} filesize={filesize + ' MB'} />
</div>
{/if}
<div class="absolute right-0 top-4 flex items-center px-7"> <div class="absolute right-0 top-4 flex items-center px-7">
{#if status === 'uploaded'} {#if status === 'uploaded'}
<button <button
@ -116,24 +119,26 @@
</div> </div>
{#if fileDropped && error === null} {#if fileDropped && error === null}
<div class="body uploaded flex content-around items-center justify-between"> <div class="body uploaded flex content-around items-center justify-between">
<div class="w-24"> {#if !compact}
<img <div class="w-24">
class="w-full object-scale-down" <img
src={filetype == 'PDF' ? documentIcon : archiveIcon} class="w-full object-scale-down"
alt="Icon" src={filetype == 'PDF' ? documentIcon : archiveIcon}
/> alt="Icon"
</div> />
<svg class="h-25 hidden xl:block" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg" </div>
><line <svg class="h-25 hidden xl:block" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
x1="0" ><line
y="0" x1="0"
x2="0" y="0"
y2="40" x2="0"
stroke="#406280ff" y2="40"
stroke-width="2" stroke="#406280ff"
stroke-dasharray="3" stroke-width="2"
/></svg stroke-dasharray="3"
> /></svg
>
{/if}
<div class="hidden items-center xl:block"> <div class="hidden items-center xl:block">
{#if bytesTotal === 0 || Math.round(progress * 100) === 100} {#if bytesTotal === 0 || Math.round(progress * 100) === 100}
<h2 class="text-xl font-bold">{status === 'submitted' ? 'Odesláno' : 'Nahráno'}</h2> <h2 class="text-xl font-bold">{status === 'submitted' ? 'Odesláno' : 'Nahráno'}</h2>

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

@ -36,14 +36,14 @@
<FullLayout> <FullLayout>
<div class="dashboard dashboardDesktop"> <div class="dashboard dashboardDesktop">
<div class="movable name col-span-5" class:col-span-5={showDetails} class:col-span-3={!showDetails}> <div class="movable name col-span-3" class:showDetailsInfoCard={showDetails}>
<DashboardInfoCard bind:showDetails={showDetails} status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}> <DashboardInfoCard bind:showDetails={showDetails} status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
<span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span> <span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span>
<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" class:col-span-3={showDetails} class:col-span-5={!showDetails}> <div class="movable coverletter col-span-5" class:showDetailsUploadCard={showDetails}>
<CoverLetterUploadCard /> <CoverLetterUploadCard compact={showDetails} />
</div> </div>
<div class="portfolio col-span-4"> <div class="portfolio col-span-4">
<PortfolioLetterUploadCard /> <PortfolioLetterUploadCard />
@ -80,6 +80,12 @@
</FullLayout> </FullLayout>
<style> <style>
.showDetailsInfoCard {
@apply col-span-5 <2xl: col-span-6;
}
.showDetailsUploadCard {
@apply col-span-3 <2xl: col-span-2;
}
.dashboardDesktop { .dashboardDesktop {
@apply h-[85vh] w-[85vw]; @apply h-[85vh] w-[85vw];
@apply hidden grid-cols-8 grid-rows-2 gap-10 md:grid; @apply hidden grid-cols-8 grid-rows-2 gap-10 md:grid;