Refactor components to TypeScript, enhance media request handling, and improve UI elements
- Updated Radio component to TypeScript and added WebSocket connection checks. - Enhanced DiscordLogs component with thread detection and improved bot presence checks. - Modified Login component to include a client ID for authentication. - Refactored RadioBanner for better styling and accessibility. - Improved BreadcrumbNav with Astro reload attribute for better navigation. - Enhanced MediaRequestForm to prevent rapid clicks during track play/pause. - Updated RequestManagement to handle track lists and finalizing job status more effectively. - Improved CSS for RequestManagement to enhance progress bar and track list display.
This commit is contained in:
@@ -279,6 +279,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 0.5rem; /* space between track and percent */
|
||||
}
|
||||
|
||||
|
||||
@@ -292,6 +293,7 @@
|
||||
overflow: hidden; /* must clip when scaled */
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin-right: 0; /* ensure neighbor percent isn't pushed inside */
|
||||
}
|
||||
|
||||
.rm-progress-track-lg {
|
||||
@@ -308,13 +310,41 @@
|
||||
transform: scaleX(var(--rm-progress, 0)); /* use custom property (0-1 range) */
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
transition: transform 0.24s cubic-bezier(0.4,0,0.2,1), border-radius 0.24s;
|
||||
transition: transform .5s cubic-bezier(.25,.8,.25,1), background-color .28s ease, border-radius .28s;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
right: 0;
|
||||
min-width: 0;
|
||||
will-change: transform;
|
||||
will-change: transform, background-color;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; /* ensure fill sits beneath the percent text */
|
||||
}
|
||||
|
||||
/* Ensure percent label appears above the fill even when inside the track */
|
||||
.rm-progress-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: none; /* don't stretch */
|
||||
margin-left: 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Finalizing pulse for near-100% jobs */
|
||||
.rm-finalizing {
|
||||
animation: rm-finalize-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes rm-finalize-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.10);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix for native audio progress bar (range input) */
|
||||
@@ -404,16 +434,47 @@
|
||||
.rm-progress-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Ensure progress styles apply when rendered within a PrimeReact Dialog (portal) */
|
||||
.p-dialog .rm-progress-container{display:flex;align-items:center;width:100%}
|
||||
.p-dialog .rm-progress-track{position:relative;flex:1 1 0%;min-width:0;height:6px;background-color:#80808033;border-radius:999px;overflow:hidden;margin:0!important;padding:0!important}
|
||||
.p-dialog .rm-progress-track-lg{height:10px}
|
||||
.p-dialog .rm-progress-fill{position:absolute;left:0;top:0;height:100%;width:100%!important;transform-origin:left center;transform:scaleX(var(--rm-progress, 0));border-top-left-radius:999px;border-bottom-left-radius:999px;transition:transform .24s cubic-bezier(.4,0,.2,1),border-radius .24s;margin:0!important;padding:0!important;right:0;min-width:0;will-change:transform;box-sizing:border-box}
|
||||
.p-dialog .rm-progress-text{font-size:.75rem;font-weight:600;min-width:2.5rem;text-align:right}
|
||||
min-width: 2.5rem;
|
||||
text-align: right;
|
||||
.p-dialog .rm-progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.p-dialog .rm-progress-track {
|
||||
position: relative;
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
height: 6px;
|
||||
background-color: #80808033;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.p-dialog .rm-progress-track-lg { height: 10px; }
|
||||
.p-dialog .rm-progress-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
transform-origin: left center;
|
||||
transform: scaleX(var(--rm-progress, 0));
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
transition: transform .5s cubic-bezier(.25,.8,.25,1), background-color .28s ease, border-radius .28s;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
right: 0;
|
||||
min-width: 0;
|
||||
will-change: transform, background-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.p-dialog .rm-progress-text { font-size: .75rem; font-weight: 600; color: #e5e7eb !important; margin-left: 0.5rem; white-space: nowrap; }
|
||||
|
||||
|
||||
/* Container Styles */
|
||||
.trip-management-container {
|
||||
@@ -531,6 +592,25 @@
|
||||
padding: 0.5rem !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
/* Track list scrollbar and status pill adjustments */
|
||||
.rm-track-list {
|
||||
/* Give room for overlay scrollbars so status pills don't overlap */
|
||||
padding-inline-end: 1.25rem; /* ~20px */
|
||||
}
|
||||
|
||||
.rm-track-status {
|
||||
/* Ensure the status pill has extra right padding and sits visually clear of the scrollbar */
|
||||
padding-right: 0.75rem !important;
|
||||
margin-right: 0.25rem !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
|
||||
/* Slightly reduce spacing on very small screens */
|
||||
@media (max-width: 480px) {
|
||||
.rm-track-list { padding-inline-end: 0.75rem; }
|
||||
.rm-track-status { padding-right: 0.5rem !important; }
|
||||
}
|
||||
|
||||
/* Album header info stacks */
|
||||
.album-header-info {
|
||||
|
||||
Reference in New Issue
Block a user