Skip to content

Commit 6e2fcaf

Browse files
devlikeprodevlikepro
committed
tiers m\d
1 parent 62b00c5 commit 6e2fcaf

File tree

2 files changed

+138
-84
lines changed

2 files changed

+138
-84
lines changed

‎hugo_stats.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
"table",
5656
"tbody",
5757
"td",
58-
"tfoot",
5958
"th",
6059
"thead",
6160
"title",
@@ -359,6 +358,7 @@
359358
"tab-pane",
360359
"table",
361360
"table-highlight-first-column",
361+
"table-width-limiter",
362362
"tags",
363363
"taxonomy",
364364
"term",
@@ -388,8 +388,9 @@
388388
"tier-pros",
389389
"tier-title",
390390
"tiers-compare-table",
391-
"tiers-feature",
391+
"tiers-compare-wrapper",
392392
"tiers-group",
393+
"tiers-row",
393394
"title",
394395
"toc-mobile",
395396
"visually-hidden",

‎layouts/support-us/list.html‎

Lines changed: 135 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,22 @@
1616
background: rgba(255, 255, 255, 0.96);
1717
}
1818

19+
.table-width-limiter {
20+
width: 100%;
21+
}
22+
23+
.table-width-limiter table {
24+
width: 100%;
25+
}
26+
27+
@media (min-width: 1200px) {
28+
.table-width-limiter {
29+
max-width: 75%;
30+
margin-left: auto;
31+
margin-right: auto;
32+
}
33+
}
34+
1935
.tiers-compare-table caption {
2036
caption-side: top;
2137
text-align: center;
@@ -35,6 +51,12 @@
3551
background: rgba(15, 17, 30, 0.02);
3652
}
3753

54+
.tiers-compare-table .tier-column--label {
55+
background: rgba(15, 17, 30, 0.02);
56+
text-align: left;
57+
width: 22%;
58+
}
59+
3860
.tiers-compare-table .tier-title {
3961
font-size: 1.25rem;
4062
font-weight: 700;
@@ -78,6 +100,15 @@
78100
text-align: center;
79101
}
80102

103+
.tiers-compare-table .tiers-row {
104+
background: rgba(255, 255, 255, 0.96);
105+
}
106+
107+
.tiers-compare-table .tiers-feature-heading {
108+
background: rgba(15, 17, 30, 0.02);
109+
width: 22%;
110+
}
111+
81112
.tiers-compare-table .tier-cell {
82113
text-align: center;
83114
}
@@ -105,15 +136,60 @@
105136
background: rgba(15, 17, 30, 0.05);
106137
padding-top: 1.1rem;
107138
padding-bottom: 0.6rem;
108-
text-align: center;
139+
text-align: left;
109140
}
110141

