mobile responsive layout

3 months ago · 4f56cdf365
parent 921bf077fd
commit 4f56cdf365
4 changed files with 1866 additions and 12 deletions
--- a/webui/index.html
+++ b/webui/index.html
@ -3,12 +3,22 @@

 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <title>SoulSync - Music Sync & Manager</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
 </head>

 <body>
    <div class="main-container">
+        <!-- Mobile Navigation -->
+        <button class="hamburger-btn" id="hamburger-btn" aria-label="Toggle navigation">
+            <span class="hamburger-line"></span>
+            <span class="hamburger-line"></span>
+            <span class="hamburger-line"></span>
+        </button>
+        <div class="mobile-overlay" id="mobile-overlay"></div>
+
        <!-- Sidebar - Always Visible -->
        <div class="sidebar">
            <!-- Header Section -->
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
--- a/webui/static/script.js
+++ b/webui/static/script.js
@ -303,6 +303,7 @@ document.addEventListener('DOMContentLoaded', function () {

    // Initialize components
    initializeNavigation();
+    initializeMobileNavigation();
    initializeMediaPlayer();
    initializeDonationWidget();
    initializeSyncPage();
@ -362,6 +363,51 @@ function initializeNavigation() {
    });
 }

+// ===============================
+// MOBILE NAVIGATION
+// ===============================
+
+function initializeMobileNavigation() {
+    const hamburgerBtn = document.getElementById('hamburger-btn');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.getElementById('mobile-overlay');
+
+    if (!hamburgerBtn || !sidebar || !overlay) return;
+
+    function openMobileNav() {
+        sidebar.classList.add('mobile-open');
+        hamburgerBtn.classList.add('active');
+        overlay.classList.add('active');
+        document.body.classList.add('mobile-nav-open');
+    }
+
+    function closeMobileNav() {
+        sidebar.classList.remove('mobile-open');
+        hamburgerBtn.classList.remove('active');
+        overlay.classList.remove('active');
+        document.body.classList.remove('mobile-nav-open');
+    }
+
+    hamburgerBtn.addEventListener('click', () => {
+        if (sidebar.classList.contains('mobile-open')) {
+            closeMobileNav();
+        } else {
+            openMobileNav();
+        }
+    });
+
+    overlay.addEventListener('click', closeMobileNav);
+
+    // Close sidebar on nav button click (mobile only)
+    document.querySelectorAll('.nav-button').forEach(btn => {
+        btn.addEventListener('click', () => {
+            if (window.innerWidth <= 768) {
+                closeMobileNav();
+            }
+        });
+    });
+}
+
 function initializeWatchlist() {
    // Add watchlist button click handler
    const watchlistButton = document.getElementById('watchlist-button');
--- a/webui/static/style.css
+++ b/webui/static/style.css
@ -2754,20 +2754,19 @@ body {
 }

 /* Desktop-Only Optimizations */
-.main-container {
-    min-width: 1200px;
-    /* Ensure minimum desktop width */
-}
+@media (min-width: 769px) {
+    .main-container {
+        min-width: 1200px;
+    }

-.sidebar {
-    min-width: 240px;
-    /* Fixed sidebar width for desktop */
-    max-width: 240px;
-}
+    .sidebar {
+        min-width: 240px;
+        max-width: 240px;
+    }

-.main-content {
-    min-width: 960px;
-    /* Ensure content area has enough space */
+    .main-content {
+        min-width: 960px;
+    }
 }

 /* Optimize for larger screens */