chore: Style cleanup

kiosion · Sep 18, 2023 · 64ab640 · 64ab640
1 parent 9553adc
commit 64ab640
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 31 deletions.
diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
@@ -39,14 +39,20 @@ body {
   }
   &:not(.is-loaded) {
     cursor: wait !important;
+
+    & a,
+    & button,
+    & [role='button'] {
+      cursor: not-allowed !important;
+    }
   }
   &.is-loading {
     cursor: wait !important;
 
     & a,
     & button,
     & [role='button'] {
-      cursor: wait !important;
+      cursor: not-allowed !important;
     }
   }
 }

diff --git a/svelte-app/src/components/document/content/common/summary/heading.svelte b/svelte-app/src/components/document/content/common/summary/heading.svelte
@@ -14,7 +14,7 @@
   let expanded = false;
 </script>
 
-<Hoverable classes={headingsExist ? '' : 'not-allowed'}>
+<Hoverable class={headingsExist ? '' : 'not-allowed'}>
   <Tooltip text={$t('Toggle summary')} fixed>
     <div
       class="focusOutline-sm flex flex-row items-center justify-between rounded-md px-4 py-4"

diff --git a/svelte-app/src/components/hoverable.svelte b/svelte-app/src/components/hoverable.svelte
@@ -1,40 +1,33 @@
 <script lang="ts">
   import { createEventDispatcher, onDestroy } from 'svelte';
 
-  const dispatch = createEventDispatcher();
-
-  let target: HTMLElement;
-
-  export let classes = '',
-    hovered = false,
+  export let hovered = false,
     setPointer = true;
 
-  const handleHoverIn = () => {
-    hovered = true;
-    dispatch('update', { state: true });
-  };
-
-  const handleHoverOut = () => {
-    hovered = false;
-    dispatch('update', { state: false });
-  };
-
-  onDestroy(() => {
-    handleHoverOut();
-  });
+  const dispatch = createEventDispatcher(),
+    handleHoverIn = () => {
+      hovered = true;
+      dispatch('update', { state: true });
+    },
+    handleHoverOut = () => {
+      hovered = false;
+      dispatch('update', { state: false });
+    };
+
+  onDestroy(handleHoverOut);
 </script>
 
 <span
-  class={classes}
+  class={$$props.class || undefined}
   class:cursor-pointer={setPointer}
   data-test-id="hover-target"
-  bind:this={target}
   on:mouseover={() => handleHoverIn()}
   on:mouseout={() => handleHoverOut()}
   on:focus={() => (hovered = true)}
   on:focusin={() => (hovered = true)}
   on:focusout={() => (hovered = false)}
   on:blur={() => (hovered = false)}
+  role="none"
 >
   <slot />
 </span>

diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div class="fixed left-6 right-6 top-4 z-10 flex items-center justify-center">
-  <Hoverable bind:hovered>
+  <Hoverable setPointer={false} bind:hovered>
     <nav
       class="flex w-full max-w-6xl flex-col items-center justify-center rounded-lg border px-6 py-2 backdrop-blur-lg transition-[background-color,border-color] {hovered
         ? 'border-dark/60 bg-light/60 dark:border-light/60 dark:bg-dark/70'

diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
@@ -28,7 +28,6 @@
 
   let scrollContainer: HTMLDivElement,
     pageContainer: HTMLDivElement,
-    preloadUrls = ['/assets/logo-text--short.webp'],
     unsubscribers = [] as Unsubscriber[],
     setLoadingTimer: ReturnType<typeof setTimeout> | undefined,
     invalidationStrategy = createExponentialBackoffStrategy({
@@ -99,12 +98,6 @@
   $: browser && (!data.author || !data.config) && invalidationStrategy();
 </script>
 
-<svelte:head>
-  {#each preloadUrls as image}
-    <link rel="preload" as="image" href={image} />
-  {/each}
-</svelte:head>
-
 <svelte:body
   use:classList={`${$theme} ${$navigating ? 'is-loading' : 'is-loaded'}`}
   on:contextmenu|preventDefault={(e) => setMenuState(e, pageContainer)}