Website: (2025-11-19) browser compatibility style fixes (#36031)

Related to: #35263
Closes: https://github.com/fleetdm/fleet/issues/36022
Closes: https://github.com/fleetdm/fleet/issues/36027
Closes: https://github.com/fleetdm/fleet/issues/36029

Changes:
- Updated the CTA on the /testimonials page to match wireframes
- Updated the height of the community Slack links on the /support page
at <768px screen width
- Updated the controls library mobile navigation to display the name of
the page the user is currently on.
- Fixed the color of the sign up modal close button on IOS
This commit is contained in:
Eric 2025-11-19 18:21:11 -06:00 committed by GitHub
parent 85432336e6
commit dd7568f277
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 37 additions and 12 deletions

View file

@ -12,6 +12,7 @@
padding: 6px 0px;
text-decoration: none;
font-weight: 700;
cursor: pointer;
[purpose='button-text'] {
color: @core-fleet-black;
}

View file

@ -174,6 +174,7 @@
[purpose='modal-close-button'] {
.btn-reset();
opacity: 0.6;
color: #515774;
top: 25px;
right: 25px;
font-size: 28px;

View file

@ -225,7 +225,7 @@
background: #F7F7FC;
margin-bottom: 40px;
img {
width: 16px;
min-width: 16px;
height: 16px;
}
p {
@ -238,6 +238,9 @@
font-weight: 400;
line-height: 150%;
}
[purpose='note-text'] {
margin-left: 8px;
}
code {
color: #515774;
font-family: 'Source Code Pro';

View file

@ -62,6 +62,7 @@
margin-right: 12px;
margin-bottom: 30px;
box-shadow: none;
&:hover {
text-decoration: none;
}
@ -72,6 +73,7 @@
margin-bottom: 30px;
a {
text-decoration: none;
min-width: 0px;
}
[purpose='support-card'] {
width: 100%;
@ -84,6 +86,7 @@
[purpose='support-cards'] {
a {
text-decoration: none;
min-width: 0px;
}
flex-direction: column;
[purpose='support-row'] {
@ -177,6 +180,9 @@
a {
width: 100%;
}
[purpose='support-card'] {
height: 230px;
}
}
}
@ -191,6 +197,7 @@
[purpose='community-cards'] {
[purpose='support-card'] {
padding: 32px 40px 40px 40px;
height: fit-content;
}
}
[purpose='page-title'] {
@ -214,16 +221,19 @@
margin-bottom: 30px;
margin-right: 0px;
margin-left: 0px;
}
[purpose='community-cards'] {
[purpose='support-card'] {
padding-top: 32px;
margin-bottom: 16px;
}
}
[purpose='support-cards'] {
[purpose='support-card'] {
margin-bottom: 16px;
}
}

View file

@ -311,7 +311,7 @@
align-items: center;
gap: 4px;
border-radius: 8px;
background: var(--color-brand-vibrant-red, #FF5C83);
background: @core-vibrant-green;
color: var(--Core-White, #FFF);
text-align: center;
@ -556,6 +556,16 @@
}
}
}
[purpose='bottom-cta'] {
[purpose='button-row'] {
[purpose='cta-button'] {
margin-right: 0px;
width: 100%;
margin-bottom: 16px;
}
}
}
[purpose='video-modal'] {
[purpose='modal-content'] {
width: 95vw;

View file

@ -968,7 +968,7 @@
// - https://github.com/lancedikson/bowser/tree/1fb99ced0e8834fd9662604bad7e0f0c3eba2786#rendering-engine-flags
// --------------------------------------------------------------------
var LATEST_SUPPORTED_VERSION_BY_OS = {
iOS: '13',//« earliest version that suppports the embedded podcast player.
iOS: '14',//« earliest version that suppports the embedded podcast player.
Android: '6' // « Note: the earliest version we can test for compatibility issues with on browserstack is Android 7, but Google's search crawler uses an Android 6 user agent.
};
var LATEST_SUPPORTED_VERSION_BY_USER_AGENT = {

View file

@ -34,7 +34,7 @@
</div>
<div purpose="right-sidebar" class="d-flex flex-column">
<div purpose="docs-links" class="order-3">
<a purpose="sidebar-link" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/docs/mdm-commands.yml'+'#L'+thisCommand.lineNumberInYaml"> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Suggest an edit</a>
<a purpose="sidebar-link" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/docs/mdm-commands.yml'+'#L'+thisCommand.lineNumberInYaml" no-icon> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Suggest an edit</a>
<a purpose="sidebar-link" href="/contact"><img alt="Talk to an engineer" src="/images/icon-contact-16x16@2x.png">Get a demo</a>
</div>
</div>

View file

@ -30,7 +30,7 @@
</div>
<div class="d-flex d-lg-none">
<div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between align-items-center" @click="clickOpenTableOfContents()">
<div><p>Controls</p></div>
<div><p>MDM commands</p></div>
<div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
</div>
</div>

View file

@ -30,7 +30,7 @@
</div>
<div class="d-flex d-lg-none">
<div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between align-items-center" @click="clickOpenTableOfContents()">
<div><p>Controls</p></div>
<div><p>OS settings</p></div>
<div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
</div>
</div>

View file

@ -82,7 +82,7 @@
<a href="/docs">Docs</a>
<a href="/docs/rest-api">REST API</a>
<a href="/guides">Guides</a>
<a purpose="edit-button" class="d-flex align-items-center text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath+'#L'+policy.lineNumberInYaml"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
<a purpose="edit-button" class="d-flex align-items-center text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath+'#L'+policy.lineNumberInYaml" no-icon><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
</div>
</div>
</div>

View file

@ -36,13 +36,13 @@
</div>
<div purpose="powershell-note" v-if="selectedTab === 'ps'">
<img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
<div>
<div purpose="note-text">
<p>PowerShell commands are currently work in progress, <a :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">contributions welcome</a>.</p>
</div>
</div>
<div purpose="powershell-note" v-if="selectedTab === 'bash'">
<img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
<div>
<div purpose="note-text">
<p>Bash commands for macOS are currently work in progress, <a :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">contributions welcome</a>.</p>
</div>
</div>

View file

@ -32,7 +32,7 @@
</div>
<div purpose="right-sidebar" class="d-flex flex-column">
<div purpose="docs-links" class="order-3">
<a purpose="sidebar-link" target="_blank" href="https://github.com/fleetdm/fleet/tree/main/docs/scripts.yml"> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Edit</a>
<a purpose="sidebar-link" target="_blank" href="https://github.com/fleetdm/fleet/tree/main/docs/scripts.yml" no-icon> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Edit</a>
<a purpose="sidebar-link" href="/contact"><img alt="Talk to an engineer" src="/images/icon-contact-16x16@2x.png">Get a demo</a>
</div>
</div>

View file

@ -29,8 +29,8 @@
<a purpose="sidebar-link" :href="'/os-settings#'+selectedPlatform">OS settings</a>
</div>
<div class="d-flex d-lg-none">
<div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between align-items-center" @click="clickOpenTableOfContents()">
<div><p>Controls</p></div>
<div purpose="mobile-custom-select" class="d-flex flex-row justify-content-centery-content-between align-items-center" @click="clickOpenTableOfContents()">
<div><p>Scripts</p></div>
<div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
</div>
</div>