mirror of https://github.com/docker/docs.git
Add breadcrumbs
Some works still to be done: - styling may need some tweaking - if we don't have breadcrumbs for a page, positioning of other elements should be adjusted Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn
parent
713afca1d9
commit
7c184a1bd7
|
|
@ -0,0 +1,107 @@
|
|||
{%- comment -%}
|
||||
Yet-another hacky way to do things with Liquid
|
||||
|
||||
This include constructs breadcrumbs for the page; breadcrumbs are based on the
|
||||
page's location in the TOC (_data/toc.yaml). To get the "parent" TOC entries
|
||||
for the current page, we:
|
||||
|
||||
- iterate through each of the main sections / categories in the TOC (home, guides,
|
||||
product manuals, reference, samples)
|
||||
- in each section, we iterate throught pages and sections. "sections" do not
|
||||
have URLs ("path") of their own, but can contain pages and sub-sections.
|
||||
Liquid doesn't allow us to "recursively" iterate through these, so we added
|
||||
code for each nested level (currently accounting for pages to be nested up to
|
||||
4 levels deep)
|
||||
- If the item we're checking is a page (i.e., has a "path" property), and the
|
||||
"path" matches the current page, then we found our "breadcrumb path"; in this
|
||||
case we store the parent elements into variables (levelX_title, levelX_url).
|
||||
Liquid doesn't seem to like storing the whole struct into a variable (we can
|
||||
*store* it in a variable, but the "path" property ends up empty). We also have
|
||||
to "assign" inside the level-block; likely because variables assigned in the
|
||||
previous block gets out of scope.
|
||||
- Because (as mentioned) "sections" themselves currently do not have their own
|
||||
URL, we don't have a real "parent" URL, so we're using the _first_ page at
|
||||
each level as the "closest match". In some cases, a section does not contain
|
||||
pages (only subsections); in those cases, our breadcrumbs will contain "titles"
|
||||
for parent locations, but no link. (This is something we need to fix: make
|
||||
sure that each section has a landing-page, and possibly add a "path" field
|
||||
to sections (containing the landing page of the section).
|
||||
{%- endcomment -%}
|
||||
{%- for section in site.data.toc.horizontalnav -%}
|
||||
{%- for level1 in site.data.toc[section.node] -%}
|
||||
{%- if level1.path == page.url -%}
|
||||
{%- assign found = "true" -%}
|
||||
{%- assign section_title = section.title -%}
|
||||
{%- assign section_url = section.path -%}
|
||||
{%- assign level1_title = level1.title -%}
|
||||
{%- assign level1_url = level1.path -%}
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- for level2 in level1.section -%}
|
||||
{%- if level2.path == page.url -%}
|
||||
{%- assign found = "true" -%}
|
||||
{%- assign section_title = section.title -%}
|
||||
{%- assign section_url = section.path -%}
|
||||
{%- assign level1_title = level1.sectiontitle -%}
|
||||
{%- assign level1_url = level1.section[0].path -%}
|
||||
{%- assign level2_title = level2.title -%}
|
||||
{%- assign level2_url = level2.path -%}
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- for level3 in level2.section -%}
|
||||
{%- if level3.path == page.url -%}
|
||||
{%- assign found = "true" -%}
|
||||
{%- assign section_title = section.title -%}
|
||||
{%- assign section_url = section.path -%}
|
||||
{%- assign level1_title = level1.sectiontitle -%}
|
||||
{%- assign level1_url = level1.section[0].path -%}
|
||||
{%- assign level2_title = level2.sectiontitle -%}
|
||||
{%- assign level2_url = level2.section[0].path -%}
|
||||
{%- assign level3_title = level3.title -%}
|
||||
{%- assign level3_url = level3.path -%}
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- for level4 in level3.section -%}
|
||||
{%- if level4.path == page.url -%}
|
||||
{%- assign found = "true" -%}
|
||||
{%- assign section_title = section.title -%}
|
||||
{%- assign section_url = section.path -%}
|
||||
{%- assign level1_title = level1.sectiontitle -%}
|
||||
{%- assign level1_url = level1.section[0].path -%}
|
||||
{%- assign level2_title = level2.sectiontitle -%}
|
||||
{%- assign level2_url = level2.section[0].path -%}
|
||||
{%- assign level3_title = level3.sectiontitle -%}
|
||||
{%- assign level3_url = level3.section[0].path -%}
|
||||
{%- assign level4_title = level4.title -%}
|
||||
{%- assign level4_url = level4.path -%}
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
{%- comment -%}
|
||||
Some section's overview page are not in the TOC. If we didn't find a matching
|
||||
page in the TOC so far, use the section itself for the breadcrumb.
|
||||
{%- endcomment -%}
|
||||
{%- if section.path == page.url -%}
|
||||
{%- assign found = "true" -%}
|
||||
{%- assign section_title = section.title -%}
|
||||
{%- assign section_url = section.path -%}
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- if found == "true" -%}
|
||||
<div class="row hidden-sm hidden-xs">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/" title="Docker docs homepage"><i class="fa fa-home"></i></a></li>
|
||||
<li><a href="{{ section_url }}">{{ section_title }}</a></li>
|
||||
{%- if level1_title -%}<li><a {%- if level1_url %} href="{{ level1_url }}"{%- endif -%}>{{ level1_title }}</a></li>{%- endif -%}
|
||||
{%- if level2_title -%}<li><a {%- if level2_url %} href="{{ level2_url }}"{%- endif -%}>{{ level2_title }}</a></li>{%- endif -%}
|
||||
{%- if level3_title -%}<li><a {%- if level3_url %} href="{{ level3_url }}"{%- endif -%}>{{ level3_title }}</a></li>{%- endif -%}
|
||||
{%- if level4_title -%}<li><a {%- if level4_url %} href="{{ level4_url }}"{%- endif -%}>{{ level4_title }}</a></li>{%- endif -%}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
</div>
|
||||
<div class="navbar-collapse" aria-expanded="false" style="height: 1px;">
|
||||
{% include navigation.html %}
|
||||
{%- include breadcrumbs.html -%}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Code formatting *************************************************************
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -56,7 +56,11 @@
|
|||
}
|
||||
|
||||
.col-content {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
padding: $top-navigation-height 20px 40px 40px;
|
||||
max-width: 1024px;
|
||||
min-width: 300px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.col-nav,
|
||||
|
|
@ -75,21 +79,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 80px 20px 40px 40px;
|
||||
max-width: 1024px;
|
||||
min-width: 300px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
section.section {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* sidebar *********************************************************************
|
||||
*/
|
||||
|
|
@ -116,11 +109,11 @@ section.section {
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 55px;
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 55px);
|
||||
padding-top: 20px;
|
||||
position: sticky;
|
||||
top: $top-navigation-height;
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - #{$top-navigation-height});
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,22 @@
|
|||
.nav-secondary {
|
||||
background-color: $bg-secondary;
|
||||
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Breadcrumbs ****************************************************************
|
||||
*/
|
||||
.breadcrumb {
|
||||
background-color: $bg-sidebar-active;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 22px; // left-align with logo
|
||||
border-bottom: 0.1px solid rgba($primary-links, .5);
|
||||
|
||||
a:not([href]) {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* NAV SIDEBAR *****************************************************************
|
||||
|
|
@ -53,7 +66,7 @@
|
|||
}
|
||||
|
||||
@include lg-width {
|
||||
padding: 0;
|
||||
padding: 0 0 0 7px; // left-padding to align with logo
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +87,7 @@
|
|||
|
||||
.nav-sidebar ul li a.active,
|
||||
.nav-sidebar.nav>li>a:focus {
|
||||
background: #F3F4F4;
|
||||
background: $bg-sidebar-active;
|
||||
border-left: 4px solid $primary-links;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,10 @@ body.night {
|
|||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
background-color: $bg-sidebar-night-active;
|
||||
border-bottom: 0.1px solid $primary-links;
|
||||
}
|
||||
.sidebar,
|
||||
.col-nav {
|
||||
background-color: $bg-sidebar-night;
|
||||
|
|
@ -54,7 +58,7 @@ body.night {
|
|||
.nav-sidebar ul li a.active,
|
||||
.nav-sidebar.nav>li>a:focus,
|
||||
.toc-nav li a.active {
|
||||
background: #0a151a;
|
||||
background: $bg-sidebar-night-active;
|
||||
border-left: 4px solid $primary-links;
|
||||
}
|
||||
.tabs li.active a {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ $font: "Open Sans", sans-serif;
|
|||
$body-text-size: 14px;
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$top-navigation-height: 92px; // top navigation height is: nav (55px) + breadcrumbs (37px)
|
||||
|
||||
/*
|
||||
* standard mode
|
||||
|
|
@ -21,6 +22,7 @@ $bg-body-landing: hsl(206, 14%, 99%);
|
|||
$bg-header: hsl(206, 85%, 54%);
|
||||
$bg-secondary: hsl(206, 85%, 54%);
|
||||
$bg-sidebar: hsl(206, 14%, 99%);
|
||||
$bg-sidebar-active: hsl(206, 33%, 97%);
|
||||
$bg-footer: hsl(206, 0%, 100%);
|
||||
$bg-footer-landing: hsl(214, 100%, 20%);
|
||||
|
||||
|
|
@ -49,6 +51,7 @@ $bg-body-landing-night: hsl(203, 90%, 10%);
|
|||
$bg-header-night: hsl(203, 40%, 10%);
|
||||
$bg-secondary-night: hsl(203, 40%, 10%);
|
||||
$bg-sidebar-night: hsl(203, 40%, 10%);
|
||||
$bg-sidebar-night-active: hsl(203, 40%, 7%);
|
||||
$bg-footer-night: hsl(203, 0%, 0%);
|
||||
$bg-footer-landing-night: hsl(214, 100%, 20%);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue