Complete 3.4.2: Desktop Enhancements - Implement dashboard-style layouts
This commit is contained in:
parent
c05c3a63cc
commit
a60349b40c
6 changed files with 755 additions and 4 deletions
|
|
@ -372,10 +372,10 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
|
||||||
- Tablet gesture support with swipe-to-seek functionality (swipe left/right on video seeks forward/backward 10 seconds)
|
- Tablet gesture support with swipe-to-seek functionality (swipe left/right on video seeks forward/backward 10 seconds)
|
||||||
- Device detection and responsive gesture handling that differs from mobile (chat toggle) and desktop (no gestures)
|
- Device detection and responsive gesture handling that differs from mobile (chat toggle) and desktop (no gestures)
|
||||||
|
|
||||||
#### 3.4.2: Desktop Enhancements
|
#### 3.4.2: Desktop Enhancements - COMPLETED 9/29/2025
|
||||||
- [ ] Optimize for large screen viewing
|
- [x] Optimize for large screen viewing
|
||||||
- [ ] Create sidebar sizing options
|
- [x] Create sidebar sizing options
|
||||||
- [ ] Implement dashboard-style layouts
|
- [x] Implement dashboard-style layouts
|
||||||
|
|
||||||
### Sub-task 3.5: Cross-Device Synchronization
|
### Sub-task 3.5: Cross-Device Synchronization
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,134 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dashboard toggle functionality
|
||||||
|
function toggleDashboard() {
|
||||||
|
const theater = document.querySelector('.theater');
|
||||||
|
const dashboardToggleBtn = document.querySelector('.video-player__toggle-dashboard-btn');
|
||||||
|
|
||||||
|
if (!theater || !dashboardToggleBtn) return;
|
||||||
|
|
||||||
|
const isEnabled = theater.classList.contains('dashboard-enabled');
|
||||||
|
|
||||||
|
if (isEnabled) {
|
||||||
|
theater.classList.remove('dashboard-enabled');
|
||||||
|
dashboardToggleBtn.setAttribute('aria-expanded', 'false');
|
||||||
|
AppState.dashboardEnabled = false;
|
||||||
|
} else {
|
||||||
|
theater.classList.add('dashboard-enabled');
|
||||||
|
dashboardToggleBtn.setAttribute('aria-expanded', 'true');
|
||||||
|
AppState.dashboardEnabled = true;
|
||||||
|
// Initialize dashboard data when first enabled
|
||||||
|
updateDashboardStats();
|
||||||
|
updateActiveUsers();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store preference in localStorage
|
||||||
|
try {
|
||||||
|
localStorage.setItem('dashboard-enabled', AppState.dashboardEnabled ? 'true' : 'false');
|
||||||
|
} catch (e) {
|
||||||
|
AppLogger.log('Audio notification failed:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dashboard stats management
|
||||||
|
function updateDashboardStats() {
|
||||||
|
// Update viewer count in dashboard
|
||||||
|
const dashboardViewerCount = document.getElementById('statsViewersCount');
|
||||||
|
if (dashboardViewerCount) {
|
||||||
|
const viewers = AppState.viewers || 0;
|
||||||
|
dashboardViewerCount.textContent = viewers.toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update stream quality
|
||||||
|
const streamQuality = document.getElementById('statsStreamQuality');
|
||||||
|
if (streamQuality) {
|
||||||
|
// Get from URL or assume HD for now
|
||||||
|
streamQuality.textContent = 'HD';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update uptime
|
||||||
|
const uptime = document.getElementById('statsUptime');
|
||||||
|
if (uptime) {
|
||||||
|
const streamStartTime = AppState.streamStartTime || Date.now() - 60000; // Default to 1 minute
|
||||||
|
const elapsed = Date.now() - streamStartTime;
|
||||||
|
const minutes = Math.floor(elapsed / 60000);
|
||||||
|
const seconds = Math.floor((elapsed % 60000) / 1000);
|
||||||
|
uptime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active users widget update
|
||||||
|
function updateActiveUsers() {
|
||||||
|
const activeUsersContainer = document.getElementById('activeUsers');
|
||||||
|
if (!activeUsersContainer) return;
|
||||||
|
|
||||||
|
// This would typically poll for active users from server
|
||||||
|
if (window.ChatSystem && typeof window.ChatSystem.getActiveViewers === 'function') {
|
||||||
|
window.ChatSystem.getActiveViewers().then(users => {
|
||||||
|
displayActiveUsers(users);
|
||||||
|
}).catch(err => {
|
||||||
|
AppLogger.error('Failed to get active users:', err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Fallback: show placeholder
|
||||||
|
displayActiveUsers([]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayActiveUsers(users) {
|
||||||
|
const activeUsersContainer = document.getElementById('activeUsers');
|
||||||
|
if (!activeUsersContainer) return;
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
if (users.length === 0) {
|
||||||
|
html = `
|
||||||
|
<div class="user-item">
|
||||||
|
<div class="user-item__status online"></div>
|
||||||
|
<div class="user-item__nickname">Welcome to chat!</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
users.forEach(user => {
|
||||||
|
const statusClass = user.is_online ? 'online' : 'offline';
|
||||||
|
const nickname = user.nickname || `User ${user.user_id.substring(0, 4)}...`;
|
||||||
|
html += `
|
||||||
|
<div class="user-item">
|
||||||
|
<div class="user-item__status ${statusClass}"></div>
|
||||||
|
<div class="user-item__nickname">${escapeHtml(nickname)}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
activeUsersContainer.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new activity to the dashboard
|
||||||
|
function addDashboardActivity(activity) {
|
||||||
|
const recentActivity = document.getElementById('recentActivity');
|
||||||
|
if (!recentActivity) return;
|
||||||
|
|
||||||
|
const activityHtml = `
|
||||||
|
<div class="activity-item">
|
||||||
|
<div class="activity-item__avatar">${activity.icon || '💬'}</div>
|
||||||
|
<div class="activity-item__content">
|
||||||
|
<div class="activity-item__text">${escapeHtml(activity.text)}</div>
|
||||||
|
<div class="activity-item__time">${activity.time || 'Just now'}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Remove "Welcome" message if it exists and add new activity
|
||||||
|
const existingActivities = recentActivity.querySelectorAll('.activity-item');
|
||||||
|
if (existingActivities.length >= 5) {
|
||||||
|
existingActivities[existingActivities.length - 1].remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
recentActivity.insertAdjacentHTML('afterbegin', activityHtml);
|
||||||
|
}
|
||||||
|
|
||||||
// Chat toggle functionality
|
// Chat toggle functionality
|
||||||
function toggleChat() {
|
function toggleChat() {
|
||||||
const chatSection = document.getElementById('chatSection');
|
const chatSection = document.getElementById('chatSection');
|
||||||
|
|
@ -510,16 +638,156 @@
|
||||||
AppLogger.log('UI controls event listeners initialized');
|
AppLogger.log('UI controls event listeners initialized');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// HTML escape utility function
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize dashboard and resize functionality
|
||||||
|
function initializeDashboard() {
|
||||||
|
// Restore dashboard state from localStorage
|
||||||
|
try {
|
||||||
|
const savedDashboardState = localStorage.getItem('dashboard-enabled');
|
||||||
|
if (savedDashboardState === 'true' && window.innerWidth >= 1536) { // Only restore if screen is large enough
|
||||||
|
setTimeout(() => toggleDashboard(), 100); // Delay to ensure DOM is ready
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// localStorage not available
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set initial stream start time for uptime tracking
|
||||||
|
if (!AppState.streamStartTime) {
|
||||||
|
AppState.streamStartTime = Date.now();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update dashboard stats every 10 seconds
|
||||||
|
setInterval(() => {
|
||||||
|
if (AppState.dashboardEnabled) {
|
||||||
|
updateDashboardStats();
|
||||||
|
}
|
||||||
|
}, 10000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resize handling for dashboard panels
|
||||||
|
let isResizing = false;
|
||||||
|
let currentResizeTarget = null;
|
||||||
|
let startX = 0;
|
||||||
|
let startWidth = 0;
|
||||||
|
|
||||||
|
function handleResizeMouseDown(event, target) {
|
||||||
|
isResizing = true;
|
||||||
|
currentResizeTarget = target;
|
||||||
|
startX = event.clientX;
|
||||||
|
const targetElement = document.querySelector(target === 'dashboard' ? '.theater__dashboard-section' : '.theater__video-section');
|
||||||
|
startWidth = targetElement ? targetElement.offsetWidth : 0;
|
||||||
|
document.addEventListener('mousemove', handleResizeMouseMove);
|
||||||
|
document.addEventListener('mouseup', handleResizeMouseUp);
|
||||||
|
document.body.style.cursor = 'col-resize';
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleResizeMouseMove(event) {
|
||||||
|
if (!isResizing || !currentResizeTarget) return;
|
||||||
|
|
||||||
|
const deltaX = event.clientX - startX;
|
||||||
|
const targetElement = document.querySelector(currentResizeTarget === 'dashboard' ? '.theater__dashboard-section' : '.theater__video-section');
|
||||||
|
if (!targetElement) return;
|
||||||
|
|
||||||
|
const newWidth = Math.max(200, startWidth + deltaX);
|
||||||
|
targetElement.style.width = newWidth + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleResizeMouseUp() {
|
||||||
|
isResizing = false;
|
||||||
|
currentResizeTarget = null;
|
||||||
|
document.removeEventListener('mousemove', handleResizeMouseMove);
|
||||||
|
document.removeEventListener('mouseup', handleResizeMouseUp);
|
||||||
|
document.body.style.cursor = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize event listeners
|
||||||
|
function initializeEventListeners() {
|
||||||
|
// Dashboard toggle button
|
||||||
|
const dashboardToggleBtn = document.querySelector('.video-player__toggle-dashboard-btn');
|
||||||
|
if (dashboardToggleBtn) {
|
||||||
|
DOMUtils.addEvent(dashboardToggleBtn, 'click', toggleDashboard);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dashboard toggle in sidebar
|
||||||
|
const dashboardSidebarToggle = document.querySelector('.dashboard__toggle-btn');
|
||||||
|
if (dashboardSidebarToggle) {
|
||||||
|
DOMUtils.addEvent(dashboardSidebarToggle, 'click', toggleDashboard);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resize handles
|
||||||
|
const resizeHandles = document.querySelectorAll('.resize-handle');
|
||||||
|
resizeHandles.forEach(handle => {
|
||||||
|
DOMUtils.addEvent(handle, 'mousedown', (e) => {
|
||||||
|
const target = handle.dataset.target;
|
||||||
|
handleResizeMouseDown(e, target);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard shortcuts
|
||||||
|
DOMUtils.addEvent(document, 'keydown', handleKeyboardShortcuts);
|
||||||
|
|
||||||
|
// Window resize for mobile responsiveness
|
||||||
|
DOMUtils.addEvent(window, 'resize', handleWindowResize);
|
||||||
|
|
||||||
|
// Page visibility for notification clearing
|
||||||
|
DOMUtils.addEvent(document, 'visibilitychange', handleVisibilityChange);
|
||||||
|
|
||||||
|
// Touch gesture support for mobile
|
||||||
|
const videoSection = document.getElementById('videoSection');
|
||||||
|
if (videoSection) {
|
||||||
|
// Swipe gestures on video area for chat toggle
|
||||||
|
DOMUtils.addEvent(videoSection, 'touchstart', handleTouchStart, { passive: true });
|
||||||
|
DOMUtils.addEvent(videoSection, 'touchmove', handleTouchMove, { passive: true });
|
||||||
|
DOMUtils.addEvent(videoSection, 'touchend', handleTouchEnd, { passive: true });
|
||||||
|
|
||||||
|
// Double-tap on video for fullscreen
|
||||||
|
DOMUtils.addEvent(videoSection, 'touchend', handleVideoDoubleTap);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pull-to-refresh on the whole document (only on mobile)
|
||||||
|
DOMUtils.addEvent(document, 'touchstart', handlePullToRefreshTouchStart, { passive: true });
|
||||||
|
DOMUtils.addEvent(document, 'touchmove', handlePullToRefreshTouchMove, { passive: false });
|
||||||
|
DOMUtils.addEvent(document, 'touchend', handlePullToRefreshTouchEnd, { passive: true });
|
||||||
|
|
||||||
|
// Mobile navigation buttons
|
||||||
|
const mobileNav = document.getElementById('mobileNav');
|
||||||
|
if (mobileNav) {
|
||||||
|
mobileNav.addEventListener('click', function(event) {
|
||||||
|
const button = event.target.closest('.mobile-nav-btn');
|
||||||
|
if (button && button.dataset.action) {
|
||||||
|
event.preventDefault();
|
||||||
|
handleMobileNavAction(button.dataset.action);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize dashboard functionality
|
||||||
|
initializeDashboard();
|
||||||
|
|
||||||
|
AppLogger.log('UI controls event listeners initialized');
|
||||||
|
}
|
||||||
|
|
||||||
// Public API
|
// Public API
|
||||||
window.UIControls = {
|
window.UIControls = {
|
||||||
showToast: showToast,
|
showToast: showToast,
|
||||||
hideToast: hideToast,
|
hideToast: hideToast,
|
||||||
toggleChat: toggleChat,
|
toggleChat: toggleChat,
|
||||||
|
toggleDashboard: toggleDashboard,
|
||||||
toggleFullscreen: toggleFullscreen,
|
toggleFullscreen: toggleFullscreen,
|
||||||
togglePictureInPicture: togglePictureInPicture,
|
togglePictureInPicture: togglePictureInPicture,
|
||||||
updateViewerCount: updateViewerCount,
|
updateViewerCount: updateViewerCount,
|
||||||
updateConnectionStatus: updateConnectionStatus,
|
updateConnectionStatus: updateConnectionStatus,
|
||||||
updateNotificationBadge: updateNotificationBadge,
|
updateNotificationBadge: updateNotificationBadge,
|
||||||
|
updateDashboardStats: updateDashboardStats,
|
||||||
|
updateActiveUsers: updateActiveUsers,
|
||||||
|
addDashboardActivity: addDashboardActivity,
|
||||||
playNotificationSound: playNotificationSound,
|
playNotificationSound: playNotificationSound,
|
||||||
handleMobileNavAction: handleMobileNavAction,
|
handleMobileNavAction: handleMobileNavAction,
|
||||||
DOMUtils: DOMUtils
|
DOMUtils: DOMUtils
|
||||||
|
|
|
||||||
91
index.php
91
index.php
|
|
@ -315,6 +315,94 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="theater" role="main">
|
<main class="theater" role="main">
|
||||||
|
<!-- Dashboard Sidebar for Desktop -->
|
||||||
|
<aside class="theater__dashboard-section" id="dashboardSection" aria-label="Dashboard">
|
||||||
|
<header class="dashboard__header">
|
||||||
|
<h2 class="dashboard__title">Dashboard</h2>
|
||||||
|
<div class="dashboard__controls">
|
||||||
|
<button class="dashboard__toggle-btn" data-action="toggle-dashboard" aria-expanded="true" aria-label="Toggle dashboard">
|
||||||
|
<span class="icon-dashboard-toggle icon-sm">«</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="dashboard__stats-grid">
|
||||||
|
<div class="stats-card">
|
||||||
|
<div class="stats-card__icon">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="9" cy="7" r="4"></circle>
|
||||||
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||||
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="stats-card__content">
|
||||||
|
<div class="stats-card__value" id="statsViewersCount">0</div>
|
||||||
|
<div class="stats-card__label">Active Viewers</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-card">
|
||||||
|
<div class="stats-card__icon">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"></line>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="stats-card__content">
|
||||||
|
<div class="stats-card__value" id="statsStreamQuality">HD</div>
|
||||||
|
<div class="stats-card__label">Stream Quality</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-card">
|
||||||
|
<div class="stats-card__icon">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<polyline points="12,6 12,12 16,14"></polyline>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="stats-card__content">
|
||||||
|
<div class="stats-card__value" id="statsUptime">00:00</div>
|
||||||
|
<div class="stats-card__label">Stream Uptime</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dashboard__widgets">
|
||||||
|
<div class="widget">
|
||||||
|
<header class="widget__header">
|
||||||
|
<h3 class="widget__title">Recent Activity</h3>
|
||||||
|
</header>
|
||||||
|
<div class="widget__content" id="recentActivity">
|
||||||
|
<div class="activity-item">
|
||||||
|
<div class="activity-item__avatar">🎥</div>
|
||||||
|
<div class="activity-item__content">
|
||||||
|
<div class="activity-item__text">Stream started</div>
|
||||||
|
<div class="activity-item__time">Just now</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="widget">
|
||||||
|
<header class="widget__header">
|
||||||
|
<h3 class="widget__title">Active Users</h3>
|
||||||
|
</header>
|
||||||
|
<div class="widget__content" id="activeUsers">
|
||||||
|
<div class="user-item">
|
||||||
|
<div class="user-item__status online"></div>
|
||||||
|
<div class="user-item__nickname">Welcome to chat!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Dashboard resize handle -->
|
||||||
|
<div class="resize-handle dashboard-resize" data-target="dashboard"></div>
|
||||||
|
|
||||||
<section class="theater__video-section" id="videoSection" aria-label="Video Player">
|
<section class="theater__video-section" id="videoSection" aria-label="Video Player">
|
||||||
<header class="video-player__header">
|
<header class="video-player__header">
|
||||||
<div class="video-player__header-left">
|
<div class="video-player__header-left">
|
||||||
|
|
@ -325,6 +413,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-player__header-controls">
|
<div class="video-player__header-controls">
|
||||||
|
<button class="video-player__toggle-dashboard-btn" data-action="toggle-dashboard" aria-expanded="false" aria-label="Toggle dashboard" title="Toggle Dashboard">
|
||||||
|
<span class="icon-dashboard icon-sm"></span> Dashboard
|
||||||
|
</button>
|
||||||
<button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
|
<button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
|
||||||
<span class="icon-refresh icon-sm"></span> Refresh
|
<span class="icon-refresh icon-sm"></span> Refresh
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -806,6 +806,246 @@
|
||||||
.video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; }
|
.video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; }
|
||||||
.video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; }
|
.video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; }
|
||||||
|
|
||||||
|
/* =================================================================
|
||||||
|
DASHBOARD COMPONENTS
|
||||||
|
================================================================= */
|
||||||
|
|
||||||
|
/* Dashboard header */
|
||||||
|
.dashboard__header {
|
||||||
|
background: linear-gradient(135deg, var(--dodgers-blue-600) 0%, var(--dodgers-blue-400) 100%);
|
||||||
|
padding: var(--spacing-4) var(--spacing-5);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: var(--elevation-2);
|
||||||
|
z-index: 5;
|
||||||
|
border-bottom: 1px solid var(--dodgers-blue-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard__title {
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard__title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'%3E%3C/svg%3E") no-repeat center center;
|
||||||
|
background-size: contain;
|
||||||
|
margin-right: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard__controls {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard__toggle-btn {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border: 1px solid rgba(255,255,255,0.3);
|
||||||
|
color: white;
|
||||||
|
padding: var(--spacing-2) var(--spacing-3);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard__toggle-btn:hover {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats grid */
|
||||||
|
.dashboard__stats-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
padding: var(--spacing-4) var(--spacing-5) var(--spacing-3);
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
border: 1px solid var(--color-outline-variant);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
box-shadow: var(--elevation-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--elevation-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card__icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: linear-gradient(135deg, var(--dodgers-blue-500), var(--dodgers-blue-300));
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card__content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card__value {
|
||||||
|
font-size: var(--font-size-2xl);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card__label {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dashboard widgets */
|
||||||
|
.dashboard__widgets {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: var(--spacing-4) var(--spacing-5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
border: 1px solid var(--color-outline-variant);
|
||||||
|
box-shadow: var(--elevation-1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget__header {
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
border-bottom: 1px solid var(--color-outline-variant);
|
||||||
|
background: var(--color-surface-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget__title {
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget__content {
|
||||||
|
padding: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Activity items */
|
||||||
|
.activity-item,
|
||||||
|
.user-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
padding: var(--spacing-2) 0;
|
||||||
|
border-bottom: 1px solid var(--color-outline-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item:last-child,
|
||||||
|
.user-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item__avatar {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: var(--dodgers-blue-500);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item__content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item__text {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item__time {
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* User items */
|
||||||
|
.user-item__status {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item__status.online {
|
||||||
|
background: var(--color-success);
|
||||||
|
box-shadow: 0 0 6px rgba(var(--color-success-rgb), 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item__status.offline {
|
||||||
|
background: var(--color-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item__nickname {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive dashboard */
|
||||||
|
@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-2xl) - 1px)) {
|
||||||
|
.dashboard__stats-grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--breakpoint-2xl)) {
|
||||||
|
.dashboard__stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card {
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card__icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card__value {
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
VIDEO HEADER - Top section of video area
|
VIDEO HEADER - Top section of video area
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
|
||||||
|
|
@ -128,3 +128,151 @@
|
||||||
width: 320px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -297,6 +297,10 @@
|
||||||
--mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
|
--mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
|
||||||
--mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
|
--mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
|
||||||
|
|
||||||
|
/* Dashboard visibility breakpoints */
|
||||||
|
--mq-dashboard-mobile: (max-width: calc(var(--breakpoint-2xl) - 1px));
|
||||||
|
--mq-dashboard-enabled: (min-width: var(--breakpoint-2xl));
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
Z-INDEX SCALE
|
Z-INDEX SCALE
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue