Added a "skip to content" link.

Closes #2810
This commit is contained in:
Dan Brown 2021-06-15 20:58:45 +01:00
parent 7d951b842c
commit 3dda622f0a
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 24 additions and 4 deletions

View File

@ -60,6 +60,7 @@ return [
'no_activity' => 'No activity to show',
'no_items' => 'No items available',
'back_to_top' => 'Back to top',
'skip_to_main_content' => 'Skip to main content',
'toggle_details' => 'Toggle Details',
'toggle_thumbnails' => 'Toggle Thumbnails',
'details' => 'Details',

View File

@ -136,6 +136,23 @@ $btt-size: 40px;
}
}
.skip-to-content-link {
position: fixed;
top: -$-xxl;
left: 0;
background-color: #FFF;
z-index: 15;
border-radius: 0 4px 4px 0;
display: block;
box-shadow: $bs-dark;
font-weight: bold;
&:focus {
top: $-xl;
outline-offset: -10px;
outline: 2px dotted var(--color-primary);
}
}
.contained-search-box {
display: flex;
height: 38px;

View File

@ -28,6 +28,7 @@
</head>
<body class="@yield('body-class')">
@include('common.parts.skip-to-content')
@include('partials.notifications')
@include('common.header')

View File

@ -0,0 +1 @@
<a class="px-m py-s skip-to-content-link" href="#main-content">{{ trans('common.skip_to_main_content') }}</a>

View File

@ -5,7 +5,7 @@
<div class="container small py-xl">
<main class="card content-wrap auto-height">
<div class="body">
<div id="main-content" class="body">
<h3>{{ trans('errors.error_occurred') }}</h3>
<h5 class="mb-m">{{ $message ?? 'An unknown error occurred' }}</h5>
<p><a href="{{ url('/') }}" class="button outline">{{ trans('errors.return_home') }}</a></p>

View File

@ -8,7 +8,7 @@
@section('content')
<div class="flex-fill flex fill-height">
<div id="main-content" class="flex-fill flex fill-height">
<form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
{{ csrf_field() }}

View File

@ -4,7 +4,7 @@
<div class="flex-fill flex">
<div class="content flex">
<div class="scroll-body">
<div id="main-content" class="scroll-body">
@yield('body')
</div>
</div>

View File

@ -34,7 +34,7 @@
</div>
<div class="@yield('body-wrap-classes') tri-layout-middle">
<div class="tri-layout-middle-contents">
<div id="main-content" class="tri-layout-middle-contents">
@yield('body')
</div>
</div>