From 45a16a373a4dc9f9b0a8ba60879d3da47192fa88 Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 13 Nov 2025 16:41:21 -0600 Subject: [PATCH] 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 | 8 +- website/assets/styles/pages/transparency.less | 96 ++++++++++++++++++- website/views/pages/transparency.ejs | 14 ++- 3 files changed, 110 insertions(+), 8 deletions(-) diff --git a/website/assets/js/pages/transparency.page.js b/website/assets/js/pages/transparency.page.js index be7cfde1f3..fd1a16a5f4 100644 --- a/website/assets/js/pages/transparency.page.js +++ b/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; + }, } }); diff --git a/website/assets/styles/pages/transparency.less b/website/assets/styles/pages/transparency.less index 3659c7582e..10848dcde4 100644 --- a/website/assets/styles/pages/transparency.less +++ b/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) { diff --git a/website/views/pages/transparency.ejs b/website/views/pages/transparency.ejs index 6ec11ce0f4..027891188f 100644 --- a/website/views/pages/transparency.ejs +++ b/website/views/pages/transparency.ejs @@ -18,7 +18,8 @@

How does it affect me?

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.

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.

-

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 take it apart and see what it’s doing to your computer.

+

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 take it apart and see what it’s doing to your computer.

+ PlayWhy is Fleet on my computer?