v0.9.0 - CSS refactor: split into device files, scanner UI improvements, scroll buttons

2026-01-24 16:01:40 -06:00
parent 53158e76e4
commit 1a5168d155
8 changed files with 631 additions and 301 deletions
--- a/static/css/mobile.css
+++ b/static/css/mobile.css
@@ -0,0 +1,188 @@
+/* ==================== MOBILE STYLES (Phones) ==================== */
+/* Viewport: 360-767px | Target: min-width: 360px and max-width: 767px */
+/* This file contains overrides for mobile phones (iPhone, Android, etc.) */
+
+@media screen and (min-width: 360px) and (max-width: 767px) {
+    
+    /* ---------------------------------------------------------
+       Base Typography
+       --------------------------------------------------------- */
+    html {
+        font-size: 14px;
+    }
+
+    /* ---------------------------------------------------------
+       Navbar
+       --------------------------------------------------------- */
+    .nav-content {
+        flex-direction: row;
+        gap: var(--space-md);
+    }
+
+    /* ---------------------------------------------------------
+       Forms
+       --------------------------------------------------------- */
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    /* ---------------------------------------------------------
+       Dashboard
+       --------------------------------------------------------- */
+    .dashboard-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--space-md);
+    }
+    
+    .sessions-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .session-stats {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .baseline-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* ---------------------------------------------------------
+       Scanning Interface
+       --------------------------------------------------------- */
+    .scan-input {
+        font-size: 1.25rem;
+    }
+    
+    .location-name {
+        font-size: 2rem;
+    }
+
+    /* ---------------------------------------------------------
+       Modals
+       --------------------------------------------------------- */
+    .modal-content {
+        padding: var(--space-md);
+        margin: var(--space-xs);
+    }
+    
+    .modal-header-bar {
+        padding: var(--space-md) 0;
+        margin-bottom: var(--space-md);
+    }
+    
+    .modal-large,
+    .modal-xl {
+        width: 95%;
+        max-width: 95%;
+        margin: var(--space-xs);
+    }
+
+    /* ---------------------------------------------------------
+       Detail Sections (Scan Detail Modal)
+       --------------------------------------------------------- */
+    .detail-section {
+        padding: var(--space-md) 0;
+    }
+    
+    .detail-section-title {
+        font-size: 1rem;
+        margin-bottom: var(--space-sm);
+    }
+    
+    .detail-row {
+        flex-direction: column;
+        gap: var(--space-xs);
+        padding: var(--space-sm) 0;
+    }
+    
+    .detail-label {
+        flex: none;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .detail-value {
+        font-size: 1rem;
+    }
+    
+    .detail-lot {
+        font-size: 0.95rem;
+        word-break: break-all;
+    }
+    
+    .detail-input {
+        width: 100%;
+        font-size: 1rem;
+    }
+    
+    .detail-form {
+        gap: var(--space-sm);
+    }
+    
+    .detail-actions {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding: var(--space-md) 0 0 0;
+    }
+    
+    .detail-actions .btn {
+        width: 100%;
+        margin: 0;
+    }
+
+    /* ---------------------------------------------------------
+       Forms (Mobile)
+       --------------------------------------------------------- */
+    .form-group {
+        margin-bottom: var(--space-sm);
+    }
+
+/* ---------------------------------------------------------
+       Scroll to Top or Bottom Buttonss
+       --------------------------------------------------------- */
+/* ---------------------------------------------------------
+       Scroll Buttons - Floating, semi-transparent
+       --------------------------------------------------------- */
+    .scroll-to-top,
+    .scroll-to-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        width: 44px;
+        height: 44px;
+        background: rgba(0, 212, 255, 0.3);
+        color: var(--color-text);
+        border: 1px solid rgba(0, 212, 255, 0.4);
+        border-radius: 50%;
+        font-size: 1.3rem;
+        cursor: pointer;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        z-index: 50;
+        transition: var(--transition);
+    }
+    
+    .scroll-to-top:active,
+    .scroll-to-bottom:active {
+        background: rgba(0, 212, 255, 0.6);
+        transform: scale(0.95);
+    }
+    
+    .scroll-to-top {
+        right: 10px;
+        bottom: 270px;
+    }
+    
+    .scroll-to-bottom {
+        right: 10px;
+        bottom: 170px;
+    }
+
+}