mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
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
This commit is contained in:
Eric
GitHub
parent
064700880c
commit
8117631926
8 changed files with 109 additions and 57 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'] {
|
||||
|
|
|
|||
24
website/views/pages/docs/basic-documentation.ejs
vendored
24
website/views/pages/docs/basic-documentation.ejs
vendored
|
|
@ -16,6 +16,7 @@
|
|||
</div>
|
||||
|
||||
<div purpose="content-and-desktop-sidebars" class="d-flex flex-column flex-lg-row">
|
||||
<div class="d-flex flex-column">
|
||||
<div purpose="left-sidebar" class="d-none d-lg-flex flex-column text-left left-sidebar">
|
||||
<div purpose="left-sidebar-links">
|
||||
<div v-for="page in findPagesByUrl()" :key="page.title">
|
||||
|
|
@ -31,18 +32,19 @@
|
|||
<a purpose="subpage-link" href="/docs/contributing" target="_blank" no-icon>Contributing</a>
|
||||
<a purpose="subpage-link" target="_blank" href="/support" no-icon>Support</a>
|
||||
<a purpose="subpage-link" href="/contact">Take a tour</a>
|
||||
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
|
||||
<a class="d-flex align-items-center justify-content-center" @click="clickSwagRequestCTA()">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<img style="height: auto; width: 47px; margin-bottom: 8px;" alt="A very nice Fleet branded shirt" src="/images/fleet-shirt-60x55@2x.png">
|
||||
<p class="mb-0">Request Fleet swag</p>
|
||||
<span>
|
||||
It's free <img purpose="right-arrow" class="d-inline" style="height: 16px; width: auto; margin-bottom: 2px;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
|
||||
<a class="d-flex align-items-center justify-content-center" @click="clickSwagRequestCTA()">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<img style="height: auto; width: 47px; margin-bottom: 8px;" alt="A very nice Fleet branded shirt" src="/images/fleet-shirt-60x55@2x.png">
|
||||
<p class="mb-0">Request Fleet swag</p>
|
||||
<span>
|
||||
It's free <img purpose="right-arrow" class="d-inline" style="height: 16px; width: auto; margin-bottom: 2px;" alt="right arrow" src="/images/arrow-right-red-16x16@2x.png" />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="right-sidebar" class="order-first order-lg-last right-sidebar" v-if="!thisPage.title.includes('FAQ') && !_.isEmpty(subtopics)">
|
||||
<div class="d-none d-lg-block">
|
||||
|
|
|
|||
18
website/views/pages/handbook/basic-handbook.ejs
vendored
18
website/views/pages/handbook/basic-handbook.ejs
vendored
|
|
@ -1,8 +1,8 @@
|
|||
<div id="basic-handbook" v-cloak>
|
||||
<div purpose="handbook-template" style="max-width: 1080px;" class="container-fluid mb-5">
|
||||
<div class="d-flex flex-column justify-content-between flex-lg-row pt-lg-4 pb-lg-4 m-0">
|
||||
|
||||
<div purpose="right-sidebar" class="order-lg-last d-lg-block d-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
|
||||
<div class="d-flex flex-column order-lg-last">
|
||||
<div purpose="right-sidebar" class="d-lg-block d-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
|
||||
<div purpose="maintainer" class="mb-lg-3">
|
||||
<h4>Maintained by:</h4>
|
||||
<img alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-block d-md-none">
|
||||
<a href="/contact" purpose="sidebar-cta" class="d-flex flex-row justify-content-start">
|
||||
<div class="d-flex align-self-start">
|
||||
<img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
|
||||
|
|
@ -32,6 +32,18 @@
|
|||
</div>
|
||||
<div class="border-bottom py-3 d-flex d-md-none"></div>
|
||||
</div>
|
||||
<div purpose="sidebar-cta" class="d-none d-md-block">
|
||||
<a href="/contact" class="d-flex flex-row justify-content-start">
|
||||
<div class="d-flex align-self-start">
|
||||
<img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0">Questions?</p>
|
||||
<animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column handbook-content">
|
||||
|
||||
|
|
|
|||
|
|
@ -60,13 +60,10 @@
|
|||
|
||||
<div class="justify-self-end">
|
||||
<a :href="tableToDisplay.githubUrl" purpose="edit-button" target="_blank" no-icon>Edit page<i class="fa fa-pencil"></i></a>
|
||||
<div class="d-block justify-self-end" purpose="slack-cta">
|
||||
<h3 class="pt-0" style="font-size: 24px; line-height: 28px;">Need more help?</h3>
|
||||
<div class="d-block justify-self-end" purpose="contact-cta">
|
||||
<h3 class="mb-3">Questions?</h3>
|
||||
<div class="d-sm-flex">
|
||||
<a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button" no-icon>
|
||||
<img style="height: 24px;" class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
|
||||
Ask the community on Slack
|
||||
</a>
|
||||
<animated-arrow-button href="/contact">Ask us anything</animated-arrow-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue