consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4680 from consul/small_menu_links

Browse Source 
Increase login links touch area on small screens
This commit is contained in:
Javi Martín
2021-09-15 17:30:33 +02:00
committed by GitHub
parent 56c2243d1a e2d680947a
commit 7254ca333e
5 changed files with 52 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/stylesheets/admin.scss
View File

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

17
app/assets/stylesheets/layout.scss
View File

@@ -601,11 +601,12 @@ body > header,
a { a {
color: inherit; color: inherit;
line-height: inherit;
padding-left: 0; padding-left: 0;
@include breakpoint(medium) { @include breakpoint(medium) {
font-size: $small-font-size; 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 { .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 { &.is-dropdown-submenu {
background: $body-background; background: $body-background;
color: $text; color: $text;
@@ -765,7 +777,8 @@ body > header,
a { a {
color: inherit; color: inherit;
display: inline-block; display: inline-block;
line-height: $line-height * 2; padding-bottom: $line-height / 2;
padding-top: $line-height / 2;
position: relative; position: relative;
text-align: left; text-align: left;
width: 100%; width: 100%;

34
app/views/layouts/_admin_header.html.erb
View File

@@ -17,30 +17,26 @@
<div class="top-bar"> <div class="top-bar">
<div class="top-bar-left"> <div class="top-bar-left">
<ul class="menu"> <% if namespace == "officing" %>
<li class="menu-text"> <h1>
<% if namespace == "officing" %> <%= link_to "#" do %>
<h1> <%= setting["org_name"] %>
<%= link_to "#" do %> <br><small><%= namespaced_header_title %></small>
<%= 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>
<% end %> <% end %>
</li> </h1>
</ul> <% else %>
<h1>
<%= link_to namespaced_root_path do %>
<%= setting["org_name"] %>
<br><small><%= namespaced_header_title %></small>
<% end %>
</h1>
<% end %>
</div> </div>
<div id="responsive_menu"> <div id="responsive_menu">
<div class="top-bar-right"> <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 "shared/admin_login_items" %>
<%= render "layouts/notification_item" %> <%= render "layouts/notification_item" %>
<%= render "devise/menu/login_items" %> <%= render "devise/menu/login_items" %>

16
app/views/layouts/management.html.erb
View File

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

2
app/views/shared/_admin_login_items.html.erb
View File

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