-
-
-
+
-
+
+
diff --git a/static/pack_preview.js b/static/pack_preview.js
index b5be00d..4e8af01 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -3,6 +3,7 @@ const packName = document.getElementById("preview_sticker_pack_name");
const packAuthor_by = document.getElementById("preview_sticker_pack_author_by");
const packAuthor = document.getElementById("preview_sticker_pack_author");
const packImage = document.getElementById("preview_sticker_pack_image");
+const packStickers = document.getElementById("preview_sticker_pack_stickers");
const packLinkTG = document.getElementById("preview_sticker_pack_add_tg");
const packLinkFC = document.getElementById("preview_sticker_pack_add_fc");
const packLinkCI = document.getElementById("preview_sticker_pack_add_ci");
@@ -64,6 +65,15 @@ async function loadPack(pack) {
updatePackInfo(data);
}
+function getStickerImage(stickerID) {
+ const _image_path = `${stickerID.slice(0, 2)}/${stickerID.slice(
+ 2,
+ 4
+ )}/${stickerID.slice(4)}`;
+
+ return `${index.homeserver_url}/__thumbnail/${_image_path}`;
+}
+
function updatePackInfo(data) {
packName.innerHTML = data.title;
@@ -77,13 +87,7 @@ function updatePackInfo(data) {
}
}
- const _image_id = data.stickers[0].id;
- const _image_path = `${_image_id.slice(0, 2)}/${_image_id.slice(
- 2,
- 4
- )}/${_image_id.slice(4)}`;
-
- packImage.src = `${index.homeserver_url}/__thumbnail/${_image_path}`;
+ packImage.src = getStickerImage(data.stickers[0].id);
if (data.hasOwnProperty("rating") && data.rating) {
switch (data.rating.toLowerCase()) {
@@ -119,6 +123,15 @@ function updatePackInfo(data) {
packLinkCI.classList.remove("hidden");
packLinkCI.classList.add("flex");
}
+
+ for (let i = 0; i < data.stickers.length; i++) {
+ const sticker = data.stickers[i];
+ const stickerImage = document.createElement("img");
+ stickerImage.src = getStickerImage(sticker.id);
+ stickerImage.alt = sticker.body;
+ stickerImage.classList.add('object-contain', 'w-20')
+ packStickers.appendChild(stickerImage);
+ }
}
function toggleElementInstruction() {
diff --git a/static/tailwind.css b/static/tailwind.css
index 2dd19b0..e24d958 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -588,16 +588,24 @@ video {
}
}
+.static {
+ position: static;
+}
+
+.fixed {
+ position: fixed;
+}
+
.absolute {
position: absolute;
}
-.inset-0 {
- inset: 0px;
+.sticky {
+ position: sticky;
}
-.top-\[25\%\] {
- top: 25%;
+.inset-0 {
+ inset: 0px;
}
.-z-10 {
@@ -621,8 +629,8 @@ video {
margin-right: auto;
}
-.block {
- display: block;
+.mt-4 {
+ margin-top: 1rem;
}
.flex {
@@ -633,10 +641,6 @@ video {
display: none;
}
-.aspect-video {
- aspect-ratio: 16 / 9;
-}
-
.h-16 {
height: 4rem;
}
@@ -649,6 +653,10 @@ video {
width: 2.5rem;
}
+.w-20 {
+ width: 5rem;
+}
+
.w-64 {
width: 16rem;
}
@@ -657,18 +665,18 @@ video {
width: 100%;
}
-.min-w-full {
- min-width: 100%;
-}
-
-.max-w-\[768px\] {
- max-width: 768px;
+.max-w-\[90\%\] {
+ max-width: 90%;
}
.flex-col {
flex-direction: column;
}
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
.items-center {
align-items: center;
}
@@ -685,10 +693,6 @@ video {
gap: 1rem;
}
-.whitespace-pre {
- white-space: pre;
-}
-
.rounded-lg {
border-radius: 0.5rem;
}
@@ -718,6 +722,11 @@ video {
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
+.bg-red-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
+
.bg-stone-800 {
--tw-bg-opacity: 1;
background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
@@ -728,11 +737,6 @@ video {
background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}
-.bg-red-600 {
- --tw-bg-opacity: 1;
- background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
-
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
@@ -830,6 +834,7 @@ video {
background-image: url('images/background-white.png');
background-repeat: repeat;
background-size: contain;
+ background-attachment: fixed;
background-size: 256px;
opacity: .25;
margin-top: -16px;
@@ -839,4 +844,26 @@ video {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@media (min-width: 768px) {
+ .md\:top-\[25\%\] {
+ top: 25%;
+ }
+
+ .md\:w-\[600px\] {
+ width: 600px;
+ }
+
+ .md\:max-w-\[768px\] {
+ max-width: 768px;
+ }
+
+ .md\:flex-row {
+ flex-direction: row;
+ }
+
+ .md\:whitespace-pre {
+ white-space: pre;
+ }
}
\ No newline at end of file
diff --git a/tailwind.css b/tailwind.css
index 06eae24..4a21e53 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -6,6 +6,7 @@
background-image: url('images/background-white.png');
background-repeat: repeat;
background-size: contain;
+ background-attachment: fixed;
background-size: 256px;
opacity: .25;
margin-top: -16px;
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:
-+
{ "stickerpicker": { "content": { @@ -83,6 +83,15 @@
+
+
+
+ Pack Preview
+
+ 
+
+
+