From f021b808921261c378dbabbc3fa69a544e42a876 Mon Sep 17 00:00:00 2001
From: Papin Nikolai <nikolai@weirdcat.ru>
Date: Sun, 4 Aug 2024 19:06:52 +0300
Subject: [PATCH] Moved components to lib folder; slide animation for
 announcement bar

---
 .../src/{ => lib}/components/announcement.svelte    | 13 +++++++++----
 frontend/src/routes/+layout.svelte                  |  3 +++
 frontend/src/routes/+page.svelte                    |  4 +---
 3 files changed, 13 insertions(+), 7 deletions(-)
 rename frontend/src/{ => lib}/components/announcement.svelte (68%)

diff --git a/frontend/src/components/announcement.svelte b/frontend/src/lib/components/announcement.svelte
similarity index 68%
rename from frontend/src/components/announcement.svelte
rename to frontend/src/lib/components/announcement.svelte
index b074e70..b3f3ec1 100644
--- a/frontend/src/components/announcement.svelte
+++ b/frontend/src/lib/components/announcement.svelte
@@ -5,15 +5,20 @@
 -->
 
 <script>
+    import { slide } from 'svelte/transition';
     export let message;
     export let color = 'red';
     let noderef;
+
+    let visible = true;
 </script>
 
-<div bind:this={noderef} class="announcement" style="background-color: {color};">
-    <span>{message}</span>
-    <input class="close-button" type="button" value="" on:click={() => noderef.parentNode.removeChild(noderef)}>
-</div>
+{#if visible}
+    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
+        <span>{message}</span>
+        <input class="close-button" type="button" value="" on:click={() => visible = false}>
+    </div>
+{/if}
 
 <style>
     .announcement {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 672be56..d0b8e5f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -6,7 +6,10 @@
     import '$lib/css/fonts.css';
     import '$lib/css/colors.css';
     import '$lib/css/anims.css';
+
+    import Announcement from '$lib/components/announcement.svelte';
     
 </script>
 
+<Announcement message="This is an announcement" color="var(--col_accent)"/>
 <slot></slot>
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index c59ed0c..2937019 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,9 +1,7 @@
 <script>
-	import Announcement from "../components/announcement.svelte";
+	import Announcement from "../lib/components/announcement.svelte";
 
 </script>
 
-<Announcement message="This is an announcement" color="blue"/>
-
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> <i>(SvelteKit)</i> to read the <b>SvelteKit</b> documentation</p>
\ No newline at end of file