Adding transition component and adding to layout for page transitions.

2025-09-08 17:40:22 +00:00 · 2022-07-07 16:45:44 -07:00 · 2022-07-07 16:45:44 -07:00 · b39f8ef1de
commit b39f8ef1de
parent 3ffc8fdce3
6 changed files with 114 additions and 26 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
  "devDependencies": {
    "@playwright/test": "^1.23.2",
    "@rgossiaux/svelte-headlessui": "1.0.2",
+    "@rgossiaux/svelte-heroicons": "^0.1.2",
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "@types/cookie": "^0.5.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -5,6 +5,7 @@ specifiers:
  '@lukeed/uuid': ^2.0.0
  '@playwright/test': ^1.23.2
  '@rgossiaux/svelte-headlessui': 1.0.2
+  '@rgossiaux/svelte-heroicons': ^0.1.2
  '@sveltejs/adapter-auto': next
  '@sveltejs/kit': next
  '@types/cookie': ^0.5.1
@ -37,6 +38,7 @@ dependencies:
 devDependencies:
  '@playwright/test': 1.23.2
  '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0
+  '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0
  '@sveltejs/adapter-auto': 1.0.0-next.54
  '@sveltejs/kit': 1.0.0-next.361_svelte@3.49.0+vite@2.9.13
  '@types/cookie': 0.5.1
@ -184,6 +186,14 @@ packages:
      svelte: 3.49.0
    dev: true

+  /@rgossiaux/svelte-heroicons/0.1.2_svelte@3.49.0:
+    resolution: {integrity: sha512-c5Ep1QDvBo9HD/P0AxbXItDbn6x77fldCjjL0aBjNseUntV4fkdHkBde1IaLr8i0kmrhTSovjkIen8W83jUPzg==}
+    peerDependencies:
+      svelte: ^3.44.0
+    dependencies:
+      svelte: 3.49.0
+    dev: true
+
  /@rollup/pluginutils/4.2.1:
    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
    engines: {node: '>= 8.0.0'}
--- a/src/lib/components/transition/index.svelte
+++ b/src/lib/components/transition/index.svelte
@ -0,0 +1,76 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { page } from '$app/stores'
+
+  interface Transition {
+    type: 'fade' | 'stagger' | 'page'
+    duration?: number
+    delay?: number
+  }
+
+  export let transition: Transition
+</script>
+
+{#if transition.type === 'page'}
+  {#key $page.url}
+    <div in:fly={{ y: -50, duration: 250 }}>
+      <slot />
+    </div>
+  {/key}
+{/if}
+
+{#if transition.type === 'fade'}
+  <div
+    class="fade"
+    style:animation-duration="{transition.duration}ms"
+    style:animation-delay="{transition.delay}ms"
+  >
+    <slot />
+  </div>
+{/if}
+
+{#if transition.type === 'stagger'}
+  <div
+    class="stagger"
+    style:animation-duration="{transition.duration * 300}ms"
+    style:animation-delay="{transition.delay}ms"
+  >
+    <slot />
+  </div>
+{/if}
+
+<style>
+  div {
+    height: 100%;
+  }
+
+  .fade {
+    animation-name: fadeIn;
+  }
+
+  .stagger {
+    opacity: 0;
+    animation-name: stagger;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes stagger {
+    from {
+      opacity: 0;
+      transform: translateY(50px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+</style>
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -1,36 +1,32 @@
 <script lang="ts">
  import Header from '$lib/header/Header.svelte';
+  import Transition from '$lib/components/transition/index.svelte';
  // import 'carbon-components-svelte/css/all.css';
  import '$root/styles/styles.scss';
 </script>

-<div class="fade" style:animation-duration="250ms" style:animation-delay="250ms">
-  <Header />
-  <main>
-    <slot />
-  </main>
-  <footer>
-    <p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
-    <p>
-      <a href="https://www.flaticon.com/free-icons/board-game" title="board game icons">Board game icons created by Freepik - Flaticon</a>
-    </p>
-  </footer>
-</div>
+<Transition transition={{ type: 'fade', duration: 250 }}>
+  <div class="wrapper">
+    <Header />
+    <Transition transition={{ type: 'page' }}>
+      <main>
+        <slot />
+      </main>
+    </Transition>
+    <footer>
+      <p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
+      <p>
+        <a href="https://www.flaticon.com/free-icons/board-game" title="board game icons">Board game icons created by Freepik - Flaticon</a>
+      </p>
+    </footer>
+  </div>
+</Transition>

 <style>
-  .fade {
+  .wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
-    animation-name: fadeIn;
-  }
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
  }

  main {
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -169,12 +169,13 @@ body {
 body {
  font-family: var(--font-serif);
  font-size: var(--font-18);
-  color: var(--color-text-primary);
+  // color: var(--color-text-primary);
  // background-color: var(--color-bg-primary);
-  background-color: #2d3a3a;
+  background-color: var(--bg);
+  opacity: var(--bg-opacity);
  // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
-  background-attachment: fixed;
-  background-size: cover;
+  // background-attachment: fixed;
+  // background-size: cover;
 }

 a {
@ -193,6 +194,7 @@ input {
  padding: var(--spacing-8);
  font-size: var(--font-16);
  border-radius: var(--radius-base);
+  background-color: var(--clr-input-bg);
  border: none;
 }

--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@ -58,6 +58,9 @@ html[data-theme='🌛 Night'] {
  --clr-token-3: hsl(173 100% 66%);
  --clr-token-4: hsl(0 0% 98%);
  --clr-token-5: hsl(173 10% 60%);
+
+  /* Input Fields */
+  --input-bg: #181a1b;
 }

 html[data-theme='☀️ Daylight'] {