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

css changes for enhanced search results for desktop and mobile

Browse source
This commit is contained in:
Broque Thomas 2026-02-13 10:24:20 -08:00
parent 40be502a98
commit a91c10bee5
4 changed files with 109 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webui/index.html
View file

@ -1428,6 +1428,10 @@
<!-- Enhanced Search Dropdown (Overlay Panel) --> <!-- Enhanced Search Dropdown (Overlay Panel) -->
<div id="enhanced-dropdown" class="enhanced-dropdown hidden"> <div id="enhanced-dropdown" class="enhanced-dropdown hidden">
<div class="enhanced-dropdown-content"> <div class="enhanced-dropdown-content">
<!-- Mobile close bar -->
<button id="enhanced-dropdown-close" class="enhanced-dropdown-close">
<span>✕</span> Close Results
</button>
<!-- Loading State --> <!-- Loading State -->
<div id="enhanced-loading" class="enhanced-loading hidden"> <div id="enhanced-loading" class="enhanced-loading hidden">
<div class="spinner"></div> <div class="spinner"></div>

4
webui/static/mobile.css
View file

@ -91,6 +91,10 @@
width: 100%; width: 100%;
} }
.enhanced-dropdown-content {
max-width: 100% !important;
}
.dashboard-container { .dashboard-container {
gap: 15px; gap: 15px;
margin: 15px; margin: 15px;

9
webui/static/script.js
View file

@ -2598,6 +2598,15 @@ function initializeSearchModeToggle() {
}); });
} }
// Close button inside dropdown (mobile)
const dropdownCloseBtn = document.getElementById('enhanced-dropdown-close');
if (dropdownCloseBtn) {
dropdownCloseBtn.addEventListener('click', (e) => {
e.stopPropagation();
hideDropdown();
});
}
// Close dropdown when clicking outside // Close dropdown when clicking outside
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
const dropdown = document.getElementById('enhanced-dropdown'); const dropdown = document.getElementById('enhanced-dropdown');

136
webui/static/style.css
View file

