From 306db565b386783404075366d40852c4813184fe Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Fri, 11 Jan 2019 10:21:33 -0700 Subject: [PATCH] added collapsable left nav styles and js --- assets/js/docs-themes.js | 5 +- assets/js/sidebar-toggle.js | 38 +++++++ assets/styles/layouts/_layout-article.scss | 2 +- .../layouts/_layout-content-wrapper.scss | 1 + .../layouts/_layout-sidebar-toggle.scss | 94 ++++++++++++++++++ assets/styles/layouts/_layout-sidebar.scss | 3 +- assets/styles/layouts/_layout-topnav.scss | 8 +- assets/styles/sidebar-closed.scss | 61 ++++++++++++ assets/styles/sidebar-open.scss | 15 +++ assets/styles/styles-default.scss | 1 + assets/styles/tools/_color-palette.scss | 2 +- assets/styles/tools/_icomoon.scss | 25 ++++- layouts/_default/section.html | 1 + layouts/_default/single.html | 1 + layouts/_default/version-landing.html | 5 +- layouts/partials/header/javascript.html | 4 +- layouts/partials/header/stylesheets.html | 8 ++ layouts/partials/sidebar.html | 5 +- layouts/partials/topnav.html | 1 + static/fonts/icomoon.eot | Bin 9456 -> 9948 bytes static/fonts/icomoon.svg | 5 + static/fonts/icomoon.ttf | Bin 9292 -> 9784 bytes static/fonts/icomoon.woff | Bin 9368 -> 9860 bytes 23 files changed, 265 insertions(+), 20 deletions(-) create mode 100644 assets/js/sidebar-toggle.js create mode 100644 assets/styles/layouts/_layout-sidebar-toggle.scss create mode 100644 assets/styles/sidebar-closed.scss create mode 100644 assets/styles/sidebar-open.scss 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 036da5e0c..7ca289f6e 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/assets/styles/layouts/_layout-article.scss @@ -21,7 +21,7 @@ font-weight: 300; font-style: italic; font-size: 2.65rem; - margin-bottom: 1em; + margin: .4em 0 1em; } h2 { font-size: 2rem; diff --git a/assets/styles/layouts/_layout-content-wrapper.scss b/assets/styles/layouts/_layout-content-wrapper.scss index e20192458..31e896503 100644 --- a/assets/styles/layouts/_layout-content-wrapper.scss +++ b/assets/styles/layouts/_layout-content-wrapper.scss @@ -1,6 +1,7 @@ .content-wrapper { flex-grow: 1; width: 75%; + position: relative; border-radius: $border-radius 0 0 $border-radius; .copyright { diff --git a/assets/styles/layouts/_layout-sidebar-toggle.scss b/assets/styles/layouts/_layout-sidebar-toggle.scss new file mode 100644 index 000000000..b9492d5f1 --- /dev/null +++ b/assets/styles/layouts/_layout-sidebar-toggle.scss @@ -0,0 +1,94 @@ +$corner-radius: 8px; + +.sidebar-toggle { + position: absolute; + display: block; + height: 35px; + top: 3.25rem; + z-index: 100; + border-radius: $border-radius 0 0 $border-radius; + &:hover { + cursor: pointer; + &:before, &:after { cursor: default; } + a { color: rgba($article-text, 1); } + } + + &:before, &:after { + content: ""; + display: block; + position: absolute; + width: $corner-radius; + height: $corner-radius; + } + &:before { top: ($corner-radius * -1); } + &:after { bottom: ($corner-radius * -1); } + + + & > a { + font-family: "icomoon"; + color: rgba($article-text, .5); + text-decoration: none; + &:before, &:after { + content: ""; + display: block; + position: absolute; + width: ($corner-radius * 2); + height: ($corner-radius * 2); + border-radius: 50%; + z-index: 1; + } + &:before { top: ($corner-radius * -2); } + &:after { bottom: ($corner-radius * -2); } + &:hover { + &:before, &:after { cursor: default; } + } + } +} + + +.content-wrapper .sidebar-toggle { + display: none; + padding: .3rem .3rem .3rem .4rem; + width: 35px; + left: 0; + background-color: $body-bg; + &:before, &:after { + background: $body-bg; + left: 0; + } + & > a { + font-size: 1.25rem; + &:before, &:after { + left: 0; + background: $article-bg; + } + } +} + +.sidebar .sidebar-toggle { + padding: .2rem; + width: 30px; + right: 0; + background-color: $article-bg; + &:before, &:after { + background: $article-bg; + right: 0; + } + & > a { + font-size: 1.5rem; + &:before, &:after { + right: 0; + background: $body-bg; + } + } +} + +//////////////////////////////////////////////////////////////////////////////// +///////////////////////////////// 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 fa7324ebd..44099244c 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -13,6 +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..3caa81c9a 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: #F3F3F7; $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/layouts/_default/section.html b/layouts/_default/section.html index db4525cb9..fa7e6f2b5 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -3,6 +3,7 @@
{{ partial "sidebar.html" . }}
+
{{ partial "article.html" . }}
© {{ now.Year }} InfluxData, Inc.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index db4525cb9..fa7e6f2b5 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,6 +3,7 @@
{{ partial "sidebar.html" . }}
+
{{ partial "article.html" . }}
© {{ now.Year }} InfluxData, Inc.
diff --git a/layouts/_default/version-landing.html b/layouts/_default/version-landing.html index d0980b896..35d996e1c 100644 --- a/layouts/_default/version-landing.html +++ b/layouts/_default/version-landing.html @@ -3,7 +3,8 @@
{{ partial "sidebar.html" . }}
- +
+

{{ $.Page.Title }}

@@ -12,7 +13,7 @@
- {{ partial "article.html" . }} + {{ partial "article.html" . }}
© {{ now.Year }} InfluxData, Inc.
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) }}