From f5b7a1dfa5392ae30c3d5a9c12c40d38b9757ebe Mon Sep 17 00:00:00 2001
From: Nicolas Hislaire <nicolas.hislaire@imio.be>
Date: Fri, 29 Jul 2022 13:53:38 +0200
Subject: [PATCH] [MPP-71] add display available places for plains

---
 .../forms/widgets/portail_parent_plaines.html | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/templates/qommon/forms/widgets/portail_parent_plaines.html b/templates/qommon/forms/widgets/portail_parent_plaines.html
index 20244b2c..89585449 100644
--- a/templates/qommon/forms/widgets/portail_parent_plaines.html
+++ b/templates/qommon/forms/widgets/portail_parent_plaines.html
@@ -57,11 +57,19 @@ $(function(){
 <style>
 #imio_plaine_weeks {
     display: flex;
+    flex-wrap: wrap;
+}
+.imio_plaine_week {
+  min-width: 12em;
+  max-width: 50%;
+  margin-bottom: 2ex;
 }
 .imio_plaine_week > p {
-    width: 60%;
-    text-align: center;
+    width: 90%;
     margin: 0 auto;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.8em;
 }
 .activity {
     border: #d3d3d3 solid 1px;
@@ -70,7 +78,7 @@ $(function(){
     cursor: pointer;
     box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
     transition: box-shadow 0.3s ease-in-out;
-    height: 8ex;
+    min-height: 8ex;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
@@ -90,13 +98,14 @@ $(function(){
     color: #FFF;
 }
 .activity p {
-  margin: 0;
 }
 .activity p.label {
   font-weight: bold;
+  margin: 0 0 1ex 0;
 }
 .activity p.remaining_places {
   font-size: 0.8em;
+  margin: 0;
 }
 .activity p.remaining_places span {
   font-weight: bold;
@@ -104,5 +113,11 @@ $(function(){
 .activity.selected p.label:after {
   content: " \002714";
 }
+@media all and (max-device-width: 450px) {
+  .imio_plaine_week {
+    max-width: none;
+    width: 100%;
+  }
+}
 </style>
 {% endblock %}