Commit c7143c19 authored by Martin Schoeler's avatar Martin Schoeler Committed by Gabriel Engel

[WIP] More pricing pages fixes (#472)

* fix buttons height

* bump version

* More fixes to the pricing page

* improved layout

* table on small screens
parent 1c711d58
......@@ -6,7 +6,7 @@ paginate_path: /blog/page/:num/
paginate: 8
# bump if alterting styles
version: 48
version: 49
# read speed
wpm: 160
......
......@@ -6,20 +6,23 @@
<div class="pricing-table_wrapper">
<table class="pricing-table">
<tr style="display: none">
{% if include.name == "pricing" %}
<th scope="col" class="pricing-table_header_hidden"></th>
<th scope="col" class="pricing-table_header_hidden">Bronze</th>
<th scope="col" class="pricing-table_header_hidden">Silver</th>
<th scope="col" class="pricing-table_header_hidden">Gold</th>
{% elsif include.name == "selfHosted" %}
<th scope="col" class="pricing-table_header_hidden"></th>
<th scope="col" class="pricing-table_header_hidden">Community</th>
<th scope="col" class="pricing-table_header_hidden">Pro</th>
<th scope="col" class="pricing-table_header_hidden">Enterprise</th>
{% endif %}
</tr>
<thead>
<tr>
{% if include.name == "pricing" %}
<th scope="col" class="pricing-table__header pricing-table__header--hidden">Features</th>
<th scope="col" class="pricing-table__header">Bronze</th>
<th scope="col" class="pricing-table__header">Silver</th>
<th scope="col" class="pricing-table__header">Gold</th>
{% elsif include.name == "selfHosted" %}
<th scope="col" class="pricing-table__header pricing-table__header--hidden">Features</th>
<th scope="col" class="pricing-table__header">Community</th>
<th scope="col" class="pricing-table__header">Pro</th>
<th scope="col" class="pricing-table__header">Enterprise</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for member in pricingTable %}
{% if member.isHeader == true %}
......@@ -29,31 +32,12 @@
{% else %}
<tr>
<th scope="row" class="pricing-table_label">{{member.title}}</th>
<td class="bronze">{% if member.first == true %}<img src="/images/default/check.svg" /> {% else %}{{member.first}}{% endif %}</td>
<td class="silver">{% if member.second == true %}<img src="/images/default/check.svg" /> {% else %}{{member.second}}{% endif %}</td>
<td class="gold">{% if member.third == true %}<img src="/images/default/check.svg" /> {% else %}{{member.third}}{% endif %}</td>
<td class="bronze">{% if member.first == true %}<img src="/images/default/check.svg" alt="check"/> {% else %}{{member.first}}{% endif %}</td>
<td class="silver">{% if member.second == true %}<img src="/images/default/check.svg" alt="check" /> {% else %}{{member.second}}{% endif %}</td>
<td class="gold">{% if member.third == true %}<img src="/images/default/check.svg" alt="check" /> {% else %}{{member.third}}{% endif %}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
<div class="pricing_four-column">
<div class="plan_wrapper footer">
{% if include.name == "pricing" %}
<a class="button trial" target="_blank" rel="noopener noreferrer" href="//cloud.rocket.chat/trial">Start trial</a>
{% elsif include.name == "selfHosted" %}
<a class="button trial" target="_blank" rel="noopener noreferrer" href="https://rocket.chat/install">Install</a>
{% endif %}
</div>
<div class="plan_wrapper footer">
<a class="button trial" target="_blank" rel="noopener noreferrer" href="//cloud.rocket.chat/trial">Start trial</a>
</div>
<div class="plan_wrapper footer">
<a class="button trial" target="_blank" rel="noopener noreferrer" href="https://rocket.chat/contact">Contact Us</a>
</div>
</div>
.pricing-table {
border-collapse: collapse;
border-collapse: collapse;
table-layout: fixed;
&_wrapper {
margin: 0 auto;
margin: 0 auto;
overflow-x: auto;
}
&_header {
height: 32px;
......@@ -16,7 +19,27 @@
letter-spacing: 0.67px;
line-height: 16px;
padding-left:24px;
}
&__header {
font-size: 1em;
padding: 10px;
color: #000;
&--hidden {
color: transparent;
user-select: none;
}
@media screen and (max-width: $tablet) {
font-size: 0.8em;
}
}
@media screen and (max-width: $tablet) {
width: 100%;
}
tr {
border: 1px solid #E7EBF2;
}
......@@ -29,17 +52,19 @@
margin: auto
}
}
&_label {
&_label {
color: #030C1A;
font-size: 16px;
font-weight: 500;
text-align: left;
letter-spacing: 0;
line-height: 24px;
padding-left: 24px;
padding-right: 24px;
word-wrap: wrap;
}
padding: 5px 24px;
word-wrap: break-word;
}
.bronze, .silver, .gold {
color: #030C1A;
font-size: 16px;
......@@ -47,5 +72,15 @@
text-align: center;
letter-spacing: 0;
line-height: 24px;
}
@media screen and (max-width: $tablet) {
&_label, .bronze, .silver, .gold {
font-size: 10px;
padding: 5px;
line-height: 12px;
text-align: center;
}
}
}
\ No newline at end of file
}
......@@ -15,8 +15,12 @@
background-image: url("../images/cloud/hero@2x.jpg");
}
}
.pricing {
section.container {
margin: 2em auto;
}
body.pricing {
.headroom--top {
&.app-header_wrap {
background: none !important;
......@@ -75,22 +79,31 @@ body.pricing {
width: 434px;
margin: 0 auto;
justify-content: space-between;
@media screen and (max-width: $tablet) {
width: 100%;
}
}
.col.title {
margin-bottom: 102px;
}
.switch{
.switch {
border-radius: 2px;
height: 43px;
width: 216px;
line-height: 43px;
width: 50%;
background: #A3B4CC;
color: #fff;
margin: 0 .5em;
cursor: pointer;
&.active {
background: $brand;
}
p {
color: #FFFFFF;
font-size: 16px;
......@@ -119,37 +132,46 @@ body.pricing {
.pricing_four-column {
display: flex;
align-content: center;
justify-content: flex-end;
justify-content: center;
margin-bottom: -1px;
margin-left: -4px;
margin-right: 1px;
@media screen and (max-width: $tablet) {
flex-direction: column;
}
.plan_wrapper {
min-height: 420px;
width: 25%;
border: 1px solid #e7ebf2;
border-right-width: 0;
color: #6b7d99;
padding: 1em;
vertical-align: top;
min-width: 14em;
line-height: 1.2;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: -1px;
&:last-child{
border-right-width: 1px;
}
@media screen and (max-width: $tablet) {
border: 1px solid #e7ebf2;
margin: 1em auto;
width: 100%;
.button {
font-size: 1em;
}
}
&.footer {
height: unset;
border: 1px solid #e7ebf2;
min-height: 0;
border-top: 0;
&:nth-child(2){
border: 0;
border-bottom: 1px solid #e7ebf2;
}
@media screen and (max-width: $tablet) {
display: none;
}
......
......@@ -42,6 +42,9 @@
@include defaultStyle;
@include disabledStyle;
&:focus {
box-shadow: 0 0 7px 1px #fff, 0 0 7px 2px $brand;
}
color: #fff;
background-color: $brand;
......@@ -203,4 +206,4 @@
.button.trial {
width: 100%;
}
\ No newline at end of file
}
......@@ -27,12 +27,8 @@ redirect_from:
<p class="label theme_type--light">Pricings &amp; plans</p>
<h2 class="display">Choose the right plan for your team</h2>
<div class="switch-container">
<a class="switch self-managed active">
<p>Self Managed</p>
</a>
<a class="switch cloud">
<p>Cloud</p>
</a>
<a class="switch self-managed active" href="#self">Self Managed</a>
<a class="switch cloud" href="#cloud">Cloud</a>
</div>
</div>
</div>
......@@ -94,8 +90,18 @@ redirect_from:
</div>
</div>
{% include pricing-table.html name="pricing" %}
</section>
<section class="container">
{% capture header %}
<thead>
<tr>
<th>Community</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
{% endcapture %}
{% include pricing-table.html name="pricing" header=header %}
</section>
<section class="container">
......@@ -366,7 +372,18 @@ redirect_from:
</footer>
</div>
</div>
{% include pricing-table.html name="selfHosted" %}
</section>
<section class="container">
{% capture header %}
<thead>
<tr>
<th>Community</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
{% endcapture %}
{% include pricing-table.html name="selfHosted" header=header%}
</section>
<div class="space--8"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment