diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html new file mode 100644 index 0000000000..f0a1dffb8f --- /dev/null +++ b/_includes/breadcrumbs.html @@ -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" -%} + +{%- endif -%} diff --git a/_includes/header.html b/_includes/header.html index 506a2af352..99f6f80775 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,6 +7,7 @@ diff --git a/_scss/_content.scss b/_scss/_content.scss index 7c89f952e0..c8af42d2e9 100755 --- a/_scss/_content.scss +++ b/_scss/_content.scss @@ -10,6 +10,12 @@ } } +.content { + ul { + margin-top: 10px; + } +} + /* * Code formatting ************************************************************* */ diff --git a/_scss/_layout.scss b/_scss/_layout.scss index 679919546a..729ca2f4cf 100755 --- a/_scss/_layout.scss +++ b/_scss/_layout.scss @@ -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; } diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss index 82c06a30a5..c1f76d07b1 100755 --- a/_scss/_navigation.scss +++ b/_scss/_navigation.scss @@ -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; } diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss index 904963f8d8..b1453f1b2f 100755 --- a/_scss/_night-mode.scss +++ b/_scss/_night-mode.scss @@ -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 { diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 6c662aa626..5f3babc946 100755 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -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%);