Style changes

- Shrink GitHub corner icon - Make sticky bar more compact
QuestPackageManager · Aug 22, 2024 · 33c0da9 · 33c0da9
1 parent b575328
commit 33c0da9
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 64 deletions.
diff --git a/source/website/src/components/GithubCorner.astro b/source/website/src/components/GithubCorner.astro
@@ -31,8 +31,8 @@ const {
     position: fixed;
     top: 0;
     right: 0;
-    height: 100px;
-    width: 100px;
+    height: 64px;
+    width: 64px;
     z-index: 200;
     clip-path: polygon(100% 0, 101% 100%, 0 -1%);
 

diff --git a/source/website/src/components/StickyBar.astro b/source/website/src/components/StickyBar.astro
@@ -0,0 +1,102 @@
+---
+import ModFilter from "../components/ModFilter.astro";
+import DownloadMarkedModsLink from "../components/DownloadMarkedModsLink.astro";
+
+const { gameVersion } = Astro.props as {
+  gameVersion: string;
+};
+---
+
+<div
+  class={`
+    before:absolute
+    before:backdrop-blur
+    before:content['']
+    before:inset-0
+    before:z-[-1]
+    bg-header-footer-bg
+    hidden
+    mx-auto
+    p-4
+    script-block
+    sticky
+    text-[0]
+    text-center
+    top-0
+    w-full
+    z-10
+  `}
+>
+  <ModFilter
+    class={`
+      align-middle
+      backdrop-blur
+      bg-header-input-bg
+      border
+      border-white-alpha-20
+      max-w-full
+      mx-auto
+      p-1
+      placeholder-header-input-placeholder
+      placeholder:text-center
+      rounded-md
+      text-[1rem]
+      text-header-input-text
+      w-[435px]
+    `}
+    placeholder="Search mods"
+  />
+  <div
+    class={`
+      block
+      download-marked-mods-wrapper
+      pt-4
+      qavs-none
+      text-center
+    `}
+  >
+    <DownloadMarkedModsLink
+      version={gameVersion}
+      outerClass={`
+
+        align-middle
+        block
+        text-center
+      `}
+      class={`
+        btn
+        btn-primary
+        btn-sm
+        h-[34px]
+        disabled:bg-neutral
+        rounded-lg
+        text-white
+      `}
+    >
+      Download All Marked Mods
+    </DownloadMarkedModsLink>
+  </div>
+</div>
+<script>
+  const stickyElement = document.querySelector(".sticky");
+
+  if (stickyElement) {
+    function checkStuck() {
+      const stuck = stickyElement!.getBoundingClientRect().top < 5;
+      stickyElement!.toggleAttribute("stuck", stuck);
+      stickyElement!.toggleAttribute("unstuck", !stuck);
+    }
+
+    window.addEventListener("scroll", checkStuck);
+    checkStuck();
+  }
+</script>
+<style lang="scss">
+  @media (min-width: 768px) {
+    [stuck] .download-marked-mods-wrapper {
+      display: inline-block !important;
+      padding-top: 0 !important;
+      padding-left: 0.625rem !important;
+    }
+  }
+</style>
diff --git a/source/website/src/env.d.ts b/source/website/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/source/website/src/pages/[gameVersion].astro b/source/website/src/pages/[gameVersion].astro
@@ -2,16 +2,15 @@
 import DownloadCoreModsLink from "../components/DownloadCoreModsLink.astro";
 import Layout from "../layouts/Layout.astro";
 import ModList from "../components/ModList.astro";
-import ModFilter from "../components/ModFilter.astro";
 import type { GetStaticPaths } from "astro";
 import { Mod } from "../../../shared/types/Mod";
 import { ModsCollection } from "../../../shared/types/ModsCollection";
 import { compareAlphabeticallyAscInsensitive } from "../../../shared/comparisonFunctions";
 import { compareVersionDescending } from "../../../scripts/shared/semverComparison";
 import { getCoreMods } from "../../../shared/CoreMods";
 import { readAllModsJson } from "../../../shared/readAllModsJson";
-import DownloadMarkedModsLink from "../components/DownloadMarkedModsLink.astro";
 import HeaderVersionSelector from "../components/HeaderVersionSelector.astro";
+import StickyBar from "../components/StickyBar.astro";
 
 const modJson = readAllModsJson();
 
@@ -74,66 +73,7 @@ const coreMods = (await getCoreMods())[gameVersion];
     slot="header-post-title"
     currentVersion={gameVersion}
   />
-  <div
-    class={`
-      before:absolute
-      before:backdrop-blur
-      before:content['']
-      before:inset-0
-      before:z-[-1]
-      bg-header-footer-bg
-      mx-auto
-      p-4
-      sticky
-      text-center
-      top-0
-      w-full
-      z-10
-      hidden
-      script-block
-    `}
-  >
-    <ModFilter
-      class={`
-        backdrop-blur
-        bg-header-input-bg
-        border
-        border-white-alpha-20
-        max-w-full
-        mx-auto
-        p-2
-        placeholder-header-input-placeholder
-        placeholder:text-center
-        rounded-md
-        text-header-input-text
-        w-[444px]
-      `}
-      placeholder="Search mods"
-    />
-    {
-      coreMods && coreMods.mods.length > 0 ? (
-        <div class="text-center qavs-none pt-4">
-          <DownloadMarkedModsLink
-            version={gameVersion}
-            outerClass={`
-              block
-              text-center
-            `}
-            class={`
-              btn
-              btn-primary
-              btn-sm
-              rounded-lg
-              text-white
-              disabled:bg-neutral
-            `}
-          >
-            Download All Marked Mods
-          </DownloadMarkedModsLink>
-        </div>
-      ) : null
-    }
-  </div>
+  <StickyBar gameVersion={gameVersion} />
   <div class="px-safe">
     <div
       class={`