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

32
static/css/components.css
View file

@ -826,6 +826,21 @@
gap: var(--spacing-5);
}
/* Tablet-specific video header adjustments */
@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
.video-player__header:not(.video-responsive-preserve) {
padding: var(--spacing-4) var(--spacing-6);
}
.video-player__header-left:not(.video-responsive-preserve) {
gap: var(--spacing-6);
}
.stream-logo {
font-size: var(--font-size-2xl);
}
}
.stream-logo {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
@ -982,6 +997,23 @@
justify-content: space-between;
}
/* Tablet-specific chat header adjustments */
@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
.chat__header:not(.chat-responsive-preserve) {
padding: var(--spacing-5) var(--spacing-6);
font-size: var(--font-size-lg);
}
.chat__header-title {
gap: var(--spacing-3);
}
.chat__header-title::before {
width: 1.5em;
height: 1.5em;
}
}
.chat__header-title {
display: flex;
align-items: center;

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
================================================================= */