@ -19993,12 +19993,46 @@ body {
padding: 16px 20px; padding: 16px 20px;
} }
/* Close button inside dropdown - hidden on desktop, shown on mobile */
.enhanced-dropdown-close {
display: none;
}
/* Responsive: tighter padding on narrow screens */ /* Responsive: tighter padding on narrow screens */
@media (max-width: 700px) { @media (max-width: 700px) {
.enhanced-dropdown-content { .enhanced-dropdown-content {
padding: 12px 16px; padding: 12px 16px;
} }
.enhanced-dropdown-close {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px 16px;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.enhanced-dropdown-close:hover,
.enhanced-dropdown-close:active {
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
}
.enhanced-dropdown-close span {
font-size: 16px;
line-height: 1;
}
/* Adjust search bar for mobile */ /* Adjust search bar for mobile */
.enhanced-search-bar-container { .enhanced-search-bar-container {
flex-direction: column; flex-direction: column;
@ -20180,13 +20214,13 @@ body {
/* Dropdown Sections - Enhanced with Premium Design */ /* Dropdown Sections - Enhanced with Premium Design */
.enh-dropdown-section { .enh-dropdown-section {
margin-bottom: 24px; margin-bottom: 16px;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(35, 35, 35, 0.6) 0%, rgba(35, 35, 35, 0.6) 0%,
rgba(20, 20, 20, 0.8) 100%); rgba(20, 20, 20, 0.8) 100%);
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px; border-radius: 16px;
padding: 20px; padding: 16px;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
box-shadow: box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4),
@ -20216,8 +20250,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 0 0 16px 0; padding: 0 0 10px 0;
margin-bottom: 18px; margin-bottom: 12px;
border-bottom: 2px solid rgba(255, 255, 255, 0.08); border-bottom: 2px solid rgba(255, 255, 255, 0.08);
position: relative; position: relative;
} }
@ -20238,9 +20272,9 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 36px; width: 28px;
height: 36px; height: 28px;
font-size: 20px; font-size: 16px;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(29, 185, 84, 0.15) 0%, rgba(29, 185, 84, 0.15) 0%,
rgba(30, 215, 96, 0.1) 100%); rgba(30, 215, 96, 0.1) 100%);
@ -20273,7 +20307,7 @@ body {
.enh-section-title { .enh-section-title {
flex-grow: 1; flex-grow: 1;
font-size: 18px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
margin: 0; margin: 0;
@ -20285,15 +20319,15 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 32px; min-width: 26px;
height: 32px; height: 26px;
padding: 0 12px; padding: 0 10px;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(29, 185, 84, 0.2) 0%, rgba(29, 185, 84, 0.2) 0%,
rgba(30, 215, 96, 0.15) 100%); rgba(30, 215, 96, 0.15) 100%);
border: 1px solid rgba(29, 185, 84, 0.3); border: 1px solid rgba(29, 185, 84, 0.3);
border-radius: 16px; border-radius: 16px;
font-size: 14px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: rgba(29, 185, 84, 1); color: rgba(29, 185, 84, 1);
box-shadow: box-shadow:
@ -20308,8 +20342,8 @@ body {
.enh-artists-wrapper { .enh-artists-wrapper {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 14px;
margin-bottom: 24px; margin-bottom: 16px;
} }
/* Responsive: stack on narrow screens */ /* Responsive: stack on narrow screens */
@ -20364,6 +20398,20 @@ body {
transparent 100%); transparent 100%);
} }
#enh-singles-section .enh-section-icon {
background: linear-gradient(135deg,
rgba(255, 152, 0, 0.15) 0%,
rgba(255, 193, 7, 0.1) 100%);
border-color: rgba(255, 152, 0, 0.2);
}
#enh-singles-section::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 152, 0, 0.5) 50%,
transparent 100%);
}
.enh-artist-section .enh-section-header { .enh-artist-section .enh-section-header {
border-bottom: 2px solid rgba(255, 255, 255, 0.08); border-bottom: 2px solid rgba(255, 255, 255, 0.08);
} }
@ -20402,7 +20450,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 22px 18px; padding: 16px 12px;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(30, 30, 30, 0.4) 0%, rgba(30, 30, 30, 0.4) 0%,
rgba(20, 20, 20, 0.6) 100%); rgba(20, 20, 20, 0.6) 100%);
@ -20411,9 +20459,9 @@ body {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 2px solid rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0; flex-shrink: 0;
width: 200px; width: 150px;
min-height: 250px; min-height: 200px;
max-height: 250px; max-height: 200px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@ -20447,7 +20495,7 @@ body {
rgba(40, 40, 40, 0.8) 0%, rgba(40, 40, 40, 0.8) 0%,
rgba(25, 25, 25, 0.9) 100%); rgba(25, 25, 25, 0.9) 100%);
border-color: rgba(138, 43, 226, 0.5); border-color: rgba(138, 43, 226, 0.5);
transform: translateY(-12px) scale(1.05); transform: translateY(-4px) scale(1.02);
box-shadow: box-shadow:
0 24px 48px rgba(138, 43, 226, 0.3), 0 24px 48px rgba(138, 43, 226, 0.3),
0 0 60px rgba(138, 43, 226, 0.2), 0 0 60px rgba(138, 43, 226, 0.2),
@ -20464,8 +20512,8 @@ body {
} }
.enh-item-image.artist-image { .enh-item-image.artist-image {
width: 164px; width: 120px;
height: 164px; height: 120px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
border: 4px solid rgba(138, 43, 226, 0.3); border: 4px solid rgba(138, 43, 226, 0.3);
@ -20481,7 +20529,7 @@ body {
.enh-compact-item.artist-card:hover .enh-item-image.artist-image { .enh-compact-item.artist-card:hover .enh-item-image.artist-image {
border-color: rgba(138, 43, 226, 0.8); border-color: rgba(138, 43, 226, 0.8);
transform: scale(1.05) rotate(2deg); transform: scale(1.03);
box-shadow: box-shadow:
0 24px 56px rgba(0, 0, 0, 0.8), 0 24px 56px rgba(0, 0, 0, 0.8),
0 0 60px rgba(138, 43, 226, 0.5), 0 0 60px rgba(138, 43, 226, 0.5),
@ -20498,8 +20546,8 @@ body {
} }
.enh-item-image-placeholder.artist-placeholder { .enh-item-image-placeholder.artist-placeholder {
width: 164px; width: 120px;
height: 164px; height: 120px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(138, 43, 226, 0.2) 0%, rgba(138, 43, 226, 0.2) 0%,
@ -20507,7 +20555,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 66px; font-size: 48px;
border: 4px solid rgba(138, 43, 226, 0.3); border: 4px solid rgba(138, 43, 226, 0.3);
margin-bottom: 16px; margin-bottom: 16px;
box-shadow: box-shadow:
@ -20518,13 +20566,13 @@ body {
.enh-compact-item.artist-card .enh-item-info { .enh-compact-item.artist-card .enh-item-info {
text-align: center; text-align: center;
min-width: 164px; min-width: 120px;
max-width: 200px; max-width: 150px;
flex-grow: 0; flex-grow: 0;
} }
.enh-compact-item.artist-card .enh-item-name { .enh-compact-item.artist-card .enh-item-name {
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
margin: 0; margin: 0;
@ -20552,8 +20600,8 @@ body {
.enh-compact-list.albums-grid { .enh-compact-list.albums-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 24px; gap: 16px;
} }
/* Responsive: smaller album cards on narrow screens */ /* Responsive: smaller album cards on narrow screens */
@ -20574,7 +20622,7 @@ body {
.enh-compact-item.album-card { .enh-compact-item.album-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 18px; padding: 14px 12px;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(30, 30, 30, 0.4) 0%, rgba(30, 30, 30, 0.4) 0%,
rgba(20, 20, 20, 0.6) 100%); rgba(20, 20, 20, 0.6) 100%);
@ -20608,7 +20656,7 @@ body {
.enh-compact-item.album-card:hover { .enh-compact-item.album-card:hover {
border-color: rgba(29, 185, 84, 0.5); border-color: rgba(29, 185, 84, 0.5);
transform: translateY(-10px) scale(1.03); transform: translateY(-4px) scale(1.02);
box-shadow: box-shadow:
0 20px 40px rgba(29, 185, 84, 0.25), 0 20px 40px rgba(29, 185, 84, 0.25),
0 0 50px rgba(29, 185, 84, 0.15), 0 0 50px rgba(29, 185, 84, 0.15),
@ -20633,7 +20681,7 @@ body {
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 8px; border-radius: 8px;
object-fit: cover; object-fit: cover;
margin-bottom: 16px; margin-bottom: 10px;
box-shadow: box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.6),
0 0 30px rgba(29, 185, 84, 0.15); 0 0 30px rgba(29, 185, 84, 0.15);
@ -20643,7 +20691,7 @@ body {
} }
.enh-compact-item.album-card:hover .enh-item-image.album-cover { .enh-compact-item.album-card:hover .enh-item-image.album-cover {
transform: scale(1.05) rotate(-2deg); transform: scale(1.02);
box-shadow: box-shadow:
0 18px 48px rgba(0, 0, 0, 0.8), 0 18px 48px rgba(0, 0, 0, 0.8),
0 0 50px rgba(29, 185, 84, 0.35); 0 0 50px rgba(29, 185, 84, 0.35);
@ -20667,7 +20715,7 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 72px; font-size: 72px;
margin-bottom: 16px; margin-bottom: 10px;
box-shadow: box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.6),
0 0 30px rgba(29, 185, 84, 0.15); 0 0 30px rgba(29, 185, 84, 0.15);
@ -20677,7 +20725,7 @@ body {
} }
.enh-compact-item.album-card .enh-item-name { .enh-compact-item.album-card .enh-item-name {
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
margin-bottom: 6px; margin-bottom: 6px;
@ -20694,7 +20742,7 @@ body {
} }
.enh-compact-item.album-card .enh-item-meta { .enh-compact-item.album-card .enh-item-meta {
font-size: 14px; font-size: 12px;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -20727,8 +20775,8 @@ body {
.enh-compact-item.track-item { .enh-compact-item.track-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 12px;
padding: 12px 16px; padding: 10px 12px;
background: linear-gradient(90deg, background: linear-gradient(90deg,
rgba(30, 30, 30, 0.3) 0%, rgba(30, 30, 30, 0.3) 0%,
rgba(20, 20, 20, 0.5) 100%); rgba(20, 20, 20, 0.5) 100%);
@ -20788,8 +20836,8 @@ body {
} }
.enh-item-image.track-cover { .enh-item-image.track-cover {
width: 64px; width: 48px;
height: 64px; height: 48px;
border-radius: 6px; border-radius: 6px;
object-fit: cover; object-fit: cover;
flex-shrink: 0; flex-shrink: 0;
@ -20816,8 +20864,8 @@ body {
} }
.enh-item-image-placeholder.track-placeholder { .enh-item-image-placeholder.track-placeholder {
width: 64px; width: 48px;
height: 64px; height: 48px;
border-radius: 6px; border-radius: 6px;
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient(135deg, background: linear-gradient(135deg,
@ -20826,7 +20874,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32px; font-size: 22px;
box-shadow: box-shadow:
0 4px 16px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.5),
0 0 20px rgba(29, 185, 84, 0.1); 0 0 20px rgba(29, 185, 84, 0.1);