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

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>

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;
     }

website/assets/styles/pages/compliance.less

@@ -155,7 +155,6 @@
   }
 
   [purpose='feature-image'] {
-    height: 100%;
     img {
       max-height: 300px;
     }

website/assets/styles/pages/homepage.less

@@ -672,6 +672,7 @@
       padding-right: 0;
       [purpose='tweet-card'] {
         margin-bottom: 30px;
+        display: block;
       }
     }
     [purpose='slack-button'] {

website/assets/styles/pages/osquery-management.less

@@ -155,7 +155,6 @@
   }
 
   [purpose='feature-image'] {
-    height: 100%;
     img {
       max-height: 300px;
     }

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;
     }

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">

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>