From aaab8f2c9897fa01f440c8f826adf71e3af2c4c8 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Wed, 5 Feb 2025 14:23:22 +0000
Subject: [PATCH] Added Sliding Card which has content slide over the top of
 the main information

---
 src/lib/components/{ => Cards}/Card.svelte  |   0
 src/lib/components/Cards/SlidingCard.svelte | 102 ++++++++++++++++++++
 src/lib/index.ts                            |   4 +-
 src/routes/contact/+page.svelte             |   2 +-
 src/skills.svelte                           |   2 +-
 5 files changed, 107 insertions(+), 3 deletions(-)
 rename src/lib/components/{ => Cards}/Card.svelte (100%)
 create mode 100644 src/lib/components/Cards/SlidingCard.svelte

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Cards/Card.svelte
similarity index 100%
rename from src/lib/components/Card.svelte
rename to src/lib/components/Cards/Card.svelte
diff --git a/src/lib/components/Cards/SlidingCard.svelte b/src/lib/components/Cards/SlidingCard.svelte
new file mode 100644
index 0000000..bbd315d
--- /dev/null
+++ b/src/lib/components/Cards/SlidingCard.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    function onClick() {
+        dispatch('click');
+    }
+</script>
+
+<style>
+    .sliding-card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        flex: 2 1 15em;
+        padding: 0.5em 2.5em 2em 2.5em;
+        background: var(--bg-secondary);
+        border-radius: 0.5em;
+        scroll-snap-align: start;
+        transition: all 0.3s ease-in-out;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .sliding-card:hover {
+        box-shadow: .5em .5em .5em var(--hover);
+    }
+
+    .sliding-card .sliding-card-header :global(div) {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0em;
+    }
+
+    .content-wrapper {
+        position: relative;
+        width: 100%;
+        overflow: hidden; /* Ensure smooth sliding */
+    }
+
+    .sliding-card-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        flex-grow: 1;
+        z-index: 1; /* Keep it below the sliding content */
+    }
+
+    .sliding-content {
+        position: absolute; /* Now it sits on top */
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%; /* Cover entire content */
+        background: var(--bg-secondary);
+        transform: translateY(100%); /* Start hidden */
+        transition: transform 0.3s ease-in-out;
+        z-index: 2; /* Now above main content */
+    }
+
+    .sliding-card:hover .sliding-content {
+        transform: translateY(0);
+    }
+
+    .sliding-card .sliding-card-footer :global(div){
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1em;
+        max-width: 100%;
+        justify-content: space-between;
+    }
+</style>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="sliding-card" on:click={onClick}>
+    <div class="sliding-card-header">
+        <slot name="header"></slot>
+    </div>
+    <hr />
+    
+    <!-- Wrapper to stack sliding-card-content and sliding-content -->
+    <div class="content-wrapper">
+        <div class="sliding-card-content">
+            <slot name="content"></slot>
+        </div>
+        <div class="sliding-content">
+            <slot name="sliding-content"></slot>
+        </div>
+    </div>
+
+    <hr class="not-required"/>
+    <div class="sliding-card-footer">
+        <slot name="footer"></slot>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/index.ts b/src/lib/index.ts
index a8fc0a6..5c02902 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -14,7 +14,8 @@ import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
 import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
 import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
 
-import Card from '$lib/components/Card.svelte';
+import Card from '$lib/components/Cards/Card.svelte';
+import SlidingCard from '$lib/components/Cards/SlidingCard.svelte';
 import Modal from '$lib/components/Modal.svelte';
 
 
@@ -35,5 +36,6 @@ export {
     ErrorIcon,
 
     Card,
+    SlidingCard,
     Modal
 };
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index d75f0c8..acb1d6a 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Card from '$lib/components/Card.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
     import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 
diff --git a/src/skills.svelte b/src/skills.svelte
index 1af6bee..859c2ff 100644
--- a/src/skills.svelte
+++ b/src/skills.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     export let skills: any;
 
-    import Card from '$lib/components/Card.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
     import Modal from '$lib/components/Modal.svelte';
 
     let showModal: boolean = false;