From d4261b44f1ef173a8d2e820fd1e91bea7b60f270 Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 5 Oct 2023 16:20:08 -0500 Subject: [PATCH] Website: Fix header background on Safari 13 (#14339) Closes: #14279 Changes: - Moved the background styles for the website header to a different element. The `backdrop-filter` was not working correctly when it is on an element with a `box-shadow`. - Removed `layout-landing.ejs` --- website/assets/styles/layout.less | 14 +- website/views/layouts/layout-customer.ejs | 38 +-- website/views/layouts/layout-landing.ejs | 349 ---------------------- website/views/layouts/layout-sandbox.ejs | 240 +++++++-------- website/views/layouts/layout.ejs | 240 +++++++-------- 5 files changed, 268 insertions(+), 613 deletions(-) delete mode 100644 website/views/layouts/layout-landing.ejs diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less index 1ce9c84bc3..02b5578524 100644 --- a/website/assets/styles/layout.less +++ b/website/assets/styles/layout.less @@ -19,18 +19,20 @@ html, body { background-position: center 40px; } -// Styles for the page header -[purpose='header-container'] { +[purpose='header-background'] { background: rgba(255, 255, 255, 0.8); - border-bottom: 1px solid #FFFFFF; - box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); - - // rules for sticky nav transitions transition-property: background-color, transform, bottom; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; +} + +// Styles for the page header +[purpose='header-container'] { + box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08); + border-bottom: 1px solid #FFFFFF; + // rules for sticky nav transitions left: 0; right: 0; z-index: 199; diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index ec0e6e2117..50e92cb7e6 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -133,26 +133,28 @@
-
- - Fleet logo - -
- Log out +
+
+ + Fleet logo + +
+ Log out +
+ <%if(me && me.isSuperAdmin) {%> +
+
+ Admin pages +
+
+ License generator + HTML Email preview tool + Manage Fleet Sandbox waitlist +
+
+ <%} %>
- <%if(me && me.isSuperAdmin) {%> -
-
- Admin pages -
-
- License generator - HTML Email preview tool - Manage Fleet Sandbox waitlist -
-
- <%} %>
<%- body %> diff --git a/website/views/layouts/layout-landing.ejs b/website/views/layouts/layout-landing.ejs deleted file mode 100644 index f91d8f2f37..0000000000 --- a/website/views/layouts/layout-landing.ejs +++ /dev/null @@ -1,349 +0,0 @@ -<% - // In case we're displaying the 404 or 500 page and relevant code in the "custom" hook was not able to run, - // we make sure certain view locals exist that are commonly used in this layout.ejs file. This ensures we - // don't have to do `typeof` checks below. - var me; - var isHomepage; -%> - - - <%= typeof pageTitleForMeta !== 'undefined' ? pageTitleForMeta : 'Fleet | Open-source device management' %> - - - <% /* Viewport tag for sensible mobile support */ %> - - <%// Twitter meta tags%> - - - - - - <%// Meta tags for other social previews %> - - - - <% /* Script tags should normally be included further down the page- but any - scripts that load fonts (e.g. Fontawesome ≥v5) are special exceptions to the - rule. (Include them up here along with any hard-coded «link» tags for Typekit, - Google Fonts, etc. - above the «body» to prevent the page flickering when fonts - load.) */ %> - - <% /* Certain scripts, normally analytics tools like Google Tag Manager and - Google Analytics, should only be included in production: */ - if (sails.config.environment === 'production') { %> - <% /* Rollbar */%> - - <% /* Google Analytics, Google Tag Manager, Snitcher etc. */ %> - <% /* Global site tag (gtag.js) - Google Analytics */%> - - - <% /* Google Tag Manager */ %> - - <% /* Meta pixel code */ %> - - - <% /* Hotjar code */ %> - - <% /* Heap analytics code */ %> - - <% /* Snitcher analytics code */ %> - - <% /* HubSpot Embed Code */ %> - - - <% } - /* Otherwise, any such scripts are excluded, and we instead inject a - robots/noindex meta tag to help prevent any unwanted visits from search engines. */ - else { %> - - <% } %> - <% /* - Stylesheets - ======================== - - Stylesheets can be hard-coded as «link» tags, automatically injected - by the asset pipeline between "STYLES" and "STYLES END", or both. - (https://sailsjs.com/docs/concepts/assets/task-automation) - */ %> - - <% /* Auto-injected «link» tags: */ %> - - - - - - - - <% /* Google Tag Manager (noscript) */ %> - - <%/* End Google Tag Manager (noscript) */%> -
-
-
- - Fleet logo - -
- Try it out -
-
-
- - <%- body %> - -
-
-
-
- Creative Commons Licence CC BY-SA 4.0 - © 2023 Fleet Device Management Inc. - Privacy -
-
-
-
- -
- - <% /* - Client-side JavaScript - ======================== - - Scripts can be hard-coded as «script» tags, automatically injected - by the asset pipeline between "SCRIPTS" and "SCRIPTS END", or both. - (https://sailsjs.com/docs/concepts/assets/task-automation) - */ %> - <% /* Cookie consent banner */ %> - - - <%/* Stripe.js */%> - - - <% /* Delete the global `self` to help avoid client-side bugs. - (see https://developer.mozilla.org/en-US/docs/Web/API/Window/self) */ %> - - - <%/* bowser.js (for browser detection) -- included inline to avoid issues with minification that could affect the unsupported browser overlay */%> - - - <% /* Auto-injected «script» tags: */ %> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <% /* Display an overlay if the current browser is not supported. - (Relies on `bowser`, which is loaded inline above.) */ %> - - - <% /* Keep footer hidden until the document is ready (prevents flicker that is especially unattractive on mobile) */ %> - - - - diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index 04c40765f9..684eb2eccf 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -133,134 +133,135 @@ <%/* End Google Tag Manager (noscript) */%>
- <%// Page header%> -
- - Fleet logo - - <%/* Mobile Navigation menu */%> -
- -
-