Mobile desighn Adjustments

public/css/dashboard.css

@@ -656,30 +656,304 @@ body {
     background: #ef4444;
 }
 
+/* Mobile First Responsive Design */
 @media (max-width: 768px) {
-    .header {
+    .main-container {
         padding: 1rem;
-        flex-direction: column;
-        gap: 1rem;
+        max-width: 100%;
+    }
+
+    .main-title {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .tagline {
+        font-size: 1rem;
     }
 
     .nav-buttons {
-        flex-wrap: wrap;
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        left: 1rem;
+        flex-direction: column;
+        gap: 0.5rem;
+        background: rgba(15, 23, 42, 0.95);
+        backdrop-filter: blur(20px);
+        border: 1px solid #1e293b;
+        border-radius: 1rem;
+        padding: 1rem;
+        z-index: 1000;
+    }
+
+    .user-info {
+        order: -1;
+        margin-bottom: 0.5rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid #334155;
+        width: 100%;
         justify-content: center;
     }
 
-    .container {
-        padding: 0 1rem;
+    .btn {
+        width: 100%;
+        padding: 1rem;
+        font-size: 1rem;
+        text-align: center;
     }
 
     .dashboard-grid {
         grid-template-columns: 1fr;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .card {
+        padding: 1.5rem;
+    }
+
+    .card h3 {
+        font-size: 1.1rem;
+    }
+
+    .welcome-card {
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .times-section {
+        padding: 1.5rem;
+        margin-top: 1.5rem;
+    }
+
+    .times-header h2 {
+        font-size: 1.5rem;
+    }
+
+    .times-header p {
+        font-size: 1rem;
+    }
+
+    .times-stats {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .stat-card {
+        padding: 1rem;
+    }
+
+    .stat-number {
+        font-size: 1.5rem;
+    }
+
+    .stat-label {
+        font-size: 0.8rem;
+    }
+
+    .times-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .user-time-card {
+        padding: 1rem;
+    }
+
+    .time-value-large {
+        font-size: 1.5rem;
     }
 
     .modal-content {
-        margin: 2% auto;
+        margin: 1% auto;
         width: 95%;
-        padding: 1.5rem;
+        padding: 1rem;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+
+    .modal-title {
+        font-size: 1.2rem;
+    }
+
+    .form-input {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+
+    .player-selection {
+        max-height: 150px;
+    }
+
+    .player-option {
+        padding: 1rem;
+    }
+
+    .run-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .run-details {
+        text-align: left;
+    }
+}
+
+/* Extra small devices (phones in portrait) */
+@media (max-width: 480px) {
+    .main-container {
+        padding: 0.5rem;
+    }
+
+    .main-title {
+        font-size: 2rem;
+    }
+
+    .tagline {
+        font-size: 0.9rem;
+    }
+
+    .nav-buttons {
+        top: 0.5rem;
+        right: 0.5rem;
+        left: 0.5rem;
+        padding: 0.75rem;
+    }
+
+    .card {
+        padding: 1rem;
+    }
+
+    .times-section {
+        padding: 1rem;
+    }
+
+    .times-stats {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+    }
+
+    .stat-card {
+        padding: 0.75rem;
+    }
+
+    .stat-number {
+        font-size: 1.25rem;
+    }
+
+    .modal-content {
+        margin: 0.5% auto;
+        width: 98%;
+        padding: 0.75rem;
+    }
+
+    .times-header h2 {
+        font-size: 1.25rem;
+    }
+
+    .times-header p {
+        font-size: 0.9rem;
+    }
+}
+
+/* Landscape orientation on mobile */
+@media (max-width: 768px) and (orientation: landscape) {
+    .nav-buttons {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .user-info {
+        order: 0;
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+        width: auto;
+    }
+
+    .btn {
+        width: auto;
+        flex: 1;
+        min-width: 120px;
+    }
+
+    .main-title {
+        font-size: 2rem;
+    }
+
+    .times-stats {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+/* Touch-friendly improvements for mobile */
+@media (max-width: 768px) {
+    .btn {
+        min-height: 44px; /* Apple's recommended minimum touch target */
+        touch-action: manipulation; /* Prevents double-tap zoom */
+    }
+
+    .card {
+        touch-action: manipulation;
+    }
+
+    .user-time-card {
+        touch-action: manipulation;
+    }
+
+    .player-option {
+        min-height: 44px;
+        touch-action: manipulation;
+    }
+
+    .close {
+        min-width: 44px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Improve scrolling on mobile */
+    .times-grid {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .player-selection {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Better spacing for mobile */
+    .header-section {
+        margin-bottom: 2rem;
+        margin-top: 5rem; /* Account for fixed nav */
+    }
+
+    /* Improve modal usability on mobile */
+    .modal {
+        padding: 1rem;
+    }
+
+    .modal-content {
+        border-radius: 0.75rem;
+    }
+
+    /* Better form inputs on mobile */
+    .form-input {
+        -webkit-appearance: none;
+        appearance: none;
+        border-radius: 0.5rem;
+    }
+
+    /* Improve video container on mobile */
+    #cameraContainer video {
+        max-width: 100%;
+        height: auto;
+        border-radius: 0.5rem;
     }
 }
 

public/css/leaderboard.css

@@ -588,10 +588,11 @@ body {
     }
 }
 
-/* Mobile responsive styles */
+/* Mobile First Responsive Design */
 @media (max-width: 1024px) {
     .dashboard-grid {
         grid-template-columns: 1fr;
+        gap: 1.5rem;
     }
 
     .stats-grid {
@@ -600,57 +601,56 @@ body {
 }
 
 @media (max-width: 768px) {
+    .main-container {
+        padding: 1rem;
+        max-width: 100%;
+    }
+
     .main-title {
         font-size: 2.5rem;
+        margin-bottom: 0.5rem;
     }
 
-    .rank-entry {
-        grid-template-columns: 60px 1fr auto;
-        padding: 1rem;
-        gap: 0.5rem;
+    .tagline {
+        font-size: 1rem;
     }
 
-    .trophy-icon {
-        display: none;
+    .header-section {
+        margin-bottom: 2rem;
+        margin-top: 5rem; /* Account for fixed buttons */
     }
 
-    .time-result {
-        font-size: 1.5rem;
-    }
-
-    .stats-grid {
+    .dashboard-grid {
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: 1.5rem;
+        margin-bottom: 1.5rem;
     }
 
-    .player-meta {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
+    .control-panel {
+        padding: 1.5rem;
     }
 
-    .admin-login-btn, .dashboard-btn, .logout-btn {
-        top: 1rem;
-        right: 1rem;
-        padding: 0.5rem 1rem;
-        font-size: 0.8rem;
+    .control-group {
+        margin-bottom: 1rem;
     }
 
-    .logout-btn {
-        right: 8rem;
+    .custom-select {
+        padding: 1rem;
+        font-size: 1rem;
     }
 
     .location-control {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: 0.75rem;
     }
 
     .location-btn {
         width: 100%;
         min-width: auto;
+        padding: 1rem;
+        font-size: 1rem;
     }
 
-    /* Mobile responsive tabs */
     .time-tabs {
         flex-direction: column;
         gap: 0.5rem;
@@ -661,26 +661,220 @@ body {
         padding: 1rem;
         justify-content: flex-start;
         border-radius: 0.75rem;
+        min-height: 44px;
+        touch-action: manipulation;
     }
 
     .tab-text {
         font-size: 1rem;
     }
+
+    .refresh-btn {
+        padding: 1rem;
+        font-size: 1rem;
+        min-height: 44px;
+        touch-action: manipulation;
+    }
+
+    .stats-panel {
+        padding: 1.5rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .stat-card {
+        padding: 1rem;
+    }
+
+    .stat-value {
+        font-size: 2rem;
+    }
+
+    .stat-label {
+        font-size: 0.8rem;
+    }
+
+    .leaderboard-container {
+        margin-top: 1rem;
+    }
+
+    .leaderboard-header {
+        padding: 1.5rem;
+    }
+
+    .active-filters {
+        font-size: 1.2rem;
+    }
+
+    .last-sync {
+        font-size: 0.8rem;
+    }
+
+    .rankings-list {
+        max-height: 500px;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .rank-entry {
+        grid-template-columns: 50px 1fr auto;
+        padding: 1rem;
+        gap: 0.75rem;
+        min-height: 60px;
+    }
+
+    .position {
+        font-size: 1.5rem;
+    }
+
+    .player-data {
+        padding-left: 0.5rem;
+    }
+
+    .player-name {
+        font-size: 1.1rem;
+        margin-bottom: 0.25rem;
+    }
+
+    .player-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+
+    .location-tag {
+        font-size: 0.75rem;
+        padding: 0.2rem 0.4rem;
+    }
+
+    .time-result {
+        font-size: 1.5rem;
+    }
+
+    .trophy-icon {
+        display: none;
+    }
+
+    .admin-login-btn, .dashboard-btn, .logout-btn {
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        padding: 0.75rem 1rem;
+        font-size: 0.8rem;
+        min-height: 44px;
+        touch-action: manipulation;
+        z-index: 1000;
+    }
+
+    .logout-btn {
+        right: 8rem;
+    }
+
+    /* Mobile button container for better positioning */
+    .mobile-nav-buttons {
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        z-index: 1000;
+    }
+
+    .mobile-nav-buttons .admin-login-btn,
+    .mobile-nav-buttons .dashboard-btn,
+    .mobile-nav-buttons .logout-btn {
+        position: static;
+        right: auto;
+        width: 120px;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.75rem;
+        text-align: center;
+    }
+
+    .notification-bubble {
+        top: 1rem;
+        left: 1rem;
+        right: 1rem;
+        transform: none;
+        max-width: none;
+        padding: 1rem;
+    }
+
+    .notification-bubble.show {
+        transform: none;
+    }
+
+    .notification-bubble.hide {
+        transform: none;
+    }
 }
 
+/* Extra small devices (phones in portrait) */
 @media (max-width: 480px) {
+    .main-container {
+        padding: 0.5rem;
+    }
+
+    .main-title {
+        font-size: 2rem;
+    }
+
+    .tagline {
+        font-size: 0.9rem;
+    }
+
+    .control-panel {
+        padding: 1rem;
+    }
+
+    .stats-panel {
+        padding: 1rem;
+    }
+
+    .leaderboard-header {
+        padding: 1rem;
+    }
+
+    .active-filters {
+        font-size: 1rem;
+    }
+
+    .rank-entry {
+        grid-template-columns: 40px 1fr auto;
+        padding: 0.75rem;
+        gap: 0.5rem;
+        min-height: 50px;
+    }
+
+    .position {
+        font-size: 1.25rem;
+    }
+
+    .player-name {
+        font-size: 1rem;
+    }
+
+    .time-result {
+        font-size: 1.25rem;
+    }
+
     .time-tabs {
         flex-direction: row;
         overflow-x: auto;
         padding: 0.25rem;
         gap: 0.25rem;
+        -webkit-overflow-scrolling: touch;
     }
 
     .time-tab {
         min-width: 80px;
-        padding: 0.5rem 0.75rem;
+        padding: 0.75rem 0.5rem;
         flex-direction: column;
         gap: 0.25rem;
+        justify-content: center;
     }
 
     .tab-icon {
@@ -690,6 +884,114 @@ body {
     .tab-text {
         font-size: 0.75rem;
     }
+
+    .mobile-nav-buttons {
+        top: 0.5rem;
+        right: 0.5rem;
+    }
+
+    .mobile-nav-buttons .admin-login-btn,
+    .mobile-nav-buttons .dashboard-btn,
+    .mobile-nav-buttons .logout-btn {
+        width: 100px;
+        padding: 0.4rem 0.5rem;
+        font-size: 0.7rem;
+    }
+}
+
+/* Landscape orientation on mobile */
+@media (max-width: 768px) and (orientation: landscape) {
+    .header-section {
+        margin-top: 4rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .main-title {
+        font-size: 2rem;
+    }
+
+    .mobile-nav-buttons {
+        flex-direction: row;
+        gap: 0.5rem;
+    }
+
+    .mobile-nav-buttons .admin-login-btn,
+    .mobile-nav-buttons .dashboard-btn,
+    .mobile-nav-buttons .logout-btn {
+        width: auto;
+        min-width: 80px;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.7rem;
+    }
+
+    .time-tabs {
+        flex-direction: row;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .time-tab {
+        min-width: 100px;
+        padding: 0.75rem 1rem;
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .rank-entry {
+        grid-template-columns: 60px 1fr auto;
+        padding: 0.75rem 1rem;
+    }
+
+    .position {
+        font-size: 1.5rem;
+    }
+
+    .time-result {
+        font-size: 1.75rem;
+    }
+}
+
+/* Touch-friendly improvements for mobile */
+@media (max-width: 768px) {
+    .time-tab {
+        touch-action: manipulation;
+    }
+
+    .location-btn {
+        touch-action: manipulation;
+    }
+
+    .refresh-btn {
+        touch-action: manipulation;
+    }
+
+    .rank-entry {
+        touch-action: manipulation;
+    }
+
+    .custom-select {
+        -webkit-appearance: none;
+        appearance: none;
+        touch-action: manipulation;
+    }
+
+    /* Improve scrolling performance */
+    .rankings-list {
+        scroll-behavior: smooth;
+    }
+
+    /* Better spacing for mobile */
+    .control-panel {
+        margin-bottom: 1rem;
+    }
+
+    .stats-panel {
+        margin-bottom: 1rem;
+    }
 }
 
 /* Footer Styles */