From a431ec0bd67084db0b8909b30bc990d6f32198ea Mon Sep 17 00:00:00 2001 From: Broque Thomas Date: Mon, 29 Dec 2025 12:37:05 -0800 Subject: [PATCH] Improve enhanced search UI and increase track results Increased the number of tracks returned by enhanced search from 10 to 20. Updated CSS for enhanced search sections and artist cards to improve visual appearance, spacing, and responsiveness, including larger artist images, new backgrounds, and better layout for various screen sizes. --- web_server.py | 2 +- webui/static/style.css | 106 ++++++++++++++++++++++++++++------------- 2 files changed, 74 insertions(+), 34 deletions(-) diff --git a/web_server.py b/web_server.py index 9f1c4e02..52966e2c 100644 --- a/web_server.py +++ b/web_server.py @@ -3293,7 +3293,7 @@ def enhanced_search(): }) # Search for tracks - track_objs = spotify_client.search_tracks(query, limit=10) + track_objs = spotify_client.search_tracks(query, limit=20) for track in track_objs: # Track has 'artists' (list), convert to string artist_name = ', '.join(track.artists) if track.artists else 'Unknown Artist' diff --git a/webui/static/style.css b/webui/static/style.css index 93a7fa57..063408e7 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -19208,7 +19208,15 @@ body { /* Dropdown Sections */ .enh-dropdown-section { - margin-bottom: 24px; + margin-bottom: 20px; + background: linear-gradient(135deg, + rgba(45, 45, 45, 0.4) 0%, + rgba(26, 26, 26, 0.5) 100%); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + padding: 16px; + backdrop-filter: blur(10px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .enh-dropdown-section:last-child { @@ -19218,27 +19226,40 @@ body { .enh-section-header { display: flex; align-items: center; - gap: 0; - padding: 0; - margin-bottom: 12px; + gap: 10px; + padding: 0 0 12px 0; + margin-bottom: 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .enh-section-icon { - display: none; + display: inline-block; + font-size: 20px; + opacity: 0.8; } .enh-section-title { flex-grow: 1; - font-size: 16px; + font-size: 17px; font-weight: 700; color: #ffffff; margin: 0; text-transform: none; - letter-spacing: -0.2px; + letter-spacing: -0.3px; } .enh-section-count { - display: none; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 28px; + height: 28px; + padding: 0 10px; + background: rgba(255, 255, 255, 0.1); + border-radius: 14px; + font-size: 13px; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); } /* ========================================= */ @@ -19248,8 +19269,8 @@ body { .enh-artists-wrapper { display: grid; grid-template-columns: 1fr 1fr; - gap: 20px; - margin-bottom: 24px; + gap: 16px; + margin-bottom: 20px; } /* Responsive: stack on narrow screens */ @@ -19262,24 +19283,41 @@ body { .enh-artist-section { margin-bottom: 0 !important; + padding: 16px; + background: linear-gradient(135deg, + rgba(45, 45, 45, 0.4) 0%, + rgba(26, 26, 26, 0.5) 100%); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + backdrop-filter: blur(10px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.enh-artist-section .enh-section-header { + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .enh-compact-list.artists-grid { display: flex; gap: 20px; - flex-wrap: nowrap; - overflow-x: auto; + flex-wrap: wrap; + overflow-x: visible; padding-bottom: 4px; align-items: flex-start; } -.enh-compact-list.artists-grid::-webkit-scrollbar { - height: 4px; +/* Allow wrapping on medium screens to prevent horizontal scroll */ +@media (max-width: 1200px) { + .enh-compact-list.artists-grid { + gap: 16px; + } } -.enh-compact-list.artists-grid::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); - border-radius: 2px; +@media (max-width: 900px) { + .enh-compact-list.artists-grid { + gap: 12px; + justify-content: center; + } } /* Artist cards: Circular Spotify-style */ @@ -19304,45 +19342,45 @@ body { } .enh-item-image.artist-image { - width: 96px; - height: 96px; + width: 144px; + height: 144px; border-radius: 50%; object-fit: cover; border: none; - margin-bottom: 8px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); + margin-bottom: 12px; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); } .enh-item-image-placeholder.artist-placeholder { - width: 96px; - height: 96px; + width: 144px; + height: 144px; border-radius: 50%; background: rgba(40, 40, 40, 1); display: flex; align-items: center; justify-content: center; - font-size: 40px; + font-size: 60px; border: none; - margin-bottom: 8px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); + margin-bottom: 12px; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); } .enh-compact-item.artist-card .enh-item-info { text-align: center; - min-width: 96px; - max-width: 180px; + min-width: 144px; + max-width: 200px; flex-grow: 0; } .enh-compact-item.artist-card .enh-item-name { - font-size: 14px; + font-size: 15px; font-weight: 600; color: #ffffff; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - line-height: 1.2; + line-height: 1.3; } .enh-compact-item.artist-card .enh-item-meta { @@ -19447,12 +19485,12 @@ body { .enh-compact-list.tracks-list { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 4px 12px; } -/* Responsive: single column on narrow screens */ -@media (max-width: 700px) { +/* Responsive: single column when container is narrow */ +@media (max-width: 900px) { .enh-compact-list.tracks-list { grid-template-columns: 1fr; gap: 4px; @@ -19469,6 +19507,8 @@ body { cursor: pointer; transition: background 0.2s ease; border: none; + min-width: 0; + overflow: hidden; } .enh-compact-item.track-item:hover {