mirror of
https://github.com/wah-su/mstickers.git
synced 2025-04-05 15:54:36 +00:00
feat: make sticker preview mobile friendly
This commit is contained in:
parent
e50589906c
commit
acfae9f06f
GPG key ID:
858E8EE696525EED
2 changed files with 70 additions and 18 deletions
22
index.html
22
index.html
|
|
@ -9,12 +9,12 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="absolute inset-0 -z-10 tiledBackground"></div>
|
||||
<div class="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
|
||||
<div class="absolute inset-0 min-h-screen -z-10 tiledBackground"></div>
|
||||
<div class="absolute inset-0 min-h-screen -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
|
||||
<div class="container flex flex-col items-center justify-center min-w-full min-h-screen gap-4 mx-auto">
|
||||
|
||||
<div class="flex-col hidden gap-4" id="preview_sticker_pack">
|
||||
<div class="flex gap-4 px-4 py-2 rounded-lg shadow-lg bg-stone-800 text-slate-200 aspect-video"
|
||||
<div class="flex-col hidden gap-4 px-4 max-w-[600px]" id="preview_sticker_pack">
|
||||
<div class="flex flex-col items-center justify-center 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-64" alt="" id="preview_sticker_pack_image" />
|
||||
<div class="flex flex-col justify-center gap-2">
|
||||
|
|
@ -32,32 +32,32 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<a class="bg-[#2f7ca3] h-16 gap-2 items-center px-4 block rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_tg">
|
||||
<a class="bg-[#2f7ca3] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_tg">
|
||||
<img src="static/images/telegram.png" alt="" class="object-contain w-10" />
|
||||
<p class="text-2xl text-slate-50">Telegram</p>
|
||||
</a>
|
||||
<button onclick="toggleElementInstruction()" class="block bg-[#259d7b] h-16 gap-2 items-center px-4 rounded-lg flex hover:scale-110 transition-transform" id="preview_sticker_pack_add_el">
|
||||
<button onclick="toggleElementInstruction()" class="bg-[#259d7b] h-16 gap-2 items-center px-4 rounded-lg flex hover:scale-110 transition-transform" id="preview_sticker_pack_add_el">
|
||||
<img src="static/images/element.png" alt="" class="object-contain w-10" />
|
||||
<p class="text-2xl text-slate-50">Element</p>
|
||||
</button>
|
||||
<a class="bg-[#282443] h-16 gap-2 items-center px-4 block rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_fc">
|
||||
<a class="bg-[#282443] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_fc">
|
||||
<img src="static/images/fluffychat.png" alt="" class="object-contain w-10" />
|
||||
<p class="text-2xl text-slate-50">FluffyChat</p>
|
||||
</a>
|
||||
<a class="bg-[#373737] h-16 gap-2 items-center px-4 block rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_ci">
|
||||
<a class="bg-[#373737] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_ci">
|
||||
<img src="static/images/cinny.png" alt="" class="object-contain w-10" />
|
||||
<p class="text-2xl text-slate-50">Cinny</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 z-10 hidden bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></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="absolute top-[25%] 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="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">
|
||||
<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>
|
||||
<p class="whitespace-pre">
|
||||
<p class="md:whitespace-pre">
|
||||
{
|
||||
"stickerpicker": {
|
||||
"content": {
|
||||
|
|
|
|||
|
|
@ -621,8 +621,9 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
|
@ -641,6 +642,10 @@ video {
|
|||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -665,6 +670,30 @@ video {
|
|||
max-width: 768px;
|
||||
}
|
||||
|
||||
.max-w-\[378px\] {
|
||||
max-width: 378px;
|
||||
}
|
||||
|
||||
.max-w-\[512px\] {
|
||||
max-width: 512px;
|
||||
}
|
||||
|
||||
.max-w-\[600px\] {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.max-w-\[256px\] {
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[90\%\] {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -718,6 +747,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 +762,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));
|
||||
}
|
||||
|
|
@ -766,6 +795,11 @@ video {
|
|||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -839,4 +873,22 @@ 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\:max-w-\[768px\] {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:whitespace-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue