Skip to content

Commit b513ecd

Browse files
johndmulhausenjohndmulhausen
authored
Tabs-based organization (docker#1420)
* First pass of tabs-based organization * Improvements * Second pass at tabs org * Move tab highlighting to Liquid instead of JS * Adding forwarding links for in-product TOCs * Move to pre-rendered left-navs instead of post-load JS for TOC sync * Optimizations and nosync-ing the Reference section * Optimizations, fix Cloud YAML * Make a "Sample applications" node * Tabs CSS fixes and 12-factor reposition * Fix auto-complete left-padding * Fix auto-complete right-padding (for symmetry) * Fix for no left-nav on Compose file * Fix weird wrapping on smaller screens for tabs * reorganized d4mac, d4win per tabs structure, split out install guides Signed-off-by: Victoria Bialas <[email protected]> * Update reference urls to latest DDC version * Reintroduces changes ebe778b..9abc9e to TOC * Update allpagelinks.md * hid the on-page TOC's for d4mac d4win topics as needed Signed-off-by: Victoria Bialas <[email protected]> * Add a Hopscotch tour of the new navigation
1 parent 6392699 commit b513ecd

33 files changed

+3519
-1582
lines changed

‎_data/toc.yaml

+1,325-1,200
Large diffs are not rendered by default.

‎_includes/tree.html

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1 @@
1-
{% for item in tree %}{% if item.heading %}{% else %}{% if item.sectiontitle %}<li class="leaf menu-closed"><a href="javascript:void(0)" class="expand-menu "><span class="menu-icon" aria-hidden="true"></span>{{ item.sectiontitle }}</a>
2-
<ul class="nav-sub">
3-
{% assign tree = item.section %}{% include tree.html %}
4-
</ul>
5-
{% else %}
6-
<li class="leaf"><a href="{{ item.path }}" class="{% if item.path == page.url %}active currentPage{% endif %}">{{ item.title }}</a></li>{% endif %}{% endif %}{% endfor %}
1+
{% assign foundBranch="false" %}{% for item in tree %}{% if item.sectiontitle %}{% if foundBranch=="false" %}{% capture treeString %}{{ item.section | downcase }}{% endcapture %}{% capture pageURLString %}"{{ page.url }}"{% endcapture %}{% else %}{% assign treeString="" %}{% endif %}<li class="leaf {% if treeString contains pageURLString %}{% assign foundBranch="true"%}menu-open{% else %}menu-closed{% endif %}"><a href="javascript:void(0)" class="expand-menu "><span class="menu-icon" aria-hidden="true"></span>{{ item.sectiontitle }}</a><ul class="nav-sub">{% assign tree = item.section %}{% include tree.html %}</ul>{% else %}<li class="leaf"><a href="{{ item.path }}" class="{% if item.path == page.url and item.nosync != true %}active currentPage{% endif %}">{{ item.title }}</a></li>{% endif %}{% endfor %}

‎_includes/treebuilder.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% assign topicFound="false" %}
2+
{% for section in site.data.toc.horizontalnav %}
3+
{% assign activeCSS = "" %}
4+
{% if topicFound=="false" %}
5+
{% assign tree = site.data.toc[section.node] %}
6+
{% capture thisSection %}{% include tree.html %}{% endcapture %}
7+
{% if section.path == page.url or thisSection contains "active currentPage" %}
8+
{% capture leftnav %}{{ thisSection }}{% endcapture %}
9+
{% capture activeCSS %} class="active"{% endcapture %}
10+
{% assign topicFound="true" %}
11+
{% endif %}
12+
{% endif %}
13+
<li id="{{ section.node }}"{{ activeCSS }}><a href="{{ section.path }}">{{ section.title }}</a></li>
14+
{% endfor %}

‎_layouts/docs.html

