From 62a7d1afa2b3dd8d1d7dc7c75fb70875eaa590d7 Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 25 Aug 2022 17:27:50 -0500 Subject: [PATCH] Website: Update documentation page sidebars and calls to action. (#7388) * Website: Make docs table of contents not sticky * move docs sidebar CTA, update styles * website: updated docs cta graphic - updated docs cta graphic Co-authored-by: Mike Thomas Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com> --- .../assets/images/docs-cta-icon-47x38@2x.png | Bin 0 -> 2961 bytes .../images/logo-fleet-brandmark-28x28@2x.png | Bin 1553 -> 0 bytes .../js/pages/docs/basic-documentation.page.js | 12 ----- .../pages/docs/basic-documentation.less | 18 +++---- .../views/pages/docs/basic-documentation.ejs | 51 +++++++++--------- 5 files changed, 32 insertions(+), 49 deletions(-) create mode 100644 website/assets/images/docs-cta-icon-47x38@2x.png delete mode 100644 website/assets/images/logo-fleet-brandmark-28x28@2x.png diff --git a/website/assets/images/docs-cta-icon-47x38@2x.png b/website/assets/images/docs-cta-icon-47x38@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..079e17b5895f1e8e5ee688830c28e3d9a0d4d224 GIT binary patch literal 2961 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 DGA7p_ diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js index b892377262..97f3b064d7 100644 --- a/website/assets/js/pages/docs/basic-documentation.page.js +++ b/website/assets/js/pages/docs/basic-documentation.page.js @@ -251,7 +251,6 @@ parasails.registerPage('basic-documentation', { scrollSideNavigationWithHeader: function () { var rightNavBar = document.querySelector('div[purpose="right-sidebar"]'); - var leftNavBar = document.querySelector('div[purpose="left-sidebar"]'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if(rightNavBar) { if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) { @@ -264,17 +263,6 @@ parasails.registerPage('basic-documentation', { } } } - if(leftNavBar) { - if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) { - leftNavBar.classList.add('header-hidden', 'scrolled'); - } else { - if(scrollTop === 0) { - leftNavBar.classList.remove('header-hidden', 'scrolled'); - } else { - leftNavBar.classList.remove('header-hidden'); - } - } - } this.scrollDistance = scrollTop; } diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less index 319b0bcc1d..81f1b3ddc7 100644 --- a/website/assets/styles/pages/docs/basic-documentation.less +++ b/website/assets/styles/pages/docs/basic-documentation.less @@ -405,7 +405,6 @@ [purpose='demo-cta'] { display: flex; border: 1px solid #E3E3E3; - background: linear-gradient(270deg, #201E43 0%, #353D62 100%); box-shadow: 1px 2px 2px rgba(197, 199, 209, 0.2); border-radius: 6px; padding: 20px 16px; @@ -413,21 +412,21 @@ width: 100%; a { text-decoration: none; - color: #FFF; + color: @core-fleet-black; &:hover { - color: #FFF; + color: @core-fleet-black; } } p { font-weight: 700; font-size: 14px; - line-height: 24px; + line-height: 18px; } span { text-align: center; font-size: 14px; line-height: 19px; - color: #FFF; + color: @core-fleet-black; } } } @@ -679,23 +678,18 @@ max-height: calc(~'100vh - 140px'); } [purpose='left-sidebar'] { - position: sticky; - top: 118px; height: fit-content; - overflow-y: auto; + min-width: 216px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; - &:not(.scrolled) { - max-height: calc(~'100vh - 205px'); // Using a calculated max-height to allow the sidebars to be fully scrollable before the content is scrolled. - } } [purpose='right-sidebar'] { p { line-height: 21px; } - min-width: 216px; + min-width: 190px; position: sticky; top: 118px; height: fit-content; diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs index 85113533d4..f5d4a6f581 100644 --- a/website/views/pages/docs/basic-documentation.ejs +++ b/website/views/pages/docs/basic-documentation.ejs @@ -148,7 +148,7 @@