111-
.tiers-compare-table tbody tr.tiers-feature th {
112-
font-size: 1rem;
113-
text-transform: none;
114-
letter-spacing: 0;
115-
background: rgba(15, 17, 30, 0.02);
116-
text-align: center;
142+
@media (max-width: 991.98px) {
143+
.tiers-compare-table thead {
144+
display: none;
145+
}
146+
147+
.tiers-compare-table tbody,
148+
.tiers-compare-table tfoot {
149+
display: block;
150+
}
151+
152+
.tiers-compare-table tbody tr,
153+
.tiers-compare-table tfoot tr {
154+
display: block;
155+
width: 100%;
156+
}
157+
158+
.tiers-compare-table tbody tr.tiers-group th {
159+
display: block;
160+
text-align: center;
161+
}
162+
163+
.tiers-compare-table .tiers-row {
164+
margin-top: 1rem;
165+
border-top: 1px solid rgba(15, 17, 30, 0.08);
166+
padding-top: 1rem;
167+
}
168+
169+
.tiers-compare-table .tiers-feature-heading {
170+
display: block;
171+
width: 100%;
172+
text-align: center;
173+
margin-bottom: 0.75rem;
174+
}
175+
176+
.tiers-compare-table .tiers-row td {
177+
display: inline-block;
178+
width: calc(33.333% - 0.5rem);
179+
padding: 0.75rem 0.5rem;
180+
border-radius: 0.75rem;
181+
}
182+
183+
.tiers-compare-table .tiers-row--actions td,
184+
.tiers-compare-table .tiers-row--donation td {
185+
width: 100%;
186+
display: block;
187+
margin: 0.35rem 0;
188+
}
189+
190+
.tiers-compare-table .tiers-row--actions td a {
191+
display: inline-block;
192+
}
117193
}
118194

119195
.tiers-compare-table .tier-check {
@@ -401,132 +477,107 @@ <h2 class='h4 color-accent mt-0 display-4'>PRO</h2>
401477
<div class='text-center' data-aos="fade-up">
402478
<h1 class='display-5 fw-normal mt-1'>Compare</h1>
403479
</div>
404-
<div class='row justify-content-center' data-aos="zoom-in">
480+
<div class='justify-content-center tiers-compare-wrapper table-width-limiter' data-aos="zoom-in">
405481
<table class='table tiers-compare-table align-middle text-start'>
406-
<thead>
482+
<tbody>
407483
<tr>
408-
<th scope='col' class='tier-column tier-column--core'>
484+
<th scope='col' class='tier-column tiers-feature-heading' style="background-color: transparent"></th>
485+
<th scope='col' class='tier-column tier-column--core' style="text-align: center">
409486
<div class='tier-title'>Core</div>
410487
<div class='tier-price'>$0</div>
411488
<div class='tier-note text-muted'>Start building</div>
412489
</th>
413-
<th scope='col' class='tier-column tier-column--plus'>
490+
<th scope='col' class='tier-column tier-column--plus' style="text-align: center">
414491
<div class='tier-title'>Plus</div>
415492
<div class='tier-price'>$19<span class='text-muted'>/mo*</span></div>
416493
<div class='tier-note text-success'>Most popular</div>
417494
</th>
418-
<th scope='col' class='tier-column tier-column--pro'>
495+
<th scope='col' class='tier-column tier-column--pro' style="text-align: center">
419496
<div class='tier-title'>PRO</div>
420497
<div class='tier-price'>$99<span class='text-muted'>/mo*</span></div>
421498
<div class='tier-note text-primary'>Full access</div>
422499
</th>
423500
</tr>
424-
</thead>
425-
<tbody>
426501
<tr class='tiers-group'>
427-
<th scope='colgroup' colspan='3'>Messaging</th>
502+
<th scope='colgroup' colspan='4'>Messaging</th>
428503
</tr>
429-
<tr class='tiers-feature'>
430-
<th scope='rowgroup' colspan='3'>Sessions</th>
431-
</tr>
432-
<tr>
504+
<tr class='tiers-row'>
505+
<th scope='row' class='tiers-feature-heading'>Sessions</th>
433506
<td class='tier-cell tier-cell--core'>1</td>
434507
<td class='tier-cell tier-cell--plus'><span class='tier-perk'>Unlimited</span><span class='text-muted ms-1'>¹</span></td>
435508
<td class='tier-cell tier-cell--pro'><span class='tier-perk'>Unlimited</span></td>
436509
</tr>
437-
<tr class='tiers-feature'>
438-
<th scope='rowgroup' colspan='3'>Unlimited messages</th>
439-
</tr>
440-
<tr>
510+
<tr class='tiers-row'>
511+
<th scope='row' class='tiers-feature-heading'>Unlimited messages</th>
441512
<td class='tier-cell tier-cell--core'>✔</td>
442513
<td class='tier-cell tier-cell--plus'>✔</td>
443514
<td class='tier-cell tier-cell--pro'>✔</td>
444515
</tr>
445-
<tr class='tiers-feature'>
446-
<th scope='rowgroup' colspan='3'>Send text</th>
447-
</tr>
448-
<tr>
516+
<tr class='tiers-row'>
517+
<th scope='row' class='tiers-feature-heading'>Send text</th>
449518
<td class='tier-cell tier-cell--core'><span class='tier-check'>✔</span></td>
450519
<td class='tier-cell tier-cell--plus'><span class='tier-check'>✔</span></td>
451520
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
452521
</tr>
453-
<tr class='tiers-feature'>
454-
<th scope='rowgroup' colspan='3'>Send image, voice, video</th>
455-
</tr>
456-
<tr>
522+
<tr class='tiers-row'>
523+
<th scope='row' class='tiers-feature-heading'>Send image, voice, video</th>
457524
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
458525
<td class='tier-cell tier-cell--plus'><span class='tier-check'>✔</span></td>
459526
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
460527
</tr>
461528
<tr class='tiers-group'>
462-
<th scope='colgroup' colspan='3'>Data &amp; Infrastructure</th>
529+
<th scope='colgroup' colspan='4'>Data &amp; Infrastructure</th>
463530
</tr>
464-
<tr class='tiers-feature'>
465-
<th scope='rowgroup' colspan='3'>Self-hosted</th>
466-
</tr>
467-
<tr>
531+
<tr class='tiers-row'>
532+
<th scope='row' class='tiers-feature-heading'>Self-hosted</th>
468533
<td class='tier-cell tier-cell--core'>✔</td>
469534
<td class='tier-cell tier-cell--plus'>✔</td>
470535
<td class='tier-cell tier-cell--pro'>✔</td>
471536
</tr>
472-
<tr class='tiers-feature'>
473-
<th scope='rowgroup' colspan='3'>PostgreSQL &amp; MongoDB</th>
474-
</tr>
475-
<tr>
537+
<tr class='tiers-row'>
538+
<th scope='row' class='tiers-feature-heading'>PostgreSQL &amp; MongoDB</th>
476539
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
477540
<td class='tier-cell tier-cell--plus'><span class='tier-check'>✔</span></td>
478541
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
479542
</tr>
480-
<tr class='tiers-feature'>
481-
<th scope='rowgroup' colspan='3'>WAHA Plus Docker image</th>
482-
</tr>
483-
<tr>
543+
<tr class='tiers-row'>
544+
<th scope='row' class='tiers-feature-heading'>WAHA Plus Docker image</th>
484545
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
485546
<td class='tier-cell tier-cell--plus'><span class='tier-check'>✔</span></td>
486547
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
487548
</tr>
488549
<tr class='tiers-group'>
489-
<th scope='colgroup' colspan='3'>Team &amp; Support</th>
490-
</tr>
491-
<tr class='tiers-feature'>
492-
<th scope='rowgroup' colspan='3'>Discord community</th>
550+
<th scope='colgroup' colspan='4'>Team &amp; Support</th>
493551
</tr>
494-
<tr>
552+
<tr class='tiers-row'>
553+
<th scope='row' class='tiers-feature-heading'>Discord community</th>
495554
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
496555
<td class='tier-cell tier-cell--plus'><span class='tier-check'>✔</span></td>
497556
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
498557
</tr>
499-
<tr class='tiers-feature'>
500-
<th scope='rowgroup' colspan='3'>Priority support</th>
501-
</tr>
502-
<tr>
558+
<tr class='tiers-row'>
559+
<th scope='row' class='tiers-feature-heading'>Priority support</th>
503560
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
504561
<td class='tier-cell tier-cell--plus'><span class='text-muted'>—</span></td>
505562
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
506563
</tr>
507-
<tr class='tiers-feature'>
508-
<th scope='rowgroup' colspan='3'>Invite your team (5 seats)</th>
509-
</tr>
510-
<tr>
564+
<tr class='tiers-row'>
565+
<th scope='row' class='tiers-feature-heading'>Invite your team (5 seats)</th>
511566
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
512567
<td class='tier-cell tier-cell--plus'><span class='text-muted'>—</span></td>
513568
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
514569
</tr>
515-
<tr class='tiers-feature'>
516-
<th scope='rowgroup' colspan='3'>WAHA Plus source code</th>
517-
</tr>
518-
<tr>
570+
<tr class='tiers-row'>
571+
<th scope='row' class='tiers-feature-heading'>WAHA Plus source code</th>
519572
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
520573
<td class='tier-cell tier-cell--plus'><span class='text-muted'>—</span></td>
521574
<td class='tier-cell tier-cell--pro'><span class='tier-check tier-check--pro'>✔</span></td>
522575
</tr>
523576
<tr class='tiers-group'>
524-
<th scope='colgroup' colspan='3'>Recognition</th>
525-
</tr>
526-
<tr class='tiers-feature'>
527-
<th scope='rowgroup' colspan='3'>GitHub supporter badge</th>
577+
<th scope='colgroup' colspan='4'>Recognition</th>
528578
</tr>
529-
<tr>
579+
<tr class='tiers-row'>
580+
<th scope='row' class='tiers-feature-heading'>GitHub supporter badge</th>
530581
<td class='tier-cell tier-cell--core'><span class='text-muted'>—</span></td>
531582
<td class='tier-cell tier-cell--plus'>
532583
<img src='https://img.shields.io/badge/patron-PLUS-a0e6ba' alt='GitHub PLUS patron badge'>
@@ -535,36 +586,36 @@ <h1 class='display-5 fw-normal mt-1'>Compare</h1>
535586
<img src='https://img.shields.io/badge/patron-PRO-188a42' alt='GitHub PRO patron badge'>
536587
</td>
537588
</tr>
538-
</tbody>
539-
<tfoot>
540-
<tr class='tiers-feature'>
541-
<th scope='rowgroup' colspan='3'>Donation</th>
542-
</tr>
543-
<tr>
589+
<tr class='tiers-row'>
590+
<th scope='row' class='tiers-feature-heading'>Donation</th>
544591
<td class='tier-cell tier-cell--core'><span class='fw-semibold'>$0</span></td>
545592
<td class='tier-cell tier-cell--plus'><span class='fw-semibold'>$19</span><span class='text-muted'>/mo*</span></td>
546593
<td class='tier-cell tier-cell--pro'><span class='fw-semibold'>$99</span><span class='text-muted'>/mo*</span></td>
547594
</tr>
548-
<tr class='tiers-feature'>
549-
<th scope='rowgroup' colspan='3'>Action</th>
550-
</tr>
551-
<tr>
595+
<tr class='tiers-row'>
596+
<th scope='row' class='tiers-feature-heading'>Action</th>
552597
<td class='tier-cell tier-cell--core'>
553598
<a class='fw-semibold'
599+
style="white-space: nowrap;"
554600
href='/docs/{{ if .Site.Params.options.docsVersioning }}{{ .Site.Params.docsVersion }}/{{ end }}overview/introduction/'>Get
555601
started →</a>
556602
</td>
557603
<td class='tier-cell tier-cell--plus'>
558-
<a class='fw-semibold' href='#donations'>Support Us →</a>
604+
<a class='fw-semibold'
605+
606+
style="white-space: nowrap;"
607+
href='#donations'>Support Us →</a>
559608
</td>
560609
<td class='tier-cell tier-cell--pro'>
561-
<a class='fw-semibold' href='#donations'>Support Us →</a>
610+
<a class='fw-semibold'
611+
style="white-space: nowrap;"
612+
href='#donations'>Support Us →</a>
562613
</td>
563614
</tr>
564-
</tfoot>
615+
</tbody>
565616
</table>
566617
</div>
567-
<div>
618+
<div class='table-width-limiter'>
568619
<p class='small text-muted mt-3 mb-0'>
569620
* FAQ:
570621
<a
@@ -586,9 +637,10 @@ <h1 class='display-5 fw-normal mt-1'>Compare</h1>
586637
<h1 class='display-5 fw-normal mt-1'>Why WAHA?</h1>
587638
</div>
588639
<div class='row justify-content-center' data-aos="zoom-in">
589-
<table class='table-highlight-first-column'>
640+
<div class='table-width-limiter'>
641+
<table class='table-highlight-first-column'>
590642
<tr>
591-
<th>Features</th>
643+
<th></th>
592644
<th>
593645
<img src='/images/logo-robot.svg' title='WhatsApp API' alt='logo'
594646
style='height: 2rem; transform: translateY(-0.3rem)'/>
@@ -646,6 +698,7 @@ <h1 class='display-5 fw-normal mt-1'>Why WAHA?</h1>
646698
<td>➖ Monthly payment starts from $50</td>
647699
</tr>
648700
</table>
701+
</div>
649702
</div>
650703
</section>
651704

0 commit comments

Comments
 (0)