improve flex-table logic, with accompanying period list template

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

@@ -1,59 +1,80 @@
 /*
 *  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
 */
+
 div.flex-bloc,
 div.flex-table {
+    display: flex;
+    align-items: stretch;
+    align-content: stretch;
+    box-sizing: border-box;
     margin: 1.5em 0;
 
+    div.item-bloc {
+        display: flex;
+        @include border-collapse;
+        padding: 1em;
+
+        div.item-row {
+            display: flex;
+
+            div.item-col:last-child {
+                display: flex;
+            }
+        }
+    }
+
     h2, h3, h4, dl, p {
         margin: 0;
     }
     h2, h3, h4 {
         color: $blue;
     }
-    div.item-bloc {
+
-        @include border-collapse;
+    ul.record_actions {
+        margin: 0;
+        li {
+            margin-right: 5px;
+        }
     }
 }
 
 /*
 * 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: auto;
-        margin: 0;
-        padding: 1em;
-        display: flex;
         flex-direction: column;
+        margin: 0;
 
         div.item-row {
             flex-grow: 1; flex-shrink: 1; flex-basis: auto;
-            display: flex;
             flex-direction: column;
 
             div.item-col {
+                &.separator {
+                    margin-top: 0.5em;
+                    border-top: 1px dotted $gray-900;
+                    padding-top: 0.5em;
+                }
+
                 &:first-child {
                     flex-grow: 0; flex-shrink: 0; flex-basis: auto;
-                    padding-bottom: 0.5em;
-                    border-bottom: 1px dotted $gray-900;
-                    margin-bottom: 0.5em;
                 }
+
                 &:last-child {
                     flex-grow: 1; flex-shrink: 1; flex-basis: auto;
-                    display: flex;
 
                     ul.record_actions {
-                        margin: 0;
                         align-self: flex-end;
                         flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                        margin: 0;
+
                         li {
                             margin-right: 5px;
                         }
@@ -67,53 +88,47 @@ div.flex-bloc {
 /*
 * 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;
+
         &:nth-child(even) {
             background-color: $gray-200;
+
             .chill-user-quote {
                 background-color: shade-color($gray-200, 5%)
             }
         }
 
         div.item-row {
-            display: flex;
             flex-direction: row;
 
-            &:not(:first-child) {
+            &.separator {
                 margin-top: 0.5em;
                 border-top: 1px dotted $gray-900;
                 padding-top: 0.5em;
-                flex-direction: column;
+                //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;
                     justify-content: flex-end;
+
                     ul.record_actions {
                         flex-grow: 1; flex-shrink: 0; flex-basis: auto;
                         align-self: flex-start;
-                        margin: 0;
-                        li {
-                            margin-right: 5px;
-                        }
                     }
                 }
             }
+
             @media only screen and (max-width: 900px) {
                 flex-direction: column;
                 div.item-col {
@@ -124,7 +139,6 @@ div.flex-table {
                     }
                 }
             }
-
         }
     }
 }

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

@@ -1,6 +1,6 @@
 
 //
-//
+// Titles in forms
 //
 
 @mixin title_in_form {

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

@@ -4,29 +4,24 @@
 /*
 *  PERSON CONTEXT
 */
-
+div.banner {
-div#header-person-name {
+    div#header-person-name {
-   background: none repeat scroll 0 0 $chill-green-dark;
+        background: none repeat scroll 0 0 $chill-green-dark;
-   color: $white;
+        color: $white;
-   padding-top: 1em;
+        padding-top: 1em;
-   padding-bottom: 1em;
+        padding-bottom: 1em;
-}
+    }
-
+    div#header-person-details {
-div#header-person-details {
+        background: none repeat scroll 0 0 $chill-green;
-   background: none repeat scroll 0 0 $chill-green;
+        color: $white;
-   color: $white;
+        padding-top: 1em;
-   padding-top: 1em;
+        padding-bottom: 1em;
-   padding-bottom: 1em;
+        div.contact {
-   div.contact {
+            & > * {
-      & > * {
+                margin-right: 1em;
-         margin-right: 1em;
+            }
-      }
+        }
-   }
+    }
-}
-
-div#person_details_container {
-   padding-top: 20px;
-   padding-bottom: 20px;
 }
 
 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 {
+div.banner {
-    background: none repeat scroll 0 0 $chill-accourse;
+    div#header-accompanying_course-name {
-    color: $white;
+        background: none repeat scroll 0 0 $chill-accourse-context;
-    h1 {
+        color: $white;
-        margin: 0.4em 0;
+        h1 {
-    }
+            margin: 0.4em 0;
-    span {
-        a {
-            color: $white;
         }
-        a:hover {
+        span {
-            text-decoration: underline;
+            a {
+                color: $white;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
         }
     }
-}
+    div#header-accompanying_course-details {
-div#header-accompanying_course-details {
+        background: none repeat scroll 0 0 tint-color($chill-accourse-context, 20%);
-    background: none repeat scroll 0 0 tint-color($chill-accourse, 20%);
+        color: $white;
-    color: $white;
+        padding-top: 1em;
-    padding-top: 1em;
+        padding-bottom: 1em;
-    padding-bottom: 1em;
-}
-
-// flex-table precision
-div.accompanyingcourse-resume {
-    div.associated-persons {
-        .flex-table .item-row .item-col:first-child { flex-basis: 33%; }
     }
 }
 
-
 /*
  *  HOUSEHOLD CONTEXT
  *  Header custom for Household
  */
-$chill-household: #929d69;
+$chill-household-context: #929d69;
 
-div#header-household-name {
+div.banner {
-    background: none repeat scroll 0 0 $chill-household;
+    div#header-household-name {
-    color: $white;
+        background: none repeat scroll 0 0 $chill-household-context;
-    h1 {
+        color: $white;
-        margin: 0.4em 0;
+        h1 {
-    }
+            margin: 0.4em 0;
-    span {
-        a {
-            color: $white;
         }
-        a:hover {
+        span {
-            text-decoration: underline;
+            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 {
+    div#header-household-details {
-        display: flex;
+        background: none repeat scroll 0 0 tint-color($chill-household-context, 15%);
-        flex-direction: row;
+        color: $white;
-        flex-wrap: wrap;
+        padding-top: 1em;
-        span.badge-member {
+        padding-bottom: 1em;
-            flex-shrink: 0; flex-grow: 0; flex-basis: auto;
+        span.current-members-explain {
-            color: $white;
+            font-weight: bold;
-            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, 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-with-period, div.list-household-members {
-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 }}">
+                               class="btn btn-show" title="{{ 'See accompanying period'|trans }}">{{ 'See this period'|trans }}</a>
-                                <i class="fa fa-fw fa-random"></i>
-                                {{ '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">

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

@@ -66,7 +66,7 @@
         <div class="item-col">
             {{ _self.label(thirdparty, options) }}
         </div>
-        <div class="item-col">
+        <div class="item-col separator">
             <ul class="list-content fa-ul">
                 {{ thirdparty.getAddress|chill_entity_render_box({
                     'render': 'list',