unwrap camera stream view on medium sized screens on camera view

PhotonVision · Aug 9, 2023 · 8e9e21c · 8e9e21c
1 parent 5d8b462
commit 8e9e21c
Showing 1 changed file with 38 additions and 12 deletions.
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
@@ -82,19 +82,22 @@ const fpsTooLow = computed<boolean>(() => {
       </div>
     </v-card-title>
     <div
-      style="display: flex; flex-direction: column; gap: 12px; align-items: center"
-      class="pb-4"
+      class="stream-container pb-4"
     >
-      <photon-camera-stream
-        v-show="value.includes(0)"
-        stream-type="Raw"
-        style="max-width: 100%"
-      />
-      <photon-camera-stream
-        v-show="value.includes(1)"
-        stream-type="Processed"
-        style="max-width: 100%"
-      />
+      <div class="stream">
+        <photon-camera-stream
+          v-show="value.includes(0)"
+          stream-type="Raw"
+          style="max-width: 100%"
+        />
+      </div>
+      <div class="stream">
+        <photon-camera-stream
+          v-show="value.includes(1)"
+          stream-type="Processed"
+          style="max-width: 100%"
+        />
+      </div>
     </div>
     <v-divider />
     <div class="pt-4">
@@ -143,4 +146,27 @@ th {
   width: 80px;
   text-align: center;
 }
+
+.stream-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.stream {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+@media only screen and (min-width: 512px) and (max-width: 960px) {
+  .stream-container {
+    flex-wrap: nowrap;
+  }
+
+  .stream {
+    width: 50%;
+  }
+}
 </style>