Style fixes for tracker page

- Restore single search bar
- Restore cell borders
- Restore row highlighting on hover
- Utilize more vertical space
- Remove sorting arrows

WebHostLib/static/layout.css

@@ -3,7 +3,6 @@ body{
     background-color: #dce2bd;
     font-size: 1.2rem;
     font-family: "Segoe UI", Arial, sans-serif;
-    margin-top: 0.5rem;
 }
 
 /** Button Styles */

WebHostLib/static/tablepage.css

@@ -1,11 +1,12 @@
 table.dataTable{
-    width: 100% !important;
+    width: 100%;
 }
 
 table.dataTable, table.dataTable.no-footer{
     border: none;
     font-size: 1rem;
     text-align: left;
+    border-collapse: collapse;
 }
 
 .dataTables_wrapper .dataTables_filter{

WebHostLib/static/tracker.css

@@ -1,22 +1,52 @@
 #tracker-wrapper{
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
 }
 
 .table-wrapper{
-    max-height: 400px;
     overflow-y: auto;
     overflow-x: auto;
-    width: 100%;
+    margin-bottom: 2rem;
+    max-height: 425px;
+}
+
+#search{
+    width: 200px;
+    height: 20px;
+    margin-bottom: 0.5rem;
+}
+
+.table-wrapper table tbody tr:hover{
+    background-color: #e2eabb;
 }
 
 div.dataTables_wrapper.no-footer .dataTables_scrollBody{
     border: none;
 }
 
-table.dataTable{
-    margin-top: 0.5rem;
-    margin-bottom: 2rem;
+table.dataTable tbody th, table.dataTable tbody td{
+    padding: 4px 6px;
+}
+
+table.dataTable, table.dataTable.no-footer{
+    border-left: 1px solid #bba967;
+    width: calc(100% - 2px) !important;
+    font-size: 1rem;
+}
+
+table.dataTable thead{
+    position: sticky;
+    top: 0;
+}
+
+table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
+    background-image: none;
+}
+
+table.dataTable tbody td{
+    border: 1px solid #bba967;
 }
 
 div.dataTables_scrollBody{
@@ -33,14 +63,30 @@ img.alttp-sprite {
     min-height: 14px;
 }
 
-@media all and (max-width: 1600px) {
+.item-acquired{
+    background-color: #d3c97d;
+}
+
+@media all and (max-width: 1700px) {
+    table.dataTable, table.dataTable.no-footer{
+        font-size: 0.8rem;
+    }
+
     img.alttp-sprite {
         height: auto;
-        max-height: 16px;
+        max-height: 24px;
         min-height: 10px;
     }
 }
 
-.item-acquired{
-    background-color: green;
+@media all and (max-width: 1400px) {
+    table.dataTable, table.dataTable.no-footer{
+        font-size: 0.6rem;
+    }
+
+    img.alttp-sprite {
+        height: auto;
+        max-height: 20px;
+        min-height: 10px;
+    }
 }

WebHostLib/static/tracker.js

@@ -2,12 +2,18 @@ window.addEventListener('load', () => {
     const tables = $(".table").DataTable({
         paging: false,
         info: false,
-        scrollCollapse: true,
+        dom: "t",
 
         // DO NOT use the scrollX or scrollY options. They cause DataTables to split the thead from
         // the tbody and render two separate tables.
     });
 
+    document.getElementById('search').addEventListener('keyup', (event) => {
+        tables.search(event.target.value);
+        console.info(tables.search());
+        tables.draw();
+    });
+
     const update = () => {
         const target = $("<div></div>");
         const tracker = document.getElementById('tracker-wrapper').getAttribute('data-tracker');
@@ -32,6 +38,8 @@ window.addEventListener('load', () => {
 
     setInterval(update, 30000);
 
+    window.addEventListener('resize', () => tables.draw());
+
     $(".dataTables_scrollBody").scrollsync({
         y_sync: true,
         x_sync: true

WebHostLib/templates/tracker.html

@@ -9,6 +9,7 @@
 {% endblock %}
 {% block body %}
     <div id="tracker-wrapper" data-tracker="{{ room.tracker }}">
+    <input placeholder="Search" id="search" />
         {% for team, players in inventory.items() %}
             <div class="table-wrapper">
                 <table class="table unique-item-table">
@@ -76,7 +77,7 @@
                                     <th colspan="{{ colspan }}" class="center-column">{{ area }}</th>
                                 {% endif %}
                             {% endfor %}
-                            <th rowspan="2">Last<br>Activity</th>
+                            <th rowspan="2" class="center-column">Last<br>Activity</th>
                         </tr>
                         <tr>
                             {% for area in ordered_areas %}