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 {
-      display: inline-block;
-      font-family: "Lato" !important;
-      font-size: rem-calc(24);
-      font-weight: lighter;
-      padding: 0;
+      a {
+        color: inherit;
+        display: inline-block;
+        font-family: "Lato" !important;
+        font-size: rem-calc(24);
+        font-weight: lighter;
+        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,30 +17,26 @@
 
     <div class="top-bar">
       <div class="top-bar-left">
-        <ul class="menu">
-          <li class="menu-text">
-            <% if namespace == "officing" %>
-              <h1>
-                <%= link_to "#" do %>
-                  <%= setting["org_name"] %>
-                  <br><small><%= namespaced_header_title %></small>
-                <% end %>
-              </h1>
-            <% else %>
-              <h1>
-                <%= link_to namespaced_root_path do %>
-                  <%= setting["org_name"] %>
-                  <br><small><%= namespaced_header_title %></small>
-                <% end %>
-              </h1>
+        <% if namespace == "officing" %>
+          <h1>
+            <%= link_to "#" do %>
+              <%= setting["org_name"] %>
+              <br><small><%= namespaced_header_title %></small>
             <% end %>
-          </li>
-        </ul>
+          </h1>
+        <% else %>
+          <h1>
+            <%= link_to namespaced_root_path do %>
+              <%= setting["org_name"] %>
+              <br><small><%= namespaced_header_title %></small>
+            <% end %>
+          </h1>
+        <% end %>
       </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>
+            <h1>
+              <%= link_to management_root_path do %>
+                <%= setting["org_name"] %>
+                <br><small><%= t("management.dashboard.index.title") %></small>
+              <% end %>
+            </h1>
           </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 %>