DEMO-188: Different vertical align for Languages and Administrator (e…

…zsystems#97)

https://jira.ez.no/browse/DEMO-188

app/Resources/views/themes/tastefulplanet/layout/header.html.twig

@@ -1,8 +1,8 @@
 <div class="top-menu clearfix bg-faded">
     <div class="container">
-        <div class="hub float-left">
-            <div class="languages nav-link dropdown">
-                <button class="btn btn-sm dropdown-toggle"
+        <div class="d-flex float-left">
+            <div class="top-menu-item languages dropdown">
+                <button class="btn btn-sm dropdown-toggle nav-link"
                         type="button" id="dropdownMenu1" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="false">
                     {{ 'Languages'|trans }}
@@ -14,10 +14,10 @@
                     <a class="dropdown-item" href="/no">{{ "Norwegian"|trans}}</a>
                 </div>
             </div>
-            <div class="newsletter">
+            <div class="top-menu-item">
                 <a class="nav-link" href="{{ path( "ez_urlalias", {"locationId": 227} ) }}">Subscribe</a>
             </div>
-            <div class="social">
+            <div class="top-menu-item social">
                 <a href="//www.facebook.com/eZPublishEnterprise">
                     <i class="fab fa-facebook-f"></i>
                 </a>
@@ -32,19 +32,19 @@
                 </a>
             </div>
         </div>
-        <div class="user-menu float-right">
-            <ul class="mr-auto">
+        <div class="d-flex user-menu float-right">
+            <ul class="mr-auto list-unstyled">
                 {% if app.user %}
                     {% set user = app.user.getAPIUser().content %}
-                    <li class="nav-item username">{{ ez_content_name(user) }}</li>
-                    <li class="nav-item">
+                    <li class="top-menu-item nav-item username">{{ ez_content_name(user) }}</li>
+                    <li class="top-menu-item nav-item">
                         <a class="nav-link" href="{{ path('logout') }}" title="{{ 'logout'|trans }}">{{ 'logout'|trans }}</a>
                     </li>
                 {% else %}
-                    <li class="nav-item">
+                    <li class="top-menu-item nav-item">
                         <a class="nav-link" href="/register">{{ 'Register'|trans }}</a>
                     </li>
-                    <li class="nav-item">
+                    <li class="top-menu-item nav-item">
                         <a class="nav-link" href="/login">{{ 'Login'|trans }}</a>
                     </li>
                 {% endif %}

web/assets/scss/_header.scss

@@ -1,6 +1,6 @@
 .top-menu.bg-faded,
 .navbar.bg-faded {
-    background-color: #fff;
+    background-color: $white;
 }
 
 a.navbar-brand {
@@ -14,14 +14,14 @@ a.navbar-brand {
     text-transform: uppercase;
 }
 
-.top-menu .languages {
-    padding: 0 10px;
+.dropdown-toggle:after {
+    border-top: 0.4em solid;
+    vertical-align: 0.15em;
 }
 
 .top-menu .languages .btn {
     font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
     border: none;
-    padding: 8px 0;
     color: #63605d;
     line-height: 18px;
     background: initial;
@@ -32,9 +32,12 @@ a.navbar-brand {
     box-shadow: none;
 }
 
-.top-menu .newsletter {
+.top-menu-item {
     border-right: 1px solid #e5e5e5;
-    border-left: 1px solid #e5e5e5;
+}
+
+.top-menu-item:last-child {
+    border-right: none;
 }
 
 .top-menu a {
@@ -70,25 +73,12 @@ a.navbar-brand {
     fill: #a1a09e;
 }
 
-.hub,
-.user-menu {
-    display: flex;
-}
-
 .user-menu ul {
     display: flex;
     flex-direction: row;
     margin-bottom: 0px;
 }
 
-.user-menu ul li {
-    list-style: none;
-}
-
-.user-menu ul li:first-of-type {
-    border-right: 1px solid #e5e5e5;
-}
-
 .main-menu {
     border-top: 1px solid #e5e5e5;
     border-bottom: 1px solid #e5e5e5;