Merge remote-tracking branch 'origin/master' into fix-person-tests

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/custom/_address.scss

@@ -9,6 +9,12 @@ div.chill_address {
             margin: 0 0 0 1.5em;
             text-indent: -1.5em;
         }
+
+        &.chill_address_address--multiline {
+            p {
+                display: block;
+            }
+        }
         
     }
 }

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/custom/_record_actions.scss

@@ -9,6 +9,11 @@ ul.record_actions li {
 ul.record_actions, ul.record_actions_column {
     display: flex;
     justify-content: flex-end;
+
+    &.record_actions--left {
+      justify-content: flex-start;
+    }
+
     padding: 0.5em 0;
     flex-wrap: wrap-reverse;
 

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -1,12 +1,48 @@
 /*
  * NOTE 2021.04
- * scss/chill.scss is the main sass file for the new chill.2
+ * scss/chillmain.scss is the main sass file for the new chill.2
  * scratch will be replaced by bootstrap, please avoid to edit in modules/scratch/_custom.scss
  *
- * when possible, try to use bootstrap class naming
+ * when possible, try to use bootstrap html class
 */
 
+
+/*  [hack]  /!\ Contourne le positionnement problématique du div#content_conainter suivant,
+ *  car sa position: relative le place au-dessus du bandeau et les liens sont incliquables  */
+div.subheader {
+  height: 130px;
+}
+
 /*
+ * Specific rules
+ */
+
+// [scratch] un bouton 'disabled' non clickable
+.sc-button {
+   &.disabled {
+      cursor: default;
+      &.bt-remove {
+         background-color: #d9d9d9;
+      }
+   }
+}
+
+// [debug] un affichage discret pour le debug
+.discret {
+   color: grey;
+   margin-right: 1em;
+}
+
+// reserre la hauteur des rangées de tableau (ul.record_actions prennait trop de place)
+table {
+   ul.record_actions {
+      margin: 0;
+      padding: 0.5em;
+   }
+}
+
+/*
+ *  ACCOMPANYING_COURSE
  *  Header custom for Accompanying Course
  */
 
@@ -25,7 +61,6 @@ div#header-accompanying_course-name {
     }
   }
 }
-
 div#header-accompanying_course-details {
   background: none repeat scroll 0 0 #718596ab;
   color: #FFF;
@@ -33,31 +68,158 @@ div#header-accompanying_course-details {
   padding-bottom: 1em;
 }
 
