Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
legraphista
commited on
Commit
•
0491bca
1
Parent(s):
88962c6
fix: css scroll issues
Browse files- fixed hidden video list section
- fixed hidden details bottom section
- fixed mobile usability
app.py
CHANGED
@@ -349,6 +349,38 @@ def process_video(video_id: str):
|
|
349 |
return None, "", f"Error processing video: {str(e)}"
|
350 |
|
351 |
css = """
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
352 |
body {
|
353 |
margin: 0;
|
354 |
padding: 0;
|
@@ -404,6 +436,7 @@ body {
|
|
404 |
|
405 |
max-height: 80vh; /* Adjust as needed */
|
406 |
overflow-y: auto;
|
|
|
407 |
}
|
408 |
#video-column {
|
409 |
width: 70%;
|
@@ -435,7 +468,6 @@ body {
|
|
435 |
height: 100% !important;
|
436 |
}
|
437 |
#scrollable-content {
|
438 |
-
height: 67vh;
|
439 |
overflow-y: auto;
|
440 |
padding: 20px;
|
441 |
}
|
@@ -539,6 +571,9 @@ body {
|
|
539 |
#header {
|
540 |
flex-direction: column;
|
541 |
align-items: flex-start;
|
|
|
|
|
|
|
542 |
}
|
543 |
#header-content h1 {
|
544 |
font-size: 24px;
|
@@ -549,13 +584,32 @@ body {
|
|
549 |
#logo {
|
550 |
align-self: flex-end;
|
551 |
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
552 |
}
|
553 |
#top-panel {
|
554 |
flex-direction: column;
|
|
|
555 |
}
|
556 |
#video-list-column, #video-column {
|
557 |
width: 100%;
|
558 |
}
|
|
|
|
|
|
|
559 |
}
|
560 |
.icon-buttons button {
|
561 |
display: none !important;
|
|
|
349 |
return None, "", f"Error processing video: {str(e)}"
|
350 |
|
351 |
css = """
|
352 |
+
* {
|
353 |
+
margin: 0;
|
354 |
+
padding: 0;
|
355 |
+
box-sizing: border-box;
|
356 |
+
# flex: 0!important;
|
357 |
+
}
|
358 |
+
html, body, gradio-app {
|
359 |
+
height: 100%;
|
360 |
+
min-height: unset!important;
|
361 |
+
max-height: unset!important;
|
362 |
+
display: block!important;
|
363 |
+
}
|
364 |
+
.main {
|
365 |
+
flex-grow: 1;
|
366 |
+
flex-shrink: 1;
|
367 |
+
overflow: hidden;
|
368 |
+
}
|
369 |
+
.main .wrap .contain {
|
370 |
+
flex-grow: 1;
|
371 |
+
flex-shrink: 1;
|
372 |
+
overflow: hidden;
|
373 |
+
}
|
374 |
+
#component-0 {
|
375 |
+
overflow: hidden;
|
376 |
+
}
|
377 |
+
# .app {
|
378 |
+
# overflow: hidden;
|
379 |
+
# }
|
380 |
+
#top-panel {
|
381 |
+
flex-shrink: 0;
|
382 |
+
}
|
383 |
+
|
384 |
body {
|
385 |
margin: 0;
|
386 |
padding: 0;
|
|
|
436 |
|
437 |
max-height: 80vh; /* Adjust as needed */
|
438 |
overflow-y: auto;
|
439 |
+
height: 100%;
|
440 |
}
|
441 |
#video-column {
|
442 |
width: 70%;
|
|
|
468 |
height: 100% !important;
|
469 |
}
|
470 |
#scrollable-content {
|
|
|
471 |
overflow-y: auto;
|
472 |
padding: 20px;
|
473 |
}
|
|
|
571 |
#header {
|
572 |
flex-direction: column;
|
573 |
align-items: flex-start;
|
574 |
+
flex-wrap: nowrap;
|
575 |
+
overflow: hidden;
|
576 |
+
max-height: 25vh;
|
577 |
}
|
578 |
#header-content h1 {
|
579 |
font-size: 24px;
|
|
|
584 |
#logo {
|
585 |
align-self: flex-end;
|
586 |
margin-top: 10px;
|
587 |
+
|
588 |
+
position: absolute;
|
589 |
+
top: 12px;
|
590 |
+
right: -24px;
|
591 |
+
height: auto!important;
|
592 |
+
width: 150px;
|
593 |
+
min-width: 0!important;
|
594 |
+
|
595 |
+
margin:0!important;
|
596 |
+
}
|
597 |
+
#logo .image-container {
|
598 |
+
height: auto!important;
|
599 |
+
}
|
600 |
+
.image-frame {
|
601 |
+
height: auto!important;
|
602 |
}
|
603 |
#top-panel {
|
604 |
flex-direction: column;
|
605 |
+
height: 50vh;
|
606 |
}
|
607 |
#video-list-column, #video-column {
|
608 |
width: 100%;
|
609 |
}
|
610 |
+
#video-list-column {
|
611 |
+
flex-grow: 7!important;
|
612 |
+
}
|
613 |
}
|
614 |
.icon-buttons button {
|
615 |
display: none !important;
|