From fd04c314cd64ee562373818c4d054df79d32f167 Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Fri, 4 Feb 2022 13:55:50 +0100
Subject: [PATCH] # 86 Minor html/css tweaks

* improves minor things like display related breakpoints for certain html elements
* improves css for select2 for better group-result distinction
---
 .../templates/analysis/reports/detail.html    |  4 +--
 .../detail/compensation/view.html             | 36 ++++++++++---------
 .../compensation/detail/eco_account/view.html | 20 +++++------
 .../report/compensation/report.html           |  4 +--
 .../report/eco_account/report.html            |  4 +--
 ema/templates/ema/detail/view.html            | 18 +++++-----
 ema/templates/ema/report/report.html          |  4 +--
 .../templates/intervention/detail/view.html   | 20 +++++------
 .../templates/intervention/report/report.html |  4 +--
 konova/static/css/konova.css                  |  9 +++++
 templates/base.html                           |  4 +--
 11 files changed, 69 insertions(+), 58 deletions(-)

diff --git a/analysis/templates/analysis/reports/detail.html b/analysis/templates/analysis/reports/detail.html
index ac4f08e2..31ca65c6 100644
--- a/analysis/templates/analysis/reports/detail.html
+++ b/analysis/templates/analysis/reports/detail.html
@@ -3,11 +3,11 @@
 
 {% block body %}
     <div class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <h3>{% trans 'Evaluation report' %} {{office.long_name}}</h3>
             <h5>{% trans 'From' %} {{report.date_from.date}} {% trans 'to' %} {{report.date_to.date}}</h5>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="d-flex justify-content-end">
                 <div class="dropdown">
                     <div class="btn btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
diff --git a/compensation/templates/compensation/detail/compensation/view.html b/compensation/templates/compensation/detail/compensation/view.html
index 7b167658..3f843c0a 100644
--- a/compensation/templates/compensation/detail/compensation/view.html
+++ b/compensation/templates/compensation/detail/compensation/view.html
@@ -14,16 +14,16 @@
 {% block body %}
 
     <div id="detail-header" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <h3>{% trans 'Compensation' %}<br> {{obj.identifier}}</h3>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             {% include 'compensation/detail/compensation/includes/controls.html' %}
         </div>
     </div>
     <hr>
     <div id="data" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="table-container">
                 <table class="table table-hover">
                     <tr>
@@ -105,38 +105,40 @@
                 </table>
             </div>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
-            <div class="row">
-                {% include 'map/geom_form.html' %}
-            </div>
-            <div class="row">
-                {% include 'konova/includes/parcels.html' %}
-            </div>
-            <div class="row">
-                {% include 'konova/includes/comment_card.html' %}
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
+            <div class="col">
+                <div class="row">
+                    {% include 'map/geom_form.html' %}
+                </div>
+                <div class="row">
+                    {% include 'konova/includes/parcels.html' %}
+                </div>
+                <div class="row">
+                    {% include 'konova/includes/comment_card.html' %}
+                </div>
             </div>
         </div>
     </div>
     <hr>
     <div id="related_data">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/compensation/includes/states-before.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/compensation/includes/states-after.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/compensation/includes/actions.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/compensation/includes/deadlines.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/compensation/includes/documents.html' %}
             </div>
         </div>
diff --git a/compensation/templates/compensation/detail/eco_account/view.html b/compensation/templates/compensation/detail/eco_account/view.html
index 033eda33..f276f931 100644
--- a/compensation/templates/compensation/detail/eco_account/view.html
+++ b/compensation/templates/compensation/detail/eco_account/view.html
@@ -14,16 +14,16 @@
 {% block body %}
 
     <div id="detail-header" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <h3>{% trans 'Eco-account' %}<br> {{obj.identifier}}</h3>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             {% include 'compensation/detail/eco_account/includes/controls.html' %}
         </div>
     </div>
     <hr>
     <div id="data" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="table-container">
                 <table class="table table-hover">
                     <tr>
@@ -88,7 +88,7 @@
                 </table>
             </div>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="row">
                 {% include 'map/geom_form.html' %}
             </div>
@@ -104,26 +104,26 @@
 
     <div id="related_data">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/eco_account/includes/states-before.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/eco_account/includes/states-after.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/eco_account/includes/actions.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/eco_account/includes/deadlines.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/eco_account/includes/documents.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'compensation/detail/eco_account/includes/deductions.html' %}
             </div>
         </div>
diff --git a/compensation/templates/compensation/report/compensation/report.html b/compensation/templates/compensation/report/compensation/report.html
index df991ad0..25130f72 100644
--- a/compensation/templates/compensation/report/compensation/report.html
+++ b/compensation/templates/compensation/report/compensation/report.html
@@ -3,7 +3,7 @@
 
 {% block body %}
 <div class="row">
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <h3>{% trans 'Report' %}</h3>
         <h4>{{obj.identifier}}</h4>
         <div class="table-container">
@@ -33,7 +33,7 @@
         {% include 'compensation/detail/compensation/includes/states-after.html' %}
         {% include 'compensation/detail/compensation/includes/actions.html' %}
     </div>
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <div class="row">
             {% include 'map/geom_form.html' %}
         </div>
diff --git a/compensation/templates/compensation/report/eco_account/report.html b/compensation/templates/compensation/report/eco_account/report.html
index 1aef1d4b..1b08eb8b 100644
--- a/compensation/templates/compensation/report/eco_account/report.html
+++ b/compensation/templates/compensation/report/eco_account/report.html
@@ -3,7 +3,7 @@
 
 {% block body %}
 <div class="row">
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <h3>{% trans 'Report' %}</h3>
         <h4>{{obj.identifier}}</h4>
         <div class="table-container">
