feat: implement initial renderer dashboard UI and transcription workflow integration
This commit is contained in:
Ümit Tunç
@@ -314,7 +314,7 @@ function App() {
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 1.05 }}
|
||||
className="queue-view"
|
||||
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
|
||||
style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}
|
||||
>
|
||||
{selectedSrt ? (
|
||||
<SrtEditor filePath={selectedSrt} onClose={() => setSelectedSrt(null)} />
|
||||
|
||||
+173
-44
@@ -90,7 +90,8 @@ body {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
min-height: 0; /* Important for flex children to scroll */
|
||||
min-height: 0;
|
||||
/* Important for flex children to scroll */
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -217,9 +218,20 @@ body {
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 0.3; }
|
||||
50% { transform: scale(1.1); opacity: 0.5; }
|
||||
100% { transform: scale(1); opacity: 0.3; }
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-zone h2 {
|
||||
@@ -347,22 +359,72 @@ body {
|
||||
}
|
||||
|
||||
/* Custom Select Styles */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.inset-y-0 { top: 0; bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.z-50 { z-index: 50; }
|
||||
.mt-1 { margin-top: 4px; }
|
||||
.w-full { width: 100%; }
|
||||
.flex { display: flex; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.text-left { text-align: left; }
|
||||
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.block { display: block; }
|
||||
.h-4 { height: 16px; }
|
||||
.w-4 { width: 16px; }
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inset-y-0 {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.bg-dark-glass {
|
||||
background: rgba(15, 15, 25, 0.95);
|
||||
@@ -374,45 +436,106 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.max-height-60 { max-height: 240px; }
|
||||
.overflow-auto { overflow: auto; }
|
||||
.rounded-md { border-radius: 8px; }
|
||||
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
|
||||
.py-1 { padding-top: 4px; padding-bottom: 4px; }
|
||||
.py-2 { padding-top: 8px; padding-bottom: 8px; }
|
||||
.pl-3 { padding-left: 12px; }
|
||||
.pl-10 { padding-left: 40px; }
|
||||
.pr-4 { padding-right: 16px; }
|
||||
.max-height-60 {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.select-none { user-select: none; }
|
||||
.cursor-default { cursor: default; }
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.text-primary-cyan { color: var(--primary-cyan); }
|
||||
.text-white { color: #ffffff; }
|
||||
.rounded-md {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.pl-10 {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.select-none {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-primary-cyan {
|
||||
color: var(--primary-cyan);
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Scrollbar styling for dropdown */
|
||||
.bg-dark-glass::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.bg-dark-glass::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bg-dark-glass::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.bg-dark-glass::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Animation for select dropdown */
|
||||
.transition { transition-property: opacity, transform; }
|
||||
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
|
||||
.duration-100 { transition-duration: 100ms; }
|
||||
.opacity-0 { opacity: 0; }
|
||||
.opacity-100 { opacity: 1; }
|
||||
.transition {
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
.ease-in {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.duration-100 {
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.drop-zone.drag-active {
|
||||
border-color: var(--primary-cyan);
|
||||
@@ -450,8 +573,13 @@ body {
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
100% { filter: hue-rotate(360deg); }
|
||||
0% {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Models View */
|
||||
@@ -604,7 +732,8 @@ body {
|
||||
.srt-editor-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -662,10 +791,10 @@ body {
|
||||
|
||||
.segments-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 20px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.segments-list::-webkit-scrollbar {
|
||||
|
||||
Reference in New Issue
Block a user