small style improvements

GitPaulo · Jan 6, 2025 · f7a737e · f7a737e
1 parent 85f7e26
commit f7a737e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/src/lib/components/ActionBar.svelte b/src/lib/components/ActionBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import { slide } from "svelte/transition";
+  import { fade } from "svelte/transition";
   import {
     autoMode,
     toggleAutoMode,
@@ -29,7 +29,7 @@
 </script>
 
 <div
-  transition:slide
+  transition:fade
   id="action-bar"
   class="fixed md:absolute top-1 sm:top-2 mt-2 bg-white rounded-lg p-3 sm:p-2 shadow flex items-center justify-between z-50 overflow-auto"
 >

diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
@@ -4,11 +4,8 @@
 </script>
 
 {#if $loading}
-  <div
-    transition:slide
-    class="relative flex flex-col mb-8 justify-center items-center"
-  >
-    <div class="bg-white rounded-lg p-2 shadow max-w-xl w-full relative">
+  <div class="relative flex flex-col mb-8 justify-center items-center">
+    <div class="bg-white rounded-lg p-6 shadow w-full relative max-w-fit">
       <div class="text-center">
         <img src="logo.png" alt="FFXIV Journey" class="h-16 mx-auto" />
         <h1 class="text-2xl sm:text-3xl font-bold text-blue-600 mt-2">
@@ -24,9 +21,10 @@
     </div>
   </div>
 {:else}
-  <div class="hidden sm:flex justify-end my-2" transition:slide>
+  <div class="hidden sm:flex justify-end my-2">
     <div
       class="group flex items-center p-3 bg-white rounded-lg shadow relative transition-all duration-300"
+      transition:slide
     >
       <h1
         class="text-blue-600 text-lg font-bold opacity-0 transform scale-95 hidden group-hover:block group-hover:opacity-100 group-hover:scale-100 transition-all duration-300"

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -435,7 +435,10 @@
   <!-- OG Tags -->
   <title>FFXIV Journey</title>
   <meta property="og:type" content="website" />
-  <meta property="og:image:alt" content="FFXIV MSQ Progress Tracker preview" />
+  <meta
+    property="og:image:alt"
+    content="Track and share your FFXIV MSQ progress easily!"
+  />
   <!-- Preload backgrounds -->
   <link rel="prefetch" href="background_arealmreborn.webp" as="image" />
   <link rel="prefetch" href="background_heavensward.webp" as="image" />
@@ -448,27 +451,21 @@
 <Modal />
 
 <Title />
-
-{#if !$loading}
+{#if $loading}
+  <Loading />
+{:else}
   <ActionBar
     {lastCheckedQuestId}
     on:generateLink={generateShareableLink}
     on:scrollToLastQuest={scrollToLastCheckedQuest}
     on:scrollToTop={scrollToTop}
   />
-
   <Progress />
-{/if}
-
-{#if $loading}
-  <Loading />
-{:else}
   <Search
     placeholder="Search quest name, description and unlocks..."
     bind:value={searchQuery}
     on:input={handleSearchInput}
   />
-
   {#each $filteredQuests as expansion}
     <details transition:fade class="mb-8" open={openExpansions[expansion.name]}>
       <summary
@@ -602,20 +599,22 @@
     </details>
   {/each}
 
-  {#if $filteredQuests && $filteredQuests.length === 0}
+  <!-- No results container (fade hack) -->
+  <div class="relative">
     {#if $filteredQuests && $filteredQuests.length === 0}
-      <div class="flex justify-center">
-        <div class="inline-block p-4 bg-white rounded-lg shadow">
-          <p class="text-center text-gray-600">No quests found.</p>
+      <div transition:fade class="absolute inset-0">
+        <div class="flex justify-center">
+          <div class="inline-block p-4 bg-white rounded-lg shadow">
+            <p class="text-center text-gray-600">No quests found.</p>
+          </div>
         </div>
+        <img
+          src="moogle_no_results.png"
+          alt="A moogle displaying no results found"
+          loading="lazy"
+          class="mx-auto mt-2 w-3/12 max-w-max min-w-20 object-contain"
+        />
       </div>
-      <img
-        transition:fade
-        src="moogle_no_results.png"
-        alt="A moogle displaying no results found"
-        loading="lazy"
-        class="mx-auto mt-2 w-3/12 max-w-max min-w-20 object-contain"
-      />
     {/if}
-  {/if}
+  </div>
 {/if}