+19-11
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
<link rel="stylesheet" href="/css/p2p.css">
7676
<link rel="stylesheet" href="/css/mobile_responsive.css">
7777
<link rel="stylesheet" href="/css/temporary.css">
78+
<link rel="stylesheet" href="/css/hopscotch.css">
7879
<link rel="stylesheet" href="/css/documentation.css">
7980
<script async="" src="/js/modernizr.min.js"></script>
8081
<meta class="foundation-data-attribute-namespace">
@@ -192,22 +193,27 @@
192193
</aside>
193194
<div class="dockercon16">
194195
<section class="title_section darkblue"> </section>
195-
<div class="">
196+
<div id="top-nav-container" class="col-xs-12" style="background-color: #254356">
197+
<!-- tabs -->
198+
<ul id="top-nav" class="tabs col-xs-12 col-sm-10 col-md-10">
199+
{% include treebuilder.html %}
200+
</ul>
201+
<div id="start-tour-container" class="hidden-xs col-sm-2 col-md-2"><div id="start-tour">Tour our new<br />navigation!</div></div>
202+
</div>
203+
<div class="" ng-non-bindable>
196204
<div class="container-fluid">
197205
<div class="row">
198206
<div class="col-xs-12 col-sm-3 col-md-2 col-xl-2 docsidebarnav_section">
199-
<div class="region region-hero-sub">
200-
{% if page.tree == false %}
201-
<ul class="nav-sub"><li class="leaf"><a href="/">Back to the index</a></li></ul>
202-
{% else %}
203-
<ul class="nav-sub">
204-
{% assign tree = site.data.toc.toc %}
205-
{% include tree.html %}
206-
</ul>
207-
{% endif %}
207+
<div class="region region-hero-sub"><ul id="left-nav" class="nav-sub">
208+
{% if page.tree == false %}
209+
<li class="leaf"><a href="/">Back to the index</a></li>
210+
{% else %}
211+
{{ leftnav }}
212+
{% endif %}
213+
</ul>
208214
</div>
209215
</div>
210-
<div class="col-xs-12 col-sm-9 col-md-8 col-xl-9">
216+
<div id="main-content" class="col-xs-12 col-sm-9 col-md-8 col-xl-9">
211217
<section class="section" id="DocumentationText">
212218
{% if page.title %}<h1>{{ page.title }}</h1>{% endif %}
213219
{% if page.advisory %}<blockquote style="border-left: 6px solid #FFD601; background: -webkit-gradient(linear, left top, left bottom, from(#FBFCFC), to(#EBEDEF));">{{ site.data.advisories.texts[page.advisory] | markdownify }}</blockquote>{% endif %}
@@ -409,6 +415,8 @@ <h6>Related Links</h6>
409415
<script async="" src="/js/menu.js"></script>
410416
<script async="" src="/js/app.js"></script>
411417
<script async="" src="/js/anchorlinks.js"></script>
418+
<script src="/js/hopscotch.js"></script>
419+
<script src="/js/my_first_tour.js"></script>
412420
</div>
413421
<div id="mktoStyleLoaded" style="display: none; border-top-color: rgb(18, 52, 86);"></div>
414422
<form class="ng-pristine ng-valid mktoForm mktoHasWidth mktoLayoutLeft" novalidate style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); visibility: hidden; position: absolute; top: -500px; left: -1000px; width: 1602px;">

‎allpagelinks.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
title: All Page Links
32
hide_from_sitemap: true
43
layout: null
54
---

‎css/documentation.css

+85-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,62 @@
11
/* FIXUP allcss.css */
22
/* @media screen and (max-width: 1199px) */
33

4+
/*
5+
*
6+
* Tabs ***********************************************************************
7+
*
8+
*/
9+
10+
.tabs {
11+
border-bottom: 0;
12+
padding: 0px;
13+
}
14+
15+
.tabs>li {
16+
float: left;
17+
list-style: none;
18+
padding: 10px 0px 0px 0px;
19+
}
20+
21+
.tabs>li>a {
22+
color: #fff;
23+
border-bottom: 4px solid #254356;
24+
line-height: 3;
25+
border-radius: 0;
26+
padding: 0 20px 0px 20px;
27+
float: left;
28+
opacity: .8;
29+
}
30+
31+
.tabs>li.active>a {
32+
color: #fff;
33+
border-bottom: 4px solid #fff;
34+
opacity: 1;
35+
-webkit-transition: all 0.2s ease;
36+
-moz-transition: all 0.2s ease;
37+
-o-transition: all 0.2s ease;
38+
transition: all 0.2s ease;
39+
font-weight: 500;
40+
}
41+
.tabs>li>a:hover {
42+
border-bottom: 4px solid #fff;
43+
opacity: 1;
44+
-webkit-transition: all 0.2s ease;
45+
-moz-transition: all 0.2s ease;
46+
-o-transition: all 0.2s ease;
47+
transition: all 0.2s ease;
48+
}
49+
50+
.tabs>li:hover {
51+
color: #fff;
52+
background-color: gray;
53+
opacity: 1;
54+
-webkit-transition: all 0.2s ease;
55+
-moz-transition: all 0.2s ease;
56+
-o-transition: all 0.2s ease;
57+
transition: all 0.2s ease;
58+
}
59+
460
.logo {
561
margin-top: 1px !important;
662
width: auto !important;
@@ -14,7 +70,7 @@
1470
{
1571
list-style-type: none;
1672
width: 400px;
17-
padding:0px;
73+
padding: 0px 10px 0px 10px;
1874
margin-bottom: 0px;
1975
}
2076
.autoCompleteResult {
@@ -462,3 +518,31 @@ img.with-border {
462518
color: #999;
463519
font-style: italic;
464520
}
521+
522+
#top-nav {
523+
float: left;
524+
}
525+
526+
#start-tour-container {
527+
padding-top: 10px;
528+
padding-bottom: 0;
529+
padding-right: 0;
530+
float: right;
531+
vertical-align: middle;
532+
text-align: center;
533+
}
534+
#start-tour {
535+
cursor: pointer;
536+
color: #fff;
537+
font-family: 'Geomanist', san-serif;
538+
font-size: 1em;
539+
line-height: 1.3;
540+
text-align: center;
541+
vertical-align: middle;
542+
width: 110px;
543+
float: right;
544+
}
545+
546+
#start-tour:hover {
547+
opacity: .8;
548+
}

0 commit comments

Comments
 (0)