Maybe make things prettier

PhotonVision · Nov 12, 2024 · 3a38e75 · 3a38e75
1 parent 010cf54
commit 3a38e75
Showing 1 changed file with 48 additions and 48 deletions.
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
@@ -14,60 +14,60 @@ const formatUrl = (port) => `http://${inject("backendHostname")}:${port}/stream.
         <span>Camera Matching</span>
       </v-card-title>
       <span class="ml-3">Active Cameras</span>
-      <v-row class="ml-3 mt-3">
-        <v-col cols="6">
-          <v-card
-            dark
-            class="camera-card pa-4"
-            v-for="(module, index) in useCameraSettingsStore().cameras"
-            :value="index"
-          >
-            <v-card-title class="pb-8">{{ module.nickname }}</v-card-title>
-            <v-card-text>
-              <v-simple-table dense height="100%" class="camera-card-table mt-2">
-                <tbody>
-                  <tr>
-                    <td>Matched Path</td>
-                    <td>
-                      {{ module.cameraPath }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>Streams:</td>
-                    <td>
-                      <a :href="formatUrl(module.stream.inputPort)" target="_blank"> Input Stream </a>/<a
-                        :href="formatUrl(module.stream.outputPort)"
-                        target="_blank"
-                      >
-                        Output Stream
-                      </a>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>Pipelines</td>
-                    <td>{{ module.pipelineNicknames.join(", ") }}</td>
-                  </tr>
-                  <tr>
-                    <td>Frames Processed</td>
-                    <td>todo</td>
-                  </tr>
-                  <tr>
-                    <td>Connected?</td>
-                    <td>Via [USB, CSI, totally bjork]</td>
-                  </tr>
-                </tbody>
-              </v-simple-table>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
+      <v-container fluid>
+        <v-row class="ml-3 mt-3">
+          <v-col>
+            <v-card dark
+              class="camera-card pa-4 mb-4"
+              v-for="(module, index) in useCameraSettingsStore().cameras"
+              :value="index"
+            >
+              <v-card-title class="pb-8">{{ module.nickname }}</v-card-title>
+              <v-card-text>
+                <v-simple-table dense height="100%" class="camera-card-table mt-2">
+                  <tbody>
+                    <tr>
+                      <td>Matched Path</td>
+                      <td>
+                        {{ module.cameraPath }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>Streams:</td>
+                      <td>
+                        <a :href="formatUrl(module.stream.inputPort)" target="_blank"> Input Stream </a>/<a
+                          :href="formatUrl(module.stream.outputPort)"
+                          target="_blank"
+                        >
+                          Output Stream
+                        </a>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>Pipelines</td>
+                      <td>{{ module.pipelineNicknames.join(", ") }}</td>
+                    </tr>
+                    <tr>
+                      <td>Frames Processed</td>
+                      <td>todo</td>
+                    </tr>
+                    <tr>
+                      <td>Connected?</td>
+                      <td>Via [USB, CSI, totally bjork]</td>
+                    </tr>
+                  </tbody>
+                </v-simple-table>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
 
       <v-divider style="margin: 12px 0" />
 
       <v-row class="pt-2 pa-4 ma-0 ml-5 pb-1">
         <span> USB Cameras </span>
         <span>
-          Matched cameras: {{ useSettingsStore().visionSourceManagerState.knownCameras }} <br />
           Unmatched cameras: {{ useSettingsStore().visionSourceManagerState.unmatchedLoadedConfigs }}
         </span>
       </v-row>