Files
docker-docs/_layouts/docs.html
Vladimir Jimenez f466f24742 Fix sidebar scrolling (#2860)
* Simplify both left and right sidebars

- Rewrite the sidebars to use the same CSS class instead of having two
  very similar classes. This involves removing all affix related
  attributes and functionality from the sidebars and replaced them with
  `position: sticky`.
- The table of content elements should not be floated
- Removed unused CSS rules related to the sidebars
- Remove JavaScript used to resize the sidebars

* Improve the mobile menu to be fixed

- Simply JS used to hide/display the navigation bar on mobile viewports
- The mobile menu should be fixed so it can be viewable from the bottom
  of the page. Before this change, you would have to scroll up to see
  the menu that `position: absolute`

* Fix disappearing top navbar on homepage

- Change the calculation of the affix offset for the navbar on the home
  page to ensure the navbar never leaves the viewport. This change also
  takes into account the change of how the sidebars' offsets are used

* Fix auto scrolling on overflow

* Add polyfill for 'position: sticky' on IE

* Fix hamburger menu at incorrect breakpoint

* Fix left nav hidden after expanding from mobile

If you expand and collapse the left nav while on mobile and expand to a
desktop view, the left nav would be hidden; this has been fixed

* Unify navbar on homepage with rest of website
2017-04-21 11:04:19 -05:00

223 lines
12 KiB
HTML

<!-- Page generated {{ site.time }} -->
<!-- relative link basehrefs -->
{% if page.path contains "index.md" %} {% capture basehref %}{{ page.url }}{% endcapture %} {% else %} {% assign crumbs = page.url | split: '/' %} {% assign stoppingpoint = crumbs | size | minus: 1 %} {% for crumb in crumbs %} {% if forloop.index == stoppingpoint
%} {% capture basehref %}{{basehref}}{{ crumb }}/{% endcapture %} {% break %} {% else %} {% capture basehref %}{{basehref}}{{ crumb }}/{% endcapture %} {% endif %} {% endfor %} {% endif %}
<!-- Logic for feedback CC'ing -->
{% if page.assignee %}{% assign assignee=page.assignee%}{% else %}{% assign assignee=page.defaultassignee%}{% endif %}
<!-- Logic for 'edit this button' -->
{% assign edit_url = "https://github.com/docker/docker.github.io/edit/master/" | append: page.path %} {% for entry in site.data.not_edited_here.overrides %} {% if page.url contains entry.path %} {% if entry.source %}{% assign edit_url = entry.source %}{%
else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %}
<!-- End of logic for 'edit this button' -->
<!DOCTYPE html>
<html lang="en">
<head>
<base href="{{ basehref }}" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@charset "UTF-8";
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
display: none !important;
}
ng\:form {
display: block;
}
</style>
<script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=k6svi4faiclrdpi5eax4n23dzy"></script>
<script type="text/javascript">
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
analytics.load("IWj9D0UpZHZdZUZX9jl98PcpBFWBnBMy");
analytics.page();
}}();
</script>
{% if site.GH_ENV == "gh_pages" %}
<meta name="robots" content="noindex">{% endif %}
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="/favicons/docs@2x.ico" sizes="129x128">
<meta name="msapplication-TileImage" content="/favicons/docs@2x.ico">
<link rel="apple-touch-icon" type="image/x-icon" href="/favicons/docs@2x.ico" sizes="129x128">
<meta property="og:image" content="/favicons/docs@2x.ico"/>
<!-- metadata -->
<meta property="og:type" content="website"/>
<meta property="og:updated_time" content="{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}"/>
<meta property="og:image" itemprop="image primaryImageOfPage" content="/images/docs@2x.png"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:domain" content="docs.docker.com"/>
<meta name="twitter:site" content="@docker_docs"/>
<meta name="twitter:url" content="https://twitter.com/docker_docs"/>
<meta name="twitter:title" itemprop="title name" content="{{ page.title }}"/>
<meta name="twitter:description" property="og:description" itemprop="description" content="{{ content | strip_html | truncatewords: 30}}" />
<meta name="twitter:image:src" content="/images/docs@2x.png"/>
<meta name="twitter:image:alt" content="Docker Documentation"/>
<meta property="article:published_time" content="{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}docker, docker open source, docker platform, distributed applications, microservices, containers, docker containers, docker software, docker virtualization{% endif %}">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link id="pygments" rel="stylesheet" href="/css/pygments/perldoc.css">
<link id="pagestyle" rel="stylesheet" href="/css/style.css">
<!-- Go get "Open Sans" font from Google -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- temp css will be removed -->
<link rel="stylesheet" href="/css/temp.css"> {% seo %} {% if page.hide_from_sitemap %}
<meta name="robots" content="noindex" />{% endif %}
</head>
<body ng-app="Docker" ng-controller="DockerController" class="colums">
<header>
{% if page.landing == true %}{% include global-header.html %}{% endif %} {% if page.landing != true %}{% include header.html %}{% endif %}
</header>
<div class="{% if page.landing == true %}wrapper{%else%}wrapper right-open{% endif %}">
<div class="container-fluid">
<div class="row">
<div class="col-body">
<main class="col-content {% if page.landing == true %}main-content{%else%}content{% endif %}">
<section class="section">
{% if page.url == '/' %}
<h1>{{ site.name }}</h1>
{% else %}
{% if page.title %}
<h1>{{ page.title }}</h1>{% endif %} {% if page.advisory %}
<blockquote>{{ site.data.advisories.texts[page.advisory] | markdownify }}</blockquote>{% endif %}{% endif %} {% unless page.tree == false %}{% include read_time.html %}{% endunless %}{{ content }}
<!-- tags -->
{% unless page.notags == true %}
{% assign keywords = page.keywords | split:"," %}
{% for keyword in keywords %}{% assign strippedKeyword = keyword | strip %}
{% capture keywordlist %}{{ keywordlist }}<a href="/glossary/?term={{strippedKeyword}}">{{strippedKeyword}}</a>{% unless forloop.last %}, {% endunless %}{% endcapture %}
{% endfor %}
{% if keywordlist.size > 0 %}<span class="glyphicon glyphicon-tags" style="padding-right: 10px"></span><span style="vertical-align: 2px">{{ keywordlist }}</span>{% endif %}
{% endunless %}
<!-- link corrections -->
<script language="JavaScript">
var x = document.links.length;
var baseHref = document.getElementsByTagName('base')[0].href
for (i = 0; i < x; i++) {
var munged = false;
var thisHREF = document.links[i].href;
var originalURL = "{{ page.url }}";
if (thisHREF.indexOf(baseHref + "#") > -1) {
// hash fix
//console.log('BEFORE: base:',baseHref,'thisHREF:',thisHREF,'originalURL:',originalURL);
thisHREF = originalURL + thisHREF.replace(baseHref, "");
//console.log('AFTER: base:',baseHref,'thisHREF:',thisHREF,'originalURL:',originalURL);
}
if ((thisHREF.indexOf(window.location.hostname) > -1 || thisHREF.indexOf('http') == -1) && document.links[i].className.indexOf("nomunge") < 0) {
munged = true;
thisHREF = thisHREF.replace(".md", "/").replace("/index/", "/");
document.links[i].setAttribute('href', thisHREF);
}
}
</script>
{% if page.noratings != true %}
<div style="color:#b9c2cc; text-align: center; margin-top: 150px">
<div id="pd_rating_holder_8453675"></div>
<script type="text/javascript">
PDRTJS_settings_8453675 = {
"id": "8453675",
"unique_id": "{{ page.path }}",
"title": "{{ page.title }}",
"permalink": "https://github.com/docker/docker.github.io/blob/master/{{ page.path }}"
};
(function(d, c, j) {
if (!document.getElementById(j)) {
var pd = d.createElement(c),
s;
pd.id = j;
pd.src = ('https:' == document.location.protocol) ? 'https://polldaddy.com/js/rating/rating.js' : 'http://i0.poll.fm/js/rating/rating.js';
s = document.getElementsByTagName(c)[0];
s.parentNode.insertBefore(pd, s);
}
}(document, 'script', 'pd-rating-js'));
</script>
</div>
{% endif %}
</section>
</main>
<nav class="col-nav">
<div id="sidebar-nav" class="sidebar hidden-sm hidden-xs">
{% include side-menu.html %}
</div>
</nav>
<div class="col-toc">
<div class="sidebar hidden-xs hidden-sm">
<div class="toc-nav">
<div class="feedback-links">
<ul>
{% if edit_url != "" %}
<li><a href="{{ edit_url }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this page</a></li>{% endif %}
<li><a href="https://github.com/docker/docker.github.io/issues/new?assignee={% if page.assignee %}{{ page.assignee }}{% else %}{{ page.defaultassignee }}{% endif %}&body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }}), CC @{{ assignee }}"
class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
<li><a href="https://www.docker.com/docker-support-services"><i class="fa fa-question" aria-hidden="true"></i> Get support</a></li>
<!-- toggle mode -->
<!-- <li>
<div class="toggle-mode">
<div class="icon">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<div class="toggle-switch">
<label class="switch">
<input type="checkbox" id="switch-style">
<div class="slider round"></div>
</label>
</div>
<div class="icon">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</div>
</div>
</li> -->
</ul>
</div>
{% unless page.notoc %} {% assign my_min = page.toc_min | default: site.toc_min | default: 2 %} {% assign my_max = page.toc_max | default: site.toc_max | default: 3 %} {% assign my_name = page.url | default: "unnamed" %}
<div id="side-toc-title">On this page:</div>
{% include toc_pure_liquid.html html=content sanitize=true class="inline_toc" id="my_toc" toc_min=my_min toc_max=my_max page_name=my_name %}
</div>
{% endunless %}
</div>
</div>
</div>
</div>
</div>
</div>
{% if page.path == "404.md" %}
<script type="text/javascript">
var path = window.location.pathname.replace("#","");
var ghIssueQueryString = "https://github.com/docker/docker.github.io/issues/new?" + "title=404%20at%20" + path + "&body=URL%3A%20" + path;
document.getElementsByClassName("nomunge")[1].onclick = function() {
document.getElementsByClassName("nomunge")[1].href = ghIssueQueryString;
return true;
};
</script>
{% endif %}
<footer class="footer">
{% include footer.html %}
</footer>
<link rel="stylesheet" href="/css/github.css">
{% if page.highlightjs == true %}
<script src="/js/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
{% endif %}
<!-- <script src="/js/anchorlinks.js"></script> -->
<script defer src="/js/menu.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/stickyfill.min.js"></script>
<script defer src="/js/docs.js"></script>
</body>
</html>