While people using screen readers already have keyboard shortcuts to jump to the <main> tag, there are people who navigate the page with the keyboard using just the tab key, and for them, this link provides a way to save time and start reading the main content instead of having to manually go through all the navigation links every time a new page is loaded. Note that we had to add an additional `width: 0` rule because Foundation's `element-invisible` would apply `1px` and the test checking for `visible: :hidden` would faile.
40 lines
1.2 KiB
Plaintext
40 lines
1.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html <%= common_html_attributes %>>
|
|
<head>
|
|
<%= render "layouts/common_head", default_title: setting["org_name"] %>
|
|
<%= render "layouts/meta_tags" %>
|
|
<%= raw setting["html.per_page_code_head"] %>
|
|
</head>
|
|
|
|
<body class="auth-page">
|
|
<%= render Layout::SkipToMainContentComponent.new %>
|
|
<%= raw setting["html.per_page_code_body"] %>
|
|
<div class="wrapper">
|
|
<div class="auth-image small-12 medium-3 column"
|
|
style="<%= attached_background_css asset_url(image_path_for("auth_bg.jpg")) %>">
|
|
<h1 class="logo margin">
|
|
<%= link_to root_path do %>
|
|
<%= image_tag(image_path_for("logo_header.png"), class: "float-left", alt: setting["org_name"]) %>
|
|
<% end %>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="small-12 medium-9 column">
|
|
<div class="row">
|
|
<div class="small-12 medium-9 large-7 small-centered column">
|
|
<main id="main" class="auth-form margin <%= yield(:main_class) %>">
|
|
<%= render "layouts/flash" %>
|
|
|
|
<%= yield %>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<%= render Layout::FooterComponent.new %>
|
|
</div>
|
|
</body>
|
|
</html>
|