26a8f2eace
Some users might not be able to touch the icon due to a motor disability. Other users might think the "Menu" text is part of the button and try to touch it instead. Making the "Menu" text part of the button makes it easier to show/hide this menu. Besides, it lets screen reader users with a small screen hear the word "Menu" associated to the button. We could simplify the HTML a bit more but Foundation's `hamburger` mixin uses the `::after` element with `position: absolute`, so we can't apply it directly to the button without making the CSS more complex.
63 lines
1.9 KiB
Plaintext
63 lines
1.9 KiB
Plaintext
<header>
|
|
<% if display_remote_translation_info?(@remote_translations, I18n.locale) %>
|
|
<%= render "shared/remote_translations_button", remote_translations: @remote_translations %>
|
|
<% end %>
|
|
|
|
<div class="top-links">
|
|
<div class="row">
|
|
<%= render "shared/locale_switcher" %>
|
|
<div class="hide-for-small-only">
|
|
<%= render "shared/top_links" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="top-bar">
|
|
|
|
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
|
|
<button type="button" class="menu-button" data-toggle>
|
|
<span class="menu-icon"></span>
|
|
<%= t("application.menu") %>
|
|
</button>
|
|
</span>
|
|
|
|
<h1 class="top-bar-title">
|
|
<%= link_to root_path, accesskey: "0" do %>
|
|
<%= image_tag(image_path_for("logo_header.png"), class: "float-left", alt: setting["org_name"]) %>
|
|
<% end %>
|
|
</h1>
|
|
|
|
<div id="responsive-menu">
|
|
<div class="top-bar-right">
|
|
<ul class="menu" data-responsive-menu="medium-dropdown">
|
|
<%= render "shared/admin_login_items" %>
|
|
<%= render "layouts/notification_item" %>
|
|
<%= render "devise/menu/login_items" %>
|
|
</ul>
|
|
|
|
<div class="show-for-small-only">
|
|
<div class="subnavigation row">
|
|
<%= render "shared/subnavigation" %>
|
|
<div class="small-12 column">
|
|
<%= render "shared/top_links" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="navigation_bar" class="subnavigation expanded">
|
|
<div class="row">
|
|
<div class="hide-for-small-only">
|
|
<%= render "shared/subnavigation" %>
|
|
</div>
|
|
<div class="small-12 medium-3 column">
|
|
<%= yield :header_addon %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|