Fixed collection-info table

HSF · Dec 13, 2024 · f4025c8 · f4025c8
1 parent 2fe5e56
commit f4025c8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/...ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html b/...ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html
@@ -84,8 +84,8 @@
               'd-none': object.isCut && hideInvisible,
             }"
           >
-            <td>#{{ i }}</td>
-            <td>
+            <td data-label="No.">#{{ i }}</td>
+            <td data-label="Selection">
               <div
                 *ngIf="object.uuid"
                 class="row justify-content-center icon-wrapper"
@@ -110,7 +110,7 @@
                 </button>
               </div>
             </td>
-            <td>
+            <td data-label="Label">
               <div class="row m-0 add-label">
                 <div class="col-10 p-0">
                   <input
@@ -133,7 +133,10 @@
                 </div>
               </div>
             </td>
-            <td *ngFor="let column of collectionColumns">
+            <td
+              *ngFor="let column of collectionColumns"
+              [attr.data-label]="getPrettySymbol(column)"
+            >
               {{ object[column] }}
             </td>
           </tr>

diff --git a/...ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss b/...ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss
@@ -1,3 +1,42 @@
+@media screen and (max-width: 400px) {
+  .collectionsInfo table,
+  .collectionsInfo thead,
+  .collectionsInfo tbody,
+  .collectionsInfo th,
+  .collectionsInfo td,
+  .collectionsInfo tr {
+    display: block;
+  }
+
+  .collectionsInfo thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .collectionsInfo tr {
+    margin: 0 0 1rem 0;
+  }
+
+  .collectionsInfo td {
+    border: none;
+    position: relative;
+    padding-left: 50%;
+    text-align: left;
+  }
+
+  .collectionsInfo td::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 45%;
+    padding-right: 10px;
+    white-space: nowrap;
+    content: attr(data-label);
+    font-weight: bold;
+  }
+}
+
 .collectionsInfo {
   height: 95%;
 
@@ -105,6 +144,8 @@
   }
 
   td {
+    min-height: 20px;
+
     .object-select {
       position: relative;
       width: 1.6rem;