danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

mobile responsive layout

Browse source
This commit is contained in:
Broque Thomas 2026-02-06 08:18:40 -08:00
parent 921bf077fd
commit 4f56cdf365
4 changed files with 1866 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webui/index.html
View file

@ -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 -->

1799
webui/static/mobile.css Normal file
View file

File diff suppressed because it is too large Load diff

46
webui/static/script.js
View file

@ -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');

23
webui/static/style.css
View file

@ -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 */