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'.
30 lines
820 B
Plaintext
30 lines
820 B
Plaintext
<!DOCTYPE html>
|
|
<html lang="<%= I18n.locale %>">
|
|
|
|
<head>
|
|
<%= render "layouts/common_head", default_title: "Admin" %>
|
|
<%= content_for :head %>
|
|
</head>
|
|
|
|
<body class="admin">
|
|
<%= render "layouts/admin_header" %>
|
|
|
|
<div class="menu-and-content no-margin-top">
|
|
<%= check_box_tag :show_menu, nil, false, role: "switch" %>
|
|
|
|
<nav id="side_menu" class="admin-sidebar">
|
|
<%= side_menu %>
|
|
</nav>
|
|
|
|
<div class="admin-content">
|
|
<%= label_tag :show_menu, t("admin.menu.admin"),
|
|
"aria-hidden": true, class: "button hollow expanded" %>
|
|
|
|
<%= render "layouts/flash" %>
|
|
<%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %>
|
|
<%= yield %>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|