wah.su/mstickers
1
0
Fork 0
mirror of https://github.com/wah-su/mstickers.git synced 2025-04-05 15:54:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update pack index style

Browse source
This commit is contained in:
Kentai Radiquum 2024-12-29 18:00:22 +05:00
parent 5ad18fcdc6
commit 1a9f903e6f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -92,8 +92,8 @@
</div> </div>
</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"> <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"/> <img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
<div> <div>
<p class="text-2xl">{pack_name}</p> <p class="text-2xl">{pack_name}</p>

4
static/pack_preview.js
View file

@ -55,7 +55,7 @@ async function loadIndex() {
async function loadStickerpacks() { async function loadStickerpacks() {
stickerpacksIndexContainer.classList.remove("hidden"); stickerpacksIndexContainer.classList.remove("hidden");
stickerpacksIndexContainer.classList.add("flex"); stickerpacksIndexContainer.classList.add("grid");
for (let i = 0; i < index.packs.length; i++) { for (let i = 0; i < index.packs.length; i++) {
const data = await fetch( const data = await fetch(
`${window.location.origin}/stickerpacks/${index.packs[i]}` `${window.location.origin}/stickerpacks/${index.packs[i]}`
@ -77,7 +77,7 @@ async function loadStickerpacks() {
continue; continue;
} }
stickerpacksIndexContainer.innerHTML += ` 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"> <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="${ <img src="${getStickerImage(data.stickers[0].id)}" alt="${
data.stickers[0].body data.stickers[0].body

28
static/tailwind.css
View file

@ -629,6 +629,10 @@ video {
display: flex; display: flex;
} }
.grid {
display: grid;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -873,6 +877,30 @@ video {
transition-duration: 150ms; 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 { .tiledBackground {
background-image: url('images/background-white.png'); background-image: url('images/background-white.png');
background-repeat: repeat; background-repeat: repeat;