bicycleure/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

fix(pricing): tables UX, layout flow, heading margins

Browse source
This commit is contained in:
Matthieu Bessat 2023-10-23 19:49:06 +02:00
parent 5b059f7043
commit 4ea81accea
3 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/sass/general.scss
View file

@ -37,8 +37,9 @@ h2 {
} }
h3 { h3 {
margin-top: .5em; margin: 0;
margin-bottom: .5em; padding-top: 1em;
padding-bottom: .5em;
} }
a { a {

33
assets/sass/prices.scss
View file

@ -1,6 +1,11 @@
.pricing-layout { .pricing-layout {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 1rem;
}
.forfait-price, .move-price {
font-weight: bold;
} }
.operations-container { .operations-container {
@ -8,24 +13,23 @@
} }
.operations-mosaic { .operations-mosaic {
// display: grid;
// grid-template-columns: 1fr 1fr;
// grid-gap: 1rem;
columns: 2; columns: 2;
grid-gap: 1rem;
} }
.operations-category { .operations-category {
display: flex; page-break-inside: avoid;
flex-direction: column;
} }
.operations-table { .operations-table {
// card
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
padding: .5rem;
border-collapse: separate; border-collapse: separate;
background: lighten($background-dark, 8%); background: lighten($background-dark, 8%);
padding-bottom: .2rem;
th { th {
opacity: 0.6; opacity: 0.6;
text-align: left; text-align: left;
@ -33,12 +37,16 @@
margin-bottom: 1rem; margin-bottom: 1rem;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
} }
tr { tr:nth-child(even) {
td { background-color: $background-dark;
} }
td, th {
padding: .5rem 1rem;
} }
.operation-price { .operation-price {
text-align: right; text-align: right;
min-width: 4rem;
// prevent collapse of the prices
} }
td.operation-price { td.operation-price {
color: $primary; color: $primary;
@ -59,7 +67,10 @@
.operations-category { .operations-category {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.operation-price { }
min-width: 4rem;
@media (min-width: $lg-breakpoint) {
.operations-mosaic {
columns: 3;
} }
} }

6
layouts/tarifs/section.html
View file

@ -8,7 +8,7 @@
<ul> <ul>
{{ range $.Site.Data.pricing.move }} {{ range $.Site.Data.pricing.move }}
<li class="move-item"> <li class="move-item">
De {{ .min }} à {{ .max }} km : {{ if eq .price 0 }}Gratuit{{ else }}{{ .price }} €{{ end }} De {{ .min }} à {{ .max }} km : <span class="move-price">{{ if eq .price 0 }}Gratuit{{ else }}{{ .price }} €{{ end }}</span>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
@ -35,8 +35,9 @@
<div class="operations-mosaic"> <div class="operations-mosaic">
{{ range $.Site.Data.pricing.standalone }} {{ range $.Site.Data.pricing.standalone }}
<div class="operations-category"> <div class="operations-category">
<div>
<h3>{{ .name }}</h3> <h3>{{ .name }}</h3>
<table class="operations-table"> <table cellspacing="0" cellpadding="0" class="operations-table">
<tr> <tr>
<th>Opération</th> <th>Opération</th>
<th class="operation-price">Prix</th> <th class="operation-price">Prix</th>
@ -48,6 +49,7 @@
</tr> </tr>
{{ end }} {{ end }}
</table> </table>
</div>
</div> </div>
{{ end }} {{ end }}
</div> </div>