inserted @jstucke's ideas on uid placement along with display: none idea

fkie-cad · Dec 13, 2024 · ab93736 · ab93736
1 parent 7e76ad3
commit ab93736
Showing 1 changed file with 37 additions and 9 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,23 +37,31 @@
 <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="mt-4 col-xl-6 col-lg-8 col-md-10">
-        <div class="card-body p-3">
+    <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;">
-                                {% for uid in hids %}
-                                    {{ hids[uid] }}
-                                    <div class="footnote">{{ uid }}</div>
-                                {% endfor %}
+                                <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>