Merge pull request #4680 from consul/small_menu_links

Increase login links touch area on small screens

app/assets/stylesheets/admin.scss

@@ -81,25 +81,18 @@ $table-header:   #ecf1f6;
 
       .top-bar-right {
 
+        > ul {
+          border-bottom: 0;
+          padding-bottom: 0;
+          margin-bottom: 0;
+        }
+
         .submenu {
-          border: 0;
-          display: block;
-          margin-top: 0;
           position: initial;
-          width: 100%;
-        }
-
-        .is-active {
-          font-weight: normal;
-          text-decoration: none;
-        }
-
-        .is-submenu-item {
-          padding: $line-height / 2 0;
         }
 
         a {
-          font-weight: normal !important;
+          font-weight: normal;
         }
       }
 
@@ -111,10 +104,6 @@ $table-header:   #ecf1f6;
     [class^="icon-"] {
       font-size: $base-font-size;
     }
-  }
-
-  .menu .menu-text {
-    padding: 0;
 
     h1 {
       margin-top: $line-height / 2;
@@ -128,14 +117,15 @@ $table-header:   #ecf1f6;
         color: inherit;
         text-transform: uppercase;
       }
-    }
 
       a {
+        color: inherit;
         display: inline-block;
         font-family: "Lato" !important;
         font-size: rem-calc(24);
         font-weight: lighter;
-      padding: 0;
+        line-height: 1;
+      }
     }
   }
 

app/assets/stylesheets/layout.scss

@@ -601,11 +601,12 @@ body > header,
 
     a {
       color: inherit;
+      line-height: inherit;
       padding-left: 0;
 
       @include breakpoint(medium) {
         font-size: $small-font-size;
-        padding: rem-calc(11) rem-calc(16);
+        padding: rem-calc(8) rem-calc(16);
       }
     }
 
@@ -630,6 +631,17 @@ body > header,
 
   .menu {
 
+    @include breakpoint(small only) {
+      border-bottom: 1px solid $border;
+      margin-bottom: $line-height;
+      margin-top: $line-height / 2;
+      padding-bottom: $line-height;
+
+      .submenu {
+        margin-top: 0;
+      }
+    }
+
     &.is-dropdown-submenu {
       background: $body-background;
       color: $text;
@@ -765,7 +777,8 @@ body > header,
   a {
     color: inherit;
     display: inline-block;
-    line-height: $line-height * 2;
+    padding-bottom: $line-height / 2;
+    padding-top: $line-height / 2;
     position: relative;
     text-align: left;
     width: 100%;

app/views/layouts/_admin_header.html.erb

@@ -17,8 +17,6 @@
 
     <div class="top-bar">
       <div class="top-bar-left">
-        <ul class="menu">
-          <li class="menu-text">
         <% if namespace == "officing" %>
           <h1>
             <%= link_to "#" do %>
@@ -34,13 +32,11 @@
             <% end %>
           </h1>
         <% end %>
-          </li>
-        </ul>
       </div>
 
       <div id="responsive_menu">
         <div class="top-bar-right">
-          <ul class="dropdown menu" data-dropdown-menu>
+          <ul class="menu" data-responsive-menu="medium-dropdown">
             <%= render "shared/admin_login_items" %>
             <%= render "layouts/notification_item" %>
             <%= render "devise/menu/login_items" %>

app/views/layouts/management.html.erb

@@ -16,16 +16,12 @@
       <div class="expanded row admin-top-bar">
         <div class="top-bar">
           <div class="top-bar-left">
-            <ul class="menu">
-              <li class="menu-text">
             <h1>
               <%= link_to management_root_path do %>
                 <%= setting["org_name"] %>
                 <br><small><%= t("management.dashboard.index.title") %></small>
               <% end %>
             </h1>
-              </li>
-            </ul>
           </div>
           <% if show_admin_menu?(manager_logged_in) %>
             <div id="responsive_menu">

app/views/shared/_admin_login_items.html.erb

@@ -1,7 +1,7 @@
 <% if show_admin_menu?(current_user) %>
   <li class="has-submenu">
     <%= link_to t("layouts.header.administration_menu"), "#", rel: "nofollow", class: "hide-for-small-only" %>
-    <ul class="submenu menu vertical" data-submenu>
+    <ul class="submenu menu" data-submenu>
       <% if current_user.administrator? %>
         <li>
           <%= link_to t("layouts.header.administration"), admin_root_path %>