CLASSROOMIO-T-80: Replace sapper with sveltekit

2023-08-02 19:35:27 +01:00
parent 8ffdf319b3
commit 7dfbb05451
320 changed files with 5207 additions and 18330 deletions
@@ -0,0 +1,65 @@
+<script>
+  import { afterUpdate } from 'svelte';
+  import CloseButton from '../Buttons/Close/index.svelte';
+
+  export let open = false;
+  export let onClose = () => {};
+  export let modalHeading = '';
+  export let width = '';
+  export let maxWidth = '';
+  export let containerClass = '';
+  export let size = '';
+
+  afterUpdate(() => {
+    if (open) {
+      if (!document) return;
+      document.getElementsByTagName('body')[0].style.overflow = 'hidden';
+    } else {
+      if (!document) return;
+      document.getElementsByTagName('body')[0].style.overflow = 'auto';
+    }
+  });
+</script>
+
+{#if open}
+  <button
+    class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 bg-opacity-50"
+    on:click={onClose}
+  >
+    <div aria-hidden="true" class="backdrop" />
+    <button
+      class="{maxWidth || 'container'} {size === 'sm'
+        ? 'small'
+        : ''} bg-white dark:bg-gray-800 mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
+      on:click={(e) => e.stopPropagation()}
+    >
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="dark:text-white text-xl m-0">
+          {modalHeading}
+        </h3>
+        <CloseButton onClick={onClose} contained={true} />
+      </div>
+
+      <div class="body p-1 h-4/5 overflow-y-auto {containerClass}">
+        <slot />
+      </div>
+    </button>
+  </button>
+{/if}
+
+<style>
+  .dialog {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .container {
+    max-width: 1000px;
+  }
+  .body {
+    max-height: 60vh;
+  }
+
+  .small {
+    max-width: 388px;
+  }
+</style>