Website: move swag CTA on docs pages. (#29019)

Closes: #28949 

Changes:
- Moved the swag CTA to the right sidebar on documentation pages
This commit is contained in:
Eric 2025-05-09 15:11:12 -05:00 committed by GitHub
parent 4d754aacbb
commit 3468ae4e5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 2 deletions

View file

@ -285,7 +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 swagCta = document.querySelector('div[purpose="swag-cta"].left-cta');
let backToTopButton = document.querySelector('div[purpose="back-to-top-button"]');
let scrollTop = window.pageYOffset;
let windowHeight = window.innerHeight;

View file

@ -1035,6 +1035,15 @@
transition-property: max-height;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
[purpose='swag-cta'] {
width: 190px;
position: static;
a {
&:hover {
background: none;
}
}
}
a {
display: block;
color: #515774;

View file

@ -35,7 +35,7 @@
<a purpose="subpage-link" href="/contact">Take a tour</a>
<a purpose="subpage-link" href="/better">“Why is Fleet on my computer?”</a>
</div>
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
<div class="d-none d-lg-block left-cta" purpose="swag-cta" v-if="showSwagForm && ['REST API', 'Fleet server configuration'].includes(thisPage.title)">
<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">
@ -53,6 +53,17 @@
<p purpose="subtopics-heading" class="font-weight-bold">On this page:</p>
<div purpose="subtopics" v-if="!_.isEmpty(subtopics)">
<a purpose="subtopic-link" v-for="(subtopic, index) in subtopics" :href="subtopic.url">{{subtopic.title}}</a>
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm && !['REST API', 'Fleet server configuration'].includes(thisPage.title)">
<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>
<div class="d-block d-lg-none" >