Update browse comparisons view (#1318)

fkie-cad · Jan 21, 2025 · ccb8283 · ccb8283
1 parent 291da75
commit ccb8283
Showing 1 changed file with 53 additions and 23 deletions.
diff --git a/src/web_interface/templates/database/compare_browse.html b/src/web_interface/templates/database/compare_browse.html
@@ -6,9 +6,29 @@
 {% block styles %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pagination.css') }}">
 <style>
-    .vcenter {
-        vertical-align: bottom;
+    .comparison-table {
+        width: 100%;
+        table-layout: fixed;
+        white-space: nowrap;
+        overflow: hidden;
     }
+    .first-col {
+        width: 50%;
+        overflow: hidden;
+    }
+    .second-col {
+        text-align: right;
+        overflow: hidden;
+    }
+    @media (max-width: 1200px) {
+        /* 1200px is the breakpoint for Bootstrap 4 col-xl */
+        .first-col {
+            width: 100%;
+        }
+        .second-col {
+            display: none;
+        }
+     }
 </style>
 {% endblock %}
 
@@ -17,32 +37,42 @@
 <script type="text/javascript" src="{{ url_for('static', filename='js/update_url_variables.js') }}"></script>
 
 <div class="row justify-content-center">
-    <div class="col-xl-6 col-lg-8 col-md-10 mt-4">
+    <div class="mt-4 col-lg-8 col-md-10" style="max-width: 1024px;">
         <h3 class="mb-3">Browse Firmware Comparisons</h3>
     </div>
 </div>
 
 <div class="row justify-content-center">
-    <div class="col-xl-6 col-lg-8 col-md-10 mt-4">
-
-        <table class="table table-sm table-hover">
-            {% for id, hids, submission_date in compare_list %}
-                <tr>
-                    {% if pagination is defined %}
-                        <th>{{ loop.index + (page - 1) * per_page }}</th>
-                    {% endif %}
-                    <td class="clickable" onclick="location.href='/compare/{{ id }}'">
-                        {%  for uid in hids %}
-                            <span class="mb-1">{{ hids[uid] }}</span><br />
-                            <span style="font-family: monospace; font-size:11px">{{ uid }}</span><br />
-                        {% endfor %}
-                    </td>
-                </tr>
-            {% else %}
-                <h4>No comparisons found in database!</h4>
-            {% endfor %}
-        </table>
-
+    <div class="mt-4 col-lg-8 col-md-10">
+        <div class="card-body p-3 mx-auto" style="max-width: 1024px;">
+            <ul class="list-group list-group-flush px-0">
+                {% for id, hids, submission_date in compare_list %}
+                    <li class="list-group-item bg-light p-2 clickable li-hover" onclick="location.href='/compare/{{ id }}'">
+                        <a href="/compare/{{ id }}">
+                            <div class="p-1" style="width: 100%; height: 100%; font-size: 14px;">
+                                <table class="comparison-table">
+                                    {% for uid in hids %}
+                                        <tr>
+                                            <td class="first-col">
+                                                {{ hids[uid] }}
+                                            </td>
+                                            <td class="second-col">
+                                                <span class="footnote">{{ uid }}</span>
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                </table>
+                                <span class="footnote text-muted">
+                                    {{ submission_date | int | nice_unix_time }}
+                                </span>
+                            </div>
+                        </a>
+                    </li>
+                {% else %}
+                    <h4>No comparisons found in database!</h4>
+                {% endfor %}
+            </ul>
+        </div>
     </div>
 </div>