mirror of https://github.com/docker/docs.git
handle archive feature toggling with css
Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
This commit is contained in:
Jérémie Drouet
parent
99ec97f9fb
commit
20ff61b942
|
|
@ -1,4 +1,4 @@
|
|||
<div class="btn-group" style="visibility: hidden">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{% for item in site.data.docsarchive.archives %}{% if item.current == true %}Docker {{ item.name }} (current) {% endif %} {% endfor %}<span class="caret"></span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
{% endunless %}
|
||||
{% if page.noratings != true %}
|
||||
<div id="ratings-div"
|
||||
style="color:#b9c2cc; text-align: center; margin-top: 150px; visibility: hidden">
|
||||
style="color:#b9c2cc; text-align: center; margin-top: 150px;">
|
||||
<div id="pd_rating_holder_8453675"></div>
|
||||
<script type="text/javascript">
|
||||
PDRTJS_settings_8453675 = {
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<div class="feedback-links">
|
||||
<ul>
|
||||
{% if edit_url != "" %}
|
||||
<li style="visibility: hidden"><a href="{{ edit_url }}"><i
|
||||
<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?body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})"
|
||||
|
|
@ -194,7 +194,6 @@
|
|||
<script>
|
||||
// Default to assuming this is an archive and hiding some stuff
|
||||
// See js/archive.js and js/docs.js for logic relating to this
|
||||
var isArchive = true;
|
||||
var dockerVersion = 'v{{ site.docker_ce_version }}';
|
||||
// In archives, we need to know the page root and we get it from JEKYLL_ENV in the jekyll build command
|
||||
var jekyllEnv = '{{ jekyll.environment }}';
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@
|
|||
<script>
|
||||
// Default to assuming this is an archive and hiding some stuff
|
||||
// See js/archive.js and js/docs.js for logic relating to this
|
||||
var isArchive = true;
|
||||
var dockerVersion = 'v{{ site.docker_ce_version }}';
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<img src="/images/docker-icon.svg" alt="Docker Docs" title="Docker Docs">
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-form" id="search-div" style="visibility: hidden">
|
||||
<div class="search-form" id="search-div">
|
||||
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
|
||||
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
|
||||
<div id="autocompleteContainer">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
#ratings-div,
|
||||
.ctrl-right .btn-group,
|
||||
.feedback-links li:first-of-type,
|
||||
.search-form {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.not-archive {
|
||||
#ratings-div,
|
||||
.ctrl-right .btn-group,
|
||||
.feedback-links li:first-of-type,
|
||||
.search-form {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
# Docker Documentation Theme
|
||||
---
|
||||
|
||||
@import "archive";
|
||||
@import "breakpoint";
|
||||
@import "variables";
|
||||
@import "night-mode";
|
||||
|
|
|
|||
|
|
@ -6,28 +6,45 @@ layout: null
|
|||
if (window.navigator.onLine) {
|
||||
var suppressButterBar = false;
|
||||
/* This JSON file contains a current list of all docs versions of Docker */
|
||||
$.getJSON("/js/archives.json", function(result){
|
||||
var outerDivStart = '<div id="archive-butterbar"><div class="container"><div style="text-align: center"><span id="archive-list">This is <b><a href="https://docs.docker.com/docsarchive/" style="color: #254356; text-decoration: underline !important">archived documentation</a></b> for Docker ' + dockerVersion + '. Go to the <a style="color: #254356; text-decoration: underline !important" href="https://docs.docker.com/">latest docs</a> or a different version: </span>' +
|
||||
'<span style="z-index: 1001" class="dropdown">';
|
||||
var listStart = '<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
|
||||
var listEnd = '</ul>';
|
||||
var outerDivEnd = '</span></div></div></div>';
|
||||
$.getJSON("/js/archives.json", function (result) {
|
||||
var outerDivStart =
|
||||
'<div id="archive-butterbar"><div class="container"><div style="text-align: center"><span id="archive-list">This is <b><a href="https://docs.docker.com/docsarchive/" style="color: #254356; text-decoration: underline !important">archived documentation</a></b> for Docker ' +
|
||||
dockerVersion +
|
||||
'. Go to the <a style="color: #254356; text-decoration: underline !important" href="https://docs.docker.com/">latest docs</a> or a different version: </span>' +
|
||||
'<span style="z-index: 1001" class="dropdown">';
|
||||
var listStart =
|
||||
'<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
|
||||
var listEnd = "</ul>";
|
||||
var outerDivEnd = "</span></div></div></div>";
|
||||
var buttonCode = null;
|
||||
var listItems = new Array();
|
||||
$.each(result, function(i, field){
|
||||
if ( field.name == dockerVersion && field.current ) {
|
||||
$.each(result, function (i, field) {
|
||||
if (field.name == dockerVersion && field.current) {
|
||||
// We are the current version so we don't need a butterbar
|
||||
suppressButterBar = true;
|
||||
} else {
|
||||
var prettyName = 'Docker ' + field.name.replace("v", "");
|
||||
var prettyName = "Docker " + field.name.replace("v", "");
|
||||
// If this archive has current = true, and we don't already have a button
|
||||
if ( field.current && buttonCode == null ) {
|
||||
if (field.current && buttonCode == null) {
|
||||
// Get the button code
|
||||
buttonCode = '<button id="archive-menu" data-toggle="dropdown" class="btn dropdown-toggle" style="border: 1px solid #254356; background-color: #fff; color: #254356;">' + prettyName + ' (current) <span class="caret"></span></button>';
|
||||
buttonCode =
|
||||
'<button id="archive-menu" data-toggle="dropdown" class="btn dropdown-toggle" style="border: 1px solid #254356; background-color: #fff; color: #254356;">' +
|
||||
prettyName +
|
||||
' (current) <span class="caret"></span></button>';
|
||||
// The link is different for the current release
|
||||
listItems.push('<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/">' + prettyName + '</a></li>');
|
||||
listItems.push(
|
||||
'<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/">' +
|
||||
prettyName +
|
||||
"</a></li>"
|
||||
);
|
||||
} else {
|
||||
listItems.push('<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/' + field.name + '/">' + prettyName + '</a></li>');
|
||||
listItems.push(
|
||||
'<li role="presentation"><a role="menuitem" tabindex="-1" href="https://docs.docker.com/' +
|
||||
field.name +
|
||||
'/">' +
|
||||
prettyName +
|
||||
"</a></li>"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -36,19 +53,27 @@ if (window.navigator.onLine) {
|
|||
// Also set the isArchive variable to true if it's an archive. It defaults
|
||||
// to true, set in _layouts/docs.html. We default to true because it looks
|
||||
// better in CSS to show stuff than to hide stuff onLoad.
|
||||
if ( suppressButterBar == false ) {
|
||||
$( 'body' ).prepend(outerDivStart + buttonCode + listStart + listItems.join("") + listEnd + outerDivEnd);
|
||||
isArchive = true;
|
||||
if (suppressButterBar == false) {
|
||||
$("body").prepend(
|
||||
outerDivStart +
|
||||
buttonCode +
|
||||
listStart +
|
||||
listItems.join("") +
|
||||
listEnd +
|
||||
outerDivEnd
|
||||
);
|
||||
$("body").addClass("archive");
|
||||
// If the butterbar exists, deal with positioning it
|
||||
// Depends on some logic in _layout/docs.html
|
||||
$(document).scroll(function() {
|
||||
if ( $( 'nav' ).hasClass( 'affix' ) ) {
|
||||
$('#archive-butterbar').addClass('fixed').removeClass('top');
|
||||
$(document).scroll(function () {
|
||||
if ($("nav").hasClass("affix")) {
|
||||
$("#archive-butterbar").addClass("fixed").removeClass("top");
|
||||
} else {
|
||||
$('#archive-butterbar').addClass('top').removeClass('fixed');
|
||||
$("#archive-butterbar").addClass("top").removeClass("fixed");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
isArchive = false;
|
||||
} });
|
||||
$("body").addClass("not-archive");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
13
js/docs.js
13
js/docs.js
|
|
@ -337,17 +337,4 @@ window.onload = function () {
|
|||
var group = $(this).attr("data-group");
|
||||
$('.nav-tabs > li > a[data-group="' + group + '"]').tab("show");
|
||||
});
|
||||
|
||||
// isArchive is set by logic in archive.js
|
||||
if (isArchive === false) {
|
||||
// Hide elements that are not appropriate for archives
|
||||
// PollDaddy
|
||||
$("#ratings-div").css("visibility", "visible");
|
||||
// Archive drop-down
|
||||
$(".ctrl-right .btn-group").css("visibility", "visible");
|
||||
// Search
|
||||
$(".search-form").css("visibility", "visible");
|
||||
// Page edit link
|
||||
$(".feedback-links li").first().css("visibility", "visible");
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue