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