mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Update documentation page sidebars and calls to action. (#7388)
* Website: Make docs table of contents not sticky * move docs sidebar CTA, update styles * website: updated docs cta graphic - updated docs cta graphic Co-authored-by: Mike Thomas <mthomas@fleetdm.com> Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
f7b394b1a3
commit
62a7d1afa2
5 changed files with 32 additions and 49 deletions
BIN
website/assets/images/docs-cta-icon-47x38@2x.png
vendored
Normal file
BIN
website/assets/images/docs-cta-icon-47x38@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -251,7 +251,6 @@ parasails.registerPage('basic-documentation', {
|
|||
|
||||
scrollSideNavigationWithHeader: function () {
|
||||
var rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
|
||||
var leftNavBar = document.querySelector('div[purpose="left-sidebar"]');
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
if(rightNavBar) {
|
||||
if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) {
|
||||
|
|
@ -264,17 +263,6 @@ parasails.registerPage('basic-documentation', {
|
|||
}
|
||||
}
|
||||
}
|
||||
if(leftNavBar) {
|
||||
if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) {
|
||||
leftNavBar.classList.add('header-hidden', 'scrolled');
|
||||
} else {
|
||||
if(scrollTop === 0) {
|
||||
leftNavBar.classList.remove('header-hidden', 'scrolled');
|
||||
} else {
|
||||
leftNavBar.classList.remove('header-hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
this.scrollDistance = scrollTop;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -405,7 +405,6 @@
|
|||
[purpose='demo-cta'] {
|
||||
display: flex;
|
||||
border: 1px solid #E3E3E3;
|
||||
background: linear-gradient(270deg, #201E43 0%, #353D62 100%);
|
||||
box-shadow: 1px 2px 2px rgba(197, 199, 209, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 20px 16px;
|
||||
|
|
@ -413,21 +412,21 @@
|
|||
width: 100%;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
color: @core-fleet-black;
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
line-height: 18px;
|
||||
}
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #FFF;
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -679,23 +678,18 @@
|
|||
max-height: calc(~'100vh - 140px');
|
||||
}
|
||||
[purpose='left-sidebar'] {
|
||||
position: sticky;
|
||||
top: 118px;
|
||||
height: fit-content;
|
||||
overflow-y: auto;
|
||||
min-width: 216px;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
&:not(.scrolled) {
|
||||
max-height: calc(~'100vh - 205px'); // Using a calculated max-height to allow the sidebars to be fully scrollable before the content is scrolled.
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='right-sidebar'] {
|
||||
p {
|
||||
line-height: 21px;
|
||||
}
|
||||
min-width: 216px;
|
||||
min-width: 190px;
|
||||
position: sticky;
|
||||
top: 118px;
|
||||
height: fit-content;
|
||||
|
|
|
|||
51
website/views/pages/docs/basic-documentation.ejs
vendored
51
website/views/pages/docs/basic-documentation.ejs
vendored
|
|
@ -148,7 +148,7 @@
|
|||
</div>
|
||||
|
||||
<div class="container-fluid d-flex flex-column flex-lg-row p-0 pt-lg-4 pb-lg-4 m-0">
|
||||
<div purpose="left-sidebar" style="min-width: 190px; max-width: 210px;" class="d-none d-lg-flex flex-column text-left pl-0 pr-4 left-sidebar">
|
||||
<div purpose="left-sidebar" class="d-none d-lg-flex flex-column text-left pl-0 pr-4 left-sidebar">
|
||||
<ul class="p-0 pb-2 m-0 left-nav">
|
||||
<li v-for="page in findPagesByUrl()" :key="page.title">
|
||||
<a :href="page.url" class="font-weight-bold pb-3">{{page.title}}</a>
|
||||
|
|
@ -165,6 +165,30 @@
|
|||
</ul>
|
||||
<a class="font-weight-bold py-3" target="_blank" href="https://github.com/fleetdm/fleet/releases">Releases</a>
|
||||
<a href="/support" class="btn btn-block btn-sm btn-primary">Support</a>
|
||||
<div purpose="right-sidebar-buttons">
|
||||
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
|
||||
<a class="d-flex align-items-center justify-content-center" href="https://kqphpqst851.typeform.com/to/ZfA3sOu0" target="_blank">
|
||||
<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 class="d-none d-lg-block" purpose="demo-cta">
|
||||
<a class="d-flex align-items-center justify-content-center" href="https://calendly.com/fleetdm/demo?utm_source=docs+demo" target="_blank">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<img style="height: auto; width: 47px; margin-bottom: 8px;" alt="Target and configure specific devices" src="/images/docs-cta-icon-47x38@2x.png">
|
||||
<p class="mb-2 text-center">Target and configure specific devices</p>
|
||||
<span>
|
||||
Talk to an expert <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 purpose="right-sidebar" class="order-first order-lg-last p-0 pb-2 pb-lg-0 pr-lg-0 right-sidebar" v-if="!thisPage.title.includes('FAQ')">
|
||||
|
|
@ -183,30 +207,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div purpose="right-sidebar-buttons">
|
||||
<div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
|
||||
<a class="d-flex align-items-center justify-content-center" href="https://kqphpqst851.typeform.com/to/ZfA3sOu0" target="_blank">
|
||||
<img style="height: auto; width: 47px; margin-right: 4px;" alt="A very nice Fleet branded shirt" src="/images/fleet-shirt-60x55@2x.png">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<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 class="d-none d-lg-block" purpose="demo-cta">
|
||||
<a class="d-flex align-items-center justify-content-center" href="https://calendly.com/fleetdm/demo?utm_source=docs+demo" target="_blank">
|
||||
<img style="height: auto; width: 27px; margin-right: 12px;" alt="The Fleet logo" src="/images/logo-fleet-brandmark-28x28@2x.png">
|
||||
<div>
|
||||
<p class="mb-0">Get even more control</p>
|
||||
<span>
|
||||
Find out how <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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue