From 7623cd5f0934ab42c21c2d96dfe3fb1010326c06 Mon Sep 17 00:00:00 2001
From: Scott Anderson <scott@influxdata.com>
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" . }}
<div class="page-wrapper">
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) }}
+
+<!-- Search placeholder -->
+{{ $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" }}
<aside class="sidebar">
<div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-closed');return false;"><a href="#"></a></div>
@@ -29,10 +45,10 @@
{{ $mainMenu := (index .Site.Menus (print $product (replaceRE "[v.]" "_" $currentVersion))) }}
{{ $refMenu := (index .Site.Menus (print $product (replaceRE "[v.]" "_" $currentVersion) "_ref")) }}
- <!-- Main Section -->
+ <!-- Product Main Navigation -->
{{ partial "sidebar/nested-menu" (dict "page" $currentPage "menu" $mainMenu) . }}
- <!-- Reference Section -->
+ <!-- Product Reference Navigation -->
{{ if gt (len $refMenu) 0 }}
<h4 class="reference">Reference</h4>
{{ partial "sidebar/nested-menu" (dict "page" $currentPage "menu" $refMenu) . }}
diff --git a/layouts/partials/topnav.html b/layouts/partials/topnav.html
index 4321556a4..6996f79ee 100644
--- a/layouts/partials/topnav.html
+++ b/layouts/partials/topnav.html
@@ -5,7 +5,10 @@
<a class="docs-home" href="/{{ $.Site.Data.versions.stable_version }}">InfluxDB Docs</a>
</div>
<div class="topnav--right">
- {{ partial "topnav/version-selector.html" . }}
+ <div class="selector-dropdowns">
+ {{ partial "topnav/product-selector.html" . }}
+ {{ partial "topnav/version-selector.html" . }}
+ </div>
<button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
<button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
<button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
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 }}
+
+<div class="dropdown">
+ {{ if (eq $product nil) }}
+ <p class="selected">Select a product</p>
+ {{ else if and (eq $product "influxdb") (in $currentVersion "v2")}}
+ <p class="selected">{{ (index .Site.Data.products $product).altname }}</p>
+ {{ else }}
+ <p class="selected">{{ (index .Site.Data.products $product).name }}</p>
+ {{ end }}
+ <ul class="item-list">
+ {{ range sort .Site.Data.products "list_order" "desc" }}
+ <li>
+ <a href="/{{ .namespace }}/{{ .latest }}" {{ if eq .namespace $product }}class="active"{{ end }}>{{ cond (ne .altname nil) .altname .name }}</a>
+ </li>
+ {{ end }}
+ </ul>
+</div>
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 }}
+<div class="dropdown">
+ <p class="selected">{{ $currentVersion }}</p>
+ <ul class="item-list">
+ <li><a href="https://github.com/influxdata/docs.influxdata.com" class="legacy" target="_blank">older</a></li>
+ {{ range (index .Site.Data.products $product).versions }}
+ <li>
+ <a href="/{{ $product }}/{{ . }}" {{ if eq . $currentVersion }}class="active"{{ end }}>{{ . }}</a>
+ </li>
+ {{ end }}
+ </ul>
+</div>
+{{ 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 -}}