Mow910/MamieHenriette
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Twitch moderation template to improve grid responsiveness by changing column classes to 2xl and adjusting heights. Also, increase default shoutbox font size for better readability.

Browse Source
This commit is contained in:
Mow910
2026-03-18 20:42:26 +01:00
parent f4c9fa2138
commit 47bc7146de
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/templates/twitch-moderation.html
+7 -7
View File
@@ -135,9 +135,9 @@
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-12 gap-4">
<div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-12 gap-4">
<!-- Colonne 1 : Live Twitch -->
<div class="xl:col-span-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col xl:h-[640px]">
<div class="2xl:col-span-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col 2xl:h-[640px]">
<div class="aspect-video bg-gray-900">
<iframe
src="https://player.twitch.tv/?channel={{ twitch_channel }}&enableExtensions=true&muted={{ 'false' if is_live else 'true' }}&parent={{ embed_parent }}&player=popout&quality=auto&volume={{ '0.5' if is_live else '0' }}"
@@ -172,7 +172,7 @@
</div>
<!-- Colonne 2 : Chat bot Twitch -->
<div class="xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col xl:h-[640px]">
<div class="2xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col 2xl:h-[640px]">
<!-- === Contenu du chat (commun live / hors live) === -->
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center justify-between">
@@ -242,7 +242,7 @@
</div>
<!-- Colonne 3 : Chat Twitch (compte personnel) -->
<div class="xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col xl:h-[640px]">
<div class="2xl:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col 2xl:h-[640px]">
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center justify-between">
<h3 class="font-semibold text-gray-900 dark:text-white">Chat Twitch (compte perso)</h3>
<a href="https://www.twitch.tv/{{ twitch_channel }}/chat" target="_blank" class="text-xs text-purple-600 dark:text-purple-400 hover:underline">Ouvrir</a>
@@ -257,7 +257,7 @@
</div>
<!-- Colonne 4 : Shoutbox modérateurs -->
<div class="xl:col-span-2 section-card flex flex-col xl:h-[640px]">
<div class="2xl:col-span-2 section-card flex flex-col 2xl:h-[640px]">
<div class="section-card-header flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2v-6a2 2 0 012-2h8z"></path></svg>
@@ -291,7 +291,7 @@
<span id="shoutboxNewMsgText">Nouveaux messages</span>
</button>
</div>
<div class="w-28 border-l border-gray-700 bg-gray-900 p-2 overflow-y-auto" style="scrollbar-width: thin;">
<div class="w-24 border-l border-gray-700 bg-gray-900 p-2 overflow-y-auto" style="scrollbar-width: thin;">
<div class="text-xs text-gray-400 font-semibold mb-1.5">En ligne</div>
<div id="shoutboxOnlineList" class="space-y-1">
<div class="text-xs text-gray-600 italic">---</div>
@@ -1035,7 +1035,7 @@ var shoutboxTabVisible = true;
var shoutboxAudioCtx = null;
var shoutboxUnreadCount = 0;
var shoutboxSoundEnabled = localStorage.getItem('shoutbox_sound') !== 'off';
var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 12;
var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 14;
document.addEventListener('visibilitychange', function() {
shoutboxTabVisible = !document.hidden;