Align GameIcon counter with image instead of label

MatthiasKunnen · Jan 13, 2024 · 5baa762 · 5baa762
1 parent a158089
commit 5baa762
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/src/lib/GameIcon.svelte b/src/lib/GameIcon.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+export let counter: number = 0;
 export let icon: string;
 export let alt: string;
 export let size: '64' | '128';
@@ -7,24 +8,34 @@ export let showCaption: boolean = true;
 </script>
 
 <figure>
-    <picture>
-        <source srcset="/gameicons/{icon}_{size}x{size}.jxl" type="image/jxl"/>
-        <source srcset="/gameicons/{icon}_{size}x{size}.avif" type="image/avif"/>
-        <source srcset="/gameicons/{icon}_{size}x{size}.webp" type="image/webp"/>
-        <img
-            src="/gameicons/{icon}_{size}x{size}.png"
-            width="1"
-            height="1"
-            alt="{alt}'s icon"
-            loading="lazy"
-        />
-    </picture>
+    <div class="picture-container">
+        <picture>
+            <source srcset="/gameicons/{icon}_{size}x{size}.jxl" type="image/jxl"/>
+            <source srcset="/gameicons/{icon}_{size}x{size}.avif" type="image/avif"/>
+            <source srcset="/gameicons/{icon}_{size}x{size}.webp" type="image/webp"/>
+            <img
+                src="/gameicons/{icon}_{size}x{size}.png"
+                width="1"
+                height="1"
+                alt="{alt}'s icon"
+                loading="lazy"
+            />
+        </picture>
+        {#if counter > 1}
+            <span class="counter">{counter}</span>
+        {/if}
+    </div>
     {#if showCaption}
         <figcaption>{alt}</figcaption>
     {/if}
 </figure>
 
 <style>
+    .picture-container {
+        position: relative;
+        padding: 6px 12px 0;
+    }
+
     picture {
         display: inline-block;
         width: var(--game-icon-width)
@@ -40,4 +51,14 @@ export let showCaption: boolean = true;
         flex-direction: column;
         align-items: center;
     }
+
+    .counter {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0 4px;
+        background-color: #a5d740;
+        color: black;
+        border-radius: 0.2em;
+    }
 </style>
diff --git a/src/lib/RecipeItems.svelte b/src/lib/RecipeItems.svelte
@@ -10,14 +10,12 @@
     <li class="item" data-name={item.item.name}>
         <a href="/Items/{item.item.name}">
             <GameIcon
+                counter={item.count}
                 icon={item.item.icon}
                 size="64"
                 alt={item.item.displayName}
                 showCaption={true}></GameIcon>
         </a>
-        {#if item.count > 1}
-            <span class="counter">{item.count}</span>
-        {/if}
     </li>
 {/each}
 
@@ -31,20 +29,7 @@
 
     .item {
         --game-icon-width: 64px;
-        position: relative;
         display: flex;
-        padding-top: 6px;
-        padding-right: 16px;
         align-items: center;
     }
-
-    .counter {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 0 4px;
-        background-color: #a5d740;
-        color: black;
-        border-radius: 0.2em;
-    }
 </style>