mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
Website: update sticky homepage header on smaller screens (#6626)
* update homepage mobile styles * website: update sticky header function * lint fix
This commit is contained in:
Eric
GitHub
parent
7f8099db57
commit
907ffa8ff1
4 changed files with 51 additions and 35 deletions
2
website/assets/styles/layout.less
vendored
2
website/assets/styles/layout.less
vendored
|
|
@ -299,5 +299,5 @@ body.detected-mobile {
|
|||
|
||||
// Some utilities for the sticky nav behaviour
|
||||
.translate-y-0 {
|
||||
transform: translateY(-210px);
|
||||
transform: translateY(-235px);
|
||||
}
|
||||
|
|
|
|||
33
website/assets/styles/pages/homepage.less
vendored
33
website/assets/styles/pages/homepage.less
vendored
|
|
@ -106,6 +106,9 @@
|
|||
padding: 27px 87px 34px 87px;
|
||||
img {
|
||||
margin-right: 60px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 309px;
|
||||
}
|
||||
a {
|
||||
font-weight: 400;
|
||||
|
|
@ -141,6 +144,9 @@
|
|||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 172px;
|
||||
}
|
||||
[purpose='tweets'] {
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 295px;
|
||||
|
|
@ -170,7 +176,7 @@
|
|||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 769px) {
|
||||
[purpose='tweets'] {
|
||||
padding-left: 52px;
|
||||
padding-right: 52px;
|
||||
|
|
@ -182,7 +188,7 @@
|
|||
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 172px;
|
||||
padding-top: 222px;
|
||||
}
|
||||
[purpose='report-banner-container'] {
|
||||
padding-right: 15px;
|
||||
|
|
@ -198,6 +204,11 @@
|
|||
};
|
||||
}
|
||||
}
|
||||
@media (max-width: 605px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 242px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
[purpose='log-destination'] {
|
||||
|
|
@ -205,12 +216,13 @@
|
|||
p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 575px) {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
}
|
||||
h6 {
|
||||
|
|
@ -228,14 +240,23 @@
|
|||
}
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 192px;
|
||||
padding-top: 216px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 395px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 236px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 355px) {
|
||||
[purpose='log-destination'] {
|
||||
flex-basis: 80px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 330px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
47
website/views/layouts/layout.ejs
vendored
47
website/views/layouts/layout.ejs
vendored
|
|
@ -106,7 +106,7 @@
|
|||
<a href="/" style="max-width: 118px;">
|
||||
<% /* The homepage-header on the homepage has a white fleet logo */ %>
|
||||
<% if (isHomepage) { %>
|
||||
<img alt="Fleet logo" src="/images/logo-white-118x48@2x.png" style="width: 118px; height: 48px;"/>
|
||||
<img alt="Fleet logo" src="/images/logo-white-162x92@2x.png" style="width: 162px; height: 92px;"/>
|
||||
<% } else { %>
|
||||
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;"/>
|
||||
<% } %>
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
|
||||
<%/* Stripe.js */%>
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
|
||||
|
||||
<%/* Linkedin Ads Insight tag */%>
|
||||
<script type="text/javascript">
|
||||
_linkedin_partner_id = "4365817";
|
||||
|
|
@ -349,34 +349,29 @@
|
|||
<script>
|
||||
var lastScrollTop = 0;
|
||||
var header = document.querySelector('.header') || document.querySelector('.homepage-header')
|
||||
|
||||
window.addEventListener('scroll', windowScrolled)
|
||||
|
||||
function windowScrolled() {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
var fleetLogo = header.querySelector('img')
|
||||
var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img')
|
||||
|
||||
if(scrollTop == 0 && header.classList.contains('homepage-header')) {
|
||||
header.classList.remove('sticky')
|
||||
fleetLogo.src = '/images/logo-white-118x48@2x.png'
|
||||
fleetLogo.style = 'width: 118px; height: 48px;'
|
||||
hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png'
|
||||
|
||||
return;
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
var fleetLogo = header.querySelector('img')
|
||||
var hamburgerMenuIcon = header.querySelector('.btn.btn-link > img')
|
||||
if(scrollTop == 0 && header.classList.contains('homepage-header')) {
|
||||
header.classList.remove('sticky')
|
||||
fleetLogo.src = '/images/logo-white-162x92@2x.png'
|
||||
hamburgerMenuIcon.src = '/images/icon-hamburger-16x14@2x.png'
|
||||
return;
|
||||
}
|
||||
if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
|
||||
header.classList.add('translate-y-0');
|
||||
} else {
|
||||
if(header.classList.contains('homepage-header') && scrollTop > 16) {
|
||||
header.classList.add('sticky')
|
||||
fleetLogo.src = '/images/logo-blue-162x92@2x.png'
|
||||
hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
|
||||
}
|
||||
if (scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
|
||||
header.classList.add('translate-y-0');
|
||||
} else {
|
||||
if(header.classList.contains('homepage-header') && scrollTop > header.clientHeight) {
|
||||
header.classList.add('sticky')
|
||||
fleetLogo.src = '/images/logo-blue-162x92@2x.png'
|
||||
fleetLogo.style = 'height: 92px; width: 162px;'
|
||||
hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
|
||||
}
|
||||
header.classList.remove('translate-y-0');
|
||||
}
|
||||
lastScrollTop = scrollTop
|
||||
header.classList.remove('translate-y-0');
|
||||
}
|
||||
lastScrollTop = scrollTop;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
4
website/views/pages/homepage.ejs
vendored
4
website/views/pages/homepage.ejs
vendored
|
|
@ -4,7 +4,7 @@
|
|||
<div purpose="hero-banner">
|
||||
<div purpose="hero-clouds">
|
||||
<div class="container-lg">
|
||||
<div class="container-fluid text-center pt-3 pt-sm-5">
|
||||
<div class="container-fluid text-center">
|
||||
<h1>
|
||||
Open source <br>
|
||||
device management.
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
</div>
|
||||
<div purpose="report-banner-container">
|
||||
<div purpose="report-banner-cta" class="d-flex flex-column flex-lg-row justify-content-center align-items-center container">
|
||||
<img class="mb-3 mb-lg-0" style="width: 309px; height: 138px" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
|
||||
<img class="mb-3 mb-lg-0" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="text-center text-lg-left">State of device management report</h4>
|
||||
<p class="mb-0">We surveyed 200+ security practitioners in charge of device management.<br class="d-none d-sm-block"> Here’s what we learned about their struggles, frustrations, and desires.</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue