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: general styling improvements

Browse source
This commit is contained in:
EETagent 2022-12-04 20:10:42 +01:00
parent db74f06b4c
commit 47445ba381
3 changed files with 18 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,53 +10,28 @@
const submit = async () => {
const res = await apiSubmitPortfolio();
await fetchSubmProgress();
}
};
</script>
<div class="card flex flex-col">
<div class="infoBar flex flex-row-reverse">
<StatusNotificationBig {status} />
</div>
<div class="flex flex-row justify-between relative">
<div class="relative flex flex-row justify-between">
<div>
<span class="absolute -left-16 -top-36">
<Circles />
</span>
<div class="mt-20 flex flex-col">
<div class="mt-8 flex flex-col lg:mt-12">
<h3>{title}</h3>
<slot />
</div>
</div>
<div class="flex flex-col justify-evenly w-[50%]">
{#if status === 'uploaded'}
<button on:click={submit} class="bg-green-600">
Odevzdat
<svg class="w-8 h-8 inline-block align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
</button>
{:else if status === 'submitted'}
<button class="bg-gray-500 hover:bg-gray-800">
Smazat portfolio
<svg class="w-8 h-8 inline-block align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
{:else}
<button class="bg-gray-500 hover:bg-gray-500 hover:cursor-not-allowed">Odevzdat</button>
{/if}
<button>
Zobrazit údaje
<svg class="w-8 h-8 inline-block align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
</button>
</div>
</div>
</div>
<style>
button {
@apply bg-sspsBlue text-white font-bold;
@apply hover:bg-sspsBlueDark transition-colors duration-300;
@apply text-xl;
@apply rounded-xl shadow-lg;
@apply py-3 px-2;
}
.card {
@apply m-3;
@apply h-full;

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

@ -12,7 +12,7 @@
break;
case 'uploaded':
title = 'Soubory nebyly odevzdány!';
description = 'Odevzdejte soubory prosím';
description = 'Odevzdejte soubory kliknutím zde';
break;
case 'missing':
title = 'Soubory nebyly nahrány!';
@ -23,7 +23,7 @@
<div class="flex flex-col">
<div class="info flex flex-col {status}">
<span class="text-white text-2xl font-bold">{title}</span>
<span class="text-white text-xl font-bold">{title}</span>
<span class="text-white text-md italic">{description}</span>
</div>
</div>
@ -31,7 +31,7 @@
<style>
.info {
@apply flex items-center justify-between;
@apply py-3 px-8;
@apply py-3 px-6;
@apply rounded-xl bg-red-700 shadow-md border-red-700;
@apply hover:cursor-help;
@ -43,9 +43,10 @@
.uploaded {
@apply bg-yellow-600;
@apply !cursor-pointer;
}
.missing {
@apply bg-[#ff3030ff];
@apply bg-orange-700;
}
</style>

14
frontend/src/lib/components/layout/FullLayout.svelte
View file

@ -2,14 +2,18 @@
import backgroundImage from '$lib/assets/background.jpg';
import logo from '$lib/assets/logo/ssps.svg';
import DarkModeToggle from '../DarkModeToggle.svelte';
export let hideHeader: boolean = false;
</script>
<div class="bg">
<div class="bgOverlay">
<img class="logo" src={logo} alt="SSPŠ logo" />
<div class="darkModeToggle">
<DarkModeToggle backgroundColor="dark" />
</div>
{#if !hideHeader}
<img class="logo" src={logo} alt="SSPŠ logo" />
<div class="darkModeToggle">
<DarkModeToggle backgroundColor="dark" />
</div>
{/if}
</div>
<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
</div>
@ -26,7 +30,7 @@
.bgImage {
@apply -z-20;
@apply min-w-screen absolute min-h-screen min-w-full;
@apply bg-no-repeat bg-cover;
@apply bg-cover bg-no-repeat;
background-position: 55%;
}
.bgOverlay {