Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Website pricing tab switch order (#20146)

Browse source 
- Changed the tab switch order to lead with IT
- Changed tabs to have a consistent width (fixes a balance issue caused
by the re-ordering)
-
This commit is contained in:
Mike Thomas 2024-07-03 00:12:25 +09:00 committed by GitHub
parent 0076148a79
commit 9ce9a22750
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
website/assets/styles/pages/pricing.less vendored
View file

@ -33,7 +33,7 @@
max-width: 1120px;
}
[purpose='pricing-switch'] {
width: 600px;
width: 660px;
cursor: pointer;
border: 1px solid #E2E4EA;
border-radius: 28px;
@ -50,29 +50,30 @@
border: 1px solid #E2E4EA;
border-radius: 28px;
height: 58px;
min-width: 140px;
min-width: 220px;
z-index: 1;
transition: 0.25s all;
}
[purpose='pricing-switch-option'] {
padding: 16px 40px;
padding: 16px 24px;
text-align: center;
cursor: pointer;
z-index: 3;
user-select: none;
white-space: nowrap;
min-width: 220px;
}
.Security-selected {
width: 251px;
transform: translateX(167px);
width: 220px;
transform: translateX(440px);
}
.IT-selected {
left: 1px;
width: 183px;
transform: translateX(416px);
width: 220px;
transform: translateX(218px);
}
.all-selected {
width: 167px;
width: 220px;
}
}
@ -451,12 +452,12 @@
}
.Security-selected {
width: 100%;
transform: translateY(56px);
transform: translateY(114px);
}
.IT-selected {
width: 100%;
top: 1px;
transform: translateY(113px);
transform: translateY(55px);
}
.all-selected {
width: 100%;

2
website/views/pages/pricing.ejs vendored
View file

@ -66,8 +66,8 @@
</div>
<div purpose="pricing-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
<div purpose="pricing-switch-option" class="all" :class="[pricingMode === 'all' ? 'selected' : '']" @click="clickChangePricingMode('all')">All features</div>
<div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'Security' ? 'selected' : '']" @click="clickChangePricingMode('Security')">For security engineers</div>
<div purpose="pricing-switch-option" class="it" :class="[pricingMode === 'IT' ? 'selected' : '']" @click="clickChangePricingMode('IT')">For IT admins</div>
<div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'Security' ? 'selected' : '']" @click="clickChangePricingMode('Security')">For security engineers</div>
<div purpose="pricing-tier-switch" :class="pricingMode+'-selected'"></div>
</div>
</div>