From 1a9f903e6f2444b9598f545b05df4287c50c66f3 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 29 Dec 2024 18:00:22 +0500
Subject: [PATCH] update pack index style

---
 index.html             |  4 ++--
 static/pack_preview.js |  4 ++--
 static/tailwind.css    | 28 ++++++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index c6786b1..783aa1f 100644
--- a/index.html
+++ b/index.html
@@ -92,8 +92,8 @@
             </div>
         </div>
 
-        <div class="flex-wrap gap-1 flex-col md:flex-row rounded-lg shadow-lg hidden" id="stickerpacks_index">
-            <div class="hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
+        <div class="gap-1 [grid-template-columns:repeat(auto-fill,minmax(128px,372px))] justify-center items-center hidden w-full" id="stickerpacks_index">
+            <div class="grid hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
                 <img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
                 <div>
                     <p class="text-2xl">{pack_name}</p>
diff --git a/static/pack_preview.js b/static/pack_preview.js
index da0ff74..72dc79d 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -55,7 +55,7 @@ async function loadIndex() {
 
 async function loadStickerpacks() {
   stickerpacksIndexContainer.classList.remove("hidden");
-  stickerpacksIndexContainer.classList.add("flex");
+  stickerpacksIndexContainer.classList.add("grid");
   for (let i = 0; i < index.packs.length; i++) {
     const data = await fetch(
       `${window.location.origin}/stickerpacks/${index.packs[i]}`
@@ -77,7 +77,7 @@ async function loadStickerpacks() {
       continue;
     }
     stickerpacksIndexContainer.innerHTML += `
-    <a href="index.html?id=${index.packs[i].split('.json')[0]}" class="flex-grow">
+    <a href="index.html?id=${index.packs[i].split('.json')[0]}">
       <div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg">
             <img src="${getStickerImage(data.stickers[0].id)}" alt="${
         data.stickers[0].body
diff --git a/static/tailwind.css b/static/tailwind.css
index a677a60..83ab456 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -629,6 +629,10 @@ video {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -873,6 +877,30 @@ video {
   transition-duration: 150ms;
 }
 
+.\[grid-template-columns\:repeat\(1\2c minmax\(0\2c 1fr\)\)\] {
+  grid-template-columns: repeat(1,minmax(0,1fr));
+}
+
+.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 256px\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(128px,256px));
+}
+
+.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 372px\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(128px,372px));
+}
+
+.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 512px\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(128px,512px));
+}
+
+.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 512pxpx\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(128px,512pxpx));
+}
+
+.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 512x\)\)\] {
+  grid-template-columns: repeat(auto-fill,minmax(128px,512x));
+}
+
 .tiledBackground {
   background-image: url('images/background-white.png');
   background-repeat: repeat;