improve flex-table logic, with accompanying period list template

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

@@ -4,29 +4,24 @@
 /*
 *  PERSON CONTEXT
 */
-
-div#header-person-name {
-   background: none repeat scroll 0 0 $chill-green-dark;
-   color: $white;
-   padding-top: 1em;
-   padding-bottom: 1em;
-}
-
-div#header-person-details {
-   background: none repeat scroll 0 0 $chill-green;
-   color: $white;
-   padding-top: 1em;
-   padding-bottom: 1em;
-   div.contact {
-      & > * {
-         margin-right: 1em;
-      }
-   }
-}
-
-div#person_details_container {
-   padding-top: 20px;
-   padding-bottom: 20px;
+div.banner {
+    div#header-person-name {
+        background: none repeat scroll 0 0 $chill-green-dark;
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
+    }
+    div#header-person-details {
+        background: none repeat scroll 0 0 $chill-green;
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        div.contact {
+            & > * {
+                margin-right: 1em;
+            }
+        }
+    }
 }
 
 div.person-view {
@@ -83,83 +78,77 @@ div.person-view {
  *  ACCOMPANYING_COURSE CONTEXT
  *  Header custom for Accompanying Course
  */
-$chill-accourse: #718596;
+$chill-accourse-context: #718596;
 
-div#header-accompanying_course-name {
-    background: none repeat scroll 0 0 $chill-accourse;
-    color: $white;
-    h1 {
-        margin: 0.4em 0;
-    }
-    span {
-        a {
-            color: $white;
+div.banner {
+    div#header-accompanying_course-name {
+        background: none repeat scroll 0 0 $chill-accourse-context;
+        color: $white;
+        h1 {
+            margin: 0.4em 0;
         }
-        a:hover {
-            text-decoration: underline;
+        span {
+            a {
+                color: $white;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
         }
     }
-}
-div#header-accompanying_course-details {
-    background: none repeat scroll 0 0 tint-color($chill-accourse, 20%);
-    color: $white;
-    padding-top: 1em;
-    padding-bottom: 1em;
-}
-
-// flex-table precision
-div.accompanyingcourse-resume {
-    div.associated-persons {
-        .flex-table .item-row .item-col:first-child { flex-basis: 33%; }
+    div#header-accompanying_course-details {
+        background: none repeat scroll 0 0 tint-color($chill-accourse-context, 20%);
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
     }
 }
 
-
 /*
  *  HOUSEHOLD CONTEXT
  *  Header custom for Household
  */
-$chill-household: #929d69;
+$chill-household-context: #929d69;
 
-div#header-household-name {
-    background: none repeat scroll 0 0 $chill-household;
-    color: $white;
-    h1 {
-        margin: 0.4em 0;
-    }
-    span {
-        a {
-            color: $white;
+div.banner {
+    div#header-household-name {
+        background: none repeat scroll 0 0 $chill-household-context;
+        color: $white;
+        h1 {
+            margin: 0.4em 0;
         }
-        a:hover {
-            text-decoration: underline;
+        span {
+            a {
+                color: $white;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
+        }
+        div.household-members {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            span.badge-member {
+                flex-shrink: 0; flex-grow: 0; flex-basis: auto;
+                color: $white;
+                border: 1px solid #ffffff3b;
+                border-radius: 8px;
+                padding: 0.4em 0.8em;
+                margin-bottom: 0.2em;
+                margin-right: 0.3em;
+                &.holder { order: -1; }
+                &.child { order: 2; }
+            }
         }
     }
-    div.household-members {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        span.badge-member {
-            flex-shrink: 0; flex-grow: 0; flex-basis: auto;
-            color: $white;
-            border: 1px solid #ffffff3b;
-            border-radius: 8px;
-            padding: 0.4em 0.8em;
-            margin-bottom: 0.2em;
-            margin-right: 0.3em;
-            &.holder { order: -1; }
-            &.child { order: 2; }
+    div#header-household-details {
+        background: none repeat scroll 0 0 tint-color($chill-household-context, 15%);
+        color: $white;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        span.current-members-explain {
+            font-weight: bold;
         }
     }
 }
-
-div#header-household-details {
-   background: none repeat scroll 0 0 tint-color($chill-household, 15%);
-   color: $white;
-   padding-top: 1em;
-   padding-bottom: 1em;
-   span.current-members-explain {
-      font-weight: bold;
-   }
-}
-

src/Bundle/ChillPersonBundle/Resources/public/chill/index.js

@@ -8,6 +8,7 @@ require('./scss/household_banner.scss');
 require('./scss/accompanying_period_work.scss');
 require('./scss/person_by_phonenumber.scss');
 require('./scss/render_box.scss');
+require('./scss/flex_table.scss');
 require('./scss/address_history.scss');
 
 require('./svg/phone-alt-solid.svg');

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

@@ -0,0 +1,31 @@
+/*
+ *  flex-table overwrite: precision and exceptions
+ */
+
+///
+div.accompanyingcourse-resume {
+    div.associated-persons {
+        .flex-table .item-row .item-col:first-child {
+            flex-basis: 33%;
+        }
+    }
+}
+
+///
+div.accompanyingcourse-list, div.household-members {
+    .flex-table .item-bloc .item-row {
+        &:nth-child(2) {
+            flex-direction: row;
+        }
+        &:last-child {
+            flex-direction: column;
+        }
+    }
+}
+
+///
+div.list-with-period {
+    div.flex-table div.item-row div.item-col:first-child {
+        flex-basis: 33%;
+    }
+}

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

@@ -1,11 +1,6 @@
-/// overwrite flex-table
-div.list-with-period {
-   div.flex-table div.item-row div.item-col:first-child { flex-basis: 33%; }
-}
 
 ///
-div.list-with-period,
-div.list-household-members {
+div.list-with-period, div.list-household-members {
 
    div.periods {
       div.header,

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig

@@ -5,33 +5,28 @@
                 <div class="item-row">
 
                     <div class="item-col">
-                        <b>#{{ accompanying_period.id }}</b>
+                        <span class="h3">
+                            <i class="fa fa-fw fa-random"></i>
+                            <b>{{ accompanying_period.id }}</b>
+                        </span>
+                        {% if accompanying_period.step == 'DRAFT' %}
+                            <span class="badge bg-primary">{{- 'Draft'|trans|upper -}}</span>
+                        {% else %}
+                            <span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
+                        {% endif %}
                         {% if accompanying_period.emergency %}
                             <span class="badge bg-primary">{{- 'Emergency'|trans|upper -}}</span>
                         {% endif %}
                         {% if accompanying_period.confidential %}
                             <span class="badge bg-primary">{{- 'Confidential'|trans|upper -}}</span>
                         {% endif %}
-                        {% if accompanying_period.step == 'DRAFT' %}
-                            <span class="badge bg-primary">{{- 'Draft'|trans|upper -}}</span>
-                        {% else %}
-                            <span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
-                        {% endif %}
-                    </div>
-
-                    <div class="item-col">
-                    {% if chill_accompanying_periods.fields.user == 'visible'  %}
-                        {% if accompanying_period.user %}
-                            {{ accompanying_period.user.username }}
-                        {% else %}
-                            <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
-                        {% endif %}
-                    {% endif %}
                     </div>
+                    <div class="item-col"></div>
 
                 </div>
                 <div class="item-row">
 
+                    <div class="item-col">
                     {% if accompanying_period.closingDate == null %}
                         {{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': accompanying_period.openingDate|format_date('long') } ) }}
                     {% else %}
@@ -46,9 +41,20 @@
                             </dl>
                         {% endif %}
                     {% endif %}
+                    </div>
+
+                    <div class="item-col">
+                        {% if chill_accompanying_periods.fields.user == 'visible'  %}
+                            {% if accompanying_period.user %}
+                                {{ accompanying_period.user.username }}
+                            {% else %}
+                                <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
+                            {% endif %}
+                        {% endif %}
+                    </div>
 
                 </div>
-                <div class="item-row">
+                <div class="item-row separator">
 
                     <div class="item-col"><h3>{{ 'Participants'|trans }}</h3></div>
                     <div class="item-col">
@@ -99,17 +105,14 @@
                     {% endif %}
 
                 </div>
-                <div class="item-row">
+                <div class="item-row separator">
 
                     <ul class="record_actions">
 
                         {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
                         <li>
                             <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
-                               class="btn btn-primary" title="{{ 'See accompanying period'|trans }}">
-                                <i class="fa fa-fw fa-random"></i>
-                                {{ 'See this period'|trans }}
-                            </a>
+                               class="btn btn-show" title="{{ 'See accompanying period'|trans }}">{{ 'See this period'|trans }}</a>
                         </li>
 
                         {# TODO cause error in household context. only works in person context

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

@@ -89,7 +89,7 @@
     <div class="item-col">
         {{ _self.label(person, options) }}
     </div>
-    <div class="item-col">
+    <div class="item-col separator">
         <ul class="list-content fa-ul">
             {% set multiline = (options['address_multiline']) ? true : false %}
             {{ person.getLastAddress|chill_entity_render_box({

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -68,7 +68,7 @@
                     {%- endfor %}
 
                     {% if apps|length > 0 %}
-                        <div class="item-row periods">
+                        <div class="item-row separator periods">
                         {% for app in apps %}
 
                             <div class="header">