From 267c4a31871bc1a5c9967c181c39b5cfc362176b Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 30 Jul 2020 15:25:10 -0600 Subject: [PATCH] added product selector, updated search placeholder --- assets/js/content-interactions.js | 1 + assets/js/version-selector.js | 6 ++--- assets/styles/layouts/_top-nav.scss | 20 +++++++++++----- assets/styles/sidebar-closed.scss | 4 ++-- assets/styles/sidebar-open.scss | 1 + data/products.yml | 23 ++++++++++++++---- layouts/_default/section.html | 2 +- layouts/partials/sidebar.html | 24 +++++++++++++++---- layouts/partials/topnav.html | 5 +++- layouts/partials/topnav/product-selector.html | 20 ++++++++++++++++ layouts/partials/topnav/version-selector.html | 18 ++++++++++++++ layouts/shortcodes/cloud-link.html | 2 +- 12 files changed, 103 insertions(+), 23 deletions(-) create mode 100644 layouts/partials/topnav/product-selector.html create mode 100644 layouts/partials/topnav/version-selector.html diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js index 498fc68c6..0c2b6cd49 100644 --- a/assets/js/content-interactions.js +++ b/assets/js/content-interactions.js @@ -88,6 +88,7 @@ $(".truncate-toggle").click(function(e) { }) ////////////////////////////// Expand Accordians /////////////////////////////// + $('.expand-label').click(function() { $(this).children('.expand-toggle').toggleClass('open') $(this).next('.expand-content').slideToggle(200) diff --git a/assets/js/version-selector.js b/assets/js/version-selector.js index 6d3e8d464..5269a3031 100644 --- a/assets/js/version-selector.js +++ b/assets/js/version-selector.js @@ -1,11 +1,11 @@ // Expand the menu on click -$(".version-selector").click(function () { +$(".dropdown").click(function () { $(this).toggleClass("open") }) // Close the version dropdown by clicking anywhere else $(document).click(function(e) { - if ( $(e.target).closest('.version-selector').length === 0 ) { - $(".version-selector").removeClass("open"); + if ( $(e.target).closest('.dropdown').length === 0 ) { + $(".dropdown").removeClass("open"); } }); diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss index 4ea4a5b81..6784f969e 100644 --- a/assets/styles/layouts/_top-nav.scss +++ b/assets/styles/layouts/_top-nav.scss @@ -35,19 +35,27 @@ } } - .version-selector { + .selector-dropdowns { + display: flex; + position: absolute; + z-index: 100; + right: 5.5rem; + transition: right .2s; + } + + .dropdown { display: inline-block; - position: absolute; - z-index: 100; - right: 5.5rem; + position: relative; + align-self: flex-start; + margin-left: .5rem; color: $g20-white; height: 2rem; @include gradient($version-selector-gradient); + background-attachment: local; font-weight: $medium; border-radius: $radius; overflow: hidden; cursor: pointer; - transition: right .2s; .selected { padding: 0 1.75rem 0 .75rem; @@ -70,7 +78,7 @@ } } - ul.version-list { + ul.item-list { padding: 0; margin: 0; list-style: none; diff --git a/assets/styles/sidebar-closed.scss b/assets/styles/sidebar-closed.scss index 11cf562d0..1e4223c51 100644 --- a/assets/styles/sidebar-closed.scss +++ b/assets/styles/sidebar-closed.scss @@ -26,7 +26,7 @@ #search-btn { opacity: 1; } - .version-selector { + .selector-dropdowns { right: 7.5rem; } } @@ -51,7 +51,7 @@ #search-btn { opacity: 0; } - .version-selector { + .selector-dropdowns { right: 3.5rem; } } diff --git a/assets/styles/sidebar-open.scss b/assets/styles/sidebar-open.scss index 86fb3b214..922914c2d 100644 --- a/assets/styles/sidebar-open.scss +++ b/assets/styles/sidebar-open.scss @@ -12,4 +12,5 @@ #search-btn { opacity: 0; + display: none; } diff --git a/data/products.yml b/data/products.yml index 3505577ab..df4e5d3cf 100644 --- a/data/products.yml +++ b/data/products.yml @@ -1,7 +1,12 @@ influxdb: name: InfluxDB + altname: InfluxDB Cloud & OSS + namespace: influxdb + list_order: 1 versions: [v1.3, v1.4, v1.5, v1.6, v1.7, v1.8, v2.0] - stable: v2.0 + latest: v2.0 + + # Used in cloud-name and cloud-link shortcodes cloud: name: "InfluxDB Cloud 2.0" shortname: "InfluxDB Cloud" @@ -9,20 +14,28 @@ influxdb: telegraf: name: Telegraf + namespace: telegraf + list_order: 2 versions: [v1.9, v1.10, v1.11, v1.12, v1.13, v1.14, v1.15] - stable: v1.15 + latest: v1.15 chronograf: name: Chronograf + namespace: chronograf + list_order: 3 versions: [v1.6, v1.7, v1.8] - stable: v1.8 + latest: v1.8 kapacitor: name: Kapacitor + namespace: kapacitor + list_order: 4 versions: [v1.4, v1.5] - stable: v1.5 + latest: v1.5 enterprise_influxdb: name: "InfluxDB Enterprise" + namespace: enterprise_influxdb + list_order: 5 versions: [v1.3, v1.4, v1.5, v1.6, v1.7, v1.8] - stable: v1.8 + latest: v1.8 diff --git a/layouts/_default/section.html b/layouts/_default/section.html index d1a451781..3d220b47a 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -1,4 +1,4 @@ -{{ partial "header.html" . }}\ +{{ partial "header.html" . }} {{ partial "topnav.html" . }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 5984a7572..009efe703 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,9 +1,25 @@ {{ $currentPage := . }} {{ $productPathData := findRE "[^/]+.*?" .RelPermalink }} {{ $product := index $productPathData 0 }} -{{ $productName := (index .Site.Data.products $product).name }} {{ $currentVersion := index $productPathData 1 }} -{{ $searchPlaceholder := cond (eq $product "influxdb") "InfluxDB 2.0 OSS, Cloud, & Flux" (print "Search " $productName " " $currentVersion) }} + + +{{ $scratch := newScratch }} +{{ $scratch.Set "searchPlaceholder" "Search"}} + +{{ if and (eq $currentVersion nil) (eq (len (findRE `v[1-2]\.` $currentVersion nil)) 0) }} + {{ $scratch.Set "searchPlaceholder" "Search the docs" }} +{{ else if (eq $currentVersion nil) }} + {{ $scratch.Set "searchPlaceholder" (print "Search " (index .Site.Data.products $product).name) }} +{{ else if (and (eq $product "influxdb") (or (eq $currentVersion "v1.7") (eq $currentVersion "v1.8")) ) }} + {{ $scratch.Set "searchPlaceholder" (print (index .Site.Data.products $product).name " " $currentVersion " & Flux") }} +{{ else if (and (eq $product "influxdb") (in $currentVersion "v2") )}} + {{ $scratch.Set "searchPlaceholder" (print "InfluxDB Cloud, OSS, & Flux") }} +{{ else }} + {{ $scratch.Set "searchPlaceholder" (print "Search " (index .Site.Data.products $product).name " " $currentVersion) }} +{{ end }} + +{{ $searchPlaceholder := $scratch.Get "searchPlaceholder" }}
- {{ partial "topnav/version-selector.html" . }} +
+ {{ partial "topnav/product-selector.html" . }} + {{ partial "topnav/version-selector.html" . }} +
diff --git a/layouts/partials/topnav/product-selector.html b/layouts/partials/topnav/product-selector.html new file mode 100644 index 000000000..440979fe1 --- /dev/null +++ b/layouts/partials/topnav/product-selector.html @@ -0,0 +1,20 @@ +{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }} +{{ $product := index $productPathData 0 }} +{{ $currentVersion := index $productPathData 1 }} + +
+ {{ if (eq $product nil) }} +

