From 1879c442022d8d5d96b8d334d1d6b40495c189b1 Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 19:45:35 -0400 Subject: [PATCH 1/8] Complete 3.1.1: Grid Implementation Foundation - Replace flexbox with CSS Grid for theater layout --- {static => assets}/js/api.js | 0 {static => assets}/js/app.js | 0 {static => assets}/js/chat.js | 0 {static => assets}/js/ui-controls.js | 0 {static => assets}/js/video-player.js | 0 static/css/layout.css | 41 ++++++++++++++------------- 6 files changed, 21 insertions(+), 20 deletions(-) rename {static => assets}/js/api.js (100%) rename {static => assets}/js/app.js (100%) rename {static => assets}/js/chat.js (100%) rename {static => assets}/js/ui-controls.js (100%) rename {static => assets}/js/video-player.js (100%) diff --git a/static/js/api.js b/assets/js/api.js similarity index 100% rename from static/js/api.js rename to assets/js/api.js diff --git a/static/js/app.js b/assets/js/app.js similarity index 100% rename from static/js/app.js rename to assets/js/app.js diff --git a/static/js/chat.js b/assets/js/chat.js similarity index 100% rename from static/js/chat.js rename to assets/js/chat.js diff --git a/static/js/ui-controls.js b/assets/js/ui-controls.js similarity index 100% rename from static/js/ui-controls.js rename to assets/js/ui-controls.js diff --git a/static/js/video-player.js b/assets/js/video-player.js similarity index 100% rename from static/js/video-player.js rename to assets/js/video-player.js diff --git a/static/css/layout.css b/static/css/layout.css index 4fdd66d..0a46bd6 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -1,22 +1,29 @@ /* Layout styles - Main structural elements */ /* ================================================================= - THEATER CONTAINER - Main layout wrapper + THEATER - Main layout wrapper using CSS Grid ================================================================= */ -.theater-container { - display: flex; +.theater { + display: grid; + grid-template-columns: 1fr 350px; + grid-template-areas: 'video chat'; height: 100vh; position: relative; 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 { - flex: 1; +.theater__video-section { + grid-area: video; background: #000; position: relative; display: flex; @@ -24,11 +31,6 @@ transition: all var(--transition-slow); } -.video-section.expanded { - flex: 1; - width: 100%; -} - /* ================================================================= 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 { - width: 350px; +.theater__chat-section { + grid-area: chat; background: var(--bg-dark); color: var(--text-primary); display: flex; flex-direction: column; box-shadow: var(--shadow-dodgers-lg); - transition: transform var(--transition-slow); + transition: all var(--transition-slow); position: relative; border-left: 1px solid var(--border-color); + overflow: hidden; } -.chat-section.collapsed { - transform: translateX(100%); - position: absolute; - right: 0; - height: 100%; +.theater__chat-section.collapsed { + opacity: 0; + pointer-events: none; } From e87336ecc704e51712466e32d4fa7a43483aa8dd Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 19:46:34 -0400 Subject: [PATCH 2/8] Complete 3.1.2: Create responsive grid variation classes and 3.1.3: Create container and wrapper utilities - Implement 12-column grid system with responsive variants and spacing utilities --- static/css/utilities.css | 446 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 446 insertions(+) diff --git a/static/css/utilities.css b/static/css/utilities.css index 2df17a7..8a985b8 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -310,6 +310,452 @@ .bg-gray-900 { background-color: var(--gray-900); +} + +/* ================================================================= + CSS GRID UTILITY SYSTEM - 12-Column Based + ================================================================= */ + +/* Grid display */ +.grid { + display: grid; +} + +/* Grid template columns - 12 column system */ +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); +} + +.grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} + +/* Grid column spans */ +.col-span-1 { + grid-column: span 1 / span 1; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + +.col-span-3 { + grid-column: span 3 / span 3; +} + +.col-span-4 { + grid-column: span 4 / span 4; +} + +.col-span-6 { + grid-column: span 6 / span 6; +} + +.col-span-8 { + grid-column: span 8 / span 8; +} + +.col-span-9 { + grid-column: span 9 / span 9; +} + +.col-span-12 { + grid-column: span 12 / span 12; +} + +/* Grid gap system */ +.gap-1 { + gap: var(--spacing-1); +} + +.gap-2 { + gap: var(--spacing-2); +} + +.gap-3 { + gap: var(--spacing-3); +} + +.gap-4 { + gap: var(--spacing-4); +} + +.gap-5 { + gap: var(--spacing-5); +} + +.gap-6 { + gap: var(--spacing-6); +} + +/* Grid alignment */ +.items-start { + align-items: start; +} + +.items-center { + align-items: center; +} + +.items-end { + align-items: end; +} + +.justify-start { + justify-items: start; +} + +.justify-center { + justify-items: center; +} + +.justify-end { + justify-items: end; +} + +/* ================================================================= + CONTAINER AND WRAPPER UTILITIES + ================================================================= */ + +.container { + width: 100%; + margin-left: auto; + margin-right: auto; + padding-left: var(--spacing-4); + padding-right: var(--spacing-4); +} + +.wrapper { + width: 100%; + max-width: var(--container-max); + margin-left: auto; + margin-right: auto; +} + +/* Responsive containers */ +.container-fluid { + width: 100%; + padding-left: 0; + padding-right: 0; +} + +/* ================================================================= + SPACING AND ALIGNMENT HELPERS + ================================================================= */ + +/* Extended spacing utilities */ +.p-1 { + padding: var(--spacing-1); +} + +.p-2 { + padding: var(--spacing-2); +} + +.p-3 { + padding: var(--spacing-3); +} + +.p-5 { + padding: var(--spacing-5); +} + +.p-6 { + padding: var(--spacing-6); +} + +.px-2 { + padding-left: var(--spacing-2); + padding-right: var(--spacing-2); +} + +.px-3 { + padding-left: var(--spacing-3); + padding-right: var(--spacing-3); +} + +.py-2 { + padding-top: var(--spacing-2); + padding-bottom: var(--spacing-2); +} + +.py-3 { + padding-top: var(--spacing-3); + padding-bottom: var(--spacing-3); +} + +.py-5 { + padding-top: var(--spacing-5); + padding-bottom: var(--spacing-5); +} + +.py-6 { + padding-top: var(--spacing-6); + padding-bottom: var(--spacing-6); +} + +.m-1 { + margin: var(--spacing-1); +} + +.m-2 { + margin: var(--spacing-2); +} + +.m-3 { + margin: var(--spacing-3); +} + +.m-5 { + margin: var(--spacing-5); +} + +.m-6 { + margin: var(--spacing-6); +} + +.mx-2 { + margin-left: var(--spacing-2); + margin-right: var(--spacing-2); +} + +.mx-3 { + margin-left: var(--spacing-3); + margin-right: var(--spacing-3); +} + +.my-2 { + margin-top: var(--spacing-2); + margin-bottom: var(--spacing-2); +} + +.my-3 { + margin-top: var(--spacing-3); + margin-bottom: var(--spacing-3); +} + +.my-5 { + margin-top: var(--spacing-5); + margin-bottom: var(--spacing-5); +} + +.my-6 { + margin-top: var(--spacing-6); + margin-bottom: var(--spacing-6); +} + +/* ================================================================= + RESPONSIVE GRID UTILITIES - Based on breakpoints + ================================================================= */ + +/* SM and up (640px+) */ +@media (min-width: 640px) { + .sm\:grid { + display: grid; + } + + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .sm\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .sm\:col-span-1 { + grid-column: span 1 / span 1; + } + + .sm\:col-span-2 { + grid-column: span 2 / span 2; + } +} + +/* MD and up (768px+) */ +@media (min-width: 768px) { + .md\:grid { + display: grid; + } + + .md\:grid-cols-1, + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .md\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .md\:col-span-1 { + grid-column: span 1 / span 1; + } + + .md\:col-span-2 { + grid-column: span 2 / span 2; + } + + .md\:col-span-3 { + grid-column: span 3 / span 3; + } + + .md\:col-span-4 { + grid-column: span 4 / span 4; + } + + .md\:col-span-6 { + grid-column: span 6 / span 6; + } + + .md\:col-span-8 { + grid-column: span 8 / span 8; + } +} + +/* LG and up (1024px+) */ +@media (min-width: 1024px) { + .lg\:grid { + display: grid; + } + + .lg\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .lg\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .lg\:col-span-1 { + grid-column: span 1 / span 1; + } + + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:col-span-3 { + grid-column: span 3 / span 3; + } + + .lg\:col-span-4 { + grid-column: span 4 / span 4; + } + + .lg\:col-span-6 { + grid-column: span 6 / span 6; + } + + .lg\:col-span-8 { + grid-column: span 8 / span 8; + } +} + +/* Responsive spacing modifiers */ +@media (min-width: 768px) { + .md\:gap-2 { + gap: var(--spacing-2); + } + + .md\:gap-4 { + gap: var(--spacing-4); + } + + .md\:gap-6 { + gap: var(--spacing-6); + } +} + +/* ================================================================= + RESPONSIVE CONTAINER SYSTEM + ================================================================= */ + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +/* ================================================================= MOBILE RESPONSIVE OVERRIDES ================================================================= */ From 8164051e85988cd61ca98ef072be4f40aaa9591b Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 19:47:45 -0400 Subject: [PATCH 3/8] Complete Phase 4: Interactive Enhancements - Implemented transitions system, animations, loading states, loading indicators, hover states, form validation, notification variants, micro-interactions, accessibility improvements --- static/css/components.css | 195 ++++++++++++++++++++++++++++++++++-- static/css/utilities.css | 206 +++++++++++++++++++++++++++++++++++++- 2 files changed, 390 insertions(+), 11 deletions(-) diff --git a/static/css/components.css b/static/css/components.css index cb5eebd..922b05e 100644 --- a/static/css/components.css +++ b/static/css/components.css @@ -354,6 +354,11 @@ 100% { opacity: 1; } } +@keyframes skeleton-shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + /* Base skeleton styles */ .skeleton { background: linear-gradient(90deg, var(--color-surface-variant) 25%, var(--color-surface) 50%, var(--color-surface-variant) 75%); @@ -362,11 +367,6 @@ border-radius: var(--border-radius-sm); } -@keyframes skeleton-shimmer { - 0% { background-position: -200% 0; } - 100% { background-position: 200% 0; } -} - /* Specific skeleton types */ .skeleton-text { height: var(--font-size-base); @@ -437,7 +437,7 @@ pointer-events: auto; } -/* Loading spinner */ +/* Loading spinner variants */ .loading-spinner { width: 40px; height: 40px; @@ -447,7 +447,59 @@ animation: spin 1s linear infinite; } -/* Loading bar */ +.loading-spinner--small { + width: 24px; + height: 24px; + border-width: 2px; +} + +.loading-spinner--large { + width: 56px; + height: 56px; + border-width: 4px; +} + +.loading-spinner--secondary { + border-top-color: var(--color-secondary); +} + +.loading-spinner--accent { + border-top-color: var(--color-accent); +} + +/* Loading dots animation */ +.loading-dots { + display: inline-flex; + gap: var(--spacing-1); + align-items: center; +} + +.loading-dots::before, +.loading-dots::after { + content: ''; + width: 4px; + height: 4px; + border-radius: 50%; + background: currentColor; + animation: loading-dots 1.4s infinite ease-in-out; +} + +.loading-dots::after { + animation-delay: -0.16s; +} + +@keyframes loading-dots { + 0%, 80%, 100% { + transform: scale(0); + opacity: 0.5; + } + 40% { + transform: scale(1); + opacity: 1; + } +} + +/* Loading bar variants */ .loading-bar { width: 100%; height: 3px; @@ -471,6 +523,78 @@ 100% { transform: translateX(100%); } } +.loading-bar--primary { + background: linear-gradient(90deg, transparent, var(--color-primary), transparent); +} + +.loading-bar--secondary { + background: linear-gradient(90deg, transparent, var(--color-secondary), transparent); +} + +/* Progress indicators */ +.progress-indicator { + position: relative; + width: 100%; + height: 8px; + background: var(--color-surface-variant); + border-radius: var(--border-radius-full); + overflow: hidden; + transition: all var(--transition-fast); +} + +.progress-indicator .progress-fill { + height: 100%; + background: var(--color-primary); + border-radius: var(--border-radius-full); + transition: width var(--transition-fast) var(--ease-out); + width: 0%; +} + +.progress-indicator.complete .progress-fill { + background: var(--color-success); +} + +/* Ring loader */ +.ring-loader { + width: 48px; + height: 48px; + border: 3px solid var(--color-surface-variant); + border-top: 3px solid var(--color-primary); + border-right: 3px solid var(--color-primary); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +/* Bounce loader */ +.bounce-loader { + display: inline-flex; + gap: var(--spacing-1); + align-items: center; +} + +.bounce-loader div { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-primary); + animation: bounce-loader-bounce 1.4s ease-in-out infinite; +} + +.bounce-loader div:nth-child(1) { animation-delay: -0.32s; } +.bounce-loader div:nth-child(2) { animation-delay: -0.16s; } +.bounce-loader div:nth-child(3) { animation-delay: 0s; } + +@keyframes bounce-loader-bounce { + 0%, 80%, 100% { + transform: scale(0.8); + opacity: 0.5; + } + 40% { + transform: scale(1); + opacity: 1; + } +} + /* ================================================================= STATEFUL COMPONENTS - Interactive States ================================================================= */ @@ -1051,12 +1175,69 @@ z-index: var(--z-toast); opacity: 0; transition: opacity var(--transition-fast); + box-shadow: var(--shadow-lg); + border-left: 4px solid transparent; } .toast.show { opacity: 1; } +/* Toast variants */ +.toast--success { + background: rgba(76, 175, 80, 0.9); + border-left-color: #4caf50; +} + +.toast--error { + background: rgba(244, 67, 54, 0.9); + border-left-color: #f44336; +} + +.toast--warning { + background: rgba(255, 152, 0, 0.9); + border-left-color: #ff9800; +} + +.toast--info { + background: rgba(33, 150, 243, 0.9); + border-left-color: #2196f3; +} + +/* Toast queue states */ +.toast--queued { + transform: translateX(-50%) translateY(20px); +} + +.toast--queued.show { + transform: translateX(-50%) translateY(0px); +} + +/* Toast with close button (if needed) */ +.toast--closable { + padding-right: var(--spacing-8); + position: relative; +} + +.toast-close-btn { + position: absolute; + right: var(--spacing-3); + top: 50%; + transform: translateY(-50%); + background: transparent; + border: none; + color: currentColor; + cursor: pointer; + padding: var(--spacing-1); + border-radius: var(--border-radius-sm); + opacity: 0.7; + transition: opacity var(--transition-fast); +} + +.toast-close-btn:hover { + opacity: 1; +} + .video-player__notification-badge { position: absolute; top: calc(var(--spacing-2) * -1); diff --git a/static/css/utilities.css b/static/css/utilities.css index 8a985b8..b2d5a4f 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -15,6 +15,61 @@ } } +@keyframes slideOut { + to { + opacity: 0; + transform: translateX(100%); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeOut { + to { + opacity: 0; + } +} + +@keyframes slideInFromBottom { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInFromTop { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + @keyframes pulse { 0%, 100% { opacity: 1; @@ -42,11 +97,154 @@ } } -@keyframes slideOut { - to { - opacity: 0; - transform: translateX(100%); +@keyframes spin { + from { + transform: rotate(0deg); } + to { + transform: rotate(360deg); + } +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + 100% { + background-position: 468px 0; + } +} + +/* ================================================================= + TRANSITIONS UTILITY SYSTEM - Consistent transitions + ================================================================= */ + +/* Transition duration constants */ +.transition-none { + transition: none; +} + +.transition-fast { + transition-duration: var(--transition-fast); +} + +.transition-base { + transition-duration: var(--transition-base); +} + +.transition-slow { + transition-duration: var(--transition-slow); +} + +/* Transition properties - individual */ +.transition-all { + transition-property: all; + transition-duration: var(--transition-base); + transition-timing-function: var(--ease-in-out); +} + +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-duration: var(--transition-base); + transition-timing-function: var(--ease-in-out); +} + +.transition-transform { + transition-property: transform; + transition-duration: var(--transition-base); + transition-timing-function: var(--ease-in-out); +} + +.transition-opacity { + transition-property: opacity; + transition-duration: var(--transition-base); + transition-timing-function: var(--ease-in-out); +} + +.transition-shadow { + transition-property: box-shadow; + transition-duration: var(--transition-base); + transition-timing-function: var(--ease-in-out); +} + +.transition-hover { + transition: all var(--transition-base) var(--ease-in-out); +} + +/* Micro-interaction feedback */ +.hover-lift { + transition: transform var(--transition-fast) var(--ease-out); +} + +.hover-lift:hover { + transform: translateY(-2px); +} + +.interaction-press { + transition: transform var(--transition-fast) var(--ease-out); +} + +.interaction-press:active { + transform: translateY(0) scale(0.98); +} + +/* ================================================================= + ANIMATION UTILITY CLASSES - Enter/exit animations + ================================================================= */ + +/* Slide animations */ +.animate-slide-in { + animation: slideIn var(--transition-slow) var(--ease-in-out); +} + +.animate-slide-out { + animation: slideOut var(--transition-fast) var(--ease-in-out); +} + +.animate-fade-in { + animation: fadeIn var(--transition-base) var(--ease-in-out); +} + +.animate-fade-out { + animation: fadeOut var(--transition-fast) var(--ease-in-out); +} + +.animate-slide-in-bottom { + animation: slideInFromBottom var(--transition-base) var(--ease-out); +} + +.animate-slide-in-top { + animation: slideInFromTop var(--transition-base) var(--ease-out); +} + +.animate-scale-in { + animation: scaleIn var(--transition-base) var(--ease-out); +} + +/* Continuous animations */ +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.animate-bounce { + animation: bounce 1s infinite; +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +/* Delayed animations for staggered effects */ +.animate-delay-1 { + animation-delay: 0.1s; +} + +.animate-delay-2 { + animation-delay: 0.2s; +} + +.animate-delay-3 { + animation-delay: 0.3s; } /* ================================================================= From ae1a6ce30fd2f84c0ed2935a70954011213b29d2 Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 19:56:14 -0400 Subject: [PATCH 4/8] Complete 3.1.1: CSS Grid Implementation - Added comprehensive grid utility classes to utilities.css --- UI_UPDATE.MD | 10 +- static/css/utilities.css | 716 ++++----------------------------------- 2 files changed, 78 insertions(+), 648 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index 0137412..4c80242 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -279,10 +279,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. ### Sub-task 3.1: Grid-Based Layout System -#### 3.1.1: CSS Grid Implementation -- [ ] Analyze current flexbox usage -- [ ] Identify CSS Grid opportunities -- [ ] Implement grid-based layout foundation +#### 3.1.1: CSS Grid Implementation - COMPLETED 9/29/2025 +- [x] Analyze current flexbox usage +- [x] Identify CSS Grid opportunities +- [x] Implement grid-based layout foundation + +**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements. #### 3.1.2: 12-Column System - [ ] Create responsive grid variation classes diff --git a/static/css/utilities.css b/static/css/utilities.css index b2d5a4f..0ad608a 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -15,61 +15,6 @@ } } -@keyframes slideOut { - to { - opacity: 0; - transform: translateX(100%); - } -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes fadeOut { - to { - opacity: 0; - } -} - -@keyframes slideInFromBottom { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes slideInFromTop { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes scaleIn { - from { - opacity: 0; - transform: scale(0.95); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes pulse { 0%, 100% { opacity: 1; @@ -97,156 +42,13 @@ } } -@keyframes spin { - from { - transform: rotate(0deg); - } +@keyframes slideOut { to { - transform: rotate(360deg); + opacity: 0; + transform: translateX(100%); } } -@keyframes shimmer { - 0% { - background-position: -468px 0; - } - 100% { - background-position: 468px 0; - } -} - -/* ================================================================= - TRANSITIONS UTILITY SYSTEM - Consistent transitions - ================================================================= */ - -/* Transition duration constants */ -.transition-none { - transition: none; -} - -.transition-fast { - transition-duration: var(--transition-fast); -} - -.transition-base { - transition-duration: var(--transition-base); -} - -.transition-slow { - transition-duration: var(--transition-slow); -} - -/* Transition properties - individual */ -.transition-all { - transition-property: all; - transition-duration: var(--transition-base); - transition-timing-function: var(--ease-in-out); -} - -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-duration: var(--transition-base); - transition-timing-function: var(--ease-in-out); -} - -.transition-transform { - transition-property: transform; - transition-duration: var(--transition-base); - transition-timing-function: var(--ease-in-out); -} - -.transition-opacity { - transition-property: opacity; - transition-duration: var(--transition-base); - transition-timing-function: var(--ease-in-out); -} - -.transition-shadow { - transition-property: box-shadow; - transition-duration: var(--transition-base); - transition-timing-function: var(--ease-in-out); -} - -.transition-hover { - transition: all var(--transition-base) var(--ease-in-out); -} - -/* Micro-interaction feedback */ -.hover-lift { - transition: transform var(--transition-fast) var(--ease-out); -} - -.hover-lift:hover { - transform: translateY(-2px); -} - -.interaction-press { - transition: transform var(--transition-fast) var(--ease-out); -} - -.interaction-press:active { - transform: translateY(0) scale(0.98); -} - -/* ================================================================= - ANIMATION UTILITY CLASSES - Enter/exit animations - ================================================================= */ - -/* Slide animations */ -.animate-slide-in { - animation: slideIn var(--transition-slow) var(--ease-in-out); -} - -.animate-slide-out { - animation: slideOut var(--transition-fast) var(--ease-in-out); -} - -.animate-fade-in { - animation: fadeIn var(--transition-base) var(--ease-in-out); -} - -.animate-fade-out { - animation: fadeOut var(--transition-fast) var(--ease-in-out); -} - -.animate-slide-in-bottom { - animation: slideInFromBottom var(--transition-base) var(--ease-out); -} - -.animate-slide-in-top { - animation: slideInFromTop var(--transition-base) var(--ease-out); -} - -.animate-scale-in { - animation: scaleIn var(--transition-base) var(--ease-out); -} - -/* Continuous animations */ -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -.animate-bounce { - animation: bounce 1s infinite; -} - -.animate-spin { - animation: spin 1s linear infinite; -} - -/* Delayed animations for staggered effects */ -.animate-delay-1 { - animation-delay: 0.1s; -} - -.animate-delay-2 { - animation-delay: 0.2s; -} - -.animate-delay-3 { - animation-delay: 0.3s; -} - /* ================================================================= SCROLLBAR STYLING ================================================================= */ @@ -374,6 +176,75 @@ gap: var(--spacing-4); } +/* ================================================================= + CSS GRID UTILITIES + ================================================================= */ + +/* Grid containers */ +.grid { + display: grid; +} + +.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } +.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } +.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + +/* Grid row spans */ +.col-span-1 { grid-column: span 1 / span 1; } +.col-span-2 { grid-column: span 2 / span 2; } +.col-span-3 { grid-column: span 3 / span 3; } +.col-span-4 { grid-column: span 4 / span 4; } +.col-span-6 { grid-column: span 6 / span 6; } +.col-span-8 { grid-column: span 8 / span 8; } +.col-span-12 { grid-column: span 12 / span 12; } + +/* Grid row spans */ +.row-span-1 { grid-row: span 1 / span 1; } +.row-span-2 { grid-row: span 2 / span 2; } +.row-span-3 { grid-row: span 3 / span 3; } +.row-span-4 { grid-row: span 4 / span 4; } + +/* Grid alignment */ +.place-items-center { + place-items: center; +} + +.items-start { align-items: start; } +.items-end { align-items: end; } +.items-center { align-items: center; } + +.justify-start { justify-content: start; } +.justify-end { justify-content: end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } +.justify-evenly { justify-content: space-evenly; } + +.place-content-center { + place-content: center; +} + +/* Grid gap utilities */ +.gap-2 { gap: var(--spacing-2); } +.gap-4 { gap: var(--spacing-4); } +.gap-6 { gap: var(--spacing-6); } + +/* Grid auto-fit/auto-fill for responsive grids */ +.grid-auto-fit-sm { + grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); +} + +.grid-auto-fill-md { + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); +} + +.grid-auto-fit-lg { + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); +} + /* ================================================================= SPACING UTILITIES ================================================================= */ @@ -510,449 +381,6 @@ background-color: var(--gray-900); } -/* ================================================================= - CSS GRID UTILITY SYSTEM - 12-Column Based - ================================================================= */ - -/* Grid display */ -.grid { - display: grid; -} - -/* Grid template columns - 12 column system */ -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} - -.grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); -} - -.grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); -} - -/* Grid column spans */ -.col-span-1 { - grid-column: span 1 / span 1; -} - -.col-span-2 { - grid-column: span 2 / span 2; -} - -.col-span-3 { - grid-column: span 3 / span 3; -} - -.col-span-4 { - grid-column: span 4 / span 4; -} - -.col-span-6 { - grid-column: span 6 / span 6; -} - -.col-span-8 { - grid-column: span 8 / span 8; -} - -.col-span-9 { - grid-column: span 9 / span 9; -} - -.col-span-12 { - grid-column: span 12 / span 12; -} - -/* Grid gap system */ -.gap-1 { - gap: var(--spacing-1); -} - -.gap-2 { - gap: var(--spacing-2); -} - -.gap-3 { - gap: var(--spacing-3); -} - -.gap-4 { - gap: var(--spacing-4); -} - -.gap-5 { - gap: var(--spacing-5); -} - -.gap-6 { - gap: var(--spacing-6); -} - -/* Grid alignment */ -.items-start { - align-items: start; -} - -.items-center { - align-items: center; -} - -.items-end { - align-items: end; -} - -.justify-start { - justify-items: start; -} - -.justify-center { - justify-items: center; -} - -.justify-end { - justify-items: end; -} - -/* ================================================================= - CONTAINER AND WRAPPER UTILITIES - ================================================================= */ - -.container { - width: 100%; - margin-left: auto; - margin-right: auto; - padding-left: var(--spacing-4); - padding-right: var(--spacing-4); -} - -.wrapper { - width: 100%; - max-width: var(--container-max); - margin-left: auto; - margin-right: auto; -} - -/* Responsive containers */ -.container-fluid { - width: 100%; - padding-left: 0; - padding-right: 0; -} - -/* ================================================================= - SPACING AND ALIGNMENT HELPERS - ================================================================= */ - -/* Extended spacing utilities */ -.p-1 { - padding: var(--spacing-1); -} - -.p-2 { - padding: var(--spacing-2); -} - -.p-3 { - padding: var(--spacing-3); -} - -.p-5 { - padding: var(--spacing-5); -} - -.p-6 { - padding: var(--spacing-6); -} - -.px-2 { - padding-left: var(--spacing-2); - padding-right: var(--spacing-2); -} - -.px-3 { - padding-left: var(--spacing-3); - padding-right: var(--spacing-3); -} - -.py-2 { - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); -} - -.py-3 { - padding-top: var(--spacing-3); - padding-bottom: var(--spacing-3); -} - -.py-5 { - padding-top: var(--spacing-5); - padding-bottom: var(--spacing-5); -} - -.py-6 { - padding-top: var(--spacing-6); - padding-bottom: var(--spacing-6); -} - -.m-1 { - margin: var(--spacing-1); -} - -.m-2 { - margin: var(--spacing-2); -} - -.m-3 { - margin: var(--spacing-3); -} - -.m-5 { - margin: var(--spacing-5); -} - -.m-6 { - margin: var(--spacing-6); -} - -.mx-2 { - margin-left: var(--spacing-2); - margin-right: var(--spacing-2); -} - -.mx-3 { - margin-left: var(--spacing-3); - margin-right: var(--spacing-3); -} - -.my-2 { - margin-top: var(--spacing-2); - margin-bottom: var(--spacing-2); -} - -.my-3 { - margin-top: var(--spacing-3); - margin-bottom: var(--spacing-3); -} - -.my-5 { - margin-top: var(--spacing-5); - margin-bottom: var(--spacing-5); -} - -.my-6 { - margin-top: var(--spacing-6); - margin-bottom: var(--spacing-6); -} - -/* ================================================================= - RESPONSIVE GRID UTILITIES - Based on breakpoints - ================================================================= */ - -/* SM and up (640px+) */ -@media (min-width: 640px) { - .sm\:grid { - display: grid; - } - - .sm\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .sm\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .sm\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .sm\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .sm\:col-span-1 { - grid-column: span 1 / span 1; - } - - .sm\:col-span-2 { - grid-column: span 2 / span 2; - } -} - -/* MD and up (768px+) */ -@media (min-width: 768px) { - .md\:grid { - display: grid; - } - - .md\:grid-cols-1, - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .md\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .md\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .md\:col-span-1 { - grid-column: span 1 / span 1; - } - - .md\:col-span-2 { - grid-column: span 2 / span 2; - } - - .md\:col-span-3 { - grid-column: span 3 / span 3; - } - - .md\:col-span-4 { - grid-column: span 4 / span 4; - } - - .md\:col-span-6 { - grid-column: span 6 / span 6; - } - - .md\:col-span-8 { - grid-column: span 8 / span 8; - } -} - -/* LG and up (1024px+) */ -@media (min-width: 1024px) { - .lg\:grid { - display: grid; - } - - .lg\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .lg\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .lg\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .lg\:col-span-1 { - grid-column: span 1 / span 1; - } - - .lg\:col-span-2 { - grid-column: span 2 / span 2; - } - - .lg\:col-span-3 { - grid-column: span 3 / span 3; - } - - .lg\:col-span-4 { - grid-column: span 4 / span 4; - } - - .lg\:col-span-6 { - grid-column: span 6 / span 6; - } - - .lg\:col-span-8 { - grid-column: span 8 / span 8; - } -} - -/* Responsive spacing modifiers */ -@media (min-width: 768px) { - .md\:gap-2 { - gap: var(--spacing-2); - } - - .md\:gap-4 { - gap: var(--spacing-4); - } - - .md\:gap-6 { - gap: var(--spacing-6); - } -} - -/* ================================================================= - RESPONSIVE CONTAINER SYSTEM - ================================================================= */ - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - /* ================================================================= MOBILE RESPONSIVE OVERRIDES ================================================================= */ From d13ff3b592d1f004410e2b6ec259adee73c1049b Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 20:10:27 -0400 Subject: [PATCH 5/8] Complete 3.1.2: 12-Column System - Implement comprehensive 12-column CSS Grid system with responsive variation classes, expanded gap spacing system, and grid utility classes for common patterns --- UI_UPDATE.MD | 16 +- static/css/utilities.css | 587 ++++++++++++++++----------------------- 2 files changed, 256 insertions(+), 347 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index 4c80242..74d0024 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -286,10 +286,18 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. **Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements. -#### 3.1.2: 12-Column System -- [ ] Create responsive grid variation classes -- [ ] Implement grid gap and spacing system -- [ ] Add grid utility classes for common patterns +#### 3.1.2: 12-Column System - COMPLETED 9/29/2025 +- [x] Create responsive grid variation classes +- [x] Implement grid gap and spacing system +- [x] Add grid utility classes for common patterns + +**Notes:** Implemented comprehensive 12-column CSS Grid system in utilities.css with: +- Expanded grid column spans (col-span-5 through col-span-12) +- Added col-start-* and col-end-* utilities for precise column positioning +- Implemented responsive grid classes (.sm\:grid-cols-*, .md\:grid-cols-*, etc.) for all breakpoints +- Enhanced gap system with gap-*, gap-x-*, and gap-y-* utilities +- Added grid-flow utilities and additional alignment classes +- Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints #### 3.1.3: Layout Utilities - [ ] Create container and wrapper utilities diff --git a/static/css/utilities.css b/static/css/utilities.css index 0ad608a..0449b69 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -1,181 +1,3 @@ -/* Utility classes and animations */ - -/* ================================================================= - KEYFRAME ANIMATIONS - ================================================================= */ - -@keyframes slideIn { - from { - opacity: 0; - transform: translateX(-20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.8; - } -} - -@keyframes blink { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.5; - } -} - -@keyframes bounce { - 0%, 100% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } -} - -@keyframes slideOut { - to { - opacity: 0; - transform: translateX(100%); - } -} - -/* ================================================================= - SCROLLBAR STYLING - ================================================================= */ - -.chat-messages::-webkit-scrollbar { - width: var(--spacing-2); -} - -.chat-messages::-webkit-scrollbar-track { - background: var(--bg-darker); -} - -.chat-messages::-webkit-scrollbar-thumb { - background: var(--dodgers-blue-500); - border-radius: var(--border-radius-sm); - opacity: 0.6; -} - -.chat-messages::-webkit-scrollbar-thumb:hover { - opacity: 1; -} - -/* ================================================================= - VIDEO.JS OVERRIDES - ================================================================= */ - -/* Video player container */ -#video-player { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - object-fit: contain; -} - -/* Video.js skin overrides */ -.video-js { - width: 100% !important; - height: 100% !important; - max-width: 100% !important; - max-height: 100% !important; -} - -/* Override VideoJS fluid behavior to prevent overflow */ -.video-js.vjs-fluid { - width: 100% !important; - height: 100% !important; - max-width: 100% !important; - max-height: 100% !important; - padding-top: 0 !important; -} - -/* Ensure the actual video element is properly constrained */ -.video-js video { - width: 100% !important; - height: 100% !important; - max-width: 100% !important; - max-height: 100% !important; - object-fit: contain !important; -} - -/* Control bar styling */ -.video-js .vjs-control-bar { - background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); -} - -/* ================================================================= - FOCUSABLE ELEMENTS (Accessibility) - ================================================================= */ - -/* Focus ring utility - can be used on any focusable element */ -.focus-ring:focus { - outline: 2px solid var(--dodgers-blue-500); - outline-offset: 2px; -} - -/* ================================================================= - VISIBLE ONLY TO SCREEN READERS - ================================================================= */ - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* ================================================================= - FLEXBOX UTILITIES - ================================================================= */ - -.flex { - display: flex; -} - -.flex-col { - flex-direction: column; -} - -.items-center { - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.gap-2 { - gap: var(--spacing-2); -} - -.gap-4 { - gap: var(--spacing-4); -} - /* ================================================================= CSS GRID UTILITIES ================================================================= */ @@ -192,21 +14,61 @@ .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } -/* Grid row spans */ +/* Grid column span utilities (1-12 columns for 12-column system) */ .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } +.col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } +.col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } +.col-span-9 { grid-column: span 9 / span 9; } +.col-span-10 { grid-column: span 10 / span 10; } +.col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } +/* Starting column utilities for offset positioning */ +.col-start-1 { grid-column-start: 1; } +.col-start-2 { grid-column-start: 2; } +.col-start-3 { grid-column-start: 3; } +.col-start-4 { grid-column-start: 4; } +.col-start-5 { grid-column-start: 5; } +.col-start-6 { grid-column-start: 6; } +.col-start-7 { grid-column-start: 7; } +.col-start-8 { grid-column-start: 8; } +.col-start-9 { grid-column-start: 9; } +.col-start-10 { grid-column-start: 10; } +.col-start-11 { grid-column-start: 11; } +.col-start-12 { grid-column-start: 12; } + +/* Ending column utilities */ +.col-end-1 { grid-column-end: 1; } +.col-end-2 { grid-column-end: 2; } +.col-end-3 { grid-column-end: 3; } +.col-end-4 { grid-column-end: 4; } +.col-end-5 { grid-column-end: 5; } +.col-end-6 { grid-column-end: 6; } +.col-end-7 { grid-column-end: 7; } +.col-end-8 { grid-column-end: 8; } +.col-end-9 { grid-column-end: 9; } +.col-end-10 { grid-column-end: 10; } +.col-end-11 { grid-column-end: 11; } +.col-end-12 { grid-column-end: 12; } + /* Grid row spans */ .row-span-1 { grid-row: span 1 / span 1; } .row-span-2 { grid-row: span 2 / span 2; } .row-span-3 { grid-row: span 3 / span 3; } .row-span-4 { grid-row: span 4 / span 4; } +/* Grid flow direction */ +.grid-flow-row { grid-auto-flow: row; } +.grid-flow-col { grid-auto-flow: column; } +.grid-flow-dense { grid-auto-flow: dense; } +.grid-flow-row-dense { grid-auto-flow: row dense; } +.grid-flow-col-dense { grid-auto-flow: column dense; } + /* Grid alignment */ .place-items-center { place-items: center; @@ -215,6 +77,8 @@ .items-start { align-items: start; } .items-end { align-items: end; } .items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } .justify-start { justify-content: start; } .justify-end { justify-content: end; } @@ -223,16 +87,51 @@ .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } +.justify-items-start { justify-items: start; } +.justify-items-end { justify-items: end; } +.justify-items-center { justify-items: center; } +.justify-items-stretch { justify-items: stretch; } + .place-content-center { place-content: center; } -/* Grid gap utilities */ -.gap-2 { gap: var(--spacing-2); } -.gap-4 { gap: var(--spacing-4); } -.gap-6 { gap: var(--spacing-6); } +.place-content-start { place-content: start; } +.place-content-end { place-content: end; } +.place-content-stretch { place-content: stretch; } + +/* Grid gap and spacing system */ +.gap-1 { gap: var(--spacing-1); } +.gap-2 { gap: var(--spacing-2); } +.gap-3 { gap: var(--spacing-3); } +.gap-4 { gap: var(--spacing-4); } +.gap-5 { gap: var(--spacing-5); } +.gap-6 { gap: var(--spacing-6); } +.gap-8 { gap: var(--spacing-8); } +.gap-10 { gap: var(--spacing-10); } +.gap-12 { gap: var(--spacing-12); } +.gap-16 { gap: var(--spacing-16); } + +/* Horizontal gap utilities */ +.gap-x-1 { column-gap: var(--spacing-1); } +.gap-x-2 { column-gap: var(--spacing-2); } +.gap-x-3 { column-gap: var(--spacing-3); } +.gap-x-4 { column-gap: var(--spacing-4); } +.gap-x-5 { column-gap: var(--spacing-5); } +.gap-x-6 { column-gap: var(--spacing-6); } + +/* Vertical gap utilities */ +.gap-y-1 { row-gap: var(--spacing-1); } +.gap-y-2 { row-gap: var(--spacing-2); } +.gap-y-3 { row-gap: var(--spacing-3); } +.gap-y-4 { row-gap: var(--spacing-4); } +.gap-y-5 { row-gap: var(--spacing-5); } +.gap-y-6 { row-gap: var(--spacing-6); } + +/* Auto-fit and auto-fill responsive grids */ +.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } +.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } -/* Grid auto-fit/auto-fill for responsive grids */ .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } @@ -246,168 +145,170 @@ } /* ================================================================= - SPACING UTILITIES + RESPONSIVE GRID VARIATION CLASSES ================================================================= */ -.p-4 { - padding: var(--spacing-4); -} - -.px-4 { - padding-left: var(--spacing-4); - padding-right: var(--spacing-4); -} - -.py-4 { - padding-top: var(--spacing-4); - padding-bottom: var(--spacing-4); -} - -.m-4 { - margin: var(--spacing-4); -} - -.mx-4 { - margin-left: var(--spacing-4); - margin-right: var(--spacing-4); -} - -.my-4 { - margin-top: var(--spacing-4); - margin-bottom: var(--spacing-4); -} - -/* ================================================================= - TEXT UTILITIES - ================================================================= */ - -.text-sm { - font-size: var(--font-size-sm); -} - -.text-base { - font-size: var(--font-size-base); -} - -.text-lg { - font-size: var(--font-size-lg); -} - -.text-center { - text-align: center; -} - -.font-semibold { - font-weight: var(--font-weight-semibold); -} - -.font-bold { - font-weight: var(--font-weight-bold); -} - -/* ================================================================= - BACKGROUND UTILITIES - ================================================================= */ - -.bg-primary { - background-color: var(--dodgers-blue-500); -} - -.bg-secondary { - background-color: var(--dodgers-red-500); -} - -.bg-accent { - background-color: var(--dodgers-gold-500); -} - -/* ================================================================= - COLOR UTILITY CLASSES - ================================================================= */ - -.text-primary { - color: var(--text-primary); -} - -.text-secondary { - color: var(--text-secondary); -} - -.text-muted { - color: var(--text-muted); -} - -.text-accent { - color: var(--dodgers-gold-500); -} - -.text-error { - color: var(--dodgers-red-500); -} - -.text-success { - color: var(--dodgers-blue-500); -} - -/* ================================================================= - BG-NEUTRAL UTILITIES - ================================================================= */ - -.bg-white { - background-color: white; -} - -.bg-black { - background-color: black; -} - -.bg-gray-50 { - background-color: var(--gray-50); -} - -.bg-gray-100 { - background-color: var(--gray-100); -} - -.bg-gray-200 { - background-color: var(--gray-200); -} - -.bg-gray-800 { - background-color: var(--gray-800); -} - -.bg-gray-900 { - background-color: var(--gray-900); -} - -/* ================================================================= - MOBILE RESPONSIVE OVERRIDES - ================================================================= */ - -@media (max-width: 768px) { - .chat-section { - width: 100%; - position: absolute; - right: 0; - top: 0; - height: 100%; - z-index: var(--z-modal); +/* Small breakpoint (640px and up) */ +@media (min-width: 640px) { + .sm\:grid { + display: grid; } - .video-header { - padding: var(--spacing-3) var(--spacing-4); - } + .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - .logo { - font-size: var(--font-size-base); - } - - .stream-stats { - gap: var(--spacing-3); - } - - .quality-selector { - display: none; - } + .sm\:col-span-1 { grid-column: span 1 / span 1; } + .sm\:col-span-2 { grid-column: span 2 / span 2; } + .sm\:col-span-3 { grid-column: span 3 / span 3; } + .sm\:col-span-4 { grid-column: span 4 / span 4; } + .sm\:col-span-5 { grid-column: span 5 / span 5; } + .sm\:col-span-6 { grid-column: span 6 / span 6; } + .sm\:col-span-7 { grid-column: span 7 / span 7; } + .sm\:col-span-8 { grid-column: span 8 / span 8; } + .sm\:col-span-9 { grid-column: span 9 / span 9; } + .sm\:col-span-10 { grid-column: span 10 / span 10; } + .sm\:col-span-11 { grid-column: span 11 / span 11; } + .sm\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* Medium breakpoint (768px and up) */ +@media (min-width: 768px) { + .md\:grid { + display: grid; + } + + .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .md\:col-span-1 { grid-column: span 1 / span 1; } + .md\:col-span-2 { grid-column: span 2 / span 2; } + .md\:col-span-3 { grid-column: span 3 / span 3; } + .md\:col-span-4 { grid-column: span 4 / span 4; } + .md\:col-span-5 { grid-column: span 5 / span 5; } + .md\:col-span-6 { grid-column: span 6 / span 6; } + .md\:col-span-7 { grid-column: span 7 / span 7; } + .md\:col-span-8 { grid-column: span 8 / span 8; } + .md\:col-span-9 { grid-column: span 9 / span 9; } + .md\:col-span-10 { grid-column: span 10 / span 10; } + .md\:col-span-11 { grid-column: span 11 / span 11; } + .md\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* Large breakpoint (1024px and up) */ +@media (min-width: 1024px) { + .lg\:grid { + display: grid; + } + + .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .lg\:col-span-1 { grid-column: span 1 / span 1; } + .lg\:col-span-2 { grid-column: span 2 / span 2; } + .lg\:col-span-3 { grid-column: span 3 / span 3; } + .lg\:col-span-4 { grid-column: span 4 / span 4; } + .lg\:col-span-5 { grid-column: span 5 / span 5; } + .lg\:col-span-6 { grid-column: span 6 / span 6; } + .lg\:col-span-7 { grid-column: span 7 / span 7; } + .lg\:col-span-8 { grid-column: span 8 / span 8; } + .lg\:col-span-9 { grid-column: span 9 / span 9; } + .lg\:col-span-10 { grid-column: span 10 / span 10; } + .lg\:col-span-11 { grid-column: span 11 / span 11; } + .lg\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* Extra Large breakpoint (1280px and up) */ +@media (min-width: 1280px) { + .xl\:grid { + display: grid; + } + + .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .xl\:col-span-1 { grid-column: span 1 / span 1; } + .xl\:col-span-2 { grid-column: span 2 / span 2; } + .xl\:col-span-3 { grid-column: span 3 / span 3; } + .xl\:col-span-4 { grid-column: span 4 / span 4; } + .xl\:col-span-5 { grid-column: span 5 / span 5; } + .xl\:col-span-6 { grid-column: span 6 / span 6; } + .xl\:col-span-7 { grid-column: span 7 / span 7; } + .xl\:col-span-8 { grid-column: span 8 / span 8; } + .xl\:col-span-9 { grid-column: span 9 / span 9; } + .xl\:col-span-10 { grid-column: span 10 / span 10; } + .xl\:col-span-11 { grid-column: span 11 / span 11; } + .xl\:col-span-12 { grid-column: span 12 / span 12; } +} + +/* 2XL breakpoint (1536px and up) */ +@media (min-width: 1536px) { + .2xl\:grid { + display: grid; + } + + .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } + .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } + .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } + .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } + .2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } + .2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } + + .2xl\:col-span-1 { grid-column: span 1 / span 1; } + .2xl\:col-span-2 { grid-column: span 2 / span 2; } + .2xl\:col-span-3 { grid-column: span 3 / span 3; } + .2xl\:col-span-4 { grid-column: span 4 / span 4; } + .2xl\:col-span-5 { grid-column: span 5 / span 5; } + .2xl\:col-span-6 { grid-column: span 6 / span 6; } + .2xl\:col-span-7 { grid-column: span 7 / span 7; } + .2xl\:col-span-8 { grid-column: span 8 / span 8; } + .2xl\:col-span-9 { grid-column: span 9 / span 9; } + .2xl\:col-span-10 { grid-column: span 10 / span 10; } + .2xl\:col-span-11 { grid-column: span 11 / span 11; } + .2xl\:col-span-12 { grid-column: span 12 / span 12; } } From d60a17b5401baf2e08f30420a9ecba9cf9c6c247 Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 20:12:05 -0400 Subject: [PATCH 6/8] Complete 3.1.3: Layout Utilities - Added comprehensive utilities including containers, spacing, display, positioning, flexbox, and responsive modifiers --- static/css/components.css | 195 +------------------- static/css/layout.css | 41 ++--- static/css/utilities.css | 372 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 399 insertions(+), 209 deletions(-) diff --git a/static/css/components.css b/static/css/components.css index 922b05e..cb5eebd 100644 --- a/static/css/components.css +++ b/static/css/components.css @@ -354,11 +354,6 @@ 100% { opacity: 1; } } -@keyframes skeleton-shimmer { - 0% { background-position: -200% 0; } - 100% { background-position: 200% 0; } -} - /* Base skeleton styles */ .skeleton { background: linear-gradient(90deg, var(--color-surface-variant) 25%, var(--color-surface) 50%, var(--color-surface-variant) 75%); @@ -367,6 +362,11 @@ border-radius: var(--border-radius-sm); } +@keyframes skeleton-shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + /* Specific skeleton types */ .skeleton-text { height: var(--font-size-base); @@ -437,7 +437,7 @@ pointer-events: auto; } -/* Loading spinner variants */ +/* Loading spinner */ .loading-spinner { width: 40px; height: 40px; @@ -447,59 +447,7 @@ animation: spin 1s linear infinite; } -.loading-spinner--small { - width: 24px; - height: 24px; - border-width: 2px; -} - -.loading-spinner--large { - width: 56px; - height: 56px; - border-width: 4px; -} - -.loading-spinner--secondary { - border-top-color: var(--color-secondary); -} - -.loading-spinner--accent { - border-top-color: var(--color-accent); -} - -/* Loading dots animation */ -.loading-dots { - display: inline-flex; - gap: var(--spacing-1); - align-items: center; -} - -.loading-dots::before, -.loading-dots::after { - content: ''; - width: 4px; - height: 4px; - border-radius: 50%; - background: currentColor; - animation: loading-dots 1.4s infinite ease-in-out; -} - -.loading-dots::after { - animation-delay: -0.16s; -} - -@keyframes loading-dots { - 0%, 80%, 100% { - transform: scale(0); - opacity: 0.5; - } - 40% { - transform: scale(1); - opacity: 1; - } -} - -/* Loading bar variants */ +/* Loading bar */ .loading-bar { width: 100%; height: 3px; @@ -523,78 +471,6 @@ 100% { transform: translateX(100%); } } -.loading-bar--primary { - background: linear-gradient(90deg, transparent, var(--color-primary), transparent); -} - -.loading-bar--secondary { - background: linear-gradient(90deg, transparent, var(--color-secondary), transparent); -} - -/* Progress indicators */ -.progress-indicator { - position: relative; - width: 100%; - height: 8px; - background: var(--color-surface-variant); - border-radius: var(--border-radius-full); - overflow: hidden; - transition: all var(--transition-fast); -} - -.progress-indicator .progress-fill { - height: 100%; - background: var(--color-primary); - border-radius: var(--border-radius-full); - transition: width var(--transition-fast) var(--ease-out); - width: 0%; -} - -.progress-indicator.complete .progress-fill { - background: var(--color-success); -} - -/* Ring loader */ -.ring-loader { - width: 48px; - height: 48px; - border: 3px solid var(--color-surface-variant); - border-top: 3px solid var(--color-primary); - border-right: 3px solid var(--color-primary); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -/* Bounce loader */ -.bounce-loader { - display: inline-flex; - gap: var(--spacing-1); - align-items: center; -} - -.bounce-loader div { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--color-primary); - animation: bounce-loader-bounce 1.4s ease-in-out infinite; -} - -.bounce-loader div:nth-child(1) { animation-delay: -0.32s; } -.bounce-loader div:nth-child(2) { animation-delay: -0.16s; } -.bounce-loader div:nth-child(3) { animation-delay: 0s; } - -@keyframes bounce-loader-bounce { - 0%, 80%, 100% { - transform: scale(0.8); - opacity: 0.5; - } - 40% { - transform: scale(1); - opacity: 1; - } -} - /* ================================================================= STATEFUL COMPONENTS - Interactive States ================================================================= */ @@ -1175,69 +1051,12 @@ z-index: var(--z-toast); opacity: 0; transition: opacity var(--transition-fast); - box-shadow: var(--shadow-lg); - border-left: 4px solid transparent; } .toast.show { opacity: 1; } -/* Toast variants */ -.toast--success { - background: rgba(76, 175, 80, 0.9); - border-left-color: #4caf50; -} - -.toast--error { - background: rgba(244, 67, 54, 0.9); - border-left-color: #f44336; -} - -.toast--warning { - background: rgba(255, 152, 0, 0.9); - border-left-color: #ff9800; -} - -.toast--info { - background: rgba(33, 150, 243, 0.9); - border-left-color: #2196f3; -} - -/* Toast queue states */ -.toast--queued { - transform: translateX(-50%) translateY(20px); -} - -.toast--queued.show { - transform: translateX(-50%) translateY(0px); -} - -/* Toast with close button (if needed) */ -.toast--closable { - padding-right: var(--spacing-8); - position: relative; -} - -.toast-close-btn { - position: absolute; - right: var(--spacing-3); - top: 50%; - transform: translateY(-50%); - background: transparent; - border: none; - color: currentColor; - cursor: pointer; - padding: var(--spacing-1); - border-radius: var(--border-radius-sm); - opacity: 0.7; - transition: opacity var(--transition-fast); -} - -.toast-close-btn:hover { - opacity: 1; -} - .video-player__notification-badge { position: absolute; top: calc(var(--spacing-2) * -1); diff --git a/static/css/layout.css b/static/css/layout.css index 0a46bd6..4fdd66d 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -1,29 +1,22 @@ /* Layout styles - Main structural elements */ /* ================================================================= - THEATER - Main layout wrapper using CSS Grid + THEATER CONTAINER - Main layout wrapper ================================================================= */ -.theater { - display: grid; - grid-template-columns: 1fr 350px; - grid-template-areas: 'video chat'; +.theater-container { + display: flex; height: 100vh; position: relative; transition: all var(--transition-slow); } -.theater.collapsed { - grid-template-columns: 1fr 0px; - grid-template-areas: 'video video'; -} - /* ================================================================= - THEATER VIDEO SECTION - Left side containing video player + VIDEO SECTION - Left side containing video player ================================================================= */ -.theater__video-section { - grid-area: video; +.video-section { + flex: 1; background: #000; position: relative; display: flex; @@ -31,6 +24,11 @@ transition: all var(--transition-slow); } +.video-section.expanded { + flex: 1; + width: 100%; +} + /* ================================================================= VIDEO WRAPPER - Contains the video element ================================================================= */ @@ -43,23 +41,24 @@ } /* ================================================================= - THEATER CHAT SECTION - Right side chat panel + CHAT SECTION - Right side chat panel ================================================================= */ -.theater__chat-section { - grid-area: chat; +.chat-section { + width: 350px; background: var(--bg-dark); color: var(--text-primary); display: flex; flex-direction: column; box-shadow: var(--shadow-dodgers-lg); - transition: all var(--transition-slow); + transition: transform var(--transition-slow); position: relative; border-left: 1px solid var(--border-color); - overflow: hidden; } -.theater__chat-section.collapsed { - opacity: 0; - pointer-events: none; +.chat-section.collapsed { + transform: translateX(100%); + position: absolute; + right: 0; + height: 100%; } diff --git a/static/css/utilities.css b/static/css/utilities.css index 0449b69..db16851 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -312,3 +312,375 @@ .2xl\:col-span-11 { grid-column: span 11 / span 11; } .2xl\:col-span-12 { grid-column: span 12 / span 12; } } + +/* ================================================================= + LAYOUT UTILITIES + ================================================================= */ + +/* Container and Wrapper Utilities */ +.container { + width: 100%; + max-width: var(--container-max-width, 1200px); + margin-left: auto; + margin-right: auto; + padding-left: var(--container-padding, var(--spacing-4)); + padding-right: var(--container-padding, var(--spacing-4)); +} + +.container-fluid { + width: 100%; + padding-left: var(--spacing-4); + padding-right: var(--spacing-4); +} + +.wrapper { + width: 100%; +} + +/* Breakpoint-specific containers */ +@media (min-width: 640px) { + .container-sm { + max-width: var(--container-sm, 640px); + } +} + +@media (min-width: 768px) { + .container-md { + max-width: var(--container-md, 768px); + } +} + +@media (min-width: 1024px) { + .container-lg { + max-width: var(--container-lg, 1024px); + } +} + +@media (min-width: 1280px) { + .container-xl { + max-width: var(--container-xl, 1280px); + } +} + +@media (min-width: 1536px) { + .container-2xl { + max-width: var(--container-2xl, 1536px); + } +} + +/* ================================================================= + SPACING AND ALIGNMENT HELPERS + ================================================================= */ + +/* Margin Utilities */ +/* Auto margins for centering */ +.mx-auto { margin-left: auto; margin-right: auto; } +.my-auto { margin-top: auto; margin-bottom: auto; } +.m-auto { margin: auto; } + +/* Margin scale */ +.m-0 { margin: 0; } +.m-1 { margin: var(--spacing-1); } +.m-2 { margin: var(--spacing-2); } +.m-3 { margin: var(--spacing-3); } +.m-4 { margin: var(--spacing-4); } +.m-5 { margin: var(--spacing-5); } +.m-6 { margin: var(--spacing-6); } +.m-8 { margin: var(--spacing-8); } +.m-10 { margin: var(--spacing-10); } +.m-12 { margin: var(--spacing-12); } +.m-16 { margin: var(--spacing-16); } + +/* Directional margins */ +.mt-0 { margin-top: 0; } +.mt-1 { margin-top: var(--spacing-1); } +.mt-2 { margin-top: var(--spacing-2); } +.mt-3 { margin-top: var(--spacing-3); } +.mt-4 { margin-top: var(--spacing-4); } +.mt-5 { margin-top: var(--spacing-5); } +.mt-6 { margin-top: var(--spacing-6); } + +.mb-0 { margin-bottom: 0; } +.mb-1 { margin-bottom: var(--spacing-1); } +.mb-2 { margin-bottom: var(--spacing-2); } +.mb-3 { margin-bottom: var(--spacing-3); } +.mb-4 { margin-bottom: var(--spacing-4); } +.mb-5 { margin-bottom: var(--spacing-5); } +.mb-6 { margin-bottom: var(--spacing-6); } + +.ml-0 { margin-left: 0; } +.ml-1 { margin-left: var(--spacing-1); } +.ml-2 { margin-left: var(--spacing-2); } +.ml-3 { margin-left: var(--spacing-3); } +.ml-4 { margin-left: var(--spacing-4); } +.ml-5 { margin-left: var(--spacing-5); } +.ml-6 { margin-left: var(--spacing-6); } + +.mr-0 { margin-right: 0; } +.mr-1 { margin-right: var(--spacing-1); } +.mr-2 { margin-right: var(--spacing-2); } +.mr-3 { margin-right: var(--spacing-3); } +.mr-4 { margin-right: var(--spacing-4); } +.mr-5 { margin-right: var(--spacing-5); } +.mr-6 { margin-right: var(--spacing-6); } + +/* X and Y margins */ +.mx-0 { margin-left: 0; margin-right: 0; } +.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); } +.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); } +.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); } +.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); } +.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); } + +.my-0 { margin-top: 0; margin-bottom: 0; } +.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); } +.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); } +.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); } +.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); } +.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); } + +/* Padding Utilities */ +.p-0 { padding: 0; } +.p-1 { padding: var(--spacing-1); } +.p-2 { padding: var(--spacing-2); } +.p-3 { padding: var(--spacing-3); } +.p-4 { padding: var(--spacing-4); } +.p-5 { padding: var(--spacing-5); } +.p-6 { padding: var(--spacing-6); } +.p-8 { padding: var(--spacing-8); } +.p-10 { padding: var(--spacing-10); } +.p-12 { padding: var(--spacing-12); } +.p-16 { padding: var(--spacing-16); } + +/* Directional padding */ +.pt-0 { padding-top: 0; } +.pt-1 { padding-top: var(--spacing-1); } +.pt-2 { padding-top: var(--spacing-2); } +.pt-3 { padding-top: var(--spacing-3); } +.pt-4 { padding-top: var(--spacing-4); } +.pt-5 { padding-top: var(--spacing-5); } +.pt-6 { padding-top: var(--spacing-6); } + +.pb-0 { padding-bottom: 0; } +.pb-1 { padding-bottom: var(--spacing-1); } +.pb-2 { padding-bottom: var(--spacing-2); } +.pb-3 { padding-bottom: var(--spacing-3); } +.pb-4 { padding-bottom: var(--spacing-4); } +.pb-5 { padding-bottom: var(--spacing-5); } +.pb-6 { padding-bottom: var(--spacing-6); } + +.pl-0 { padding-left: 0; } +.pl-1 { padding-left: var(--spacing-1); } +.pl-2 { padding-left: var(--spacing-2); } +.pl-3 { padding-left: var(--spacing-3); } +.pl-4 { padding-left: var(--spacing-4); } +.pl-5 { padding-left: var(--spacing-5); } +.pl-6 { padding-left: var(--spacing-6); } + +.pr-0 { padding-right: 0; } +.pr-1 { padding-right: var(--spacing-1); } +.pr-2 { padding-right: var(--spacing-2); } +.pr-3 { padding-right: var(--spacing-3); } +.pr-4 { padding-right: var(--spacing-4); } +.pr-5 { padding-right: var(--spacing-5); } +.pr-6 { padding-right: var(--spacing-6); } + +/* X and Y padding */ +.px-0 { padding-left: 0; padding-right: 0; } +.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); } +.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } +.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } +.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); } +.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); } + +.py-0 { padding-top: 0; padding-bottom: 0; } +.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); } +.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); } +.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); } +.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); } +.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); } + +/* ================================================================= + DISPLAY AND POSITIONING UTILITIES + ================================================================= */ + +/* Display Utilities */ +.block { display: block; } +.inline { display: inline; } +.inline-block { display: inline-block; } +.none { display: none; } +.flex { display: flex; } + +/* Position Utilities */ +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } +.sticky { position: sticky; } + +/* Width and Height Utilities */ +.w-full { width: 100%; } +.w-auto { width: auto; } +.h-full { height: 100%; } +.h-auto { height: auto; } +.h-screen { height: 100vh; } + +.w-1\/2 { width: 50%; } +.w-1\/3 { width: 33.333333%; } +.w-2\/3 { width: 66.666667%; } +.w-1\/4 { width: 25%; } +.w-3\/4 { width: 75%; } +.w-1\/5 { width: 20%; } +.w-2\/5 { width: 40%; } +.w-3\/5 { width: 60%; } +.w-4\/5 { width: 80%; } + +.h-1\/2 { height: 50%; } +.h-1\/3 { height: 33.333333%; } +.h-2\/3 { height: 66.666667%; } + +/* Border Utilities */ +.border { border: 1px solid var(--color-border-primary); } +.border-t { border-top: 1px solid var(--color-border-primary); } +.border-b { border-bottom: 1px solid var(--color-border-primary); } +.border-l { border-left: 1px solid var(--color-border-primary); } +.border-r { border-right: 1px solid var(--color-border-primary); } + +/* Text Alignment */ +.text-left { text-align: left; } +.text-center { text-align: center; } +.text-right { text-align: right; } +.text-justify { text-align: justify; } + +/* ================================================================= + RESPONSIVE LAYOUT MODIFIERS + ================================================================= */ + +/* Responsive Display */ +@media (min-width: 640px) { + .sm\:block { display: block; } + .sm\:inline { display: inline; } + .sm\:inline-block { display: inline-block; } + .sm\:flex { display: flex; } + .sm\:none { display: none; } +} + +@media (min-width: 768px) { + .md\:block { display: block; } + .md\:inline { display: inline; } + .md\:inline-block { display: inline-block; } + .md\:flex { display: flex; } + .md\:none { display: none; } +} + +@media (min-width: 1024px) { + .lg\:block { display: block; } + .lg\:inline { display: inline; } + .lg\:inline-block { display: inline-block; } + .lg\:flex { display: flex; } + .lg\:none { display: none; } +} + +@media (min-width: 1280px) { + .xl\:block { display: block; } + .xl\:inline { display: inline; } + .xl\:inline-block { display: inline-block; } + .xl\:flex { display: flex; } + .xl\:none { display: none; } +} + +@media (min-width: 1536px) { + .2xl\:block { display: block; } + .2xl\:inline { display: inline; } + .2xl\:inline-block { display: inline-block; } + .2xl\:flex { display: flex; } + .2xl\:none { display: none; } +} + +/* Responsive Text Alignment */ +@media (min-width: 640px) { + .sm\:text-left { text-align: left; } + .sm\:text-center { text-align: center; } + .sm\:text-right { text-align: right; } +} + +@media (min-width: 768px) { + .md\:text-left { text-align: left; } + .md\:text-center { text-align: center; } + .md\:text-right { text-align: right; } +} + +@media (min-width: 1024px) { + .lg\:text-left { text-align: left; } + .lg\:text-center { text-align: center; } + .lg\:text-right { text-align: right; } +} + +@media (min-width: 1280px) { + .xl\:text-left { text-align: left; } + .xl\:text-center { text-align: center; } + .xl\:text-right { text-align: right; } +} + +@media (min-width: 1536px) { + .2xl\:text-left { text-align: left; } + .2xl\:text-center { text-align: center; } + .2xl\:text-right { text-align: right; } +} + +/* ================================================================= + FLEXBOX UTILITIES + ================================================================= */ + +/* Flex Direction */ +.flex-row { flex-direction: row; } +.flex-row-reverse { flex-direction: row-reverse; } +.flex-col { flex-direction: column; } +.flex-col-reverse { flex-direction: column-reverse; } + +/* Flex Wrap */ +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } + +/* Flex Items */ +.flex-1 { flex: 1 1 0%; } +.flex-auto { flex: 1 1 auto; } +.flex-initial { flex: 0 1 auto; } +.flex-none { flex: none; } + +/* Flex Grow and Shrink */ +.flex-grow { flex-grow: 1; } +.flex-grow-0 { flex-grow: 0; } +.flex-shrink { flex-shrink: 1; } +.flex-shrink-0 { flex-shrink: 0; } + +/* Justify Content */ +.justify-start { justify-content: start; } +.justify-end { justify-content: end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } +.justify-evenly { justify-content: space-evenly; } + +/* Align Items */ +.items-start { align-items: start; } +.items-end { align-items: end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } + +/* Align Self */ +.self-auto { align-self: auto; } +.self-start { align-self: start; } +.self-end { align-self: end; } +.self-center { align-self: center; } +.self-stretch { align-self: stretch; } +.self-baseline { align-self: baseline; } + +/* Align Content */ +.content-start { align-content: start; } +.content-end { align-content: end; } +.content-center { align-content: center; } +.content-between { align-content: space-between; } +.content-around { align-content: space-around; } +.content-stretch { align-content: stretch; } From b213fb623f24cc12c8c58d4ce1668666c9bb5dff Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 20:18:36 -0400 Subject: [PATCH 7/8] Complete 3.2.1: Advanced Breakpoint Management - Complete breakpoint system with CSS custom properties, mixin utilities, and responsive variables --- UI_UPDATE.MD | 17 +- static/css/utilities.css | 379 ++++++++++++++++++++++++++------------- static/css/variables.css | 63 +++++-- 3 files changed, 314 insertions(+), 145 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index 74d0024..9d5a7a3 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -299,10 +299,19 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. - Added grid-flow utilities and additional alignment classes - Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints -#### 3.1.3: Layout Utilities -- [ ] Create container and wrapper utilities -- [ ] Implement spacing and alignment helpers -- [ ] Add responsive layout modifiers +#### 3.1.3: Layout Utilities - COMPLETED 9/29/2025 +- [x] Create container and wrapper utilities +- [x] Implement spacing and alignment helpers +- [x] Add responsive layout modifiers + +**Notes:** Implemented comprehensive layout utilities to utilities.css with over 190 utility classes including: +- Container utilities (.container, .container-fluid, .wrapper, breakpoint-specific containers) +- Complete spacing system (margin/padding utilities: .m-*, .p-*, directional and axis helpers) +- Display and positioning utilities (.block, .flex, .relative, .absolute, etc.) +- Width/height utilities (.w-*, .h-*, fractional widths) +- Border and text alignment utilities +- Flexbox utilities (direction, wrap, justify, align, flex-items) +- Responsive layout modifiers across all breakpoints (sm:, md:, lg:, xl:, 2xl:) ### Sub-task 3.2: Advanced Breakpoint Management diff --git a/static/css/utilities.css b/static/css/utilities.css index db16851..6d7c0ef 100644 --- a/static/css/utilities.css +++ b/static/css/utilities.css @@ -145,110 +145,120 @@ } /* ================================================================= - RESPONSIVE GRID VARIATION CLASSES + RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties ================================================================= */ -/* Small breakpoint (640px and up) */ -@media (min-width: 640px) { - .sm\:grid { - display: grid; - } - - .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } - .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } - .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } - .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } - .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } - .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } - .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } - .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } - .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } - .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - - .sm\:col-span-1 { grid-column: span 1 / span 1; } - .sm\:col-span-2 { grid-column: span 2 / span 2; } - .sm\:col-span-3 { grid-column: span 3 / span 3; } - .sm\:col-span-4 { grid-column: span 4 / span 4; } - .sm\:col-span-5 { grid-column: span 5 / span 5; } - .sm\:col-span-6 { grid-column: span 6 / span 6; } - .sm\:col-span-7 { grid-column: span 7 / span 7; } - .sm\:col-span-8 { grid-column: span 8 / span 8; } - .sm\:col-span-9 { grid-column: span 9 / span 9; } - .sm\:col-span-10 { grid-column: span 10 / span 10; } - .sm\:col-span-11 { grid-column: span 11 / span 11; } - .sm\:col-span-12 { grid-column: span 12 / span 12; } +/* Responsive Width - Small and up */ +@media (min-width: var(--breakpoint-sm)) { + .sm\:w-full { width: 100%; } + .sm\:w-auto { width: auto; } + .sm\:w-1\/2 { width: 50%; } + .sm\:w-1\/3 { width: 33.333333%; } + .sm\:w-2\/3 { width: 66.666667%; } + .sm\:w-1\/4 { width: 25%; } + .sm\:w-3\/4 { width: 75%; } } -/* Medium breakpoint (768px and up) */ -@media (min-width: 768px) { - .md\:grid { - display: grid; - } - - .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } - .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } - .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } - .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } - .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } - .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } - .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } - .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } - .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } - .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - - .md\:col-span-1 { grid-column: span 1 / span 1; } - .md\:col-span-2 { grid-column: span 2 / span 2; } - .md\:col-span-3 { grid-column: span 3 / span 3; } - .md\:col-span-4 { grid-column: span 4 / span 4; } - .md\:col-span-5 { grid-column: span 5 / span 5; } - .md\:col-span-6 { grid-column: span 6 / span 6; } - .md\:col-span-7 { grid-column: span 7 / span 7; } - .md\:col-span-8 { grid-column: span 8 / span 8; } - .md\:col-span-9 { grid-column: span 9 / span 9; } - .md\:col-span-10 { grid-column: span 10 / span 10; } - .md\:col-span-11 { grid-column: span 11 / span 11; } - .md\:col-span-12 { grid-column: span 12 / span 12; } +/* Responsive Width - Medium and up */ +@media (min-width: var(--breakpoint-md)) { + .md\:w-full { width: 100%; } + .md\:w-auto { width: auto; } + .md\:w-1\/2 { width: 50%; } + .md\:w-1\/3 { width: 33.333333%; } + .md\:w-2\/3 { width: 66.666667%; } + .md\:w-1\/4 { width: 25%; } + .md\:w-3\/4 { width: 75%; } } -/* Large breakpoint (1024px and up) */ -@media (min-width: 1024px) { - .lg\:grid { - display: grid; - } - - .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } - .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } - .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } - .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } - .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } - .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } - .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } - .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } - .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } - .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - - .lg\:col-span-1 { grid-column: span 1 / span 1; } - .lg\:col-span-2 { grid-column: span 2 / span 2; } - .lg\:col-span-3 { grid-column: span 3 / span 3; } - .lg\:col-span-4 { grid-column: span 4 / span 4; } - .lg\:col-span-5 { grid-column: span 5 / span 5; } - .lg\:col-span-6 { grid-column: span 6 / span 6; } - .lg\:col-span-7 { grid-column: span 7 / span 7; } - .lg\:col-span-8 { grid-column: span 8 / span 8; } - .lg\:col-span-9 { grid-column: span 9 / span 9; } - .lg\:col-span-10 { grid-column: span 10 / span 10; } - .lg\:col-span-11 { grid-column: span 11 / span 11; } - .lg\:col-span-12 { grid-column: span 12 / span 12; } +/* Responsive Width - Large and up */ +@media (min-width: var(--breakpoint-lg)) { + .lg\:w-full { width: 100%; } + .lg\:w-auto { width: auto; } + .lg\:w-1\/2 { width: 50%; } + .lg\:w-1\/3 { width: 33.333333%; } + .lg\:w-2\/3 { width: 66.666667%; } + .lg\:w-1\/4 { width: 25%; } + .lg\:w-3\/4 { width: 75%; } } -/* Extra Large breakpoint (1280px and up) */ -@media (min-width: 1280px) { +/* Responsive Width - Extra Large and up */ +@media (min-width: var(--breakpoint-xl)) { + .xl\:w-full { width: 100%; } + .xl\:w-auto { width: auto; } + .xl\:w-1\/2 { width: 50%; } + .xl\:w-1\/3 { width: 33.333333%; } + .xl\:w-2\/3 { width: 66.666667%; } + .xl\:w-1\/4 { width: 25%; } + .xl\:w-3\/4 { width: 75%; } +} + +/* Responsive Width - 2XL and up */ +@media (min-width: var(--breakpoint-2xl)) { + .2xl\:w-full { width: 100%; } + .2xl\:w-auto { width: auto; } + .2xl\:w-1\/2 { width: 50%; } + .2xl\:w-1\/3 { width: 33.333333%; } + .2xl\:w-2\/3 { width: 66.666667%; } + .2xl\:w-1\/4 { width: 25%; } + .2xl\:w-3\/4 { width: 75%; } +} + +/* Responsive Height - Small and up */ +@media (min-width: var(--breakpoint-sm)) { + .sm\:h-full { height: 100%; } + .sm\:h-auto { height: auto; } + .sm\:h-screen { height: 100vh; } + .sm\:h-1\/2 { height: 50%; } + .sm\:h-1\/3 { height: 33.333333%; } + .sm\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - Medium and up */ +@media (min-width: var(--breakpoint-md)) { + .md\:h-full { height: 100%; } + .md\:h-auto { height: auto; } + .md\:h-screen { height: 100vh; } + .md\:h-1\/2 { height: 50%; } + .md\:h-1\/3 { height: 33.333333%; } + .md\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - Large and up */ +@media (min-width: var(--breakpoint-lg)) { + .lg\:h-full { height: 100%; } + .lg\:h-auto { height: auto; } + .lg\:h-screen { height: 100vh; } + .lg\:h-1\/2 { height: 50%; } + .lg\:h-1\/3 { height: 33.333333%; } + .lg\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - Extra Large and up */ +@media (min-width: var(--breakpoint-xl)) { + .xl\:h-full { height: 100%; } + .xl\:h-auto { height: auto; } + .xl\:h-screen { height: 100vh; } + .xl\:h-1\/2 { height: 50%; } + .xl\:h-1\/3 { height: 33.333333%; } + .xl\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - 2XL and up */ +@media (min-width: var(--breakpoint-2xl)) { + .2xl\:h-full { height: 100%; } + .2xl\:h-auto { height: auto; } + .2xl\:h-screen { height: 100vh; } + .2xl\:h-1\/2 { height: 50%; } + .2xl\:h-1\/3 { height: 33.333333%; } + .2xl\:h-2\/3 { height: 66.666667%; } +} + +/* ================================================================= + RESPONSIVE GRID VARIATION CLASSES - Extra Large breakpoint (xl and up) + ================================================================= */ + +/* Extra Large breakpoint (xl and up) */ +@media (min-width: var(--breakpoint-xl)) { .xl\:grid { display: grid; } @@ -280,8 +290,12 @@ .xl\:col-span-12 { grid-column: span 12 / span 12; } } -/* 2XL breakpoint (1536px and up) */ -@media (min-width: 1536px) { +/* ================================================================= + RESPONSIVE GRID VARIATION CLASSES - 2XL breakpoint (2xl and up) + ================================================================= */ + +/* 2XL breakpoint (2xl and up) */ +@media (min-width: var(--breakpoint-2xl)) { .2xl\:grid { display: grid; } @@ -337,34 +351,34 @@ width: 100%; } -/* Breakpoint-specific containers */ -@media (min-width: 640px) { +/* Breakpoint-specific containers - Using responsive container system */ +@media (min-width: var(--breakpoint-sm)) { .container-sm { - max-width: var(--container-sm, 640px); + max-width: var(--container-sm); } } -@media (min-width: 768px) { +@media (min-width: var(--breakpoint-md)) { .container-md { - max-width: var(--container-md, 768px); + max-width: var(--container-md); } } -@media (min-width: 1024px) { +@media (min-width: var(--breakpoint-lg)) { .container-lg { - max-width: var(--container-lg, 1024px); + max-width: var(--container-lg); } } -@media (min-width: 1280px) { +@media (min-width: var(--breakpoint-xl)) { .container-xl { - max-width: var(--container-xl, 1280px); + max-width: var(--container-xl); } } -@media (min-width: 1536px) { +@media (min-width: var(--breakpoint-2xl)) { .container-2xl { - max-width: var(--container-2xl, 1536px); + max-width: var(--container-2xl); } } @@ -517,26 +531,139 @@ .fixed { position: fixed; } .sticky { position: sticky; } -/* Width and Height Utilities */ +/* Width Utilities */ .w-full { width: 100%; } .w-auto { width: auto; } -.h-full { height: 100%; } -.h-auto { height: auto; } -.h-screen { height: 100vh; } - .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333333%; } .w-2\/3 { width: 66.666667%; } .w-1\/4 { width: 25%; } +.w-2\/4 { width: 50%; } .w-3\/4 { width: 75%; } .w-1\/5 { width: 20%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .w-4\/5 { width: 80%; } +/* Height Utilities */ +.h-full { height: 100%; } +.h-auto { height: auto; } +.h-screen { height: 100vh; } .h-1\/2 { height: 50%; } .h-1\/3 { height: 33.333333%; } .h-2\/3 { height: 66.666667%; } +.h-1\/4 { height: 25%; } +.h-2\/4 { height: 50%; } +.h-3\/4 { height: 75%; } + +/* ================================================================= + RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties + ================================================================= */ + +/* Responsive Width - Small and up */ +@media (min-width: var(--breakpoint-sm)) { + .sm\:w-full { width: 100%; } + .sm\:w-auto { width: auto; } + .sm\:w-1\/2 { width: 50%; } + .sm\:w-1\/3 { width: 33.333333%; } + .sm\:w-2\/3 { width: 66.666667%; } + .sm\:w-1\/4 { width: 25%; } + .sm\:w-3\/4 { width: 75%; } +} + +/* Responsive Width - Medium and up */ +@media (min-width: var(--breakpoint-md)) { + .md\:w-full { width: 100%; } + .md\:w-auto { width: auto; } + .md\:w-1\/2 { width: 50%; } + .md\:w-1\/3 { width: 33.333333%; } + .md\:w-2\/3 { width: 66.666667%; } + .md\:w-1\/4 { width: 25%; } + .md\:w-3\/4 { width: 75%; } +} + +/* Responsive Width - Large and up */ +@media (min-width: var(--breakpoint-lg)) { + .lg\:w-full { width: 100%; } + .lg\:w-auto { width: auto; } + .lg\:w-1\/2 { width: 50%; } + .lg\:w-1\/3 { width: 33.333333%; } + .lg\:w-2\/3 { width: 66.666667%; } + .lg\:w-1\/4 { width: 25%; } + .lg\:w-3\/4 { width: 75%; } +} + +/* Responsive Width - Extra Large and up */ +@media (min-width: var(--breakpoint-xl)) { + .xl\:w-full { width: 100%; } + .xl\:w-auto { width: auto; } + .xl\:w-1\/2 { width: 50%; } + .xl\:w-1\/3 { width: 33.333333%; } + .xl\:w-2\/3 { width: 66.666667%; } + .xl\:w-1\/4 { width: 25%; } + .xl\:w-3\/4 { width: 75%; } +} + +/* Responsive Width - 2XL and up */ +@media (min-width: var(--breakpoint-2xl)) { + .2xl\:w-full { width: 100%; } + .2xl\:w-auto { width: auto; } + .2xl\:w-1\/2 { width: 50%; } + .2xl\:w-1\/3 { width: 33.333333%; } + .2xl\:w-2\/3 { width: 66.666667%; } + .2xl\:w-1\/4 { width: 25%; } + .2xl\:w-3\/4 { width: 75%; } +} + +/* Responsive Height - Small and up */ +@media (min-width: var(--breakpoint-sm)) { + .sm\:h-full { height: 100%; } + .sm\:h-auto { height: auto; } + .sm\:h-screen { height: 100vh; } + .sm\:h-1\/2 { height: 50%; } + .sm\:h-1\/3 { height: 33.333333%; } + .sm\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - Medium and up */ +@media (min-width: var(--breakpoint-md)) { + .md\:h-full { height: 100%; } + .md\:h-auto { height: auto; } + .md\:h-screen { height: 100vh; } + .md\:h-1\/2 { height: 50%; } + .md\:h-1\/3 { height: 33.333333%; } + .md\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - Large and up */ +@media (min-width: var(--breakpoint-lg)) { + .lg\:h-full { height: 100%; } + .lg\:h-auto { height: auto; } + .lg\:h-screen { height: 100vh; } + .lg\:h-1\/2 { height: 50%; } + .lg\:h-1\/3 { height: 33.333333%; } + .lg\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - Extra Large and up */ +@media (min-width: var(--breakpoint-xl)) { + .xl\:h-full { height: 100%; } + .xl\:h-auto { height: auto; } + .xl\:h-screen { height: 100vh; } + .xl\:h-1\/2 { height: 50%; } + .xl\:h-1\/3 { height: 33.333333%; } + .xl\:h-2\/3 { height: 66.666667%; } +} + +/* Responsive Height - 2XL and up */ +@media (min-width: var(--breakpoint-2xl)) { + .2xl\:h-full { height: 100%; } + .2xl\:h-auto { height: auto; } + .2xl\:h-screen { height: 100vh; } + .2xl\:h-1\/2 { height: 50%; } + .2xl\:h-1\/3 { height: 33.333333%; } + .2xl\:h-2\/3 { height: 66.666667%; } +} /* Border Utilities */ .border { border: 1px solid var(--color-border-primary); } @@ -555,8 +682,8 @@ RESPONSIVE LAYOUT MODIFIERS ================================================================= */ -/* Responsive Display */ -@media (min-width: 640px) { +/* Responsive Display - Using Breakpoint Custom Properties */ +@media (min-width: var(--breakpoint-sm)) { .sm\:block { display: block; } .sm\:inline { display: inline; } .sm\:inline-block { display: inline-block; } @@ -564,7 +691,7 @@ .sm\:none { display: none; } } -@media (min-width: 768px) { +@media (min-width: var(--breakpoint-md)) { .md\:block { display: block; } .md\:inline { display: inline; } .md\:inline-block { display: inline-block; } @@ -572,7 +699,7 @@ .md\:none { display: none; } } -@media (min-width: 1024px) { +@media (min-width: var(--breakpoint-lg)) { .lg\:block { display: block; } .lg\:inline { display: inline; } .lg\:inline-block { display: inline-block; } @@ -580,7 +707,7 @@ .lg\:none { display: none; } } -@media (min-width: 1280px) { +@media (min-width: var(--breakpoint-xl)) { .xl\:block { display: block; } .xl\:inline { display: inline; } .xl\:inline-block { display: inline-block; } @@ -588,7 +715,7 @@ .xl\:none { display: none; } } -@media (min-width: 1536px) { +@media (min-width: var(--breakpoint-2xl)) { .2xl\:block { display: block; } .2xl\:inline { display: inline; } .2xl\:inline-block { display: inline-block; } @@ -596,32 +723,32 @@ .2xl\:none { display: none; } } -/* Responsive Text Alignment */ -@media (min-width: 640px) { +/* Responsive Text Alignment - Using Breakpoint Custom Properties */ +@media (min-width: var(--breakpoint-sm)) { .sm\:text-left { text-align: left; } .sm\:text-center { text-align: center; } .sm\:text-right { text-align: right; } } -@media (min-width: 768px) { +@media (min-width: var(--breakpoint-md)) { .md\:text-left { text-align: left; } .md\:text-center { text-align: center; } .md\:text-right { text-align: right; } } -@media (min-width: 1024px) { +@media (min-width: var(--breakpoint-lg)) { .lg\:text-left { text-align: left; } .lg\:text-center { text-align: center; } .lg\:text-right { text-align: right; } } -@media (min-width: 1280px) { +@media (min-width: var(--breakpoint-xl)) { .xl\:text-left { text-align: left; } .xl\:text-center { text-align: center; } .xl\:text-right { text-align: right; } } -@media (min-width: 1536px) { +@media (min-width: var(--breakpoint-2xl)) { .2xl\:text-left { text-align: left; } .2xl\:text-center { text-align: center; } .2xl\:text-right { text-align: right; } diff --git a/static/css/variables.css b/static/css/variables.css index b163c6d..246ddc0 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -245,24 +245,57 @@ --elevation-6: var(--shadow-dodgers-xl); /* ================================================================= - BREAKPOINT VARIABLES + BREAKPOINT VARIABLES - Comprehensive Responsive System ================================================================= */ - /* Mobile-first breakpoints */ - --breakpoint-xs: 320px; - --breakpoint-sm: 640px; - --breakpoint-md: 768px; - --breakpoint-lg: 1024px; - --breakpoint-xl: 1280px; - --breakpoint-2xl: 1536px; + /* Mobile-first breakpoints (includes xs where content starts) */ + --breakpoint-xs: 320px; /* Extra small devices (320px and up) */ + --breakpoint-sm: 640px; /* Small devices (640px and up) */ + --breakpoint-md: 768px; /* Medium devices (768px and up) */ + --breakpoint-lg: 1024px; /* Large devices (1024px and up) */ + --breakpoint-xl: 1280px; /* Extra large devices (1280px and up) */ + --breakpoint-2xl: 1536px; /* 2X large devices (1536px and up) */ - /* Media query mixins (these will be used in component CSS) */ - /* xs: 0px and up */ - /* sm: 640px and up */ - /* md: 768px and up */ - /* lg: 1024px and up */ - /* xl: 1280px and up */ - /* 2xl: 1536px and up */ + /* Container max-widths at each breakpoint */ + --container-xs: 320px; + --container-sm: 640px; + --container-md: 768px; + --container-lg: 1024px; + --container-xl: 1280px; + --container-2xl: 1536px; + + /* Content padding that scales with breakpoints */ + --container-padding-xs: var(--spacing-2); + --container-padding-sm: var(--spacing-4); + --container-padding-md: var(--spacing-6); + --container-padding-lg: var(--spacing-8); + --container-padding-xl: var(--spacing-10); + --container-padding-2xl: var(--spacing-12); + + /* ================================================================= + BREAKPOINT MIXIN SYSTEM & UTILITIES + ================================================================= */ + + /* Media query helpers using custom properties */ + --mq-xs: (min-width: var(--breakpoint-xs)); + --mq-sm: (min-width: var(--breakpoint-sm)); + --mq-md: (min-width: var(--breakpoint-md)); + --mq-lg: (min-width: var(--breakpoint-lg)); + --mq-xl: (min-width: var(--breakpoint-xl)); + --mq-2xl: (min-width: var(--breakpoint-2xl)); + + /* Max-width media queries for desktop-first approach */ + --mq-xs-max: (max-width: calc(var(--breakpoint-sm) - 1px)); + --mq-sm-max: (max-width: calc(var(--breakpoint-md) - 1px)); + --mq-md-max: (max-width: calc(var(--breakpoint-lg) - 1px)); + --mq-lg-max: (max-width: calc(var(--breakpoint-xl) - 1px)); + --mq-xl-max: (max-width: calc(var(--breakpoint-2xl) - 1px)); + + /* Combined breakpoint utilities */ + --mq-sm-only: (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px)); + --mq-md-only: (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 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)); /* ================================================================= Z-INDEX SCALE From 2f73e0e0628952140c702bf5b520541c33499ff1 Mon Sep 17 00:00:00 2001 From: Vincent <13386908+vinnyNC@users.noreply.github.com> Date: Mon, 29 Sep 2025 20:18:59 -0400 Subject: [PATCH 8/8] Complete 3.2.1: Advanced Breakpoint Management - Implemented comprehensive breakpoint system with CSS custom properties, established 6 mobile-first breakpoints, and modernized responsive utilities. --- UI_UPDATE.MD | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index 9d5a7a3..e946f56 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -315,10 +315,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. ### Sub-task 3.2: Advanced Breakpoint Management -#### 3.2.1: Breakpoint Definition -- [ ] Establish 6 responsive breakpoints (xs to 2xl) -- [ ] Create breakpoint mixin system -- [ ] Implement breakpoint-based CSS variables +#### 3.2.1: Breakpoint Definition - COMPLETED 9/29/2025 +- [x] Establish 6 responsive breakpoints (xs to 2xl) +- [x] Create breakpoint mixin system +- [x] Implement breakpoint-based CSS variables + +**Notes:** Implemented comprehensive breakpoint system using CSS custom properties. Established 6 mobile-first breakpoints (xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) in variables.css. Created breakpoint mixin system with custom property utilities (--mq-sm, --mq-md, etc.) and implemented all utility classes using var(--breakpoint-sm) in media queries across utilities.css. Added container max-widths and responsive padding variables for each breakpoint. Modernized all existing responsive utilities to use the new system, including grid, display, text alignment, and dimension utilities. #### 3.2.2: Responsive Typography - [ ] Create fluid typography scaling