Update styling

jensjeflensje · Jan 4, 2024 · fe8ba71 · fe8ba71
1 parent 6e7a2bb
commit fe8ba71
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/backend/src/img_lookup/app/views.py b/backend/src/img_lookup/app/views.py
@@ -28,7 +28,6 @@ class BaseAssetDetailEndpoint(GenericAPIView):
 
     def get_object(self):
         asset = super().get_object()
-        print(asset.file_key)
         if not s3_key_exists(asset.file_key):
             raise ValidationError("There is no file associated with this asset")
         return asset

diff --git a/frontend/src/components/inspections/MetadataWidget.vue b/frontend/src/components/inspections/MetadataWidget.vue
@@ -18,7 +18,7 @@
         <DataTable
             size="small"
             :value="Object.entries(data.exif).map(([key, value]) => ({key: key, value: value}))">
-          <Column field="key" header="Key"></Column>
+          <Column class="key-column" field="key" header="Key"></Column>
           <Column class="value-column" field="value" header="Value"></Column>
         </DataTable>
       </div>

diff --git a/frontend/src/components/inspections/PlaceWidget.vue b/frontend/src/components/inspections/PlaceWidget.vue
@@ -7,7 +7,7 @@
       <DataTable
           size="small"
           :value="Object.entries(data.data).map(([key, value]) => ({key: key, value: value}))">
-        <Column field="key" header="Type"></Column>
+        <Column class="key-column" field="key" header="Type"></Column>
         <Column field="value" header="Value"></Column>
       </DataTable>
     </div>

diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -17,9 +17,35 @@ th, tr {
   background: none;
 }
 
+.key-column {
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@media only screen and (max-width: 800px) {
+  .key-column {
+    max-width: 220px;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  .key-column {
+    max-width: 180px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .key-column {
+    max-width: 140px;
+  }
+}
+
 .value-column {
   /* make sure a long value doesn't overflow the table */
   line-break: anywhere;
+  min-width: 120px;
 }
 
 a {