From 51216b90c5695ad0701a87e1558a23d1b859b17f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 30 Jul 2021 19:56:01 +0200
Subject: [PATCH] banner accompanyingcourse, new responsive design

---
 .../AccompanyingCourse/components/Banner.vue  | 32 ++++----
 .../components/Banner/ToggleFlags.vue         | 34 ++++-----
 .../views/AccompanyingCourse/banner.html.twig | 10 +--
 .../views/Household/banner.html.twig          |  3 -
 .../Resources/views/Person/banner.html.twig   | 73 ++++++++++---------
 5 files changed, 73 insertions(+), 79 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index b03d2fdc7..eda06b285 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -1,33 +1,32 @@
 <template>
-   
+
    <teleport to="#header-accompanying_course-name #banner-flags">
       <toggle-flags></toggle-flags>
    </teleport>
-   
+
    <teleport to="#header-accompanying_course-name #banner-status">
-      <div v-if="accompanyingCourse.step === 'DRAFT'">
+      <span v-if="accompanyingCourse.step === 'DRAFT'" class="d-md-block">
          <span class="badge bg-secondary">
             {{ $t('course.step.draft') }}
          </span>
-      </div>
-      <div v-else>
-         <div>
+      </span>
+      <span v-else class="text-md-end">
+         <span class="d-md-block mb-md-3">
             <span class="badge bg-primary">
                {{ $t('course.step.active') }}
             </span>
-         </div>
-         <div>
-            <span>
+         </span>
+         <span class="d-md-block">
+            <span class="d-md-block ms-3 ms-md-0">
                <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
             </span>
