Add toggle button for download manager panel
Introduces a toggle button in the downloads header to show or hide the download manager side panel. The toggle state is persisted in localStorage, and responsive styles are added for better usability on small screens. Updates HTML structure, JavaScript initialization, and CSS for the new toggle functionality and improved mobile experience.
This commit is contained in:
Broque Thomas
parent
a8935ae8f5
commit
e9a1797687
3 changed files with 374 additions and 6 deletions
|
|
@ -1172,8 +1172,15 @@
|
|||
|
||||
<!-- Header: Replicates create_elegant_header() -->
|
||||
<div class="downloads-header">
|
||||
<h2 class="downloads-title">🎵 Music Downloads</h2>
|
||||
<p class="downloads-subtitle">Search, discover, and download high-quality music</p>
|
||||
<div class="downloads-header-content">
|
||||
<div class="downloads-header-text">
|
||||
<h2 class="downloads-title">🎵 Music Downloads</h2>
|
||||
<p class="downloads-subtitle">Search, discover, and download high-quality music</p>
|
||||
</div>
|
||||
<button id="toggle-download-manager-btn" class="toggle-manager-btn" title="Toggle Download Manager">
|
||||
<span class="toggle-icon">›</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Mode Toggle -->
|
||||
|
|
|
|||
|
|
@ -296,13 +296,14 @@ const API = {
|
|||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('SoulSync WebUI initializing...');
|
||||
|
||||
|
||||
// Initialize components
|
||||
initializeNavigation();
|
||||
initializeMediaPlayer();
|
||||
initializeDonationWidget();
|
||||
initializeSyncPage();
|
||||
initializeWatchlist();
|
||||
initializeDownloadManagerToggle();
|
||||
|
||||
// Initialize Beatport rebuild slider if it's the active tab by default
|
||||
const activeRebuildTab = document.querySelector('.beatport-tab-button.active[data-beatport-tab="rebuild"]');
|
||||
|
|
@ -363,16 +364,47 @@ function initializeWatchlist() {
|
|||
if (watchlistButton) {
|
||||
watchlistButton.addEventListener('click', showWatchlistModal);
|
||||
}
|
||||
|
||||
|
||||
// Update watchlist count initially
|
||||
updateWatchlistButtonCount();
|
||||
|
||||
|
||||
// Update count every 30 seconds
|
||||
setInterval(updateWatchlistButtonCount, 30000);
|
||||
|
||||
|
||||
console.log('Watchlist system initialized');
|
||||
}
|
||||
|
||||
function initializeDownloadManagerToggle() {
|
||||
const toggleButton = document.getElementById('toggle-download-manager-btn');
|
||||
const downloadsContent = document.querySelector('.downloads-content');
|
||||
|
||||
if (!toggleButton || !downloadsContent) {
|
||||
console.log('Download manager toggle not found on this page');
|
||||
return;
|
||||
}
|
||||
|
||||
// Load saved state from localStorage
|
||||
const isHidden = localStorage.getItem('downloadManagerHidden') === 'true';
|
||||
if (isHidden) {
|
||||
downloadsContent.classList.add('manager-hidden');
|
||||
}
|
||||
|
||||
// Add click handler
|
||||
toggleButton.addEventListener('click', () => {
|
||||
const isCurrentlyHidden = downloadsContent.classList.contains('manager-hidden');
|
||||
|
||||
if (isCurrentlyHidden) {
|
||||
downloadsContent.classList.remove('manager-hidden');
|
||||
localStorage.setItem('downloadManagerHidden', 'false');
|
||||
} else {
|
||||
downloadsContent.classList.add('manager-hidden');
|
||||
localStorage.setItem('downloadManagerHidden', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Download manager toggle initialized');
|
||||
}
|
||||
|
||||
function navigateToPage(pageId) {
|
||||
if (pageId === currentPage) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -1846,6 +1846,18 @@ body {
|
|||
.downloads-header {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.downloads-header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.downloads-header-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.downloads-header .downloads-title {
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
font-size: 28px;
|
||||
|
|
@ -1861,6 +1873,113 @@ body {
|
|||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Toggle Download Manager Button */
|
||||
.toggle-manager-btn {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(35, 35, 35, 0.8) 0%,
|
||||
rgba(25, 25, 25, 0.9) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-shrink: 0;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toggle-manager-btn:hover {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(45, 45, 45, 0.9) 0%,
|
||||
rgba(35, 35, 35, 0.95) 100%);
|
||||
border-color: rgba(29, 185, 84, 0.4);
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 6px 16px rgba(0, 0, 0, 0.4),
|
||||
0 0 20px rgba(29, 185, 84, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.toggle-manager-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* When manager is hidden, rotate the icon */
|
||||
.downloads-content.manager-hidden .toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Hide side panel when toggled */
|
||||
.downloads-content.manager-hidden {
|
||||
grid-template-columns: 1fr; /* Only show main panel */
|
||||
}
|
||||
|
||||
.downloads-content.manager-hidden .downloads-side-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive: Mobile adjustments for toggle button */
|
||||
@media (max-width: 768px) {
|
||||
.downloads-header-content {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toggle-manager-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.downloads-header .downloads-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.downloads-header .downloads-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.downloads-header-content {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toggle-manager-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.downloads-header .downloads-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.downloads-header .downloads-subtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Bar: Replicates create_elegant_search_bar() */
|
||||
.search-bar-container {
|
||||
background: linear-gradient(to bottom, rgba(50, 50, 50, 0.8), rgba(40, 40, 40, 0.9));
|
||||
|
|
@ -9299,6 +9418,85 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* Small height screens (below 800px height) - Better scrollability */
|
||||
@media (max-height: 800px) {
|
||||
.download-missing-modal-content {
|
||||
height: 95vh;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.download-dashboard-stats {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.download-progress-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.download-tracks-section {
|
||||
min-height: 300px; /* Ensure tracks list is always usable */
|
||||
}
|
||||
|
||||
.download-tracks-table-container {
|
||||
min-height: 200px; /* Ensure at least 200px for the table */
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small height screens (below 600px height) - Compact mode */
|
||||
@media (max-height: 600px) {
|
||||
.download-missing-modal-content {
|
||||
height: 98vh;
|
||||
max-height: 98vh;
|
||||
}
|
||||
|
||||
.download-missing-modal-hero {
|
||||
min-height: auto;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.download-dashboard-stats {
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(2, 1fr); /* 2 columns on very small heights */
|
||||
}
|
||||
|
||||
.dashboard-stat-number {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.dashboard-stat-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.download-progress-section {
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.download-tracks-section {
|
||||
min-height: 250px; /* Smaller but still usable */
|
||||
}
|
||||
|
||||
.download-tracks-table-container {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.download-tracks-table th,
|
||||
.download-tracks-table td {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.download-missing-modal-footer {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy title styling - now handled by hero section */
|
||||
.download-missing-modal-title {
|
||||
color: #ffffff;
|
||||
|
|
@ -19162,6 +19360,137 @@ body {
|
|||
.enhanced-dropdown-content {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* Adjust search bar for mobile */
|
||||
.enhanced-search-bar-container {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.enhanced-search-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
#enhanced-search-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Better spacing for search results */
|
||||
.enhanced-search-results-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.enhanced-results-header {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small screens (mobile portrait) */
|
||||
@media (max-width: 480px) {
|
||||
.enhanced-search-bar-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.enhanced-search-wrapper {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
#enhanced-search-input {
|
||||
font-size: 13px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.enhanced-search-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.enhanced-search-btn {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Compact dropdown on mobile */
|
||||
.enhanced-dropdown {
|
||||
max-height: min(60vh, 500px);
|
||||
}
|
||||
|
||||
.enhanced-dropdown-content {
|
||||
max-height: min(60vh, 500px);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
/* Better album/track results on mobile */
|
||||
.album-result-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.album-item__header {
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.album-item__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.album-item__title {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.album-item__details {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.album-action-btn {
|
||||
height: 32px;
|
||||
width: 140px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.track-item {
|
||||
margin: 2px 12px 6px 50px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.track-item__title {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.track-item__details {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.track-item .action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Search results area */
|
||||
.enhanced-search-results-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.search-results-scroll-area {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.enhanced-dropdown-content::-webkit-scrollbar {
|
||||
|
|
|
|||
Loading…
Reference in a new issue