Website: Update /better page for mobile devices (#39206)

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

Changes:
- Updated the /better page to show a different list in the "What
personal information can Fleet see?" section when users visit the page
on a mobile device
This commit is contained in:
Eric 2026-02-03 11:39:37 -06:00 committed by GitHub
parent 92135b691d
commit d110c59c50
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 88 additions and 15 deletions

View file

@ -6,6 +6,8 @@ parasails.registerPage('transparency', {
//…
showSecureframeBanner: false,
modal: undefined,
isDesktopUser: true,
guessedPlatformName: 'computer',// Default to computer.
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@ -15,7 +17,16 @@ parasails.registerPage('transparency', {
//…
},
mounted: async function() {
//…
if(bowser.ios && !bowser.ipad) {
this.isDesktopUser = false;
this.guessedPlatformName = 'iPhone';
} else if(bowser.ipad || (navigator.maxTouchPoints > 1 && bowser.mac)) {
this.isDesktopUser = false;
this.guessedPlatformName = 'iPad';
} else if(bowser.android) {
this.isDesktopUser = false;
this.guessedPlatformName = 'Android device';
}
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

View file

@ -429,6 +429,17 @@
}
@media (max-width: 575px) {
[purpose='hero-text'] {
h1 {
font-size: 32px;
}
}
[purpose='feature-text'] {
h2 {
font-size: 24px;
}
}
[purpose='page-container'] {
padding-top: 32px;
padding-left: 24px;
@ -486,18 +497,5 @@
}
}
@media (max-width: 375px) {
[purpose='hero-text'] {
h1 {
font-size: 32px;
}
}
[purpose='feature-text'] {
h2 {
font-size: 24px;
}
}
}
}

View file

@ -126,7 +126,7 @@
</div>
</div>
<div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0" v-else>
<div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0" v-else-if="isDesktopUser">
<h2 class="text-center">What personal information can Fleet see?</h2>
<p class="mb-0">Heres what Fleet can manage on your computer:</p>
<div purpose="accordion-body" class="mx-auto">
@ -262,6 +262,70 @@
</div>
<p purpose="agents-note">Fleet can't guarantee that other personal data isn't being captured by user activity monitoring or cybersecurity tools like Veriato, CrowdStrike, etc.</p>
</div>
<div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0" v-else>
<h2 class="text-center">What can Fleet see?</h2>
<p class="mb-0">Heres what Fleet can manage on your {{guessedPlatformName}}:</p>
<div purpose="accordion-body" class="mx-auto">
<div purpose="accordion-item">
<p purpose="accordion-header" id="mobile__accordion__header1" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body1" aria-controls="mobile__accordion__body1">
On/off status
<span class="fa fa-angle-down"></span>
</p>
<p id="mobile__accordion__body1" class="collapse" aria-labelledby="mobile__accordion__header1">
Fleet knows when your device is on or off. This is useful for understanding the state of your device and for troubleshooting should a problem ever arise.
</p>
</div>
<div purpose="accordion-item">
<p purpose="accordion-header" id="mobile__accordion__header2" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body2" aria-controls="mobile__accordion__body2">
System settings
<span class="fa fa-angle-down"></span>
</p>
<p id="mobile__accordion__body2" class="collapse" aria-labelledby="mobile__accordion__header2">
Fleet can enforce settings like password length on your device. This is useful for IT teams to keep your device up to date so you dont have to.
</p>
</div>
<div purpose="accordion-item">
<p purpose="accordion-header" id="mobile__accordion__header3" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body3" aria-controls="mobile__accordion__body3">
Wi-Fi settings
<span class="fa fa-angle-down"></span>
</p>
<p id="mobile__accordion__body3" class="collapse" aria-labelledby="mobile__accordion__header3">
To help connect you to your corporate Wi-Fi or VPN, Fleet can configure Wi-Fi settings and install certificates on your device.
</p>
</div>
<div purpose="accordion-item">
<p purpose="accordion-header" id="mobile__accordion__header4" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body4" aria-controls="mobile__accordion__body4">
Remote actions
<span class="fa fa-angle-down"></span>
</p>
<p id="mobile__accordion__body4" class="collapse" aria-labelledby="mobile__accordion__header4">
Device actions are helpful for IT teams to troubleshoot your device remotely if you run into any issues. Your device can be restarted, locked or even wiped remotely by your administrator.
</p>
</div>
<div purpose="accordion-item">
<p purpose="accordion-header" id="mobile__accordion__header5" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body5" aria-controls="mobile__accordion__body5">
Device health & performance
<span class="fa fa-angle-down"></span>
</p>
<p id="mobile__accordion__body5" class="collapse" aria-labelledby="mobile__accordion__header5">
Fleet can see details about your devices hardware. E.g., what processor is used, how much memory is installed, storage capacity, battery health, etc. This allows IT teams to preemptively address device health problems, which can mitigate data loss and reduce disruption to your workflow caused by IT related issues.
</p>
</div>
<div purpose="accordion-item">
<p purpose="accordion-header" id="mobile__accordion__header6" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body6" aria-controls="mobile__accordion__body6">
Software
<span class="fa fa-angle-down"></span>
</p>
<p id="mobile__accordion__body6" class="collapse" aria-labelledby="mobile__accordion__header6">
Fleet can add apps and update software. This enables IT teams to better manage software update schedules, and reduce disruption to your workflow.
</p>
</div>
</div>
</div>
</div>
</div>
<div purpose="bottom-gradient">