From e50849376b450aa0b35a5519d871cf42f6c54cef Mon Sep 17 00:00:00 2001 From: Kelvin Oghenerhoro Omereshone Date: Mon, 25 Apr 2022 13:02:15 +0100 Subject: [PATCH] Implement sticky nav for fleetdm.com (#5298) * feat: implement sticky nav for fleetdm except the homepage * feat: add sticky nav to homepage * Add note for v 4.13 to fleetctl docs (#5274) Co-authored-by: Kelvin Oghenerhoro Omereshone * License dispenser query strings (#5321) Co-authored-by: Tim Kern * chore(test): rewritten query side panel test using rtl (#5189) * Update get started (fleetctl preview) instructions on website (#5312) Co-authored-by: Kelvin Oghenerhoro Omereshone * update customer layout (#5329) * Handbook: Rename Slack channel, suggest DRI for #help-golang (#5157) * Handbook: Rename Slack channel, suggest DRI for #help-golang * Deleted #help-golang and #help-frontend This is based on the call Zach and I had today about eliminating the extra "Help" channels, now that there are development groups where more focused conversation can happen without blasting every engineer in the company. FYI I checked and #help-frontend is actively used, whereas #help-golang is much less active. * Editor pass - Added and renamed the Rituals section (#5300) Editor pass for: https://github.com/fleetdm/fleet/pull/5183 I added and renamed the Rituals section with a link for consistency. This PR is related to: https://github.com/fleetdm/fleet/pull/5299 * Unified text for private IP address (#5301) * unified text for private ip address * updated capitalization * Added utm_source tracking to calendly link (#5281) Will allow us to track schedule demo submissions from pricing page by adding utm_source * Removed all traces of Redux from the app! (#5287) * clean up routes and useless components * component clean up * removed redux from routes * rename file * moved useDeepEffect hook with others * removed redux, fleet, app_constants dirs; added types to utilities * style cleanup * typo fix * removed unused ts-ignore comments * removed redux packages!!! * formatting * fixed typing for simple search function * updated frontend readme * Website add articles page. (#5243) * create '/articles' and add 4 test articles * update build-static-content script for '/articles' * article pages * Validate article page metaData * add articles linked from header, remove test articles * update article styles * comment out /articles route, update blog post links * Move article category page to different branch for future PR * Update build-static-content.js * remove pagescript * Update deploying-fleet-on-render.md * update meta tags * lint fixes * Style & Markdown updates Made a couple of fixes to the styling and markdown. * update view action, replace route with regex, update links * authorsGitHubUserName -> authorGitHubUsername, authorsFullName -> authorFullName Co-authored-by: Mike Thomas * Add slack notif when integration test fails (#5332) * Editor pass - Registering in a new state w/ Gusto (#5305) Editor pass for: https://github.com/fleetdm/fleet/pull/5237 * Editor pass - Creating a consulting agreement (#5304) * Editor pass - Creating a consulting agreement Editor pass for: https://github.com/fleetdm/fleet/pull/5273/files * Update people.md Co-authored-by: Eric * Fix handbook index (#5341) * fix: review request changes * fix: revert to using window.innerHeigh for logic to hide the header * Update layout.ejs I don't know if this is good syntax, but I want the masthead to stay in position for a little longer. * feat: format if logic * fix: rename handler function to windowScrolled Co-authored-by: Katheryn Satterlee Co-authored-by: Eric Co-authored-by: Tim Kern Co-authored-by: Tharun Rajendran Co-authored-by: Zach Wasserman Co-authored-by: Mike McNeil Co-authored-by: Desmi-Dizney <99777687+Desmi-Dizney@users.noreply.github.com> Co-authored-by: Martavis Parker <47053705+martavis@users.noreply.github.com> Co-authored-by: Mike Thomas Co-authored-by: Lucas Manuel Rodriguez --- website/assets/styles/layout.less | 34 +++++++++++++++++---- website/views/layouts/layout.ejs | 50 ++++++++++++++++++------------- 2 files changed, 59 insertions(+), 25 deletions(-) diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less index c635103917..ce8ad80ef3 100644 --- a/website/assets/styles/layout.less +++ b/website/assets/styles/layout.less @@ -17,6 +17,11 @@ html, body { } [purpose='page-header'] { + // rules for sticky nav transitions + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + // Mobile navigation menu [purpose='mobile-nav'] { position: fixed; @@ -103,9 +108,19 @@ html, body { } } // Homepage header styles &.homepage-header { - position: absolute; + z-index: 9999; + position: fixed; + top: 0; left: 0; right: 0; + &.sticky { + background-color: #fff; + [purpose='header-nav'] { + a { + color: #192147; + } + } + } [purpose='header-btn'] { color: #ffffff; cursor: unset; @@ -122,10 +137,14 @@ html, body { } } // Non-homepage header styles &.header { - left: 0; - right: 0; - border-bottom: 1px solid #e2e4ea; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + left: 0; + right: 0; + // border-bottom: 1px solid #e2e4ea; + // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + z-index: 9999; + position: sticky; + top: 0; + background-color: #fff; .current-page { color: #6a67fe; svg { @@ -245,3 +264,8 @@ body.detected-mobile { } } } + +// Some utilities for the sticky nav behaviour +.translate-y-0 { + transform: translateY(-95px); +} diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index a121347889..8535983f43 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -283,29 +283,40 @@ <%/* Stripe.js */%> - <%/* Linkedin Ads Insight tag */%> - - - <% /* Delete the global `self` to help avoid client-side bugs. (see https://developer.mozilla.org/en-US/docs/Web/API/Window/self) */ %> + <% /* Sticky header */ %> + + <%/* bowser.js (for browser detection) -- included inline to avoid issues with minification that could affect the unsupported browser overlay */%> @@ -454,6 +465,5 @@ }); }); -