From 4ea81accea4a52d3d719a1d71df343cefd571ddd Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Mon, 23 Oct 2023 19:49:06 +0200
Subject: [PATCH] fix(pricing): tables UX, layout flow, heading margins

---
 assets/sass/general.scss    |  5 +++--
 assets/sass/prices.scss     | 33 ++++++++++++++++++++++-----------
 layouts/tarifs/section.html |  6 ++++--
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/assets/sass/general.scss b/assets/sass/general.scss
index b3c283e..24adc58 100644
--- a/assets/sass/general.scss
+++ b/assets/sass/general.scss
@@ -37,8 +37,9 @@ h2 {
 }
 
 h3 {
-    margin-top: .5em;
-    margin-bottom: .5em;
+    margin: 0;
+    padding-top: 1em;
+    padding-bottom: .5em;
 }
 
 a {
diff --git a/assets/sass/prices.scss b/assets/sass/prices.scss
index 0faa68b..3c14112 100644
--- a/assets/sass/prices.scss
+++ b/assets/sass/prices.scss
@@ -1,6 +1,11 @@
 .pricing-layout {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 1rem;
+}
+
+.forfait-price, .move-price {
+    font-weight: bold;
 }
 
 .operations-container {
@@ -8,24 +13,23 @@
 }
 
 .operations-mosaic { 
-    // display: grid;
-    // grid-template-columns: 1fr 1fr;
-    // grid-gap: 1rem;
     columns: 2;
+    grid-gap: 1rem;
 }
 
 .operations-category {
-    display: flex;
-    flex-direction: column;
+    page-break-inside: avoid;
 }
 
 .operations-table {
+    // card
     border: 1px solid black;
     border-radius: 5px;
     width: 100%;
-    padding: .5rem;
     border-collapse: separate;
     background: lighten($background-dark, 8%);
+    padding-bottom: .2rem;
+
     th {
         opacity: 0.6;
         text-align: left;
@@ -33,12 +37,16 @@
         margin-bottom: 1rem;
         border-bottom: 1px solid gray;
     }
-    tr {
-        td {
-        }
+    tr:nth-child(even) {
+        background-color: $background-dark;
+    }
+    td, th {
+        padding: .5rem 1rem;
     }
     .operation-price {
         text-align: right;
+        min-width: 4rem;
+        // prevent collapse of the prices
     }
     td.operation-price {
         color: $primary;
@@ -59,7 +67,10 @@
     .operations-category {
         margin-bottom: 1rem;
     }
-    .operation-price {
-        min-width: 4rem;
+}
+
+@media (min-width: $lg-breakpoint) {
+    .operations-mosaic {
+        columns: 3;
     }
 }
diff --git a/layouts/tarifs/section.html b/layouts/tarifs/section.html
index 598ec2b..f7974a7 100644
--- a/layouts/tarifs/section.html
+++ b/layouts/tarifs/section.html
@@ -8,7 +8,7 @@
             <ul>
                 {{ range $.Site.Data.pricing.move }}
                 <li class="move-item">
-                    De {{ .min }} à {{ .max }} km : {{ if eq .price 0 }}Gratuit{{ else }}{{ .price }} €{{ end }}
+                    De {{ .min }} à {{ .max }} km : <span class="move-price">{{ if eq .price 0 }}Gratuit{{ else }}{{ .price }} €{{ end }}</span>
                 </li>
                 {{ end }}
             </ul>
@@ -35,8 +35,9 @@
         <div class="operations-mosaic">
         {{ range $.Site.Data.pricing.standalone }}
             <div class="operations-category">
+                <div>
                 <h3>{{ .name }}</h3>
-                <table class="operations-table">
+                <table cellspacing="0" cellpadding="0" class="operations-table">
                     <tr>
                         <th>Opération</th>
                         <th class="operation-price">Prix</th>
@@ -48,6 +49,7 @@
                     </tr>
                     {{ end }}
                 </table>
+                </div>
             </div>
         {{ end }}
         </div>