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

center stickers in pack preview on mobile

Browse source
This commit is contained in:
Kentai Radiquum 2024-12-29 13:55:39 +05:00
parent a2a64f49bb
commit 31f4aee1e8
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -87,7 +87,7 @@
<div class="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 "> <div class="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
<p class="text-2xl">Pack Preview <span id="preview_sticker_pack_stickers_count"></span></p> <p class="text-2xl">Pack Preview <span id="preview_sticker_pack_stickers_count"></span></p>
<div class="flex flex-wrap gap-4 mt-4 " id="preview_sticker_pack_stickers"> <div class="flex flex-wrap gap-4 mt-4 " id="preview_sticker_pack_stickers">
<img src="static/images/cinny.png" alt="" class="hidden object-contain w-20" /> <img src="static/images/cinny.png" alt="" class="hidden object-contain md:w-20 w-24" />
</div> </div>
</div> </div>
</div> </div>

2
static/pack_preview.js
View file

@ -133,7 +133,7 @@ function updatePackInfo(data) {
const stickerImage = document.createElement("img"); const stickerImage = document.createElement("img");
stickerImage.src = getStickerImage(sticker.id); stickerImage.src = getStickerImage(sticker.id);
stickerImage.alt = sticker.body; stickerImage.alt = sticker.body;
stickerImage.classList.add('object-contain', 'w-20') stickerImage.classList.add('object-contain', 'md:w-20', "w-24")
packStickers.appendChild(stickerImage); packStickers.appendChild(stickerImage);
} }
} }

12
static/tailwind.css
View file

@ -657,6 +657,10 @@ video {
width: 100%; width: 100%;
} }
.w-24 {
width: 6rem;
}
.max-w-\[90\%\] { .max-w-\[90\%\] {
max-width: 90%; max-width: 90%;
} }
@ -847,6 +851,14 @@ video {
width: 600px; width: 600px;
} }
.md\:w-24 {
width: 6rem;
}
.md\:w-20 {
width: 5rem;
}
.md\:max-w-\[768px\] { .md\:max-w-\[768px\] {
max-width: 768px; max-width: 768px;
} }