From 4ca1618480990b8ad19febd124189169ac447e1d Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sat, 3 Jul 2021 13:37:00 +0200
Subject: [PATCH] bt5, main layout, responsive header

---
 .../public/modules/bootstrap/_custom.scss     | 105 ++++++++++++------
 .../Resources/views/Layout/_header.html.twig  |  31 +++---
 .../Resources/views/Menu/section.html.twig    |  11 +-
 .../Resources/views/Menu/user.html.twig       |  81 ++++----------
 .../Resources/views/layout.html.twig          |  30 +++--
 5 files changed, 122 insertions(+), 136 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
index c70a0a86d..d4c685a60 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
@@ -97,7 +97,7 @@ div.chill_address {
    }
 }
 
-/// base layout
+/// base layout positions
 
 body {
    display: flex;
@@ -108,55 +108,88 @@ body {
    }
 }
 
-nav.navbar {
-   padding: 0;
-   .navbar-brand img {
-      height: 50px;
-      margin: 8px 0;
+header {
+   a {
+      text-decoration: none;
    }
-   .navbar-collapse,
-   .navbar-toggler {
-      float: right;
-   }
-   ul.navbar-nav {
-      display: flex;
-      align-items: stretch;
-      li.nav-item {
+   nav.navbar {
+      padding: 0;
+      a.navbar-brand img {
+         height: 50px;
+         margin: 8px 0;
+      }
+      div.navbar-collapse {
+         float: right;
+      }
+      @media (max-width: 768px) {
+         & {
+            position: relative; 
+         }
+         button.navbar-toggler {
+            float: right;
+         }
+         div.navbar-collapse {
+            float: none;
+            position: absolute;
+            top: 4em; 
+            right: 0;
+            z-index: 2;
+            padding: 1em;
+         }
+      }
+      ul.navbar-nav {
          display: flex;
-         &.btn {
-            padding-top: 0;
-            padding-bottom: 0;
-         }
-         & > a {
-            align-self: center;
-         }
-         form.form-inline {
-            align-self: center;
+         align-items: stretch;
+         li.nav-item {
             display: flex;
-            input.form-control {
+            &.btn {
+               padding-top: 0;
+               padding-bottom: 0;
+            }
+            & > a {
                align-self: center;
-               height: 32px;
+            }
+            form.form-inline {
+               align-self: center;
+               display: flex;
+               input.form-control {
+                  align-self: center;
+                  height: 32px;
+               }
             }
          }
       }
-   }
-   .dropdown-menu {
-      .dropdown-item {
-         width: 120%;
-         i {
-            float: right;
+      div.dropdown-menu {
+         margin: 0;
+         padding: 0;
+         border-radius: 0;
+         a.dropdown-item {
+            width: 120%;
+            border-bottom: 1px solid $gray-200;
+            font-size: smaller;
+            i { 
+               float: right; }
+            &:hover { 
+               color: $gray-500 !important; }
          }
       }
    }
 }
-div.header-name, 
-div.header-details {
-   div.row > div:first-child {
-      margin-left: 1.5em;
+
+div.banner {
+   div.header-name, 
+   div.header-details {
+      div.row > div:first-child {
+         @media (min-width: 576px) { 
+            margin-left: 1.5em;
+         }
+      }
+   }
+   a {
+      text-decoration: none;
    }
 }
 
-
 footer.footer {
    background: $dark;
    padding-top: 10px;
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig
index 898a31beb..f5c8ee82b 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig
@@ -27,28 +27,24 @@
             
             <div class="col-8">
 
-                <button 
-                    class="navbar-toggler" 
+                <button class="navbar-toggler" 
                     type="button" 
-                    data-toggle="collapse" 
-                    data-target="#navbarSupportedContent"
-                    aria-controls="navbarSupportedContent"
+                    data-bs-toggle="collapse" 
+                    data-bs-target="#navbarContent"
+                    aria-controls="navbarContent"
                     aria-expanded="false"
                     aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
 
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <div id="navbarContent" class="collapse navbar-collapse bg-primary">
                     <ul class="navbar-nav mr-auto">
 
                         {% block navigation_search_bar %}
                             <li class="nav-item navigation-search">
                                 <form class="form-inline" action="{{ path('chill_main_search') }}" method="get">
-                                    <input 
-                                        class="form-control" 
-                                        name="q" 
-                                        type="search" 
-                                        placeholder="{{ 'Search'|trans }}" 
+                                    <input class="form-control" 
+                                        name="q" type="search" placeholder="{{ 'Search'|trans }}" 
                                         {% if _search_pattern is defined %}value="{{ _search_pattern }}"{% endif %}/>
                                         <button class="btn text-white-50" type="submit">
                                             <i class="fa fa-lg fa-search fa-flip-horizontal"></i>
@@ -69,25 +65,24 @@
 
                         {% if  available_languages|length == 1 %}
                             <li class="nav-item btn btn-primary">
-                                <a class="text-white-50" href="">
+                                <a id="menu-languages" class="text-white-50" href="#">
                                     {{ available_languages[0] | capitalize }}
                                 </a>
                             </li>
                         {% else %}
                             <li class="nav-item dropdown btn btn-primary">
-                                <a id="dropdownMenu3Button" 
+                                <a id="menu-languages" 
                                     class="nav-link dropdown-toggle" 
                                     type="button" 
-                                    data-toggle="dropdown" 
+                                    data-bs-toggle="dropdown" 
                                     aria-haspopup="true" 
                                     aria-expanded="false">
                                     <a href="#" class="more">{{ app.request.locale | capitalize }}</a>
                                 </a>
-                                <div 
-                                    class="dropdown-menu" 
-                                    aria-labelledby="dropdownMenu3Button">
+                                <div class="dropdown-menu dropdown-menu-end" 
+                                    aria-labelledby="menu-languages">
                                     {% for lang in available_languages  %}
-                                        <a class="dropdown-item{% if lang == app.request.locale %} active{% endif %}"
+                                        <a class="dropdown-item list-group-item bg-dark text-white{% if lang == app.request.locale %} active{% endif %}"
                                             href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale' : lang})) }}">
                                             {{ lang | capitalize }}
                                         </a>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig
index cb06ad704..0094cfa4f 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig
@@ -17,17 +17,16 @@
 #}
 
 <li class="nav-item dropdown btn btn-primary">
-    <a id="dropdownMenu1Button" 
+    <a id="menu-section" 
         class="nav-link dropdown-toggle" 
         type="button" 
-        data-toggle="dropdown" 
+        data-bs-toggle="dropdown" 
         aria-haspopup="true" 
         aria-expanded="false">
+        
         {{ 'Sections'|trans }}
     </a>
-    <div 
-        class="dropdown-menu" 
-        aria-labelledby="dropdownMenu1Button">
+    <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="menu-section">
         {% for menu in menus %}
             <a class="dropdown-item list-group-item bg-dark text-white" 
                 href="{{ menu.uri }}">
@@ -35,7 +34,7 @@
                 {% apply spaceless %}
                     {% if menu.extras.icons is defined %}
                         {% for icon in menu.extras.icons %}
-                            <i class="fa fa-{{ icon }}"></i>
+                            <i class="fa fa-{{ icon }} fa-lg"></i>
                         {% endfor %}
                     {% endif %}
             {% endapply %}</a>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig
index ba0bd0e4a..df4cbed15 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig
@@ -16,79 +16,42 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-<style>
-
-</style>
-{#
-<li class="nav-link2 user-menu">
-	<div class="li-content">
-		<a href="javascript:void(0)" style="font-size: 0.8em; font-family: 'Open Sans'; font-weight:300;">
-
-			{{ 'Welcome' | trans }}<br/>
-
-            <b>{{ app.user.username }}{{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}</b>
-
-            {% if is_granted('ROLE_PREVIOUS_ADMIN') %}
-                <i class="fa fa-wrench fa-lg" title="Impersonate mode"></i>
-            {% endif %}
-
-		</a>
-	</div>
-    <ul class="submenu width-11-em user-menu-list" style="padding-left: 0; padding-right: 0;  background-color:transparent;">
-        {% for menu in menus %}
-            <li style="display:block; background-color: #333333; padding-left:1.5em; border-bottom:1px; border-bottom: 1px solid #FFF;padding-top:0; padding-bottom:0;">
-                <div style="margin-bottom:2px;">
-                    <div style="font-family: 'Open Sans'; font-weight:300; font-size: 0.75em; text-align:left; height: 46px; display:inline-block;  width: calc(100% - 5em - 1px); vertical-align:top;">
-
-
-                        {% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
-
-                            <a href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
-                                {{ 'Exit impersonation'|trans }}
-                            </a>
-
-                        {% else %}
-                            <a href="{{ menu.uri }}">{{ menu.label|trans }}</a>
-                        {% endif %}
-
-                    </div>
-                    <div style="background-color: #333333;  text-align:center;width: 2em; margin-left:-0.15em; font-size:1.5em; color:#FFF; height: 46px; display:inline-block; vertical-align:top;float:right">{% apply spaceless %}
-                        {% if menu.extras.icon is defined %}
-                            <i class="fa fa-{{ menu.extras.icon }}"></i>
-                        {% endif %}
-                    {% endapply %}</div>
-                </div>
-            </li>
-        {% endfor %}
-    </ul>
-</li>
-#}
-
 <li class="nav-item dropdown btn btn-primary">
-    <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu2Button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <a id="menu-user"
+        class="nav-link dropdown-toggle"
+        type="button"
+        data-bs-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false">
 
         {{ 'Welcome' | trans }}<br/>
-        <b>{{ app.user.username }}{{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}</b>
+        
+        <b>
+            {{ app.user.username }}
+            {{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}
+        </b>
 
         {% if is_granted('ROLE_PREVIOUS_ADMIN') %}
             <i class="fa fa-wrench fa-lg" title="Impersonate mode"></i>
         {% endif %}
 
     </a>
-    <div class="dropdown-menu dropdown-menu-right py-0 rounded-0" aria-labelledby="dropdownMenu2Button">
+    <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="menu-user">
 
         {% for menu in menus %}
             {% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
-                <a class="dropdown-item list-group-item bg-dark text-white border-left-0 border-right-0 border-top-0 border-white" href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
-                    {{ 'Exit impersonation'|trans }}
+            <a class="dropdown-item list-group-item bg-dark text-white" 
+                href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
+                {{ 'Exit impersonation'|trans }}
             {% else %}
-                <a class="dropdown-item list-group-item bg-dark text-white border-left-0 border-right-0 border-top-0 border-white" href="{{ menu.uri }}">{{ menu.label|trans }}
+            <a class="dropdown-item list-group-item bg-dark text-white"
+                href="{{ menu.uri }}">{{ menu.label|trans }}
             {% endif %}
-                    {% if menu.extras.icon is defined %}
-                        <i class="fa fa-{{ menu.extras.icon }}"></i>
-                    {% endif %}
-                </a>
+            {% if menu.extras.icon is defined %}
+                <i class="fa fa-{{ menu.extras.icon }} fa-lg"></i>
+            {% endif %}
+            </a>
         {% endfor %}
 
     </div>
-</li>
\ No newline at end of file
+</li>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/layout.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/layout.html.twig
index 06b0d70be..bb9cb9390 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/layout.html.twig
@@ -43,36 +43,32 @@
                 <div class="col-sm">
                     <ul class="list-content fa-ul">
                         <li>
-                            <i class="fa fa-li fa-map-marker"></i>
                             {%- if person.currentHouseholdAddress is not empty -%}
+                                <i class="fa fa-li fa-map-marker"></i>
                                 {{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
                             {%- elseif person.lastAddress is not empty -%}
+                                <i class="fa fa-li fa-map-marker"></i>
                                 {{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
-                            {%- else -%}
-                                <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
                             {%- endif -%}
                         </li>
                         <li>
                             {% if person.mobilenumber %}
                                 <i class="fa fa-li fa-mobile"></i>
-                                <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone" title="{{ 'Mobilenumber'|trans }}">
+                                <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
                                     {{ person.mobilenumber|chill_format_phonenumber }}</a>
-                            {% else %}
+                            {% elseif person.phonenumber %}
                                 <i class="fa fa-li fa-phone"></i>
-                                {% if person.phonenumber %}
-                                    <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone" title="{{ 'Phonenumber'|trans }}">
-                                        {{ person.phonenumber|chill_format_phonenumber }}</a>
-                                {% else %}
-                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                                {% endif %}
+                                <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
+                                    {{ person.phonenumber|chill_format_phonenumber }}</a>
                             {% endif %}
-                                    
-                            <span class="ml-3">
-                                <i class="fa fa-fw fa-envelope-o"></i>
+                        </li>
+                        <li>
+                            {% if person.email %}     
+                                <i class="fa fa-li fa-envelope-o"></i>
                                 <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
-                                    {{ person.email|chill_print_or_message("thirdparty.No_email") }}
+                                    {{ person.email }}
                                 </a>
-                            </span>
+                            {% endif %}
                         </li>
                     </ul>
                 </div>
@@ -84,7 +80,7 @@
         <div class="container-xxl">
             <div class="row justify-content-md-right">
                 
-                <div class="col-sm-5" style="padding-left: 2em;">
+                <div class="col-sm-5" style="@media (min-width: 576px) { padding-left: 2em; }">
                     <span class="open_sansbold">
                         {{ 'Birthdate'|trans|upper  }} &nbsp; :
                     </span>