mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Website: Add back to top button on documentation and handbook pages (#12348)
Changes: - Updated the handbook and documentation pages to have a "Back to top" button that appears when a user scrolls more than 2000 pixels down the page (on screens larger than 991px width)
This commit is contained in:
Eric
GitHub
parent
97a705af5d
commit
3cc7c971c2
BIN
website/assets/images/icon-arrow-up-12x13@2x.png
vendored
Normal file
BIN
website/assets/images/icon-arrow-up-12x13@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 B |
@ -76,8 +76,8 @@ parasails.registerPage('basic-documentation', {
|
||||
|
||||
return pagesBySectionSlug;
|
||||
})();
|
||||
// Adding scroll event listener for scrolling sidebars with the header.
|
||||
window.addEventListener('scroll', this.scrollSideNavigationWithHeader);
|
||||
// Adding a scroll event listener for scrolling sidebars and showing the back to top button.
|
||||
window.addEventListener('scroll', this.handleScrollingInDocumentation);
|
||||
},
|
||||
|
||||
mounted: async function() {
|
||||
@ -264,23 +264,36 @@ parasails.registerPage('basic-documentation', {
|
||||
this.searchString = this.inputTextValue;
|
||||
},
|
||||
|
||||
scrollSideNavigationWithHeader: function () {
|
||||
var rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
handleScrollingInDocumentation: function () {
|
||||
let rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
|
||||
let backToTopButton = document.querySelector('div[purpose="back-to-top-button"]');
|
||||
let scrollTop = window.pageYOffset;
|
||||
let windowHeight = window.innerHeight;
|
||||
|
||||
if (rightNavBar) {
|
||||
if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) {
|
||||
if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) {
|
||||
rightNavBar.classList.add('header-hidden', 'scrolled');
|
||||
} else {
|
||||
if(scrollTop === 0) {
|
||||
} else if (scrollTop === 0) {
|
||||
rightNavBar.classList.remove('header-hidden', 'scrolled');
|
||||
} else {
|
||||
rightNavBar.classList.remove('header-hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
this.scrollDistance = scrollTop;
|
||||
if (backToTopButton && scrollTop > 2500) {
|
||||
backToTopButton.classList.add('show');
|
||||
} else if (scrollTop === 0) {
|
||||
backToTopButton.classList.remove('show');
|
||||
}
|
||||
|
||||
this.scrollDistance = scrollTop;
|
||||
},
|
||||
clickScrollToTop: function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -24,6 +24,9 @@ parasails.registerPage('basic-handbook', {
|
||||
|
||||
mounted: async function() {
|
||||
|
||||
// Adding a scroll event listener for scrolling sidebars and showing the back to top button.
|
||||
window.addEventListener('scroll', this.handleScrollingInHandbook);
|
||||
|
||||
// Algolia DocSearch
|
||||
if(this.algoliaPublicKey) {// Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the handbook search will be disabled.
|
||||
docsearch({
|
||||
@ -113,5 +116,25 @@ parasails.registerPage('basic-handbook', {
|
||||
.capitalize()
|
||||
.value();
|
||||
},
|
||||
handleScrollingInHandbook: function () {
|
||||
let backToTopButton = document.querySelector('div[purpose="back-to-top-button"]');
|
||||
let scrollTop = window.pageYOffset;
|
||||
if (backToTopButton) {
|
||||
if(scrollTop > 2500) {
|
||||
backToTopButton.classList.add('show');
|
||||
} else if (scrollTop === 0) {
|
||||
backToTopButton.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
this.scrollDistance = scrollTop;
|
||||
},
|
||||
clickScrollToTop: function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -35,16 +35,16 @@
|
||||
}
|
||||
|
||||
}
|
||||
.markdown-heading:hover {
|
||||
|
||||
.markdown-heading:hover {
|
||||
.markdown-link {
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-left: 8px;
|
||||
content: url('/images/icon-link-16x16@2x.png');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.markdown-heading.copied::before {
|
||||
content: 'Link copied to clipboard';
|
||||
display: flex;
|
||||
@ -70,9 +70,8 @@
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
|
||||
[purpose='search'] {
|
||||
|
||||
// Note: We're using classes here to override the default Docsearch styles;
|
||||
input {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
@ -81,7 +80,6 @@
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
@ -90,11 +88,9 @@
|
||||
border: 1px solid @core-fleet-black-25;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.input-group:focus-within {
|
||||
border: 1px solid @core-vibrant-blue;
|
||||
}
|
||||
|
||||
.docsearch-input {
|
||||
height: 100%;
|
||||
width: 98%;
|
||||
@ -102,15 +98,12 @@
|
||||
.docsearch-input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ds-input:focus {
|
||||
outline: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: @core-fleet-black-50;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 48px;
|
||||
padding: 0px;
|
||||
@ -118,20 +111,16 @@
|
||||
} &:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='docs-landing-page'] {
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
|
||||
[purpose='support-link'] {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
@ -153,101 +142,27 @@
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='cta-cards'] {
|
||||
|
||||
.cta-card {
|
||||
cursor: pointer;
|
||||
border: 1px solid @ui-gray;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 2px 2px rgba(197, 199, 209, 0.2);
|
||||
|
||||
.cta-image {
|
||||
max-height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
|
||||
a {
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
padding-left: 8px;
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.arrow {
|
||||
|
||||
img {
|
||||
padding-left: 11px;
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='docs-tree'] {
|
||||
|
||||
a {
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.cta-card {
|
||||
max-width: 437px;
|
||||
min-height: 160px;
|
||||
|
||||
.cta-image {
|
||||
max-height: 72px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
[purpose='docs-template'] {
|
||||
|
||||
h3 {
|
||||
|
||||
code {
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='edit-button-container'] {
|
||||
position: relative;
|
||||
}
|
||||
@ -268,9 +183,7 @@
|
||||
i {
|
||||
height: 16px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
} &:hover {
|
||||
background: @core-vibrant-blue;
|
||||
|
||||
a {
|
||||
@ -280,9 +193,7 @@
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
} &:hover {
|
||||
|
||||
[purpose='edit-button'] {
|
||||
opacity: 1;
|
||||
@ -302,13 +213,12 @@
|
||||
}
|
||||
|
||||
[purpose='breadcrumbs'] {
|
||||
|
||||
p, a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
[purpose='mobile-docs-nav'] {
|
||||
|
||||
a {
|
||||
@ -519,7 +429,6 @@
|
||||
}
|
||||
|
||||
[purpose='content'] {
|
||||
|
||||
.markdown-heading {
|
||||
scroll-margin-top: 140px;
|
||||
}
|
||||
@ -768,10 +677,12 @@
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// for larger screens
|
||||
@media (min-width: 992px) {
|
||||
|
||||
[purpose='docs-template'] {
|
||||
ul {
|
||||
.topic {
|
||||
padding-left: 8px;
|
||||
@ -779,19 +690,15 @@
|
||||
}
|
||||
|
||||
[purpose='search'] {
|
||||
|
||||
.input-group {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[purpose='page-title'] {
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-hidden { // For scrolling the sidebars with the sticky header
|
||||
@ -847,14 +754,57 @@
|
||||
[purpose='content'] {
|
||||
min-width: 0px; // in order for <pre> elements to shrink properly, the parent flex element needs to override min-width auto
|
||||
}
|
||||
|
||||
}
|
||||
[purpose='back-to-top-button-container'] {
|
||||
position: sticky;
|
||||
bottom: 107px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
[purpose='back-to-top-button'] {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: calc(~'100% - 103px');
|
||||
width: 104px;
|
||||
background: #FFFFFF;
|
||||
padding: 8px 12px;
|
||||
transition: transform 0.5s;
|
||||
transform: translateX(104px);
|
||||
cursor: pointer;
|
||||
border: 1px solid #E2E4EA;
|
||||
border-radius: 16px 0px 0px 16px;
|
||||
p {
|
||||
color: #515774;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
}
|
||||
img {
|
||||
height: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
[purpose='back-to-top-button'].show {
|
||||
display: inline-block;
|
||||
transition: transform 0.5s;
|
||||
transform: translateX(0);
|
||||
}
|
||||
[purpose='back-to-top-button'].show:hover {
|
||||
background: #F9FAFC;
|
||||
}
|
||||
}
|
||||
|
||||
// for smaller screens
|
||||
@media (max-width: 991px) {
|
||||
|
||||
[purpose='back-to-top-button-container'] {
|
||||
display: none;
|
||||
}
|
||||
[purpose='docs-template'] {
|
||||
padding: 0px 40px;
|
||||
|
||||
[purpose='back-to-top-button'].show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[purpose='edit-button'] {
|
||||
top: -61px;
|
||||
right: 15px;
|
||||
@ -887,26 +837,30 @@
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
[purpose='docs-template'] {
|
||||
|
||||
[purpose='edit-button'] {
|
||||
top: -2px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// for mobile
|
||||
@media (max-width: 576px) {
|
||||
[purpose='docs-template'] {
|
||||
padding: 0px 24px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@import 'code-blocks.less'; // styles for code blocks and hljs
|
||||
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
#basic-handbook {
|
||||
padding: 0px 40px;
|
||||
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
@ -10,6 +10,9 @@
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
[purpose='handbook-template'] {
|
||||
padding: 0px 40px;
|
||||
}
|
||||
|
||||
[purpose='search'] {
|
||||
padding-bottom: 16px;
|
||||
@ -402,7 +405,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// for larger screens (>900px)
|
||||
// for larger screens (>1200px)
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
[purpose='content'] {
|
||||
@ -414,8 +417,53 @@
|
||||
}
|
||||
}
|
||||
|
||||
// only on larger screens (>900px)
|
||||
@media (min-width: 992px) {
|
||||
|
||||
[purpose='back-to-top-button-container'] {
|
||||
position: sticky;
|
||||
bottom: 107px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
[purpose='back-to-top-button'] {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: calc(~'100% - 103px');
|
||||
width: 104px;
|
||||
background: #FFFFFF;
|
||||
padding: 8px 12px;
|
||||
transition: transform 0.5s;
|
||||
transform: translateX(104px);
|
||||
cursor: pointer;
|
||||
border: 1px solid #E2E4EA;
|
||||
border-radius: 16px 0px 0px 16px;
|
||||
p {
|
||||
color: #515774;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
}
|
||||
img {
|
||||
height: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
[purpose='back-to-top-button'].show {
|
||||
display: inline-block;
|
||||
transition: transform 0.5s;
|
||||
transform: translateX(0);
|
||||
}
|
||||
[purpose='back-to-top-button'].show:hover {
|
||||
background: #F9FAFC;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// for smaller screens (>768px)
|
||||
@media (max-width: 991px) {
|
||||
[purpose='back-to-top-button-container'] {
|
||||
display: none;
|
||||
}
|
||||
[purpose='content'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -450,8 +498,10 @@
|
||||
|
||||
// for mobile screens (< 576px)
|
||||
@media (max-width: 576px) {
|
||||
[purpose='handbook-template'] {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -240,6 +240,11 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div purpose="back-to-top-button-container">
|
||||
<div purpose="back-to-top-button" nohightlight @click="clickScrollToTop">
|
||||
<p class="mb-0"><img alt="An arrow pointing up" class="d-inline" src="/images/icon-arrow-up-12x13@2x.png">Back to top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div id="basic-handbook" v-cloak>
|
||||
<div purpose="handbook-template" style="max-width: 1000px;" class="container-fluid p-0 mb-5">
|
||||
<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">
|
||||
@ -109,5 +109,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="back-to-top-button-container">
|
||||
<div purpose="back-to-top-button" nohightlight @click="clickScrollToTop">
|
||||
<p class="mb-0"><img alt="An arrow pointing up" class="d-inline" src="/images/icon-arrow-up-12x13@2x.png">Back to top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user