Select a product

+ {{ else if and (eq $product "influxdb") (in $currentVersion "v2")}} +

{{ (index .Site.Data.products $product).altname }}

+ {{ else }} +

{{ (index .Site.Data.products $product).name }}

+ {{ end }} + +
diff --git a/layouts/partials/topnav/version-selector.html b/layouts/partials/topnav/version-selector.html new file mode 100644 index 000000000..63cb2766e --- /dev/null +++ b/layouts/partials/topnav/version-selector.html @@ -0,0 +1,18 @@ +{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }} +{{ $product := index $productPathData 0 }} +{{ $currentVersion := index $productPathData 1 }} + +{{ if or (eq $product nil) (eq $currentVersion nil) }} +{{ else }} +
+

{{ $currentVersion }}

+
    +
  • older
    • + {{ range (index .Site.Data.products $product).versions }} +
  • + {{ . }} +
    • + {{ end }} +
+
+{{ end }} diff --git a/layouts/shortcodes/cloud-link.html b/layouts/shortcodes/cloud-link.html index 169068948..59bd2fda3 100644 --- a/layouts/shortcodes/cloud-link.html +++ b/layouts/shortcodes/cloud-link.html @@ -1 +1 @@ -{{- .Site.Data.products.cloud.link -}} +{{- .Site.Data.products.influxdb.cloud.link -}}