dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-27 14:02:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: apple card header design, hover animation

Browse source
This commit is contained in:
EETagent 2022-12-04 00:12:34 +01:00
parent 490258998f
commit 87b73daf64
2 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import Circles from "$lib/components/icons/Circles.svelte"; import Circles from '$lib/components/icons/Circles.svelte';
export let title: string; export let title: string;
</script> </script>
@ -16,12 +16,19 @@
<style> <style>
.card { .card {
@apply m-3;
@apply h-full; @apply h-full;
@apply flex flex-col justify-between; @apply flex flex-col justify-between;
@apply bg-[#f8fbfc]; @apply bg-[#f8fbfc];
@apply rounded-3xl; @apply rounded-3xl;
@apply px-7 py-10; @apply px-7 py-10;
@apply transition-all duration-300;
}
.card:hover {
@apply shadow-2xl;
@apply m-0;
} }
.card h3 { .card h3 {
@apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold; @apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold;

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

@ -88,19 +88,23 @@
</script> </script>
<div class="relative card uploadCard"> <div class="relative card uploadCard">
<div class="flex flex-col sm:flex-row justify-between sm:items-center"> <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 sm:mb-0 mt-1 sm:mt-0"> <div class="mb-4 sm:mb-0 mt-1 sm:mt-0">
<FileType {filetype} filesize={filesize + " MB"} /> <FileType {filetype} filesize={filesize + ' MB'} />
</div> </div>
<div class="absolute px-7 right-0 top-4"> <div class="absolute px-7 right-0 top-4">
<StatusNotificationDot {status} /> <StatusNotificationDot {status} />
</div> </div>
</div> </div>
{#if fileDropped} {#if fileDropped}
<div class="flex content-around justify-between items-center mb-5 sm:mx-5"> <div class="body flex content-around justify-between items-center">
<div class="w-24"> <div class="w-24">
<img class="w-full" src={filetype == 'PDF' ? documentIcon : archiveIcon} alt="Icon" /> <img
class="w-full object-scale-down"
src={filetype == 'PDF' ? documentIcon : archiveIcon}
alt="Icon"
/>
</div> </div>
<svg class="hidden xl:block h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg" <svg class="hidden xl:block h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
><line ><line
@ -138,7 +142,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="flex-1 mt-6"> <div class="body">
<FileDrop <FileDrop
multiple={false} multiple={false}
maxSize={filesize * 1_000_000} maxSize={filesize * 1_000_000}
@ -166,12 +170,32 @@
@apply hidden; @apply hidden;
} }
.card { .card {
@apply m-3 bg-transparent;
@apply h-full; @apply h-full;
@apply flex flex-col justify-between; @apply flex flex-col justify-between;
@apply bg-[#f8fbfc];
@apply rounded-3xl; @apply rounded-3xl;
@apply transition-all duration-300;
}
.card:hover {
@apply shadow-2xl;
@apply m-0;
}
.header {
@apply rounded-t-3xl;
@apply px-7 pb-7 pt-14; @apply px-7 pb-7 pt-14;
background-color: rgb(220, 238, 253);
backdrop-filter: blur(15px) saturate(0.86);
-webkit-backdrop-filter: blur(15px) saturate(0.86);
@apply flex flex-col sm:flex-row justify-between sm:items-center;
}
.body {
@apply bg-[#f8fbfc];
@apply rounded-b-3xl;
@apply flex-1;
@apply p-7;
} }
.card h3 { .card h3 {
@apply text-sspsBlue text-2xl xl:text-4xl font-semibold; @apply text-sspsBlue text-2xl xl:text-4xl font-semibold;