From 721ca36d85a85d033f6e5da01ab9f7dbaf41428c Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 21 Jul 2019 16:09:29 +0200
Subject: [PATCH] Cleaned ids and classes
(cherry picked from commit 2b153ed074811e735aaa58d57a3fcdf7838e17f5)
---
_layouts/default.html | 18 +++++++++---------
_sass/content.scss | 2 +-
_sass/layout.scss | 20 ++++++++++----------
_sass/navigation.scss | 2 +-
_sass/search.scss | 2 +-
assets/js/just-the-docs.js | 18 +++++++++---------
6 files changed, 31 insertions(+), 31 deletions(-)
diff --git a/_layouts/default.html b/_layouts/default.html
index a8bc48c2..8bf647d5 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -12,25 +12,25 @@ layout: table_wrappers
<div class="side-bar">
<div class="site-header">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
- <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
+ <button id="site-nav-trigger" class="menu-button fs-3" data-text-toggle="Hide" type="button">Menu</button>
</div>
- <nav role="navigation" aria-label="Main navigation" class="navigation main-nav js-main-nav">
+ <nav role="navigation" aria-label="Main navigation" id="site-nav" class="site-nav">
{% include nav.html %}
</nav>
<footer class="site-footer">
<p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer>
</div>
- <div class="main-content-wrap js-main-content" tabindex="0">
- <div class="main-content">
- <div class="page-header js-page-header">
+ <div id="main-wrap" class="main-wrap" tabindex="0">
+ <div class="main">
+ <div id="main-header" class="main-header">
{% if site.search_enabled != false %}
<div class="search">
<div class="search-input-wrap">
- <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+ <input type="text" id="search-input" class="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>
</div>
- <div class="js-search-results search-results-wrap"></div>
+ <div id="search-results" class="search-results"></div>
</div>
{% endif %}
{% if site.aux_links != nil %}
@@ -41,7 +41,7 @@ layout: table_wrappers
</ul>
{% endif %}
</div>
- <div class="page">
+ <div class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
<nav class="breadcrumb-nav">
@@ -57,7 +57,7 @@ layout: table_wrappers
</nav>
{% endif %}
{% endunless %}
- <div id="main-content" class="page-content" role="main">
+ <div id="main-content" class="main-content" role="main">
{% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="<svg class=\"d-inline-block v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>" anchorClass="anchor-heading" %}
{% else %}
diff --git a/_sass/content.scss b/_sass/content.scss
index 0ed47fc7..f771939f 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -5,7 +5,7 @@
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
-.page-content {
+.main-content {
line-height: $content-line-height;
a {
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 4c214ea4..589f021e 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -37,7 +37,7 @@
}
}
-.main-content-wrap {
+.main-wrap {
@include mq(md) {
position: absolute;
top: 0;
@@ -48,9 +48,13 @@
overflow-x: hidden;
overflow-y: scroll;
}
+
+ &:focus {
+ outline: none;
+ }
}
-.main-content {
+.main {
@include mq(md) {
position: relative;
max-width: $content-width;
@@ -62,11 +66,7 @@
}
}
-.js-main-content:focus {
- outline: none;
-}
-
-.page {
+.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
@@ -77,7 +77,7 @@
}
}
-.page-header {
+.main-header {
@include container;
display: none;
padding-top: $gutter-spacing-sm;
@@ -101,7 +101,7 @@
}
}
-.navigation,
+.site-nav,
.site-header,
.site-footer {
@@ -112,7 +112,7 @@
}
}
-.navigation {
+.site-nav {
@include container;
@include mq(md) {
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index c7749043..26863506 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -68,7 +68,7 @@
// Small screen nav
-.main-nav {
+.site-nav {
display: none;
&.nav-open {
diff --git a/_sass/search.scss b/_sass/search.scss
index bef2df73..cf566809 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -68,7 +68,7 @@
order: 1;
}
-.search-results-wrap {
+.search-results {
position: absolute;
z-index: 100;
display: none;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index aadbf826..742b0d72 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -24,17 +24,17 @@ jtd.onReady = function(ready) {
// Show/hide mobile menu
function initNav() {
- const mainNav = document.querySelector('.js-main-nav');
- const pageHeader = document.querySelector('.js-page-header');
- const navTrigger = document.querySelector('.js-main-nav-trigger');
+ const siteNav = document.getElementById('site-nav');
+ const mainHeader = document.getElementById('main-header');
+ const navTrigger = document.getElementById('site-nav-trigger');
jtd.addEvent(navTrigger, 'click', function(e){
e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
- mainNav.classList.toggle('nav-open');
- pageHeader.classList.toggle('nav-open');
+ siteNav.classList.toggle('nav-open');
+ mainHeader.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
@@ -88,8 +88,8 @@ function initSearch() {
function searchResults(index, data) {
var index = index;
var docs = data;
- var searchInput = document.querySelector('.js-search-input');
- var searchResults = document.querySelector('.js-search-results');
+ var searchInput = document.getElementById('search-input');
+ var searchResults = document.getElementById('search-results');
function hideResults() {
searchResults.innerHTML = '';
@@ -275,8 +275,8 @@ function initSearch() {
}
function pageFocus() {
- var mainContent = document.querySelector('.js-main-content');
- mainContent.focus();
+ var mainWrap = document.getElementById('main-wrap');
+ mainWrap.focus();
}
// Document ready
--
GitLab