@@ -50,7 +50,7 @@
         {% include 'compensation/detail/compensation/includes/states-after.html' %}
         {% include 'compensation/detail/compensation/includes/actions.html' %}
     </div>
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <div class="row">
             {% include 'map/geom_form.html' %}
         </div>
diff --git a/ema/templates/ema/detail/view.html b/ema/templates/ema/detail/view.html
index 3e7f2d30..32ddd66b 100644
--- a/ema/templates/ema/detail/view.html
+++ b/ema/templates/ema/detail/view.html
@@ -14,16 +14,16 @@
 {% block body %}
 
     <div id="detail-header" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <h3>{% trans 'Payment funded compensation' %} <br> {{obj.identifier}}</h3>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             {% include 'ema/detail/includes/controls.html' %}
         </div>
     </div>
     <hr>
     <div id="data" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="table-container">
                 <table class="table table-hover">
                     <tr>
@@ -82,7 +82,7 @@
                 </table>
             </div>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="row">
             {% include 'map/geom_form.html' %}
             </div>
@@ -97,23 +97,23 @@
     <hr>
     <div id="related_data">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'ema/detail/includes/states-before.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'ema/detail/includes/states-after.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'ema/detail/includes/actions.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'ema/detail/includes/deadlines.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'ema/detail/includes/documents.html' %}
             </div>
         </div>
diff --git a/ema/templates/ema/report/report.html b/ema/templates/ema/report/report.html
index 10ec7aa1..64ce6da2 100644
--- a/ema/templates/ema/report/report.html
+++ b/ema/templates/ema/report/report.html
@@ -3,7 +3,7 @@
 
 {% block body %}
 <div class="row">
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <h3>{% trans 'Report' %}</h3>
         <h4>{{obj.identifier}}</h4>
         <div class="table-container">
@@ -37,7 +37,7 @@
         {% include 'compensation/detail/compensation/includes/states-after.html' %}
         {% include 'compensation/detail/compensation/includes/actions.html' %}
     </div>
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <div class="row">
             {% include 'map/geom_form.html' %}
         </div>
diff --git a/intervention/templates/intervention/detail/view.html b/intervention/templates/intervention/detail/view.html
index 86220949..8e7fc6ca 100644
--- a/intervention/templates/intervention/detail/view.html
+++ b/intervention/templates/intervention/detail/view.html
@@ -14,16 +14,16 @@
 {% block body %}
 
     <div id="detail-header" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <h3>{% trans 'Intervention' %}<br> {{obj.identifier}}</h3>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             {% include 'intervention/detail/includes/controls.html' %}
         </div>
     </div>
     <hr>
     <div id="data" class="row">
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="table-container">
                 <table class="table table-hover">
                     <tr {% if not obj.title %}class="alert alert-danger" title="{% trans 'Missing' %}" {% endif %}>
@@ -122,7 +122,7 @@
                 </table>
             </div>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-6">
+        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             <div class="row">
                 {% include 'map/geom_form.html' %}
             </div>
@@ -138,26 +138,26 @@
 
     <div id="related_data">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'intervention/detail/includes/compensations.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'intervention/detail/includes/payments.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'intervention/detail/includes/deductions.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'intervention/detail/includes/revocation.html' %}
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
                 {% include 'intervention/detail/includes/documents.html' %}
             </div>
-            <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
             </div>
         </div>
     </div>
diff --git a/intervention/templates/intervention/report/report.html b/intervention/templates/intervention/report/report.html
index ca5aa109..5d378197 100644
--- a/intervention/templates/intervention/report/report.html
+++ b/intervention/templates/intervention/report/report.html
@@ -3,7 +3,7 @@
 
 {% block body %}
 <div class="row">
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <h3>{% trans 'Report' %}</h3>
         <h4>{{obj.identifier}}</h4>
         <div class="table-container">
@@ -96,7 +96,7 @@
             </table>
         </div>
     </div>
-    <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
         <div class="row">
             {% include 'map/geom_form.html' %}
         </div>
diff --git a/konova/static/css/konova.css b/konova/static/css/konova.css
index fd29d3ab..a10e124b 100644
--- a/konova/static/css/konova.css
+++ b/konova/static/css/konova.css
@@ -235,6 +235,15 @@ Similar to bootstraps 'shadow-lg'
 .select2-results__option--highlighted{
     background-color: var(--rlp-red) !important;
 }
+.select2-container--default .select2-results__group{
+    background-color: var(--rlp-gray-light);
+}
+.select2-container--default .select2-results__option .select2-results__option{
+    padding-left: 2em !important;
+}
 .select2-container--default .select2-results > .select2-results__options{
     max-height: 500px !important;
+}
+.select2-container--default .select2-results__option .select2-results__option{
+    padding-left: 2em;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index d0656ee3..c418daad 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -30,12 +30,12 @@
         </div>
         {% endfor %}
     </div>
-    <div class="container-fluid mt-3">
+    <div class="container-fluid mt-3 px-4">
         {% comment %}
             The modal wrapper, which can be used on every view can stay on the base.html template
         {% endcomment %}
         <div class="modal fade" tabindex="-1" role="dialog" id="modal">
-          <div class="modal-dialog modal-md modal-lg" role="document">
+          <div class="modal-dialog modal-md modal-xl" role="document">
             <div class="modal-content"></div>
           </div>
         </div>