mirror of
https://github.com/we-promise/sure.git
synced 2026-05-27 22:44:55 +00:00
0ad1e59165
* fix(a11y): add skip-link and aria-current="page" to application layout * test(a11y): cover application layout skip-link and #main anchor * fix(a11y): extend skip-link and #main anchor to settings layout
50 lines
2.0 KiB
Plaintext
50 lines
2.0 KiB
Plaintext
<%= render "layouts/shared/htmldoc" do %>
|
|
<div class="flex flex-col md:flex-row h-full bg-surface pt-[env(safe-area-inset-top)]">
|
|
<%= link_to t("layouts.application.skip_to_main"), "#main",
|
|
class: "sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-3 focus:py-2 focus:rounded-lg focus:bg-container focus:text-primary focus:shadow-border-xs" %>
|
|
|
|
<div class="w-full md:w-auto md:min-w-64 shrink-0 md:h-full md:overflow-y-auto border-divider md:border-r">
|
|
<div class="p-4">
|
|
<%= render "settings/settings_nav" %>
|
|
</div>
|
|
</div>
|
|
|
|
<main id="main" class="grow flex h-full">
|
|
<div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
|
|
<div class="grow flex flex-col overflow-y-auto overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch]">
|
|
<div class="sticky top-0 z-10 px-3 md:px-10 pt-1.5 md:pt-3 pb-3 bg-surface border-b border-tertiary shrink-0">
|
|
<% if content_for?(:breadcrumbs) %>
|
|
<%= yield :breadcrumbs %>
|
|
<% else %>
|
|
<%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
|
|
<% end %>
|
|
|
|
<div class="flex items-center justify-between gap-4 mt-1.5 min-h-9">
|
|
<% if content_for?(:page_title) %>
|
|
<h1 class="text-primary text-xl font-medium">
|
|
<%= content_for :page_title %>
|
|
</h1>
|
|
<% else %>
|
|
<div></div>
|
|
<% end %>
|
|
<% if content_for?(:page_actions) %>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<%= yield :page_actions %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grow space-y-4 px-3 md:px-10 pb-20 pt-4">
|
|
<%= yield %>
|
|
<%= settings_nav_footer_mobile %>
|
|
<div class="my-4">
|
|
<%= settings_nav_footer %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<% end %>
|