From c402b72355e9e095bfaa2adae8b1fd93712848b5 Mon Sep 17 00:00:00 2001 From: Pilar <47372639+pilimartinez@users.noreply.github.com> Date: Tue, 10 Oct 2023 09:49:26 -0300 Subject: [PATCH] feat: add ToC on the guides section (#914) * feat: add toc on the guides section * fix: adjust responsive padding [sc-17693] * fix: add container to avoid larger content [sc-17693] * fix: add fixed sidebar [sc-17693] * fix: scroll on toc [sc-17693] * fix: remove comment [sc-17693] --------- Co-authored-by: Stefan Judis --- site/layouts/guides/single.html | 18 +++- src/js/docs.js | 55 +++++++------ src/js/guides.js | 19 +++++ src/scss/_guides.scss | 142 ++++++++++++++++++++++++++++++++ 4 files changed, 204 insertions(+), 30 deletions(-) create mode 100644 src/js/guides.js diff --git a/site/layouts/guides/single.html b/site/layouts/guides/single.html index 07d0d90f4..f3be41146 100644 --- a/site/layouts/guides/single.html +++ b/site/layouts/guides/single.html @@ -1,17 +1,27 @@ {{ define "main" }} -
-
-
+
+
+
Checkly Guides

{{.Title}}

+
+
On this page
+ {{ .Page.TableOfContents }} +
{{ if .Description }}

{{.Description}}

{{ end }} {{.Content}}
+ {{ partial "start-for-free-row" . }}
- {{ partial "start-for-free-row" . }} +
{{end}} diff --git a/src/js/docs.js b/src/js/docs.js index 35455caed..880263c80 100644 --- a/src/js/docs.js +++ b/src/js/docs.js @@ -5,11 +5,11 @@ $(document).ready(() => { const docsMenuTitleClass = '.docs-menu-title' - var docsMenuHeader = $(docsMenuTitleClass) + const docsMenuHeader = $(docsMenuTitleClass) docsMenuHeader.click(function () { - var id = $(this).attr('id') - var docMenuId = '#docs-menu-' + id + const id = $(this).attr('id') + const docMenuId = '#docs-menu-' + id if ($(this).attr('class') === 'docs-menu-title') { $(this).addClass('active') $(docMenuId).addClass('menu-display') @@ -82,28 +82,31 @@ $(document).on('keydown', function (e) { * Sidemenu fixed position after some scroll-up */ -var sideMenu = $('#sideMenu') +const sideMenu = $('#sideMenu') +const tocMenu = $('#tocMenu') +let sideMenuDistance + if (sideMenu.length) { - var sideMenuDistance = sideMenu.offset().top - 10 + sideMenuDistance = sideMenu.offset().top - 10 +} else { sideMenuDistance = tocMenu.offset().top - 10 } - $(window).on('scroll', function () { - if ($(window).scrollTop() >= sideMenuDistance) { - $('#sideMenu').css({ - position: 'fixed', - top: '0px' - }) - $('#tocMenu').css({ - position: 'fixed', - top: '30px' - }) - } else { - $('#sideMenu').css({ - position: 'relative' - }) - $('#tocMenu').css({ - position: 'relative', - top: '0' - }) - } - }) -} +$(window).on('scroll', function () { + if ($(window).scrollTop() >= sideMenuDistance) { + $('#sideMenu').css({ + position: 'fixed', + top: '0px' + }) + $('#tocMenu').css({ + position: 'fixed', + top: '30px' + }) + } else { + $('#sideMenu').css({ + position: 'relative' + }) + $('#tocMenu').css({ + position: 'relative', + top: '0' + }) + } +}) diff --git a/src/js/guides.js b/src/js/guides.js new file mode 100644 index 000000000..c458fd077 --- /dev/null +++ b/src/js/guides.js @@ -0,0 +1,19 @@ +/** + * Docs TOC Sidebar + */ + +const sideMenuDistance = $('#tocMenu').offset().top - 10 + +$(window).on('scroll', function () { + if ($(window).scrollTop() >= sideMenuDistance) { + $('#tocMenu').css({ + position: 'fixed', + top: '30px' + }) + } else { + $('#tocMenu').css({ + position: 'relative', + top: '0' + }) + } +}) diff --git a/src/scss/_guides.scss b/src/scss/_guides.scss index 918849313..6fbcfc2c7 100644 --- a/src/scss/_guides.scss +++ b/src/scss/_guides.scss @@ -97,7 +97,9 @@ } } .guides { + $toc-width: 14rem; margin-top: 50px; + max-width: 90rem; &__label { width: 150px; height: 30px; @@ -122,6 +124,15 @@ line-height: 1.6; margin-bottom: 23px; } + aside nav ul { + padding: 0; + margin: 0; + list-style: none; + font-size: 14px; + } + .mobile-toc-button { + display: none; + } .markdown { h2 { font-size: 32px; @@ -165,4 +176,135 @@ .free-trial-section { padding-top: 100px; } + + @include media-breakpoint-down(md) { + .guides-toc { + display: none; + } + .guides-toc-mobile { + display: block; + } + &__title { + font-size: 32px; + } + nav#TableOfContents { + ul { + border-left: 2px solid $blue; + padding-left: .5rem; + list-style: none; + } + + li > ul { + display: none; + } + } + &-page { + padding: 0px !important; + } + } + &-toc { + position: relative; + font-size: .875rem; + margin-right: auto; + width: 232px; + padding-top: 8rem; + flex: 0 0 $toc-width; + + nav { + width: $toc-width; + padding: 1rem 0 1rem 0; + bottom: 0; + overflow-x: hidden; + overflow-y: auto + } + + nav#TableOfContents { + ul { + border-left: 2px solid $blue; + padding-left: .5rem; + + ul { + padding-left: 0.75rem; + } + + li { + a { + color: $blue; + display: block; + padding-block: 5px; + } + } + } + } + + nav ul ul { + padding-left: 1rem; + border-left: none !important; + } + + &-header { + color: $gray-dark; + font-weight: 600; + text-transform: uppercase; + } + &-mobile { + display: none; + .learn-toc-header { + top: 0; + position: relative; + padding-top: 0; + } + } + } + &-page { + min-width: 20rem; + flex-grow: 1; + padding: 1rem 0; + margin-left: 0; + margin-right: 0; + + .markdown { + padding-right: 30px; + + .breadcrumb { + background: $white; + padding: 0; + + a { + color: $gray; + } + } + + .mobile-toc-button { + display: none; + } + + .search { + margin-bottom: 30px; + } + } + + .form-inline { + width: 100%; + position: relative; + + span { + width: 100%; + max-width: 2000px; + height: 100%; + } + img { + position: absolute; + top: 11px; + left: 10px; + } + input { + width: 100%; + height: 100%; + background: none; + border: 1px solid $gray-light; + padding-left: 30px; + } + } + } }