From 42f17f11e00e242a9286feec472da7fd479da50c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 9 May 2018 00:05:29 +0200
Subject: [PATCH] set same layout to user menu and section menu

---
 .../sass/custom/modules/_navigation.scss      | 116 ++++++++++++------
 Resources/views/Menu/user.html.twig           |  19 ++-
 2 files changed, 90 insertions(+), 45 deletions(-)

diff --git a/Resources/public/sass/custom/modules/_navigation.scss b/Resources/public/sass/custom/modules/_navigation.scss
index dc5e889e0..be28d0348 100644
--- a/Resources/public/sass/custom/modules/_navigation.scss
+++ b/Resources/public/sass/custom/modules/_navigation.scss
@@ -1,52 +1,88 @@
 .navigation {
-   background-color: $chill-blue;
+    background-color: $chill-blue;
 
 
-   a.more:after {
-      color: $chill-dark-gray;
-   }
+    a.more:after {
+        color: $chill-dark-gray;
+    }
 
-   li.nav-link2 {
-      a {
-         margin-bottom: 2px;
-      }
+    li.nav-link2 {
+        a {
+            margin-bottom: 2px;
+        }
 
-      &.lang-selection {
-         color: $chill-light-gray;
-         font-size: 0.7em;
-
-         a.more:after {
+        &.lang-selection {
             color: $chill-light-gray;
-         }
-      }
+            font-size: 0.7em;
 
-      ul {
-         top: 58px;
+            a.more:after {
+                color: $chill-light-gray;
+            }
+        }
 
-         a {
-            padding-left: 0;
-         }
-      }
-   }
+        ul {
+            top: 58px;
 
-   div.nav, div.navigation-search {
-      float: right;
+            a {
+                padding-left: 0;
+            }
+        }
+    }
 
-      input[type=search] {
-         padding: 0.2em;
-         float: left;
+    div.nav, div.navigation-search {
+        float: right;
 
-         border: none;
-      }
-   
-      button {
-         color: $chill-light-gray;
-         background-color: $chill-blue;
-         padding: 0 0 0 7px;
-         top: inherit;
-         font-size: 1.2em;
-         position: unset;
-         float: left;
-      }
-   }
+        input[type=search] {
+            padding: 0.2em;
+            float: left;
+
+            border: none;
+        }
+
+        button {
+            color: $chill-light-gray;
+            background-color: $chill-blue;
+            padding: 0 0 0 7px;
+            top: inherit;
+            font-size: 1.2em;
+            position: unset;
+            float: left;
+        }
+    }
+    
+    li.user-menu {
+        min-width: 14rem;
+    }
+    
+    ul.user-menu-list {
+        
+        li.user-menu__entry {
+            display: block; 
+            background-color: $chill-dark-gray; 
+            border-bottom: 1px solid #FFF;
+            padding-top: 0; 
+            padding-bottom: 0; 
+            line-height: 2;
+        }
+        
+        li.user-menu__entry--warning-entry {
+            background-color: $chill-red;
+            font-weight: 700;
+        }
+    }
+    
+    span.notification-counter {
+        display: inline-block;
+        padding: .25em .6em .25rem .6em;
+        font-size: 100%;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+
+        border-radius: 10rem;
+        background-color: $chill-red;
+        color: $white;
+        font-weight: 700;
+        margin-left: .5rem;
+    }
 }
\ No newline at end of file
diff --git a/Resources/views/Menu/user.html.twig b/Resources/views/Menu/user.html.twig
index f79b47e78..7f5156378 100644
--- a/Resources/views/Menu/user.html.twig
+++ b/Resources/views/Menu/user.html.twig
@@ -16,18 +16,27 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-<li class="nav-link2">
+<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>
 		</a>
 	</div>
-    <ul class="submenu width-11-em" style="padding-left: 0; padding-right: 0;  background-color:transparent;">
+    <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; border-bottom: 1px solid #FFF;padding-top:0; padding-bottom:0; padding-left:1.5em;">
-							  <a href="{{ menu.uri }}" style="font-family: 'Open Sans'; font-weight:300; font-size: 0.9em;">{% if menu.extras.icon is defined %}<i class="fa fa-{{ menu.extras.icon }}"></i> {% endif %}{{ menu.label|trans }}</a>
-						</li>
+            <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;">
+                            <a href="{{ menu.uri }}">{{ menu.label|trans }}</a>
+                        </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">{% spaceless %}
+                            {% if menu.extras.icon is defined %}
+                                <i class="fa fa-{{ menu.extras.icon }}"></i> 
+                            {% endif %}
+                        {% endspaceless %}</div>
+                </div>
+            </li>
         {% endfor %}
     </ul>
 </li>