Merge pull request #3 from wah-su/main

#3

index.html

@@ -16,7 +16,7 @@
         <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
             <div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
                 id="preview_sticker_pack">
-                <img src="static/images/cinny.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
+                <img src="static/images/sticker.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
                 <div class="flex flex-col justify-center gap-2">
                     <p class="text-4xl text-bold" id="preview_sticker_pack_name">
                         {sticker_pack_name}
@@ -51,9 +51,9 @@
             </div>
         </div>
 
-        <div class="absolute inset-0 z-10 hidden min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
+        <div class="fixed inset-0 z-10 hidden min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
 
-        <div class="absolute md:top-[25%] max-w-[90%] md:max-w-[768px] text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
+        <div class="fixed top-8 md:top-32 max-w-[90%] md:max-w-[768px] text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
             <p>
             Type /devtools in chat. Other -> Explore account data in Element Web (not "room account data", must be the global one), edit the m.widgets account data event to have the following content:
             </p>
@@ -92,10 +92,10 @@
             </div>
         </div>
 
-        <div class="flex-wrap gap-1 flex-col md:flex-row rounded-lg shadow-lg hidden" id="stickerpacks_index">
+        <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="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>
+                <div class="grid">
                     <p class="text-2xl">{pack_name}</p>
                     <p class="text-xl">{artist_name}</p>
                 </div>

static/pack_preview.js

@@ -53,9 +53,18 @@ async function loadIndex() {
   }
 }
 
+function imageIsLoaded(img_id, img_placeholder) {
+  const __img = document.getElementById(img_id);
+  const __img_placeholder = document.getElementById(img_placeholder);
+  if (__img.complete) {
+    __img_placeholder.classList.add("hidden");
+    __img.classList.remove("hidden");
+  }
+}
+
 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]}`
@@ -76,12 +85,16 @@ async function loadStickerpacks() {
     if (!data) {
       continue;
     }
+    const _tmp_id = data.stickers[0].id;
     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
+    }" class="hidden object-contain w-24" id="${_tmp_id}"/>
+      <img src="static/images/sticker.png" alt="${
         data.stickers[0].body
-      }" class="object-contain w-24"/>
+      }" class="object-contain w-24" id="${_tmp_id}-placeholder"/>
             <div>
               <p class="text-2xl">${data.title}</p>
               ${
@@ -93,6 +106,11 @@ async function loadStickerpacks() {
         </div>
     </a>
       `;
+    const __img = document.getElementById(_tmp_id);
+    __img.addEventListener("load", () => {
+      imageIsLoaded(_tmp_id, `${_tmp_id}-placeholder`);
+      __img.removeEventListener("load", this);
+    });
   }
 }
 
@@ -186,10 +204,22 @@ function updatePackInfo(data) {
   for (let i = 0; i < data.stickers.length; i++) {
     const sticker = data.stickers[i];
     const stickerImage = document.createElement("img");
+    const stickerImagePlaceholder = document.createElement("img");
+    stickerImagePlaceholder.src = `static/images/sticker.png`;
+    stickerImagePlaceholder.id = `${sticker.id}-placeholder`;
+    stickerImagePlaceholder.alt = sticker.body;
+    stickerImagePlaceholder.classList.add("object-contain", "md:w-20", "w-24");
+    packStickers.appendChild(stickerImagePlaceholder);
     stickerImage.src = getStickerImage(sticker.id);
+    stickerImage.id = sticker.id;
     stickerImage.alt = sticker.body;
-    stickerImage.classList.add("object-contain", "md:w-20", "w-24");
+    stickerImage.classList.add("object-contain", "md:w-20", "w-24", "hidden");
     packStickers.appendChild(stickerImage);
+
+    stickerImage.addEventListener("load", () => {
+      imageIsLoaded(sticker.id, `${sticker.id}-placeholder`);
+      stickerImage.removeEventListener("load", this);
+    });
   }
 }
 

static/tailwind.css

@@ -600,6 +600,18 @@ video {
   inset: 0px;
 }
 
+.top-0 {
+  top: 0px;
+}
+
+.top-16 {
+  top: 4rem;
+}
+
+.top-8 {
+  top: 2rem;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -629,6 +641,10 @@ video {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -873,6 +889,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;
@@ -894,6 +934,14 @@ video {
     top: 25%;
   }
 
+  .md\:top-64 {
+    top: 16rem;
+  }
+
+  .md\:top-32 {
+    top: 8rem;
+  }
+
   .md\:w-\[600px\] {
     width: 600px;
   }