From 983d04156be17628b2fc1f25066fbcbac993fd7f Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 16 Mar 2023 11:43:09 -0500
Subject: [PATCH] Website: browser compatibility updates (iOS 10) (#10531)

Closes #10497

Changes:
- Fixed images overflowing onto text on `/compliance` and
`/osquery-management`
- Added a set width to the edit page button on `/tables/` pages
- Fixed the sticky header not scrolling with the page
- Fixed flexbox positioning issues on the homepage, in the scrollable
tweets component, and in the mobile navigation menu
---
 .../components/scrollable-tweets.component.js |  2 +-
 website/assets/styles/layout.less             |  2 +
 website/assets/styles/pages/compliance.less   |  1 -
 website/assets/styles/pages/homepage.less     |  1 +
 .../styles/pages/osquery-management.less      |  1 -
 .../assets/styles/pages/sales-one-pager.less  | 74 ++++++++++++++++++-
 website/views/layouts/layout.ejs              |  6 +-
 website/views/pages/sales-one-pager.ejs       |  6 +-
 8 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/website/assets/js/components/scrollable-tweets.component.js b/website/assets/js/components/scrollable-tweets.component.js
index 1f9dee89c2..ed7030fdff 100644
--- a/website/assets/js/components/scrollable-tweets.component.js
+++ b/website/assets/js/components/scrollable-tweets.component.js
@@ -111,7 +111,7 @@ parasails.registerComponent('scrollableTweets', {
         </div>
       </div>
     </div>
-    <div purpose="" class="mx-auto">
+    <div purpose="" class="mx-auto d-flex flex-row justify-content-center">
       <nav aria-label="..." >
         <ul purpose="tweets-page-indicator" class="pagination pagination-sm" v-if="numberOfTweetPages > 1">
           <li class="page-item" :class="[currentTweetPage === index ? 'selected' : '']" v-for="(pageNumber, index) in numberOfTweetPages" @click="scrollTweetsDivToPage(index)"></li>
diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index b8b6f7d3ac..0e90e1b9a6 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -32,6 +32,7 @@ html, body {
   right: 0;
   z-index: 999;
   position: sticky;
+  position: -webkit-sticky; //lesshint-disable-line duplicateProperty
   top: 0;
 }
 
@@ -99,6 +100,7 @@ html, body {
     text-decoration: none;
     font-family: @navigation-font;
     font-weight: @bold;
+    height: 100%;
     img {
       width: 16px;
     }
diff --git a/website/assets/styles/pages/compliance.less b/website/assets/styles/pages/compliance.less
index 03b421db69..e6c3c5b895 100644
--- a/website/assets/styles/pages/compliance.less
+++ b/website/assets/styles/pages/compliance.less
@@ -155,7 +155,6 @@
   }
 
   [purpose='feature-image'] {
-    height: 100%;
     img {
       max-height: 300px;
     }
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index e685c19b1d..fa115a5ece 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -672,6 +672,7 @@
       padding-right: 0;
       [purpose='tweet-card'] {
         margin-bottom: 30px;
+        display: block;
       }
     }
     [purpose='slack-button'] {
diff --git a/website/assets/styles/pages/osquery-management.less b/website/assets/styles/pages/osquery-management.less
index c607a4991d..f7ea56c407 100644
--- a/website/assets/styles/pages/osquery-management.less
+++ b/website/assets/styles/pages/osquery-management.less
@@ -155,7 +155,6 @@
   }
 
   [purpose='feature-image'] {
-    height: 100%;
     img {
       max-height: 300px;
     }
diff --git a/website/assets/styles/pages/sales-one-pager.less b/website/assets/styles/pages/sales-one-pager.less
index 3f33be868c..4d06ed3de9 100644
--- a/website/assets/styles/pages/sales-one-pager.less
+++ b/website/assets/styles/pages/sales-one-pager.less
@@ -8,9 +8,69 @@
     background-color: #182147;
   }
 
-  [purpose='demo-btn'] {
-    .btn-animated-arrow-red();
-  }
+  [purpose='button-row'] {
+     a {
+       font-weight: 700;
+       font-size: 16px;
+       line-height: 24px;
+     }
+     [purpose='cta-button'] {
+       cursor: pointer;
+       margin-right: 32px;
+       background: @core-vibrant-red;
+       border-radius: 8px;
+       padding-left: 32px;
+       padding-right: 32px;
+       height: 48px;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       color: #FFF;
+       position: relative;
+       text-decoration: none;
+     }
+
+     [purpose='animated-arrow-button-red'] {
+       display: inline;
+       padding-right: 40px;
+       cursor: pointer;
+       position: relative;
+       width: fit-content;
+       min-width: 125px;
+       font-weight: bold;
+       user-select: none;
+       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;
+       color: @core-fleet-black;
+       text-decoration: none;
+       &:after {
+       content: url('/images/arrow-right-red-16x16@2x.png');
+       transform: scale(0.5);
+       position: absolute;
+       top: -5px;
+       left: 80%; // <--- here
+       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;
+       /*   opacity: 0; */
+       }
+       &:hover:after {
+       left: 82%; // <--- here
+       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;
+       /*   opacity:1; */
+       }
+     }
+   }
+
   [purpose='banner'] {
     padding-top: 80px;
     padding-bottom: 80px;
@@ -201,6 +261,14 @@
 
   }
   @media (max-width: 541px) {
+    [purpose='button-row'] {
+      max-width: 100%;
+      [purpose='cta-button'] {
+        margin-right: 0px;
+        width: 100%;
+        margin-bottom: 24px;
+      }
+    }
     [purpose='common-problem'] {
       flex: 0 0 180px;
     }
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index d4c6c43385..dbde56435b 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -146,10 +146,10 @@
             <img alt="Fleet logo" src="/images/logo-blue-118x41@2x.png"/>
           </a>
           <%/* Mobile Navigation menu */%>
-          <div class="d-flex d-lg-none">
-            <button purpose="mobile-nav-toggle-btn" class="btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
+          <div class="d-flex d-lg-none align-items-center">
+            <button purpose="mobile-nav-toggle-btn" class="btn btn-link d-flex flex-row align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
               <span class="mr-2">Menu</span>
-              <img alt="An icon indicating that interacting with this button will open the navigation menu." src="/images/icon-hamburger-blue-16x14@2x.png"/>
+              <img class="align-self-center" alt="An icon indicating that interacting with this button will open the navigation menu." src="/images/icon-hamburger-blue-16x14@2x.png"/>
             </button>
           </div>
           <div purpose="mobile-nav" class="collapse px-4 px-sm-5" id="navbarToggleExternalContent">
diff --git a/website/views/pages/sales-one-pager.ejs b/website/views/pages/sales-one-pager.ejs
index 247a5c023f..b1b872e5f5 100644
--- a/website/views/pages/sales-one-pager.ejs
+++ b/website/views/pages/sales-one-pager.ejs
@@ -114,9 +114,9 @@
       </div>
     </div>
     <div class="container pt-0" purpose="content">
-      <div style="padding-bottom: 80px; max-width: 500px;" class="flex-md-row flex-column row justify-content-center align-items-center mx-auto">
-        <a href="/try-fleet/register?tryitnow" class="btn btn-primary btn-block col-md-6 col-12">Try it out</a>
-        <a purpose="demo-btn" style="color:#000; max-width: 220px;" href="https://calendly.com/fleetdm/demo?utm_source=overview+demo+mid" target="_blank" class="btn col-md-6 col-12">Talk to an expert</a>
+      <div purpose="button-row" style="padding-bottom: 80px; max-width: 500px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
+        <a purpose="cta-button" href="/try-fleet/register?tryitnow">Try Fleet today</a>
+        <a href="https://calendly.com/fleetdm/demo?utm_source=overview+demo+mid" target="_blank" purpose="animated-arrow-button-red">Talk to an expert</a>
       </div>
     </div>
   </div>