Merge pull request #52 from miguelmagueijo/main

Transform Changelog into a modal

frontend/src/app.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* FIXME: why does this need to be in app.css? */
+body.modal-open {
+    position: fixed;
+}

frontend/src/assets/CloseCross.svelte

@@ -0,0 +1,18 @@
+<script>
+    export let width = "";
+    export let height = "";
+    export let classes = "";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="{classes}"
+    width="{width}"
+    height="{height}"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="currentColor"
+        d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+    ></path>
+</svg>

frontend/src/components/Changelog/ChangelogButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { modalStore } from "./store";
+</script>
+
+<button
+    type="button"
+    class="text-kuRed/75 underline md:no-underline md:text-sm relative"
+    on:click="{modalStore.open}"
+>
+    View Changelog
+</button>

frontend/src/components/Changelog/ChangelogModal.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import CloseCross from "../../assets/CloseCross.svelte";
+    import { modalStore } from "./store";
+
+    const changelogItems = [
+        {
+            date: "2024-01-13",
+            changes: [
+                "Fixed opening in new tab and copying of course links",
+                "Fixed back button when coming from an external page",
+            ],
+        },
+        {
+            date: "2024-02-05",
+            changes: [
+                "Fixed that performing a vector search and a normal filter will destroy results that should appear.",
+                "Fixed that statistics weren't being updated",
+            ],
+        },
+        {
+            date: "2024-06-24",
+            changes: [
+                "Switched to a quantised multilingual search so that results are more accurate, faster and work with all languages",
+            ],
+        },
+    ];
+
+    // Start with modal closed
+    onMount(() => {
+        modalStore.close();
+    });
+</script>
+
+{#if $modalStore}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+        class="absolute w-screen h-screen z-10 bg-black/40 flex justify-center items-center"
+        on:click|self="{modalStore.close}"
+    >
+        <div
+            class="bg-white text-m font-normal h-fit mx-4 max-h-[75vh] md:max-h-[500px] overflow-y-scroll rounded"
+        >
+            <div
+                class="flex justify-between mb-6 sticky top-0 bg-white pt-6 pb-4 border-b-2 px-6"
+            >
+                <h3 class="font-bold text-2xl">Changelog</h3>
+                <button type="button" on:click="{modalStore.close}">
+                    <CloseCross classes="size-6" />
+                </button>
+            </div>
+            <ul class="space-y-4 -mt-4 px-6">
+                {#each changelogItems as { date, changes }}
+                    <li>
+                        <p class="font-bold text-lg">{date}</p>
+                        <ul>
+                            {#each changes as change}
+                                <li>{change}</li>
+                            {/each}
+                        </ul>
+                    </li>
+                {/each}
+            </ul>
+            <button
+                class="my-6 py-2 px-6 mx-auto block bg-kuRed text-white"
+                type="button"
+                on:click="{modalStore.close}"
+            >
+                Close
+            </button>
+        </div>
+    </div>
+{/if}

frontend/src/components/Changelog/store.ts

@@ -0,0 +1,25 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+function modalStoreFunctions() {
+    const { subscribe, set } = writable<boolean>(false);
+
+    return {
+        subscribe,
+        open: () => {
+            console.log(document.body.scrollTop);
+            set(true);
+            if (browser) {
+                document.body.classList.add("modal-open");
+            }
+        },
+        close: () => {
+            set(false);
+            if (browser) {
+                document.body.classList.remove("modal-open");
+            }
+        },
+    };
+}
+
+export const modalStore = modalStoreFunctions();

frontend/src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import CheckboxMenu from "../components/CheckboxMenu.svelte";
     import BigCheckbox from "../components/BigCheckbox.svelte";
-    import Changelog from "../components/Changelog.svelte";
+    import ChangelogModal from "../components/Changelog/ChangelogModal.svelte";
+    import ChangelogButton from "../components/Changelog/ChangelogButton.svelte";
     import Footer from "../components/Footer/Footer.svelte";
     import { queryStore, clearAll } from "../stores";
 
@@ -12,6 +13,7 @@
     import OverviewCard from "../components/OverviewCard/OverviewCard.svelte";
     import type { Overview } from "../course";
     import { browser } from "$app/environment";
+
     let loading = true;
     let error: string | null = null;
     let API_URL = apiUrl();
@@ -196,9 +198,10 @@
 </svelte:head>
 
 <div class="flex flex-col min-h-screen justify-between relative">
-    <Changelog />
+    <ChangelogModal />
     <main class="flex flex-col items-center space-y-4 mt-10">
-        <h1 class="text-brand-500 text-4xl font-bold">KU Courses 2.0</h1>
+        <h1 class="text-brand-500 text-4xl font-bold -mb-4">KU Courses 2.0</h1>
+        <ChangelogButton />
         <div>
             <input type="text" placeholder="Search" bind:value="{search}" />
             <button