Enhances the styling of the items table (#306)

aaronshaf · Sep 28, 2022 · 54b1fad · 54b1fad
1 parent c5fb6ec
commit 54b1fad
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/views/scan.ejs b/views/scan.ejs
@@ -57,6 +57,16 @@
       top: 0;
       width: 100%;
     }
+
+    .items-table th:first-child,
+    .items-table td:first-child {
+      position: sticky;
+      left: 0;
+    }
+
+    .items-table td:first-child {
+      background-color: white;
+    }
   </style>
 </head>
 <body class="container-fluid">
@@ -383,7 +393,7 @@
     }
 
     function renderItems(data) {
-      $('#actions-row').append(data.uniqueKeys.map(key => '<td>' + key + '</td>'))
+      $('#actions-row').append(data.uniqueKeys.map(key => '<th scope="col">' + key + '</th>'))
 
       if (data.Items.length) {
         $('#items-container').append(data.Items.map(item => {
@@ -497,11 +507,11 @@
 
     <div class="table-container d-none">
       <div class="scroll-indicator"></div>
-      <div class="table-wrapper">
-        <table class="table items-table">
-          <thead>
+      <div class="table-wrapper table-responsive">
+        <table class="table items-table table-hover">
+          <thead class="thead-light">
             <tr id="actions-row">
-              <td>Actions</td>
+              <th scope="col">Actions</th>
             </tr>
           </thead>
           <tbody id="items-container">