vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 3.3.1: Mobile Layout Optimization - Implemented mobile-first redesign with touch-friendly navigation and responsive chat overlay behavior.

Browse source
This commit is contained in:
Vincent 2025-09-29 21:02:33 -04:00
parent 9e8dea7662
commit 68b97e946b
3 changed files with 73 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

55
static/css/layout.css
View file

@ -4,18 +4,49 @@
THEATER CONTAINER - Main layout wrapper
================================================================= */
.theater-container {
.theater {
display: flex;
height: 100vh;
position: relative;
transition: all var(--transition-slow);
}
/* Mobile-first responsive layout */
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
.theater {
flex-direction: column;
}
/* On mobile, theater layout stacks vertically */
.theater__video-section {
height: 100vh;
order: 1;
}
.theater__chat-section {
display: none; /* Hidden by default on mobile, shown when toggled */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: var(--z-modal, 1000);
order: 2;
transform: translateY(100%); /* Start below screen */
transition: transform var(--transition-base);
}
.theater__chat-section.mobile-visible {
display: flex;
transform: translateY(0);
}
}
/* =================================================================
VIDEO SECTION - Left side containing video player
================================================================= */
.video-section {
.theater__video-section {
flex: 1;
background: #000;
position: relative;
@ -24,7 +55,7 @@
transition: all var(--transition-slow);
}
.video-section.expanded {
.theater__video-section.expanded {
flex: 1;
width: 100%;
}
@ -44,7 +75,7 @@
CHAT SECTION - Right side chat panel
================================================================= */
.chat-section {
.theater__chat-section {
width: 350px;
background: var(--bg-dark);
color: var(--text-primary);
@ -56,9 +87,23 @@
border-left: 1px solid var(--border-color);
}
.chat-section.collapsed {
.theater__chat-section.collapsed {
transform: translateX(100%);
position: absolute;
right: 0;
height: 100%;
}
/* Desktop responsive adjustments */
@media (min-width: var(--breakpoint-lg)) {
.theater__chat-section {
width: 400px;
}
}
/* Tablet adjustments */
@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
.theater__chat-section {
width: 320px;
}
}