125106f9c0
While Foundations's off-canvas menu allows us to forget about writing CSS, it also leads to complicated HTML. Ideally Foundation would provide an easy way to simplify what we're doing, but I haven't found anything in the documentation. We could simplify the HTML a bit more if we used a CSS grid layout instead of a flex one, but old browsers have better support for the latter. Note we're using `breakpoint(medium)` so we can group the CSS for small screens and follow SCSS-Lint rules at the same time. Also note behavior of the main area when the menu appears on small screens is slightly different: it doesn't move the main content to the right. I've done it this way so we don't have any overflow issues, unlike the previous version. There's a small issue using a label and a checkbox to enable/disable the menu: sighted keyboard users with a small screen might not be able to enable the menu. So we're adding the `:focus-within` pseudoclass so the menu can be normally navigated using the keyboard. Even if old browsers don't support this pseudoclass, we believe the probability of a sighted user using a small screen, navigating with the keyboard and using an old browser is really low, particularly in the admin area. We're also adding the `aria-hidden` attribute on the label, since the menu is never hidden for screen readers and so having a control to show it could be confusing. Since the label is not focusable, we're complying with the fourth ARIA rule: > Do not use role="presentation" or aria-hidden="true" on a focusable > element . > > Using either of these on a focusable element will result in some users > focusing on 'nothing'.
63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="<%= I18n.locale %>">
|
|
|
|
<head>
|
|
<%= render "layouts/common_head", default_title: "Management" %>
|
|
<%= stylesheet_link_tag "print", media: "print" %>
|
|
<%= content_for :head %>
|
|
</head>
|
|
|
|
<body class="admin">
|
|
<header class="header">
|
|
<div class="top-links">
|
|
<div class="expanded row">
|
|
<%= render "shared/locale_switcher" %>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
|
|
<div class="top-bar-right">
|
|
<ul class="menu" data-responsive-menu="medium-dropdown">
|
|
<%= render "shared/admin_login_items", current_user: manager_logged_in %>
|
|
<%= render "devise/menu/login_items", current_user: manager_logged_in %>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="no-margin-top row expanded collapse">
|
|
<div class="small-12 medium-3 column admin-sidebar">
|
|
<%= render "/management/menu" %>
|
|
</div>
|
|
|
|
<%= render "management/account_info" %>
|
|
|
|
<div class="admin-content small-12 medium-9 column">
|
|
<%= render "layouts/flash" %>
|
|
<%= yield %>
|
|
</div>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|