Website: Add video modal to /better (#35726)

Closes: https://github.com/fleetdm/fleet/issues/35485

Changes:
- Added a modal to the /better page that plays the "Why is Fleet on my
computer?" video.

website/assets/js/pages/transparency.page.js

@@ -5,6 +5,7 @@ parasails.registerPage('transparency', {
   data: {
     //…
     showSecureframeBanner: false,
+    modal: undefined,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -21,6 +22,11 @@ parasails.registerPage('transparency', {
   //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
   //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
   methods: {
-    //…
+    clickOpenVideoModal: function(modalName) {
+      this.modal = modalName;
+    },
+    closeModal: function() {
+      this.modal = undefined;
+    },
   }
 });

website/assets/styles/pages/transparency.less

@@ -266,7 +266,61 @@
     border: 1px solid @core-vibrant-blue-15;
     box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
     border-radius: 16px;
-
+  }
+  [purpose='video-button'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    color: #192147;
+    text-decoration: none;
+    img {
+      height: 32px;
+      margin-right: 8px;
+    }
+    span {
+      margin-left: 4px;
+      display: inline-block;
+      color: #8B8FA2;
+      font-size: 12px;
+      margin-top: 2px;
+      font-weight: 400;
+    }
+  }
+  [purpose='video-modal'] {
+    [purpose='modal-dialog'] {
+      width: 100%;
+      max-width: 100%;
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+    [purpose='modal-content'] {
+      max-width: 1140px;
+      height: 641px;
+      background-color: transparent;
+      box-shadow: none;
+      border: none;
+      padding: 0px;
+      margin-top: 150px;
+      margin-left: auto;
+      margin-right: auto;
+      [purpose='modal-close-button'] {
+        top: -40px;
+        right: 0px;
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        padding: 0px 0px 4px 0px;
+        background-color: #192147;
+        color: #FFF;
+        opacity: 1;
+      }
+    }
+    iframe {
+      border-radius: 16px;
+      width: auto;
+      height: 641px;
+    }
   }
 
   @media (max-width: 1199px) {
@@ -302,6 +356,20 @@
       text-align: center;
       margin-bottom: 0px;
     }
+    [purpose='video-modal'] {
+      [purpose='modal-dialog'] {
+        width: 100%;
+        max-width: 100%;
+      }
+      [purpose='modal-content'] {
+        max-width: 720px;
+        height: 405px;
+      }
+      iframe {
+        width: 720px;
+        height: 405px;
+      }
+    }
 
   }
 
@@ -343,7 +411,21 @@
     [purpose='page-content'] {
       max-width: @page-container-max-width-md;
     }
-
+    [purpose='video-modal'] {
+      [purpose='modal-dialog'] {
+        max-width: 97vw;
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+      [purpose='modal-content'] {
+        max-width: 540px;
+        height: 304px;
+      }
+      iframe {
+        width: 540px;
+        height: 304px;
+      }
+    }
   }
 
   @media (max-width: 575px) {
@@ -392,6 +474,16 @@
         font-size: 24px;
       }
     }
+    [purpose='video-modal'] {
+      [purpose='modal-content'] {
+        width: 95vw;
+        height: calc(~'9/16 * 95vw');
+      }
+      iframe {
+        width: 95vw;
+        height: calc(~'9/16 * 95vw');
+      }
+    }
   }
 
   @media (max-width: 375px) {

website/views/pages/transparency.ejs

@@ -18,7 +18,8 @@
         <h3>How does it affect me?</h3>
         <p v-if="showSecureframeBanner">Secureframe Agent has to monitor compliance with a bunch of security requirements. But we also realize you have a job to do. So we want to be as un-intrusive as possible.</p>
         <p v-else>Your IT team has to maintain your computer and keep it compliant with a bunch of security requirements. But they also realize you have a job to do. So they want to be as un-intrusive as possible.</p>
-        <p>That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can <a href="https://github.com/fleetdm/fleet" target="_blank">take it apart</a> and see what it’s doing to your computer.</p>
+        <p>That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can <a href="https://github.com/fleetdm/fleet" target="_blank" no-icon>take it apart</a> and see what it’s doing to your computer.</p>
+        <a purpose="video-button"  @click="clickOpenVideoModal('fleet-in-three-minutes')"><img alt="Play" class="d-inline" src="/images/icon-play-video-32x32@2x.png">Why is Fleet on my computer?</a>
         <!-- <div purpose="swag-cta" v-if="showSwagForm">
           <a purpose="swag-link" style="text-decoration: none;" class="d-inline" href="https://kqphpqst851.typeform.com/to/Whm2imZc">
             <div class="d-flex flex-row justify-content-center align-items-center">
@@ -263,9 +264,12 @@
     </div>
     </div>
   </div>
-    <div purpose="bottom-gradient">
-      <parallax-city></parallax-city>
-    </div>
-    <signup-modal></signup-modal>
+  <div purpose="bottom-gradient">
+    <parallax-city></parallax-city>
+  </div>
+  <signup-modal></signup-modal>
+  <modal purpose="video-modal" v-if="modal === 'fleet-in-three-minutes'" @close="closeModal()">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/mHFr-tBy3h8?rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+  </modal>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>