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: Update pricing page styles (#13833)

Browse source 
Closes: #13776
Closes: #13781
Closes: #13782


Changes:
- Fixed a bug where Pricing tier names were not being shown when the
page is in "security" mode.
- Removed a CSS property that was creating a double border on tables on
older versions of Chrome and Opera.
- Updated page styles to match wireframes.
This commit is contained in:
Eric 2023-09-15 18:37:19 -05:00 committed by GitHub
parent ea17f7d2ef
commit f894726d73
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -282,13 +282,19 @@
border-top-right-radius: 8px;
border-top: none;
}
div:last-of-type {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
div {
border-top: 1px solid #E2E4EA;
}
[purpose='striped-row'] {
background-color: #F9FAFC;
}
strong {
color: @core-fleet-black-75;
}
}
[purpose='premium-price-linebreak'] {
display: none;
@ -297,6 +303,9 @@
height: 16px;
width: 16px;
}
[purpose='table-checkmark'] {
width: 175px;
}
[purpose='pricing-categories-table'] {
margin-bottom: 40px;
thead {
@ -315,7 +324,6 @@
color: #515774;
border-radius: 8px;
outline: 1px solid #E2E4EA;
box-shadow: 0 0 0 1px #E2E4EA;
td {
padding: 12px 24px;
vertical-align: middle;
@ -346,6 +354,7 @@
font-size: 24px;
line-height: 32px;
color: #192147;
margin-bottom: 24px;
}
}
@ -396,7 +405,11 @@
[purpose='premium-card'] {
width: 100%;
}
[purpose='premium-tier-card'] {
margin-left: 0px;
}
}
@media (max-width: 575px) {
// >575px:
// - The Premium Cloud card switches to a column layout

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

@ -133,7 +133,7 @@
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div class="d-flex flex-column justify-content-center p-0">
<%// Desktop IT-focused features tables %>
<div class="d-none d-sm-block">
<div class="d-none d-md-block">
<% for(let category of pricingTable) {%>
<table purpose="pricing-categories-table" class="table">
<thead>
@ -158,13 +158,13 @@
<tbody>
<% for( let feature of category.features){ %>
<tr>
<td purpose="feature-name" class="w-50"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
<td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
<%if(feature.tier === 'Free') {%>
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<%} else {%>
<td></td>
<td purpose="table-checkmark"></td>
<%}%>
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
</tr>
<% }%>
</tbody>
@ -174,7 +174,7 @@
</div>
<%// Mobile IT-focused features tables %>
<% for(let category of pricingTable) {%>
<div purpose="mobile-feature-table-section" class="d-block d-sm-none">
<div purpose="mobile-feature-table-section" class="d-block d-md-none">
<h4><%- category.categoryName %></h4>
<% for( let feature of category.features){ %>
<div purpose="mobile-features-table" class="d-flex flex-column">
@ -195,7 +195,7 @@
<% }%>
</div>
<% }%>
<p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
<p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
</div>
</div>
<%// Security-focused features table %>
@ -203,20 +203,20 @@
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
<div class="d-flex flex-column justify-content-center p-0">
<%// Desktop security-focused features tables %>
<div class="d-none d-sm-block">
<div class="d-none d-md-block">
<% for(let category of pricingTableForSecurity) {%>
<table purpose="pricing-categories-table" class="table">
<thead>
<tr>
<td><h4><%- category.categoryName %></h4></td>
<%if(pricingTable.indexOf(category) === 0) {%>
<%if(pricingTableForSecurity.indexOf(category) === 0) {%>
<td class="text-center">
<strong>Free</strong>
</td>
<%}else {%>
<td ></td>
<%}%>
<%if(pricingTable.indexOf(category) === 0) {%>
<%if(pricingTableForSecurity.indexOf(category) === 0) {%>
<td class="text-center">
<strong>Premium</strong>
</td>
@ -230,11 +230,11 @@
<tr>
<td purpose="feature-name" class="w-50"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
<%if(feature.tier === 'Free') {%>
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<%} else {%>
<td></td>
<td purpose="table-checkmark"></td>
<%}%>
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
<td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
</tr>
<% }%>
</tbody>
@ -244,7 +244,7 @@
</div>
<%// Mobile security-focused features tables %>
<% for(let category of pricingTableForSecurity) {%>
<div purpose="mobile-feature-table-section" class="d-block d-sm-none">
<div purpose="mobile-feature-table-section" class="d-block d-md-none">
<h4><%- category.categoryName %></h4>
<% for( let feature of category.features){ %>
<div purpose="mobile-features-table" class="d-flex flex-column">
@ -265,7 +265,7 @@
<% }%>
</div>
<% }%>
<p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
<p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
</div>
</div>
<%// FAQ %>