thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-02-21 06:57:46 -05:00
Code Issues Projects Releases Wiki Activity

Auto focus main content for keyboard scrolling

Browse Source
This commit is contained in:
Patrick Marsceill 2018-12-16 15:22:51 -05:00
parent eb0a6c328f
commit eaf1247911
No known key found for this signature in database
GPG Key ID: 286B93882D828F40
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_layouts/default.html
View File

@ -20,7 +20,7 @@
{% if site.search_enabled != nil %} {% if site.search_enabled != nil %}
<div class="search js-search"> <div class="search js-search">
<div class="search-input-wrap"> <div class="search-input-wrap">
<input type="text" class="js-search-input search-input" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off"> <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg> <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
</div> </div>
<div class="js-search-results search-results-wrap"></div> <div class="js-search-results search-results-wrap"></div>
@ -35,7 +35,7 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="main-content"> <div class="main-content js-main-content" tabindex="1">
{% unless page.url == "/" %} {% unless page.url == "/" %}
{% if page.parent %} {% if page.parent %}
<nav class="breadcrumb-nav"> <nav class="breadcrumb-nav">

4
_sass/layout.scss
View File

@ -74,6 +74,10 @@
} }
} }
.js-main-content:focus {
outline: none;
}
.page-header { .page-header {
background-color: $sidebar-color; background-color: $sidebar-color;

7
assets/js/just-the-docs.js
View File

@ -150,11 +150,18 @@ function initSearch() {
} }
} }
function pageFocus() {
var mainContent = document.querySelector('.js-main-content');
mainContent.focus();
console.log(mainContent)
}
// Document ready // Document ready
function ready(){ function ready(){
toggleNav(); toggleNav();
pageFocus();
if (typeof lunr !== 'undefined') { if (typeof lunr !== 'undefined') {
initSearch(); initSearch();
} }