render_box with 'bloc'

use bootstrap responsive breakpoints for columns,
mixed with flex-bloc cascade for growing and vertical align blocs.

src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig

@@ -60,7 +60,7 @@
                     <li>
                         <a href="{{ _self.href(bloc.path, bloc.key, item.id) }}">
                             <span class="badge bg-primary">
-                                {{ item|chill_entity_render_box({'only_denomination': true}) }}
+                                {{ item|chill_entity_render_box({'render': 'raw'}) }}
                             </span>
                         </a>
                     </li>

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

@@ -1,13 +1,9 @@
-/*
+// Need to access bootstrap variables
- * NOTE 2021.04
- * 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 html class
-*/
-
 @import '~ChillMainAssets/module/bootstrap/bootstrap';
 
+// Chill mixins
+@import './scss/mixins';
+
 /*
  * Specific rules
  */
@@ -68,23 +64,13 @@ div.flex-table {
       color: var(--bs-chill-blue);
    }
    div.item-bloc {
-      // We use box-shadow instead of border
+      @include border-collapse;
-      // to avoid to manage border double-width
-      // when blocs are resized for small screen !
-      // Then we can simulate border-collapse: collapse (table)
-      box-shadow:
-          1px 0 0 0 var(--bs-dark),
-          0 1px 0 0 var(--bs-dark),
-          1px 1px 0 0 var(--bs-dark),   /* fix the corner */
-          1px 0 0 0 var(--bs-dark) inset,
-          0 1px 0 0 var(--bs-dark) inset;
    }
 }
 
 /*
 * Bloc appearance
 */
-/*
 div.flex-bloc {
    box-sizing: border-box;
    display: flex;
@@ -94,7 +80,7 @@ div.flex-bloc {
    align-content: stretch;
 
    div.item-bloc {
-      flex-grow: 0; flex-shrink: 1; flex-basis: 33%;
+      flex-grow: 0; flex-shrink: 1; flex-basis: auto;
       margin: 0;
       padding: 1em;
       display: flex;
@@ -127,15 +113,8 @@ div.flex-bloc {
          }
       }
    }
-   @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;
-   }
 }
- */
+
 
 
 /*

src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss

@@ -0,0 +1,14 @@
+
+// We use box-shadow instead of border
+// to avoid to manage border double-width
+// Then we can simulate border-collapse: collapse (table)
+
+@mixin border-collapse {
+    box-shadow:
+        1px 0 0 0 var(--bs-dark),
+        0 1px 0 0 var(--bs-dark),
+        1px 1px 0 0 var(--bs-dark),   /* fix the corner */
+        1px 0 0 0 var(--bs-dark) inset,
+        0 1px 0 0 var(--bs-dark) inset;
+}
+

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss

@@ -1,3 +1,6 @@
+@import '~ChillMainAssets/module/bootstrap/bootstrap';
+@import '~ChillMainAssets/chill/scss/mixins';
+
 section.chill-entity {
     // have no effect for render label, row, bloc
     display: inline;
@@ -22,4 +25,11 @@ section.chill-entity {
         div.entity-row {}
         div.entity-bloc {}
     }
+
+    // don't break flex cascade with section tag
+    div.flex-bloc & {
+        display: flex;
+        flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+    }
 }
+

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -219,25 +219,15 @@
       </div>
     {% endif %}
 
-    <h2>{{ 'Resources'|trans }}</h2>
 
+    <div class="resources my-5">
+        <h2 class="mb-3">{{ 'Resources'|trans }}</h2>
         {% if accompanyingCourse.resources|length == 0 %}
             <p class="chill-no-data-statement">{{ 'Any resource for this accompanying course'|trans }}</p>
         {% else %}
-        <div class="flex-bloc">
+            <div class="flex-bloc row row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-xxl-4 g-0">
             {% for r in accompanyingCourse.resources %}
-
+                <div class="item-bloc col">
-            {# TEST
-            {{ r.person|chill_entity_render_box({
-                'render': 'label', 'addLink': true, 'addInfo': true, 'hLevel': '1'
-            }) }}
-
-            <span class="badge bg-primary">
-                {{ r.person|chill_entity_render_box({'render': 'raw'}) }}
-            </span>
-            #}
-
-            <div class="item-bloc">
                     {% if r.person %}
                         {{ r.person|chill_entity_render_box({
                             'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
@@ -249,10 +239,10 @@
                         }) }}
                     {% endif %}
                 </div>
-
             {% endfor %}
             </div>
         {% endif %}
+    </div>
 
     <h2>{{ 'Social actions'|trans }}</h2>
 

src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig

@@ -8,6 +8,7 @@
     * addInfo bool
     * hLevel integer
 #}
+
 {% macro raw(person, options) %}
     <span class="firstname">{{ person.firstName }}</span>
     <span class="lastname">{{ person.lastName }}</span>
@@ -70,8 +71,7 @@
 {%- endif -%}
 
 {%- if render == 'bloc' -%}
-<div class="entity-bloc">
+<div class="item-row entity-bloc">
-    <div class="item-row">
     <div class="item-col">
         {{ _self.label(person, options) }}
     </div>
@@ -106,7 +106,6 @@
         </ul>
         {%- endif -%}
     </div>
-    </div>
 </div>
 {%- endif -%}
 

src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss

@@ -1,3 +1,5 @@
+@import '~ChillMainAssets/chill/scss/mixins';
+
 section.chill-entity {
     &.entity-thirdparty {
         div.entity-label {

src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig

@@ -9,6 +9,7 @@
     * addInfo bool
     * hLevel integer
 #}
+
 {% macro raw(thirdparty, options) %}
     <span class="name">{{ thirdparty.name }}</span>
 {% endmacro raw %}
@@ -100,8 +101,7 @@
 {%- endif -%}
 
 {%- if render == 'bloc' -%}
-    <div class="entity-bloc">
+    <div class="item-row entity-bloc">
-        <div class="item-row">
         <div class="item-col">
             {{ _self.label(thirdparty, options) }}
         </div>
@@ -134,5 +134,4 @@
             </ul>
         </div>
     </div>
-    </div>
 {%- endif -%}