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

Complete 3.4.1: Tablet Layouts - Implement tablet-specific UI with adaptive sizing and gesture support

Browse source
This commit is contained in:
VinnyNC 2025-09-29 21:36:38 -04:00
parent ac7aade762
commit c05c3a63cc
4 changed files with 93 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

21
static/css/layout.css
View file

@ -11,6 +11,14 @@
transition: all var(--transition-slow);
}
/* Tablet-specific theater layout */
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
.theater {
flex-direction: row;
/* Optimized for tablet: more balanced split */
}
}
/* Mobile-first responsive layout */
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
.theater {
@ -60,6 +68,19 @@
width: 100%;
}
/* Tablet-specific video section adjustments */
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
.theater__video-section {
flex-basis: 0; /* Allow flex-grow to control sizing */
flex-grow: 1;
min-width: 0; /* Prevent flex item from exceeding container */
}
.theater__video-section.expanded {
flex-grow: 2; /* When chat is collapsed, video takes more space */
}
}
/* =================================================================
VIDEO WRAPPER - Contains the video element
================================================================= */