From 8117631926a281c424a5d1b6bc05b9ad26bbb2d4 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 5 Mar 2025 18:14:26 -0600 Subject: [PATCH] Website: Update CTAs (#26874) Closes: https://github.com/fleetdm/confidential/issues/9801 Changes: - Updated the handbook's sidebar CTA to scroll with the page - Updated the swag CTA in the docs to scroll with the page. - Updated the CTA at the bottom of osquery table schema pages --- .../js/pages/docs/basic-documentation.page.js | 7 ++ .../js/pages/handbook/basic-handbook.page.js | 13 +++- .../pages/docs/basic-documentation.less | 10 ++- .../styles/pages/handbook/basic-handbook.less | 75 +++++++++++-------- .../styles/pages/osquery-table-details.less | 10 +-- .../views/pages/docs/basic-documentation.ejs | 24 +++--- .../views/pages/handbook/basic-handbook.ejs | 18 ++++- website/views/pages/osquery-table-details.ejs | 9 +-- 8 files changed, 109 insertions(+), 57 deletions(-) diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js index 1d8e1b8791..5554acac36 100644 --- a/website/assets/js/pages/docs/basic-documentation.page.js +++ b/website/assets/js/pages/docs/basic-documentation.page.js @@ -285,6 +285,7 @@ parasails.registerPage('basic-documentation', { handleScrollingInDocumentation: function () { let rightNavBar = document.querySelector('div[purpose="right-sidebar"]'); + let swagCta = document.querySelector('div[purpose="swag-cta"]'); let backToTopButton = document.querySelector('div[purpose="back-to-top-button"]'); let scrollTop = window.pageYOffset; let windowHeight = window.innerHeight; @@ -292,9 +293,15 @@ parasails.registerPage('basic-documentation', { if (rightNavBar) { if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { rightNavBar.classList.add('header-hidden'); + if (swagCta) { + swagCta.classList.add('header-hidden'); + } this.lastScrollTop = scrollTop; } else if(scrollTop < this.lastScrollTop - 60) { rightNavBar.classList.remove('header-hidden'); + if (swagCta) { + swagCta.classList.remove('header-hidden'); + } this.lastScrollTop = scrollTop; } } diff --git a/website/assets/js/pages/handbook/basic-handbook.page.js b/website/assets/js/pages/handbook/basic-handbook.page.js index 92cfc759ef..821bd32914 100644 --- a/website/assets/js/pages/handbook/basic-handbook.page.js +++ b/website/assets/js/pages/handbook/basic-handbook.page.js @@ -154,7 +154,18 @@ parasails.registerPage('basic-handbook', { }, handleScrollingInHandbook: function () { let backToTopButton = document.querySelector('div[purpose="back-to-top-button"]'); + let sidebarCta = document.querySelector('div[purpose="sidebar-cta"]'); + let windowHeight = window.innerHeight; let scrollTop = window.pageYOffset; + if (sidebarCta) { + if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { + sidebarCta.classList.add('header-hidden'); + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { + sidebarCta.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; + } + } if (backToTopButton) { if(scrollTop > 2500) { backToTopButton.classList.add('show'); @@ -179,6 +190,6 @@ parasails.registerPage('basic-handbook', { left: 0, behavior: 'smooth', }); - } + }, } }); diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less index 546a3b2f77..055aa8b8cd 100644 --- a/website/assets/styles/pages/docs/basic-documentation.less +++ b/website/assets/styles/pages/docs/basic-documentation.less @@ -360,7 +360,9 @@ padding: 20px; margin-top: 8px; color: @core-fleet-black; - width: 100%; + width: 200px; + position: sticky; + top: 104px; a { text-decoration: none; color: @core-fleet-black; @@ -983,6 +985,12 @@ transition-duration: 500ms; } + [purpose='swag-cta'] { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + + } [purpose='right-sidebar'] { p { line-height: 21px; diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less index e76b35b676..c60ad8d8ae 100644 --- a/website/assets/styles/pages/handbook/basic-handbook.less +++ b/website/assets/styles/pages/handbook/basic-handbook.less @@ -181,38 +181,44 @@ margin-left: -2px; } } - [purpose='sidebar-cta'] { - margin-top: 24px; - display: flex; - width: 200px; - padding: 16px; - align-items: center; - border-radius: 8px; - border: 1px solid #E2E4EA; - background: #FFF; - font-size: 14px; - line-height: 150%; - color: @core-fleet-black; - p { - line-height: 120%; - margin-bottom: 0px; - font-weight: 800; - } - [parasails-component='animated-arrow-button'] { - line-height: 150%; - } - img { - width: 20px; - height: 18.947px; - margin-right: 10px; - } - &:hover { - box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03); - text-decoration: none; - } - } } + [purpose='sidebar-cta'] { + margin-top: 24px; + position: sticky; + top: 104px; + display: flex; + width: 200px; + padding: 16px; + align-items: center; + border-radius: 8px; + border: 1px solid #E2E4EA; + background: #FFF; + font-size: 14px; + line-height: 150%; + a { + color: @core-fleet-black; + + } + p { + color: @core-fleet-black; + line-height: 120%; + margin-bottom: 0px; + font-weight: 800; + } + [parasails-component='animated-arrow-button'] { + line-height: 150%; + } + img { + width: 20px; + height: 18.947px; + margin-right: 10px; + } + &:hover { + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03); + text-decoration: none; + } + } [purpose='🫧 Marketing'] { h2 { border-top: none; @@ -577,6 +583,15 @@ // only on larger screens (>900px) @media (min-width: 992px) { + .header-hidden { // For scrolling the sidebar CTA with the sticky header + transform: translateY(-80px); + } + [purpose='sidebar-cta'] { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + } + [purpose='back-to-top-button-container'] { position: sticky; bottom: 107px; diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less index 4a013af793..0545cc36d1 100644 --- a/website/assets/styles/pages/osquery-table-details.less +++ b/website/assets/styles/pages/osquery-table-details.less @@ -446,19 +446,19 @@ text-decoration: none; } } - [purpose='slack-cta'] { + [purpose='contact-cta'] { h3 { font-size: 20px; margin-bottom: 24px; line-height: 24px; + margin-top: 0px; } a { - font-size: 16px; + font-size: 15px; text-decoration: none; } - padding-top: 40px; - margin-bottom: 80px; - margin-top: 40px; + padding-top: 48px; + margin-top: 32px; border-top: 1px solid @core-fleet-black-25; } [purpose='mobile-custom-select'] { diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs index 3b55253d17..dd061f19d6 100644 --- a/website/views/pages/docs/basic-documentation.ejs +++ b/website/views/pages/docs/basic-documentation.ejs @@ -16,6 +16,7 @@
+
+
+ +
+ A very nice Fleet branded shirt +

Request Fleet swag

+ + It's free right arrow + +
+ +
+
diff --git a/website/views/pages/handbook/basic-handbook.ejs b/website/views/pages/handbook/basic-handbook.ejs index 443f7b5438..b7fbd468e1 100644 --- a/website/views/pages/handbook/basic-handbook.ejs +++ b/website/views/pages/handbook/basic-handbook.ejs @@ -1,8 +1,8 @@
- -
+
+

Maintained by:

The page maintainer's github profile picture @@ -19,7 +19,7 @@
-
diff --git a/website/views/pages/osquery-table-details.ejs b/website/views/pages/osquery-table-details.ejs index 9a5af0181b..0934b62506 100644 --- a/website/views/pages/osquery-table-details.ejs +++ b/website/views/pages/osquery-table-details.ejs @@ -60,13 +60,10 @@
Edit page -
-

Need more help?

+
+

Questions?

- - Slack logo - Ask the community on Slack - + Ask us anything