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

Complete 3.4.2: Desktop Enhancements - Implement dashboard-style layouts

Browse source
This commit is contained in:
VinnyNC 2025-09-29 21:40:06 -04:00
parent c05c3a63cc
commit a60349b40c
6 changed files with 755 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

148
static/css/layout.css
View file

@ -128,3 +128,151 @@
width: 320px;
}
}
/* =================================================================
DASHBOARD SECTION - Left sidebar for desktop enhancements
================================================================= */
.theater__dashboard-section {
width: 280px;
background: var(--color-surface);
color: var(--text-primary);
display: flex;
flex-direction: column;
border-right: 1px solid var(--border-color);
box-shadow: var(--shadow-dodgers-lg);
transition: transform var(--transition-slow);
position: relative;
}
.theater__dashboard-section.collapsed {
transform: translateX(-100%);
position: absolute;
left: 0;
height: 100%;
}
/* Desktop dashboard visibility */
@media (min-width: var(--breakpoint-2xl)) {
.theater__dashboard-section {
display: flex;
}
}
/* Hide dashboard on smaller screens */
@media (max-width: calc(var(--breakpoint-2xl) - 1px)) {
.theater__dashboard-section {
display: none;
}
}
/* =================================================================
DASHBOARD TOGGLE CONTROLS
================================================================= */
.dashboard-toggle {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--color-surface);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
width: 40px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--elevation-3);
z-index: 5;
}
.dashboard-toggle.right {
right: -40px;
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
border-left: none;
}
.dashboard-toggle.left {
left: -40px;
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
border-right: none;
}
/* =================================================================
RESIZE HANDLES
================================================================= */
.resize-handle {
position: absolute;
width: 4px;
background: var(--color-outline);
cursor: col-resize;
opacity: 0;
transition: opacity var(--transition-fast);
z-index: 10;
}
.resize-handle:hover,
.resize-handle.active {
opacity: 1;
background: var(--color-primary);
}
/* Video/Dashboard resize handle */
.theater__dashboard-section + .resize-handle {
right: -2px;
top: 0;
bottom: 0;
width: 4px;
}
/* Video/Chat resize handle */
.theater__video-section + .resize-handle {
right: -2px;
top: 0;
bottom: 0;
width: 4px;
}
/* =================================================================
DASHBOARD LAYOUT MODES
================================================================= */
/* Dashboard enabled - 3-column layout */
.theater.dashboard-enabled {
display: grid;
grid-template-columns: 280px 1fr 350px;
grid-template-areas: "dashboard video chat";
}
.theater.dashboard-enabled .theater__dashboard-section {
grid-area: dashboard;
}
.theater.dashboard-enabled .theater__video-section {
grid-area: video;
}
.theater.dashboard-enabled .theater__chat-section {
grid-area: chat;
}
/* Dashboard disabled - Standard 2-column layout */
.theater:not(.dashboard-enabled) .theater__dashboard-section {
display: none;
}
/* Responsive dashboard behavior */
@media (min-width: var(--breakpoint-2xl)) {
.theater.dashboard-enabled {
grid-template-columns: auto 1fr 350px;
}
}
@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-2xl) - 1px)) {
.theater.dashboard-enabled {
grid-template-columns: 250px 1fr 350px;
}
}