From ad4567012a5df6665fa1db7da1f65caa0cb3290d Mon Sep 17 00:00:00 2001 From: Eric Date: Sun, 6 Apr 2025 23:40:15 -0500 Subject: [PATCH] Website: update reference documentation platform filters and sidebar on /tables pages. (#27865) Closes: https://github.com/fleetdm/confidential/issues/9974 Changes: - Removed the calculated max height of the sidebar on osquery schema table pages - Update the platform filters on osquery schema table pages, vitals pages, query library, and policy library to scroll with the page. - Updated /vitals/* and /tables/* pages to scroll users past the page headline when they switch platforms. - Updated the query library and policy library pages to scroll users to the top of the list of policies/queries when they switch platforms (If they have scrolled the list) --- .../js/pages/osquery-table-details.page.js | 32 +++++++++++-------- .../assets/js/pages/policy-library.page.js | 21 ++++++++++++ website/assets/js/pages/query-library.page.js | 21 ++++++++++++ website/assets/js/pages/vital-details.page.js | 19 ++++++++++- website/assets/styles/layout.less | 2 +- .../styles/pages/osquery-table-details.less | 29 ++++++++++++++++- .../assets/styles/pages/policy-library.less | 12 ++++++- .../assets/styles/pages/query-library.less | 10 ++++++ .../assets/styles/pages/vital-details.less | 11 +++++++ website/views/pages/osquery-table-details.ejs | 8 ++--- website/views/pages/vital-details.ejs | 10 +++--- 11 files changed, 148 insertions(+), 27 deletions(-) diff --git a/website/assets/js/pages/osquery-table-details.page.js b/website/assets/js/pages/osquery-table-details.page.js index 3e08d7e8df..3e834d239e 100644 --- a/website/assets/js/pages/osquery-table-details.page.js +++ b/website/assets/js/pages/osquery-table-details.page.js @@ -42,6 +42,7 @@ parasails.registerPage('osquery-table-details', { } // Note: we do not personalize the selected platform on this page based on the user's // current OS because the default table that the /tables url redirects to does not support windows. + window.addEventListener('scroll', this.handleScrollingPlatformFilters); }, mounted: async function() { @@ -101,20 +102,7 @@ parasails.registerPage('osquery-table-details', { } }); })(); - // Adjust the height of the sidebar navigation to match the height of the html partial - (()=>{ - $('[purpose="table-of-contents"]').css({'max-height': 120}); - let tablePartialHeight = $('[purpose="table-container"]').height(); - $('[purpose="table-of-contents"]').css({'max-height': tablePartialHeight - 120}); - })(); - // 5 ms after the page loads, scroll the table of contents to the currently active link. - await setTimeout(()=>{ - let activeTableLink = $('[purpose="table-of-contents-link"].active')[0]; - if(activeTableLink) { - $('[purpose="table-of-contents"]')[0].scrollTop = activeTableLink.offsetTop; - } - // Note: we're running this code after a 5ms delay to make sure the tables have been filtered, otherwise it will scroll the table of contents to the links posiiton in the full list of tables. - }, 5); + }, // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ @@ -157,6 +145,22 @@ parasails.registerPage('osquery-table-details', { } }, 250); }, + handleScrollingPlatformFilters: function () { + let platformFilters = document.querySelector('div[purpose="platform-filters"]'); + let scrollTop = window.pageYOffset; + let windowHeight = window.innerHeight; + // If the right nav bar exists, add and remove a class based on the current scroll position. + if (platformFilters) { + if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { + platformFilters.classList.add('header-hidden'); + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { + platformFilters.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; + } + } + this.scrollDistance = scrollTop; + }, closeModal: async function() { this.modal = ''; await this.forceRender(); diff --git a/website/assets/js/pages/policy-library.page.js b/website/assets/js/pages/policy-library.page.js index 6af58a3888..0a247c534a 100644 --- a/website/assets/js/pages/policy-library.page.js +++ b/website/assets/js/pages/policy-library.page.js @@ -16,6 +16,7 @@ parasails.registerPage('policy-library', { if(bowser.windows){ this.selectedPlatform = 'windows'; } + window.addEventListener('scroll', this.handleScrollingPlatformFilters); }, // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ @@ -24,9 +25,29 @@ parasails.registerPage('policy-library', { methods: { clickSelectPlatform: function(platform) { + if(this.selectedPlatform !== platform && window.scrollY > 370){ + window.scrollTo(0, 370, {smooth: true}); + } this.selectedPlatform = platform; }, + handleScrollingPlatformFilters: function () { + let platformFilters = document.querySelector('div[purpose="platform-filters"]'); + let scrollTop = window.pageYOffset; + let windowHeight = window.innerHeight; + // If the right nav bar exists, add and remove a class based on the current scroll position. + if (platformFilters) { + if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { + platformFilters.classList.add('header-hidden'); + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { + platformFilters.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; + } + } + this.scrollDistance = scrollTop; + }, + }, }); diff --git a/website/assets/js/pages/query-library.page.js b/website/assets/js/pages/query-library.page.js index a31061fdea..8108b7fff1 100644 --- a/website/assets/js/pages/query-library.page.js +++ b/website/assets/js/pages/query-library.page.js @@ -16,6 +16,7 @@ parasails.registerPage('query-library', { if(bowser.windows){ this.selectedPlatform = 'windows'; } + window.addEventListener('scroll', this.handleScrollingPlatformFilters); }, // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ @@ -24,9 +25,29 @@ parasails.registerPage('query-library', { methods: { clickSelectPlatform: function(platform) { + if(this.selectedPlatform !== platform && window.scrollY > 300){ + window.scrollTo(0, 300, {smooth: true}); + } this.selectedPlatform = platform; }, + handleScrollingPlatformFilters: function () { + let platformFilters = document.querySelector('div[purpose="platform-filters"]'); + let scrollTop = window.pageYOffset; + let windowHeight = window.innerHeight; + // If the right nav bar exists, add and remove a class based on the current scroll position. + if (platformFilters) { + if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { + platformFilters.classList.add('header-hidden'); + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { + platformFilters.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; + } + } + this.scrollDistance = scrollTop; + }, + }, }); diff --git a/website/assets/js/pages/vital-details.page.js b/website/assets/js/pages/vital-details.page.js index dc37f09d51..042fd4e01e 100644 --- a/website/assets/js/pages/vital-details.page.js +++ b/website/assets/js/pages/vital-details.page.js @@ -87,6 +87,7 @@ parasails.registerPage('vital-details', { }, 2000); navigator.clipboard.writeText(code); }); + window.addEventListener('scroll', this.handleScrollingPlatformFilters); }, // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ @@ -104,7 +105,7 @@ parasails.registerPage('vital-details', { if(platformToLookFor === 'chrome'){ this.goto('/vitals/'+this.chromeVitals[0].slug+'#chrome'); } else if(platformToLookFor === 'darwin') { - this.goto('/vitals/'+this.macOsVitals[0].slug+'#macos'); + this.goto('/vitals/'+this.macOsVitals[0].slug+'#apple'); } else if(platformToLookFor === 'linux') { this.goto('/vitals/'+this.linuxVitals[0].slug+'#linux'); } else if(platformToLookFor === 'windows') { @@ -116,6 +117,22 @@ parasails.registerPage('vital-details', { } }, + handleScrollingPlatformFilters: function () { + let platformFilters = document.querySelector('div[purpose="platform-filters"]'); + let scrollTop = window.pageYOffset; + let windowHeight = window.innerHeight; + // If the right nav bar exists, add and remove a class based on the current scroll position. + if (platformFilters) { + if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { + platformFilters.classList.add('header-hidden'); + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { + platformFilters.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; + } + } + this.scrollDistance = scrollTop; + }, clickOpenTableOfContents: function () { this.modal = 'table-of-contents'; }, diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less index a78f794be7..84b4f30739 100644 --- a/website/assets/styles/layout.less +++ b/website/assets/styles/layout.less @@ -842,5 +842,5 @@ body.detected-mobile { // Some utilities for the sticky nav behaviour. // Note: this will not be applied if a navigation menu open. .translate-y-0 { - transform: translateY(-235px); + transform: translateY(-81px); } diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less index d1cf92b994..29e222654e 100644 --- a/website/assets/styles/pages/osquery-table-details.less +++ b/website/assets/styles/pages/osquery-table-details.less @@ -27,10 +27,19 @@ margin-bottom: 0px; } } - + .header-hidden { // For scrolling the sidebars with the sticky header + transform: translateY(-81px); + } [purpose='platform-filters'] { border-bottom: 1px solid #E2E4EA; margin-bottom: 48px; + position: sticky; + top: 81px; + background: #FFF; + z-index: 4; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; [purpose='platform-filter'] { width: 25%; display: flex; @@ -43,6 +52,7 @@ margin-right: 10px; } h1 { + scroll-margin-top: 120px; color: #192147; text-align: center; margin-bottom: 0px; @@ -651,6 +661,13 @@ top: 32px; } } + [purpose='platform-filters'] { + [purpose='platform-filter'] { + img { + margin-right: 0px; + } + } + } } @media (max-width: 576px) { @@ -683,6 +700,16 @@ } } + [purpose='platform-filters'] { + [purpose='platform-filter'] { + max-width: 25%; + padding: 16px 24px 24px 24px; + &.selected { + + padding: 16px 24px 22px 24px; + } + } + } [purpose='schema-table'] { h2 { margin-bottom: 72px; diff --git a/website/assets/styles/pages/policy-library.less b/website/assets/styles/pages/policy-library.less index 233f5ae572..d7d2609426 100644 --- a/website/assets/styles/pages/policy-library.less +++ b/website/assets/styles/pages/policy-library.less @@ -135,7 +135,9 @@ margin-bottom: 16px; } } - + .header-hidden { // For scrolling the sidebars with the sticky header + transform: translateY(-81px); + } [purpose='platform-filters'] { &.detected-windows { flex-direction: row-reverse; @@ -143,6 +145,13 @@ flex-direction: row; border-bottom: 1px solid #E2E4EA; margin-bottom: 48px; + position: sticky; + top: 81px; + background: #FFF; + z-index: 4; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; [purpose='platform-filter'] { width: 33%; display: flex; @@ -155,6 +164,7 @@ margin-right: 10px; } h1 { + scroll-margin-top: 120px; color: #192147; text-align: center; margin-bottom: 0px; diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less index 684561322c..ed19f6c694 100644 --- a/website/assets/styles/pages/query-library.less +++ b/website/assets/styles/pages/query-library.less @@ -141,6 +141,9 @@ line-height: 24px; /* 160% */ } } + .header-hidden { // For scrolling the sidebars with the sticky header + transform: translateY(-81px); + } [purpose='platform-filters'] { &.detected-windows { flex-direction: row-reverse; @@ -148,6 +151,13 @@ flex-direction: row; border-bottom: 1px solid #E2E4EA; margin-bottom: 48px; + position: sticky; + top: 81px; + background: #FFF; + z-index: 4; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; [purpose='platform-filter'] { width: 33%; display: flex; diff --git a/website/assets/styles/pages/vital-details.less b/website/assets/styles/pages/vital-details.less index ffb77c1572..1bf106df32 100644 --- a/website/assets/styles/pages/vital-details.less +++ b/website/assets/styles/pages/vital-details.less @@ -215,6 +215,9 @@ line-height: 150%; } } + .header-hidden { // For scrolling the sidebars with the sticky header + transform: translateY(-81px); + } [purpose='platform-filters'] { &.detected-windows { flex-direction: row-reverse; @@ -223,6 +226,13 @@ border-bottom: 1px solid #E2E4EA; margin-bottom: 32px; padding-top: 8px; + position: sticky; + top: 81px; + background: #FFF; + z-index: 4; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; [purpose='platform-filter'] { width: 25%; display: flex; @@ -235,6 +245,7 @@ margin-right: 10px; } h1 { + scroll-margin-top: 120px; color: #192147; text-align: center; margin-bottom: 0px; diff --git a/website/views/pages/osquery-table-details.ejs b/website/views/pages/osquery-table-details.ejs index 81336ee988..14ce8ca0eb 100644 --- a/website/views/pages/osquery-table-details.ejs +++ b/website/views/pages/osquery-table-details.ejs @@ -8,25 +8,25 @@
-

+

macOS Apple

-

+

Linux Linux

-

+

Windows Windows

-

+

Chrome ChromeOS

diff --git a/website/views/pages/vital-details.ejs b/website/views/pages/vital-details.ejs index e9be8195d7..06444a7110 100644 --- a/website/views/pages/vital-details.ejs +++ b/website/views/pages/vital-details.ejs @@ -10,25 +10,25 @@
-

+

macOS Apple

-

+

Linux Linux

-

+

Windows Windows -

+

-

+

Chrome ChromeOS