diff --git a/assets/js/docs-themes.js b/assets/js/docs-themes.js index 720517f77..31b224717 100644 --- a/assets/js/docs-themes.js +++ b/assets/js/docs-themes.js @@ -19,10 +19,9 @@ function switch_style ( css_title ) var i, link_tag ; for (i = 0, link_tag = document.getElementsByTagName("link") ; i < link_tag.length ; i++ ) { - if ((link_tag[i].rel.indexOf("stylesheet") != -1) && - link_tag[i].title) { + if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title.includes("theme")) { link_tag[i].disabled = true ; - if (link_tag[i].title == css_title) { + if (link_tag[i].title == css_title ) { link_tag[i].disabled = false ; } } diff --git a/assets/js/sidebar-toggle.js b/assets/js/sidebar-toggle.js new file mode 100644 index 000000000..fd494e0cc --- /dev/null +++ b/assets/js/sidebar-toggle.js @@ -0,0 +1,38 @@ +/* + Copied and pasted this script for CSS swaps w/ cookies from + http://www.thesitewizard.com/javascripts/change-style-sheets.shtml +*/ + +// *** TO BE CUSTOMISED *** +var sidebar_state_cookie_name = "influx-docs-sidebar-state" ; +var sidebar_state_duration = 30 ; +var style_domain = "docs.influxdata.com" ; + +// *** END OF CUSTOMISABLE SECTION *** +// You do not need to customise anything below this line + +function toggle_sidebar ( toggle_state ) +{ +// You may use this script on your site free of charge provided +// you do not remove this notice or the URL below. Script from +// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml + var i, link_tag ; + for (i = 0, link_tag = document.getElementsByTagName("link") ; + i < link_tag.length ; i++ ) { + if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title.includes("sidebar")) { + link_tag[i].disabled = true ; + if (link_tag[i].title == toggle_state ) { + link_tag[i].disabled = false ; + } + } + Cookies.set(sidebar_state_cookie_name, toggle_state); + } +} + +function set_sidebar_state() +{ + var toggle_state = Cookies.get(sidebar_state_cookie_name); + if (toggle_state !== undefined) { + toggle_sidebar(toggle_state); + } +} diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss index 7ec68f1d7..7ca289f6e 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/assets/styles/layouts/_layout-article.scss @@ -1,9 +1,7 @@ .article { - flex-grow: 1; background: $article-bg; - border-radius: $border-radius 0 0 0; + border-radius: $border-radius 0 0 $border-radius; padding: 2rem 4rem 3rem; - width: 75%; } .article--content{ @@ -23,7 +21,7 @@ font-weight: 300; font-style: italic; font-size: 2.65rem; - margin-bottom: 1em; + margin: .4em 0 1em; } h2 { font-size: 2rem; @@ -572,13 +570,3 @@ } } - -@include media(medium) { - .article { width: 100%; } -} - -@media (min-width: 801px) and (max-width: 1200px) { - .article { - width: 70%; - } -} diff --git a/assets/styles/layouts/_layout-content-wrapper.scss b/assets/styles/layouts/_layout-content-wrapper.scss new file mode 100644 index 000000000..31e896503 --- /dev/null +++ b/assets/styles/layouts/_layout-content-wrapper.scss @@ -0,0 +1,30 @@ +.content-wrapper { + flex-grow: 1; + width: 75%; + position: relative; + border-radius: $border-radius 0 0 $border-radius; + + .copyright { + padding: .5rem 1rem .5rem .5rem; + text-align: right; + font-size: .9rem; + color: rgba($article-text, .5); + } +} + + +//////////////////////////////////////////////////////////////////////////////// +///////////////////////////////// MEDIA QUERIES //////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + +@include media(medium) { + .content-wrapper { + width: 100%; + } +} + +@media (min-width: 801px) and (max-width: 1200px) { + .content-wrapper { + width: 70%; + } +} diff --git a/assets/styles/layouts/_layout-sidebar-toggle.scss b/assets/styles/layouts/_layout-sidebar-toggle.scss new file mode 100644 index 000000000..055ed89d0 --- /dev/null +++ b/assets/styles/layouts/_layout-sidebar-toggle.scss @@ -0,0 +1,85 @@ +$corner-radius: 10px; +$vertical-offset: -14px; + +.sidebar-toggle { + position: absolute; + display: block; + height: 35px; + top: 3.25rem; + z-index: 100; + &:hover { + cursor: pointer; + &:before, &:after { cursor: default; } + a { color: rgba($article-text, 1); } + } + + &:before, &:after { + display: block; + position: absolute; + width: $corner-radius; + height: $corner-radius; + } + &:before { + top: $vertical-offset; + } + &:after { + bottom: $vertical-offset; + transform: rotateX(180deg); + } + + & > a { + font-family: "icomoon"; + color: rgba($article-text, .5); + text-decoration: none; + } +} + + +.content-wrapper .sidebar-toggle { + display: none; + padding: .3rem .3rem .3rem .4rem; + width: 35px; + left: 0; + background-color: $body-bg; + border-radius: 0 $border-radius $border-radius 0; + &:before, &:after { + content: url('data:image/svg+xml;charset=UTF-8, + + + '); + left: 0; + } + &:before { transform: rotateY(180deg); } + &:after { transform: rotate(180deg); } + & > a { + font-size: 1.25rem; + } +} + +.sidebar .sidebar-toggle { + padding: .2rem; + width: 30px; + right: 0; + background-color: $article-bg; + border-radius: $border-radius 0 0 $border-radius; + &:before, &:after { + content: url('data:image/svg+xml;charset=UTF-8, + + + '); + right: 0; + } + & > a { + font-size: 1.5rem; + } +} + +//////////////////////////////////////////////////////////////////////////////// +///////////////////////////////// MEDIA QUERIES //////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + +@include media(medium) { + .sidebar-toggle{ + display: none; + } +} diff --git a/assets/styles/layouts/_layout-sidebar.scss b/assets/styles/layouts/_layout-sidebar.scss index 42af8f3a8..8c2dcd6a8 100644 --- a/assets/styles/layouts/_layout-sidebar.scss +++ b/assets/styles/layouts/_layout-sidebar.scss @@ -1,5 +1,6 @@ .sidebar { display: block; + position: relative; flex-grow: 1; padding: 0 1em; width: 25%; @@ -41,7 +42,7 @@ } } - .search-nav-toggle { + .search-and-nav-toggle { display: flex; width: 100%; margin-bottom: .7rem; diff --git a/assets/styles/layouts/_layout-topnav.scss b/assets/styles/layouts/_layout-topnav.scss index 07d866a58..1ca72c5b8 100644 --- a/assets/styles/layouts/_layout-topnav.scss +++ b/assets/styles/layouts/_layout-topnav.scss @@ -3,9 +3,6 @@ padding: .75rem .75rem .65rem; justify-content: space-between; - &--left { } - &--right { } - .influx-home { font-family: 'icomoon'; font-size: 1.9rem; @@ -51,6 +48,7 @@ border-radius: $border-radius; overflow: hidden; cursor: pointer; + transition: right .2s; .selected { padding: 0 1.5rem 0 .75rem; @@ -109,7 +107,7 @@ } } - .theme-switcher { + .theme-switcher, #search-btn { display: inline-block; padding: 0; font-size: 1.8rem; @@ -119,7 +117,7 @@ width: 30px; margin-top: 2px; border: none; - transition: color .2s; + transition: color .2s, opacity .2s; appearance: none; overflow: visible; &:focus { diff --git a/assets/styles/sidebar-closed.scss b/assets/styles/sidebar-closed.scss new file mode 100644 index 000000000..0352adc67 --- /dev/null +++ b/assets/styles/sidebar-closed.scss @@ -0,0 +1,61 @@ +// Sets CSS overides for when the sidebar is closed + +.sidebar { + width: 0; + overflow: hidden; + padding: 0; + transition: all .4s; + + .search-and-nav-toggle, + #nav-tree, + .sidebar-toggle { + white-space: nowrap; + opacity: 0; + transition: all .1s; + } +} + +.content-wrapper { + width: 100%; + .sidebar-toggle{ + display: block; + } +} + +.topnav { + #search-btn { + opacity: 1; + } + .version-selector { + right: 5.5rem; + } +} + +//////////////////////////////////////////////////////////////////////////////// +///////////////////////////////// MEDIA QUERIES //////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// + +@import "tools/media-queries"; + +@include media(medium) { + .sidebar { + width: 100%; + overflow: auto; + padding: 0 1rem; + } + .search-and-nav-toggle, #nav-tree { + opacity: 1 !important; + white-space: normal; + } + .topnav { + #search-btn { + opacity: 0; + } + .version-selector { + right: 3.5rem; + } + } + .content-wrapper .sidebar-toggle { + display: none; + } +} diff --git a/assets/styles/sidebar-open.scss b/assets/styles/sidebar-open.scss new file mode 100644 index 000000000..86fb3b214 --- /dev/null +++ b/assets/styles/sidebar-open.scss @@ -0,0 +1,15 @@ +// Default state of having the sidebar open. + +.sidebar { + transition: all .2s; + .search-and-nav-toggle, + #nav-tree { + opacity: 1; + transition: all .3s; + transition-delay: .1s; + } +} + +#search-btn { + opacity: 0; +} diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index 580232a5b..44099244c 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -13,5 +13,7 @@ "layouts/layout-global", "layouts/layout-topnav", "layouts/layout-sidebar", + "layouts/layout-sidebar-toggle", + "layouts/layout-content-wrapper", "layouts/layout-article", "layouts/syntax-highlighting"; diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index bd494120d..32fd70ae6 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -19,7 +19,7 @@ $g14-chromium: #C6CAD3; $g15-platinum: #D4D7DD; $g16-pearl: #E7E8EB; $g17-whisper: #EEEFF2; -$g18-cloud: #F6F6F8; +$g18-cloud: #F2F2F5; $g19-ghost: #FAFAFC; $g20-white: #ffffff; diff --git a/assets/styles/tools/_icomoon.scss b/assets/styles/tools/_icomoon.scss index fb5febeb6..0075aca62 100644 --- a/assets/styles/tools/_icomoon.scss +++ b/assets/styles/tools/_icomoon.scss @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?ppkm5'); - src: url('fonts/icomoon.eot?ppkm5#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?ppkm5') format('truetype'), - url('fonts/icomoon.woff?ppkm5') format('woff'), - url('fonts/icomoon.svg?ppkm5#icomoon') format('svg'); + src: url('fonts/icomoon.eot?o2njz5'); + src: url('fonts/icomoon.eot?o2njz5#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?o2njz5') format('truetype'), + url('fonts/icomoon.woff?o2njz5') format('woff'), + url('fonts/icomoon.svg?o2njz5#icomoon') format('svg'); font-weight: normal; font-style: normal; } @@ -66,9 +66,24 @@ .icon-check:before { content: "\e912"; } +.icon-chevron-down:before { + content: "\e917"; +} +.icon-chevron-left:before { + content: "\e918"; +} +.icon-chevron-right:before { + content: "\e919"; +} +.icon-chevron-up:before { + content: "\e91a"; +} .icon-heart1:before { content: "\e913"; } +.icon-menu:before { + content: "\e91b"; +} .icon-settings:before { content: "\e914"; } diff --git a/content/v2.0/_index.md b/content/v2.0/_index.md index fee3384b5..57a50f496 100644 --- a/content/v2.0/_index.md +++ b/content/v2.0/_index.md @@ -2,6 +2,7 @@ title: InfluxDB v2.0 seotitle: This is the SEO title for InfluxDB v2.0 description: placeholder +layout: version-landing menu: versions: name: v2.0 diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 09197a540..fa7e6f2b5 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -2,13 +2,10 @@
{{ partial "sidebar.html" . }} -
-
-

{{ .Title }}

- {{ partial "article/latest-version.html" . }} - {{ partial "article/enterprise.html" . }} - {{ .Content }} -
+
+
+ {{ partial "article.html" . }} +
© {{ now.Year }} InfluxData, Inc.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 09197a540..fa7e6f2b5 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,13 +2,10 @@
{{ partial "sidebar.html" . }} -
-
-

{{ .Title }}

- {{ partial "article/latest-version.html" . }} - {{ partial "article/enterprise.html" . }} - {{ .Content }} -
+
+
+ {{ partial "article.html" . }} +
© {{ now.Year }} InfluxData, Inc.
diff --git a/layouts/_default/version-landing.html b/layouts/_default/version-landing.html new file mode 100644 index 000000000..35d996e1c --- /dev/null +++ b/layouts/_default/version-landing.html @@ -0,0 +1,21 @@ +{{ partial "header.html" . }} + +
+ {{ partial "sidebar.html" . }} +
+
+ +
+
+

{{ $.Page.Title }}

+ Get Started + +
+
+ + {{ partial "article.html" . }} +
© {{ now.Year }} InfluxData, Inc.
+
+
+ +{{ partial "footer.html" . }} diff --git a/layouts/partials/article.html b/layouts/partials/article.html new file mode 100644 index 000000000..569ea7d5c --- /dev/null +++ b/layouts/partials/article.html @@ -0,0 +1,8 @@ +
+
+

{{ .Title }}

+ {{ partial "article/latest-version.html" . }} + {{ partial "article/enterprise.html" . }} + {{ .Content }} +
+
diff --git a/layouts/partials/header/javascript.html b/layouts/partials/header/javascript.html index 74199ed59..7d3a46392 100644 --- a/layouts/partials/header/javascript.html +++ b/layouts/partials/header/javascript.html @@ -1,7 +1,9 @@ {{ $jquery := resources.Get "js/jquery-3.3.1.min.js" }} {{ $cookies := resources.Get "js/js.cookie.js" }} {{ $themes := resources.Get "js/docs-themes.js" }} -{{ $headerjs := slice $jquery $cookies $themes | resources.Concat "js/header.bundle.js" }} +{{ $sidebar := resources.Get "js/sidebar-toggle.js" }} +{{ $headerjs := slice $jquery $cookies $themes $sidebar | resources.Concat "js/header.bundle.js" }} + diff --git a/layouts/partials/header/stylesheets.html b/layouts/partials/header/stylesheets.html index 9fb31a3bb..e668de9f8 100644 --- a/layouts/partials/header/stylesheets.html +++ b/layouts/partials/header/stylesheets.html @@ -1,5 +1,7 @@ {{ $cssOptionsDark := (dict "targetPath" "dark-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $cssOptionsLight := (dict "targetPath" "light-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }} +{{ $cssSidebarOpen := (dict "targetPath" "sidebar-open.css" "outputStyle" "compressed" "enableSourceMap" true) }} +{{ $cssSidebarClose := (dict "targetPath" "sidebar-closed.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $PostCSSOptions := (dict "use" "autoprefixer" "noMap" false) }} {{ $stylesDark := resources.Get "styles/styles-default.scss" | toCSS $cssOptionsDark | postCSS $PostCSSOptions | fingerprint }} @@ -7,3 +9,9 @@ {{ $stylesLight := resources.Get "styles/styles-light.scss" | toCSS $cssOptionsLight | postCSS $PostCSSOptions | fingerprint }} + +{{ $stylesSidebarOpen := resources.Get "styles/sidebar-open.scss" | toCSS $cssOptionsDark | postCSS $PostCSSOptions | fingerprint }} + + +{{ $stylesSidebarClosed := resources.Get "styles/sidebar-closed.scss" | toCSS $cssOptionsLight | postCSS $PostCSSOptions | fingerprint }} + diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 134fc750c..e35a13214 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,7 +1,10 @@ {{ $currentPage := . }} {{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }}