From e6b3916180e89d80214fb91dfc94fc6c9dcfc906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 26 Aug 2023 15:12:22 +0200
Subject: [PATCH] fix, style: static footer size

---
 webui/src/components/layout/Footer.svelte | 60 +++++------------------
 1 file changed, 12 insertions(+), 48 deletions(-)

diff --git a/webui/src/components/layout/Footer.svelte b/webui/src/components/layout/Footer.svelte
index 5522a8f..652bb0f 100644
--- a/webui/src/components/layout/Footer.svelte
+++ b/webui/src/components/layout/Footer.svelte
@@ -1,59 +1,22 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
-  import IconButton from "../utils/IconButton.svelte";
+  import Icon from "../utils/Icon.svelte"
   import Jobs from "./Jobs.svelte";
   import Notifications from "./Notifications.svelte";
   import { i18n } from "../../i18n";
-  const dispatch = createEventDispatcher();
 
-  let rootEl: HTMLElement;
-  let contentEl: HTMLElement;
-  let contentHeight = 0;
   let hidden = true;
-
   let activeJobs: number;
 
-  onMount(() => {
-    const rootObserver = new ResizeObserver((entries) => {
-      // should be only one
-      entries.forEach((entry) => {
-        dispatch("resize", entry.contentRect.height);
-      });
-    });
-    rootObserver.observe(rootEl);
-
-    const contentObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        contentHeight = entry.contentRect.height;
-      });
-    });
-    contentObserver.observe(contentEl);
-
-    rootEl.style.top = `${rootEl.getBoundingClientRect().top}px`;
-  });
-
-  function toggleHidden() {
-    if (hidden) {
-      rootEl.style.top = "unset";
-    }
-    hidden = !hidden;
-  }
-
-  function onTransitionEnd(ev: TransitionEvent) {
-    if (ev.propertyName === "bottom" && hidden) {
-      rootEl.style.top = `${rootEl.getBoundingClientRect().top}px`;
-    }
-  }
+  let infoHeight = -1;
 </script>
 
 <footer
   id="footer"
-  bind:this={rootEl}
   class:hidden
-  style="--contentHeight: {contentHeight}px"
-  on:transitionend={onTransitionEnd}
+  style="--info-height: -{infoHeight}px"
 >
-  <div class="status">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="status" bind:clientHeight={infoHeight} on:click={() => hidden = !hidden}>
     <div class="info">
       {#if activeJobs > 0}
         {$i18n.t("Active jobs:")} {activeJobs}
@@ -62,15 +25,12 @@
       {/if}
     </div>
     <div class="icons">
-      {#if contentHeight > 0}
-        <IconButton
+        <Icon
           name="{hidden ? 'up' : 'down'}-arrow"
-          on:click={toggleHidden}
         />
-      {/if}
     </div>
   </div>
-  <div class="content" bind:this={contentEl}>
+  <div class="content">
     <Notifications />
     <Jobs bind:active={activeJobs} />
   </div>
@@ -90,7 +50,7 @@
   }
 
   footer.hidden {
-    bottom: calc(var(--contentHeight) * -1);
+    bottom: -20vh;
   }
 
   .status {
@@ -102,6 +62,8 @@
     top: 0;
     width: 100%;
 
+    cursor: pointer;
+
     .info {
       flex-grow: 1;
       opacity: 0.75;
@@ -110,6 +72,8 @@
 
   .content {
     margin-top: 2em;
+    overflow-y: scroll;
+    height: 20vh;
   }
 
   :global(#footer .content > *) {