Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Website: update reference documentation platform filters and sidebar on /tables pages. (#27865)

Browse Source 
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)
This commit is contained in:
Eric
2025-04-07 13:40:15 +09:00
committed by GitHub
parent e9442dd4a8
commit ad4567012a
11 changed files with 148 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/js/pages/osquery-table-details.page.js
Vendored
+18 -14
View File
@@ -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();
website/assets/js/pages/policy-library.page.js
Vendored
+21
View File
@@ -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;
},
},
});
website/assets/js/pages/query-library.page.js
Vendored
+21
View File
@@ -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;
},
},
});
website/assets/js/pages/vital-details.page.js
Vendored
+18 -1
View File
@@ -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';
},
website/assets/styles/layout.less
Vendored
+1 -1
View File
@@ -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);
}
website/assets/styles/pages/osquery-table-details.less
Vendored
+28 -1
View File
@@ -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;
website/assets/styles/pages/policy-library.less
Vendored
+11 -1
View File
@@ -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;
website/assets/styles/pages/query-library.less
Vendored
+10
View File
@@ -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;
website/assets/styles/pages/vital-details.less
Vendored
+11
View File
@@ -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;
website/views/pages/osquery-table-details.ejs
Vendored
+4 -4
View File
@@ -8,25 +8,25 @@
</div>
<div purpose="platform-filters" class="d-flex justify-content-center" >
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
<h1 class="d-flex align-items-center">
<h1 id="apple" class="d-flex align-items-center">
<img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
<span class="d-none d-md-inline">Apple</span>
</h1>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
<h1 class="d-flex align-items-center">
<h1 id="linux" class="d-flex align-items-center">
<img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
<span class="d-none d-md-inline">Linux</span>
</h1>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
<h1 class="d-flex align-items-center">
<h1 id="windows" class="d-flex align-items-center">
<img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
<span class="d-none d-md-inline">Windows</span>
</h1>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
<h1 class="d-flex align-items-center">
<h1 id="chrome" class="d-flex align-items-center">
<img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
<span class="d-none d-md-inline">ChromeOS</span>
</h1>
website/views/pages/vital-details.ejs
Vendored
+5 -5
View File
@@ -10,25 +10,25 @@
</div>
<div purpose="platform-filters" class="d-flex justify-content-center" >
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
<h1 class="d-flex align-items-center">
<h1 id="apple" class="d-flex align-items-center">
<img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
<span class="d-none d-md-inline">Apple</span>
</h1>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
<h1 class="d-flex align-items-center">
<h1 id="linux" class="d-flex align-items-center">
<img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
<span class="d-none d-md-inline">Linux</span>
</h1>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
<p class="d-flex align-items-center">
<h1 id="windows" class="d-flex align-items-center">
<img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
<span class="d-none d-md-inline">Windows</span>
</p>
</h1>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
<h1 class="d-flex align-items-center">
<h1 id="chrome" class="d-flex align-items-center">
<img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
<span class="d-none d-md-inline">ChromeOS</span>
</h1>