From bdd74bddf8c3ec48916dc0634bf4aaae8c714a1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Stucke?= <joerg.stucke@fkie.fraunhofer.de>
Date: Wed, 27 Nov 2024 16:43:22 +0100
Subject: [PATCH] feat: reintroduce bs grid on home page

---
 src/web_interface/templates/home.html | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/web_interface/templates/home.html b/src/web_interface/templates/home.html
index f88e19959..476c265cc 100644
--- a/src/web_interface/templates/home.html
+++ b/src/web_interface/templates/home.html
@@ -10,20 +10,27 @@
 
 {% block styles %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}">
+<style>
+    .home-block {
+        min-width: 500px;
+        max-width: 800px;
+    }
+</style>
 
 {% endblock %}
 
 {% block body %}
     <div class="row justify-content-center mt-4">
 
-        <div class="p-0 m-2">
-            <center>
-                <img width="100%" height="auto" src="{{ url_for('static', filename='fact_logo_invertible.svg') }}" style="max-width: 445px;">
+        <div class="col col-xs-12 col-sm-8 col-lg-6 col-xl-4 p-0 m-2 home-block">
+            <div>
+                <img height="auto" src="{{ url_for('static', filename='fact_logo_invertible.svg') }}"
+                     style="max-width: 445px; display: block; margin: auto;" alt="fact_logo_invertible.svg">
 
                 <br /><br />
 
-                <h4 class="mb-3">General FACTs</h4>
-                <table class="table table-sm table-responsive" style="width: 705px;">
+                <h4 class="mb-3" style="text-align: center">General FACTs</h4>
+                <table class="table table-sm" style="margin: auto; width: auto;">
                     <tbody>
                         <tr>
                             <td style="text-align: left; padding:5px">firmware samples</td>
@@ -63,7 +70,7 @@ <h4 class="mb-3">General FACTs</h4>
                         </tr>
                     </tbody>
                 </table>
-            </center>
+            </div>
         </div>
         <script>
             function load_ajax_stats(){
@@ -94,7 +101,7 @@ <h4 class="mb-3">General FACTs</h4>
         </script>
 
         {% if (latest_firmware_submissions | length) > 0 %}
-            <div class="card p-2 m-2 bg-light rounded border-0" style="width: 705px;">
+            <div class="col col-xs-12 col-sm-8 col-lg-6 col-xl-4 card p-2 m-2 bg-light rounded border-0 home-block">
                 <div class="card-body bg-light p-3">
                     <h4 class="card-title mb-3">Latest Firmware Submissions</h4>
                     <ul class="list-group-flush px-0 mb-0">
@@ -112,7 +119,7 @@ <h4 class="card-title mb-3">Latest Firmware Submissions</h4>
     {# Latest Comments #}
     <div class="row justify-content-center">
         {% if (latest_comments | length) > 0 %}
-            <div class="card p-2 m-2 bg-light rounded border-0" style="width: 705px;">
+            <div class="col col-xs-12 col-sm-8 col-lg-6 col-xl-4 card p-2 m-2 bg-light rounded border-0 home-block">
                 <div class="card-body p-3">
                     <h4 class="card-title mb-3">Latest Comments</h4>
                     <ul class="list-group-flush px-0">
@@ -137,7 +144,7 @@ <h4 class="card-title mb-3">Latest Comments</h4>
 
         {# latest_comparison_results #}
         {% if (latest_comparison_results | length) > 0 %}
-            <div class="card p-2 m-2 bg-light rounded border-0" style="width: 705px;">
+            <div class="col col-xs-12 col-sm-8 col-lg-6 col-xl-4 card p-2 m-2 bg-light rounded border-0 home-block">
                 <div class="card-body p-3">
                     <h4 class="card-title mb-3">Latest Comparisons</h4>
                     <ul class="list-group list-group-flush px-0">