-            <br>
-            <span v-if="accompanyingCourse.user">
+            <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
                {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
             </span>
-         </div>
-      </div>
+         </span>
+      </span>
    </teleport>
-   
+
    <teleport to="#header-accompanying_course-details #banner-social-issues">
       <div class="col-12">
          <social-issue
@@ -61,11 +60,6 @@ export default {
 <style lang="scss">
    div#banner-flags,
    div#banner-status {
-      margin: 1.5em 0;
-      div {
-         text-align: right;
-         margin-bottom: 0.8em;
-      }
       .badge {
          text-transform: uppercase;
       }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
index 5add6b39c..ac2c2519d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
@@ -1,19 +1,21 @@
 <template>
-   <div>
-      <a @click="toggleIntensity" class="flag-toggle">
-         <span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
-         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
-         <span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
-      </a>
-   </div>
-   
-   <div>
-      <button class="badge rounded-pill" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
-         {{ $t('course.emergency') }}
-      </button>
-      <button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
-         {{ $t('course.confidential') }}
-      </button>
+   <div class="text-md-end">
+      <span class="d-block d-sm-inline-block mb-md-2">
+         <a @click="toggleIntensity" class="flag-toggle">
+            <span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
+            <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
+            <span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
+         </a>
+      </span>
+
+      <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
+         <button class="badge rounded-pill me-1" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
+            {{ $t('course.emergency') }}
+         </button>
+         <button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
+            {{ $t('course.confidential') }}
+         </button>
+      </span>
    </div>
 </template>
 
@@ -66,7 +68,6 @@ export default {
 <style lang="scss" scoped>
     a.flag-toggle {
         color: white;
-        padding: 0 10px;
         cursor: pointer;
         &:hover {
             color: white;
@@ -81,7 +82,6 @@ export default {
         }
     }
     button.badge {
-       margin-left: 0.8em;
        &.bg-secondary {
            opacity: 0.5;
            &:hover {
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
index d503822c5..b405f9bae 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
@@ -3,7 +3,7 @@
         <div class="container-xxl">
             <div class="row">
 
-                <div class="col-sm-5">
+                <div class="col-md-6 ps-md-5 ps-xxl-0">
                     <h1>
                         <i class="fa fa-random fa-fw"></i>
                         {{ 'Accompanying Course'|trans }}
@@ -12,21 +12,21 @@
                 </div>
 
                 {# vue teleport fragment here #}
-                <div class="col-sm-3" id="banner-flags"></div>
+                <div class="col-md-3 mt-3 mb-1 my-md-3" id="banner-flags"></div>
 
                 {# vue teleport fragment here #}
-                <div class="col-sm-3" id="banner-status"></div>
+                <div class="col-md-3 mt-1 mb-3 my-md-3 pe-md-5 pe-xxl-0" id="banner-status"></div>
 
             </div>
         </div>
-        
+
     </div>
     <div id="header-accompanying_course-details" class="header-details">
         <div class="container-xxl">
             <div class="row justify-content-md-right">
 
                 {# vue teleport fragment here #}
-                <div class="col-sm-10" id="banner-social-issues"></div>
+                <div class="col-md-10 ps-md-5 ps-xxl-0" id="banner-social-issues"></div>
 
             </div>
         </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
index 18bc6f663..7d358de80 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -42,9 +42,6 @@
                     </div>
                 </div>
 
-
-
-
             </div>
         </div>
     </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
index 1b5f49f54..67c8375fc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
@@ -8,6 +8,7 @@
                         'render': 'label', 'addInfo': true, 'addAge': true, 'addId': true, 'hLevel': 1
                     }) }}
                 </div>
+
                 <div class="col-md-6">
                     {{ include('@ChillPerson/Person/banner_custom.html.twig') }}
                 </div>
@@ -19,42 +20,44 @@
         <div class="container-xxl">
             <div class="row justify-content-between">
 
-                <div class="contact col-md-12 ps-md-5 ps-xxl-0">
-                    {% if person.phonenumber %}
-                        <span class="phonenumber d-block d-sm-inline-block">
-                            <i class="fa fa-fw fa-phone"></i>
-                            <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
-                                {{ person.phonenumber|chill_format_phonenumber }}</a>
-                        </span>
-                    {% endif %}
-                    {% if person.mobilenumber %}
-                        <span class="mobilenumber d-block d-sm-inline-block">
-                            <i class="fa fa-fw fa-mobile"></i>
-                            <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
-                                {{ person.mobilenumber|chill_format_phonenumber }}</a>
-                        </span>
-                    {% endif %}
-                    {% if person.email %}
-                        <span class="email d-block d-sm-inline-block">
-                            <i class="fa fa-fw fa-envelope-o"></i>
-                            <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
-                                {{ person.email }}
-                            </a>
-                        </span>
-                    {% endif %}
+                <div class="col-md-12 ps-md-5 ps-xxl-0">
+                    <div class="contact">
+                        {% if person.phonenumber %}
+                            <span class="phonenumber d-block d-sm-inline-block">
+                                <i class="fa fa-fw fa-phone"></i>
+                                <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
+                                    {{ person.phonenumber|chill_format_phonenumber }}</a>
+                            </span>
+                        {% endif %}
+                        {% if person.mobilenumber %}
+                            <span class="mobilenumber d-block d-sm-inline-block">
+                                <i class="fa fa-fw fa-mobile"></i>
+                                <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
+                                    {{ person.mobilenumber|chill_format_phonenumber }}</a>
+                            </span>
+                        {% endif %}
+                        {% if person.email %}
+                            <span class="email d-block d-sm-inline-block">
+                                <i class="fa fa-fw fa-envelope-o"></i>
+                                <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
+                                    {{ person.email }}
+                                </a>
+                            </span>
+                        {% endif %}
 
-                    {%- if person.currentHouseholdAddress is not empty -%}
-                        {% set address = person.currentHouseholdAddress %}
-                    {%- elseif person.lastAddress is not empty -%}
-                        {% set address = person.lastAddress %}
-                    {%- endif -%}
-                    {%- if address -%}
-                        <span class=" d-block d-sm-inline-block">
-                            {{ address|chill_entity_render_box({
-                                'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
-                            }) }}
-                        </span>
-                    {%- endif -%}
+                        {%- if person.currentHouseholdAddress is not empty -%}
+                            {% set address = person.currentHouseholdAddress %}
+                        {%- elseif person.lastAddress is not empty -%}
+                            {% set address = person.lastAddress %}
+                        {%- endif -%}
+                        {%- if address -%}
+                            <span class=" d-block d-sm-inline-block">
+                                {{ address|chill_entity_render_box({
+                                    'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
+                                }) }}
+                            </span>
+                        {%- endif -%}
+                    </div>
                 </div>
 
             </div>