mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-17 00:22:24 -06:00
Scroll page instead of nested div, removed nested divs
This commit is contained in:
Silvio Giebl
parent
cf64965554
commit
73047a078f
@ -26,99 +26,95 @@ layout: table_wrappers
|
|||||||
</symbol>
|
</symbol>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="page-wrap">
|
<div class="side-bar">
|
||||||
<div class="side-bar">
|
<div class="site-header">
|
||||||
<div class="site-header">
|
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
|
||||||
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
|
<a href="#" id="menu-button" class="site-button">
|
||||||
<a href="#" id="menu-button" class="site-button">
|
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
|
||||||
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
|
|
||||||
{% include nav.html %}
|
|
||||||
</nav>
|
|
||||||
<footer class="site-footer">
|
|
||||||
This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<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" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
|
||||||
<svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#search"></use></svg>
|
|
||||||
</div>
|
|
||||||
<div id="search-results" class="search-results"></div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if site.aux_links %}
|
|
||||||
<nav aria-label="Auxiliary" class="aux-nav">
|
|
||||||
<ul class="aux-nav-list">
|
|
||||||
{% for link in site.aux_links %}
|
|
||||||
<li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div id="main-content-wrap" class="main-content-wrap">
|
|
||||||
{% unless page.url == "/" %}
|
|
||||||
{% if page.parent %}
|
|
||||||
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
|
|
||||||
<ol class="breadcrumb-nav-list">
|
|
||||||
{% if page.grand_parent %}
|
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
|
|
||||||
{% else %}
|
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
|
|
||||||
{% endif %}
|
|
||||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
{% endif %}
|
|
||||||
{% endunless %}
|
|
||||||
<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 viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
|
|
||||||
{% else %}
|
|
||||||
{{ content }}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if page.has_children == true and page.has_toc != false %}
|
|
||||||
<hr>
|
|
||||||
<h2 class="text-delta">Table of contents</h2>
|
|
||||||
{% assign children_list = site.pages | sort:"nav_order" %}
|
|
||||||
<ul>
|
|
||||||
{% for child in children_list %}
|
|
||||||
{% if child.parent == page.title and child.title != page.title %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if site.footer_content != nil %}
|
|
||||||
<hr>
|
|
||||||
<footer role="contentinfo">
|
|
||||||
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
|
|
||||||
</footer>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if site.search_enabled != false %}
|
|
||||||
<a href="#" id="search-button" class="search-button">
|
|
||||||
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#search"></use></svg>
|
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
</div>
|
||||||
|
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
|
||||||
|
{% include nav.html %}
|
||||||
|
</nav>
|
||||||
|
<footer class="site-footer">
|
||||||
|
This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
<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" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
||||||
|
<svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#search"></use></svg>
|
||||||
|
</div>
|
||||||
|
<div id="search-results" class="search-results"></div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.aux_links %}
|
||||||
|
<nav aria-label="Auxiliary" class="aux-nav">
|
||||||
|
<ul class="aux-nav-list">
|
||||||
|
{% for link in site.aux_links %}
|
||||||
|
<li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div id="main-content-wrap" class="main-content-wrap">
|
||||||
|
{% unless page.url == "/" %}
|
||||||
|
{% if page.parent %}
|
||||||
|
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
|
||||||
|
<ol class="breadcrumb-nav-list">
|
||||||
|
{% if page.grand_parent %}
|
||||||
|
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
||||||
|
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
{% endunless %}
|
||||||
|
<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 viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
|
||||||
|
{% else %}
|
||||||
|
{{ content }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.has_children == true and page.has_toc != false %}
|
||||||
|
<hr>
|
||||||
|
<h2 class="text-delta">Table of contents</h2>
|
||||||
|
{% assign children_list = site.pages | sort:"nav_order" %}
|
||||||
|
<ul>
|
||||||
|
{% for child in children_list %}
|
||||||
|
{% if child.parent == page.title and child.title != page.title %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if site.footer_content != nil %}
|
||||||
|
<hr>
|
||||||
|
<footer role="contentinfo">
|
||||||
|
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
|
||||||
|
</footer>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if site.search_enabled != false %}
|
||||||
|
<a href="#" id="search-button" class="search-button">
|
||||||
|
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#search"></use></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -2,19 +2,6 @@
|
|||||||
// The basic two column layout
|
// The basic two column layout
|
||||||
//
|
//
|
||||||
|
|
||||||
.page-wrap {
|
|
||||||
@include mq(md) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar {
|
.side-bar {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -23,7 +10,7 @@
|
|||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
width: $nav-width-md;
|
width: $nav-width-md;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -37,23 +24,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-wrap {
|
|
||||||
@include mq(md) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -306,16 +306,10 @@ function initSearch() {
|
|||||||
}
|
}
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
|
|
||||||
function pageFocus() {
|
|
||||||
var mainWrap = document.getElementById('main-wrap');
|
|
||||||
mainWrap.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Document ready
|
// Document ready
|
||||||
|
|
||||||
jtd.onReady(function(){
|
jtd.onReady(function(){
|
||||||
initNav();
|
initNav();
|
||||||
pageFocus();
|
|
||||||
{% if site.search_enabled != false -%}
|
{% if site.search_enabled != false -%}
|
||||||
initSearch();
|
initSearch();
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user