-/*  /!\  Contourne le positionnement problématique du div#content_conainter suivant,
- *  car sa position: relative le place au-dessus du bandeau et les liens sont incliquables  */
-div.subheader {
-  height: 130px;
+/*
+*  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
+*/
+div.flex-bloc, 
+div.flex-table {
+   h2, h3, h4, dl, p {
+      margin: 0;
+   }
+   h2, h3, h4 {
+      color: var(--chill-blue);
+   }
 }
 
-//// SCRATCH BUTTONS
-.sc-button {
-   &.disabled {
-      cursor: default;
-      &.bt-remove {
-         background-color: #d9d9d9;
+/*
+* Bloc appearance
+*/
+div.flex-bloc {
+   box-sizing: border-box; 
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   align-items: stretch;
+   align-content: stretch;
+   
+   div.item-bloc {
+      flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
+      
+      margin: 0;
+      border: 1px solid #000;
+      padding: 1em;
+      
+      border-top: 0;
+      &:nth-child(1), &:nth-child(2) { 
+         border-top: 1px solid #000;
+      }
+      border-left: 0;
+      &:nth-child(odd) {
+         border-left: 1px solid #000;
+      }
+      
+      //background-color: #e6e6e6;
+      display: flex;
+      flex-direction: column;
+         
+      div.item-row {
+         flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+         display: flex;
+         flex-direction: column;
+         
+         div.item-col {
+            &:first-child {
+               flex-grow: 0; flex-shrink: 0; flex-basis: auto;
+            }
+            &:last-child {
+               flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+               display: flex;
+               
+               .list-content { // ul, dl, or div
+               }
+               ul.record_actions {
+                  margin: 0;
+                  align-self: flex-end;
+                  flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                  li {
+                     margin-right: 5px;
+                  }
+               }            
+            }
+         }
+      }
+   }
+   @media only screen and (max-width: 945px) { margin: auto -0.2em; }
+   @media only screen and (max-width: 935px) { margin: auto -0.5em; }
+   @media only screen and (max-width: 920px) { margin: auto -0.9em; }
+   @media only screen and (max-width: 900px) {
+      flex-direction: column;
+      margin: auto 0;
+      div.item-bloc {
+         border-left: 1px solid #000;
+         &:nth-child(2) { 
+            border-top: 0;
+         }
       }
    }
 }
 
-//// à ranger
-.discret {
-   color: grey;
-   margin-right: 1em;
-}
+/*
+* Table appearance
+*/ 
+div.flex-table {
+   display: flex;
+   flex-direction: column;
+   align-items: stretch;
+   align-content: stretch;
+   
+   div.item-bloc {
+      display: flex;
+      flex-direction: column;
+      padding: 1em;
+      border: 1px solid #000;
+      border-top: 0;
+      &:first-child {
+         border-top: 1px solid #000;
+      }
+      &:nth-child(even) {
+         background-color: #e6e6e6;         
+      }
 
-table {
-   ul.record_actions {
-      margin: 0;
-      padding: 0.5em;
+      div.item-row {
+         display: flex;
+         flex-direction: row;
+         &:not(:first-child) {
+            margin-top: 0.5em;
+            border-top: 1px dotted #0000004f;
+            padding-top: 0.5em;
+            flex-direction: column;
+         }
+         
+         div.item-col {
+            &:first-child {
+               flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
+            }
+            &:last-child {
+               flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+               display: flex;
+               justify-content: flex-end;
+               
+               .list-content { // ul, dl, or div
+               }
+               ul.record_actions {
+                  margin: 0;
+                  align-self: flex-start;
+                  flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                  li {
+                     margin-right: 5px;
+                  }
+               }            
+            }
+         }
+         @media only screen and (max-width: 900px) {
+            flex-direction: column;
+            div.item-col {
+               &:last-child {
+                  ul.record_actions {
+                     align-self: flex-end;
+                  }
+               }
+            }
+         }
+         
+         // neutralize 
+         div.chill_address div.chill_address_address p { text-indent: 0; }
+      }
    }
-}
+}      

src/Bundle/ChillMainBundle/Resources/views/Address/entity_render.html.twig

@@ -0,0 +1,16 @@
+<div class="chill_address">
+    {% if options['has_no_address'] == true and address.isNoAddress == true %}
+        <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
+    {% endif %}
+    <div class="chill_address_address {% if options['multiline'] %}chill_address_address--multiline{% endif %}">
+    {% if address.street is not empty %}<p class="street street1">{{ address.street }}</p>{% endif %}
+    {% if address.streetNumber is not empty %}<p class="street street2">{{ address.streetNumber }}</p>{% endif %}
+    {% if address.postCode is not empty %}
+    <p class="postalCode"><span class="code">{{ address.postCode.code }}</span> <span class="name">{{ address.postCode.name }}</span></p>
+    <p class="country">{{ address.postCode.country.name|localize_translatable_string }}</p>
+    {% endif %}
+    </div>
+{%- if options['with_valid_from'] == true -%}
+<span class="address_since">{{ 'Since %date%'|trans( { '%date%' : address.validFrom|format_date('long') } ) }}</span>
+{%- endif -%}
+</div>

src/Bundle/ChillMainBundle/Resources/views/Address/macro.html.twig

@@ -1,11 +1,12 @@
 {%- macro _render(address, options) -%}
     {%- set options = { 'with_valid_from' : true  }|merge(options|default({})) -%}
     {%- set options = { 'has_no_address'  : false }|merge(options|default({})) -%}
+    {%- set options = { 'with_icon' : false }|merge(options|default({})) -%}
     <div class="chill_address">
         {% if options['has_no_address'] == true and address.isNoAddress == true %}
             <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
         {% endif %}
-        <div class="chill_address_address">
+        <div class="chill_address_address">{% if options['with_icon'] == true %}<i class="fa fa-fw fa-map-marker"></i>{% endif %}
         {% if address.street is not empty %}<p class="street street1">{{ address.street }}</p>{% endif %}
         {% if address.streetNumber is not empty %}<p class="street street2">{{ address.streetNumber }}</p>{% endif %}
         {% if address.postCode is not empty %}