add: frontend profile data etc

2024-09-10 18:52:32 +02:00
parent f0b2409963
commit b34a85e9d6
21 changed files with 1927 additions and 693 deletions
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -0,0 +1,127 @@
+<script>
+  import { quintOut } from "svelte/easing";
+
+  import { createEventDispatcher } from "svelte";
+
+  const modal = (/** @type {Element} */ node, { duration = 300 } = {}) => {
+    const transform = getComputedStyle(node).transform;
+
+    return {
+      duration,
+      easing: quintOut,
+      css: (/** @type {any} */ t, /** @type {number} */ u) => {
+        return `transform:
+            ${transform}
+            scale(${t})
+            translateY(${u * -100}%)
+          `;
+      },
+    };
+  };
+
+  const dispatch = createEventDispatcher();
+  function closeModal() {
+    dispatch("close", {});
+  }
+</script>
+
+<div class="modal-background">
+  <div
+    transition:modal={{ duration: 1000 }}
+    class="modal"
+    role="dialog"
+    aria-modal="true"
+  >
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a
+      title="Close"
+      class="modal-close"
+      on:click={closeModal}
+      role="button"
+      tabindex="0"
+      on:keydown={(e) => e.key == "Enter" && closeModal()}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 384 512"
+        aria-hidden="true"
+      >
+        <path
+          d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+        />
+      </svg>
+      <span class="sr-only">Close modal</span>
+    </a>
+    <div class="container">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .modal-background {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.9);
+    z-index: 9999;
+    display: flex;
+  }
+
+  .modal {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 70%;
+    box-shadow: 0 0 10px hsl(0 0% 0% / 10%);
+    transform: translate(-50%, -50%);
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  @media (max-width: 990px) {
+    .modal {
+      width: 90%;
+    }
+  }
+  .modal-close {
+    border: none;
+  }
+
+  .modal-close svg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    fill: rgb(14 165 233 /1);
+    transition: all 0.5s;
+  }
+  .modal-close:hover svg {
+    fill: rgb(225 29 72);
+    transform: scale(1.5);
+  }
+  .modal .container {
+    max-height: 90vh;
+    overflow-y: auto;
+    align-items: center;
+  }
+  @media (min-width: 680px) {
+    .modal .container {
+      flex-direction: column;
+      left: 0;
+      width: 100%;
+    }
+  }
+</style>