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

Complete 3.1.1: Grid Implementation Foundation - Replace flexbox with CSS Grid for theater layout

Browse source
This commit is contained in:
VinnyNC 2025-09-29 19:45:35 -04:00
parent c48042ea4b
commit 1879c44202
6 changed files with 21 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

0
static/js/api.js → assets/js/api.js
View file

0
static/js/app.js → assets/js/app.js
View file

0
static/js/chat.js → assets/js/chat.js
View file

0
static/js/ui-controls.js → assets/js/ui-controls.js
View file

0
static/js/video-player.js → assets/js/video-player.js
View file

41
static/css/layout.css
View file

@ -1,22 +1,29 @@
/* Layout styles - Main structural elements */
/* =================================================================
THEATER CONTAINER - Main layout wrapper
THEATER - Main layout wrapper using CSS Grid
================================================================= */
.theater-container {
display: flex;
.theater {
display: grid;
grid-template-columns: 1fr 350px;
grid-template-areas: 'video chat';
height: 100vh;
position: relative;
transition: all var(--transition-slow);
}
.theater.collapsed {
grid-template-columns: 1fr 0px;
grid-template-areas: 'video video';
}
/* =================================================================
VIDEO SECTION - Left side containing video player
THEATER VIDEO SECTION - Left side containing video player
================================================================= */
.video-section {
flex: 1;
.theater__video-section {
grid-area: video;
background: #000;
position: relative;
display: flex;
@ -24,11 +31,6 @@
transition: all var(--transition-slow);
}
.video-section.expanded {
flex: 1;
width: 100%;
}
/* =================================================================
VIDEO WRAPPER - Contains the video element
================================================================= */
@ -41,24 +43,23 @@
}
/* =================================================================
CHAT SECTION - Right side chat panel
THEATER CHAT SECTION - Right side chat panel
================================================================= */
.chat-section {
width: 350px;
.theater__chat-section {
grid-area: chat;
background: var(--bg-dark);
color: var(--text-primary);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-dodgers-lg);
transition: transform var(--transition-slow);
transition: all var(--transition-slow);
position: relative;
border-left: 1px solid var(--border-color);
overflow: hidden;
}
.chat-section.collapsed {
transform: translateX(100%);
position: absolute;
right: 0;
height: 100%;
.theater__chat-section.collapsed {
opacity: 0;
pointer-events: none;
}