common code

2025-09-17 12:03:14 -04:00
parent 090af0f477
commit 50376f71a8
22 changed files with 3145 additions and 390 deletions
--- a/SearchFrontend/search_ui/src/App.css
+++ b/SearchFrontend/search_ui/src/App.css
@@ -1,6 +1,114 @@
+/* Root container */
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  width: 100vw;
+  max-width: 100vw;
+  margin: 0;
+  padding: 0;
  text-align: center;
-}
+  background: #181a20;
+}
+
+/* Video.js player */
+.video-js-mod {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  object-fit: contain;
+  background: #000;
+}
+
+.vjs-tech {
+  object-fit: contain;
+}
+
+/* Main app layout */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  gap: 12px;
+  /* background: #181a20; */
+}
+
+
+.flex-group {
+  display: flex;
+  flex-direction: column; /* or 'row' if you want horizontal grouping */
+  flex: 1 1 0;
+  min-width: 0;
+}
+/* Section containers */
+.section-box-horiz {
+  overflow: visible;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Section containers */
+.section-box {
+  flex: 0 0 5%;
+  overflow: visible;
+  /* background: #23272f; */
+  /* padding: 0;
+  box-sizing: border-box;
+  border-radius: 10px;
+  margin: 0 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10); */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.timeline-container {
+  flex: 0 0 24%;
+  overflow: visible;
+  background: #20232a;
+  padding: 0;
+  box-sizing: border-box;
+  border-radius: 10px;
+  margin: 0 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-box:last-of-type {
+  flex: 1 1 68%;
+  overflow: hidden;
+  background: #23272f;
+  padding: 0;
+  box-sizing: border-box;
+  border-radius: 10px;
+  margin: 0 16px 16px 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Responsive tweaks */
+@media (max-width: 600px) {
+  .app-container {
+    gap: 6px;
+  }
+  .section-box,
+  .timeline-container,
+  .section-box:last-of-type {
+    margin: 0 4px;
+    border-radius: 6px;
+    padding: 0;
+  }
+  .date-range-selector {
+    max-width: 98vw;
+    padding: 12px 8px;
+    border-radius: 8px;
+  }
+}