refactored front pricing to use graphql, refactored to add 2 products (web & web+showroom) each one with 2 variations (monthly, annual)

This commit is contained in:
2021-01-04 22:11:11 +01:00
parent 830f5a5909
commit 7f027f322c
15 changed files with 967 additions and 59 deletions

View File

@@ -1432,6 +1432,9 @@ header[role="banner"] {
body.path-thematique header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #69cdcf; }
body.path-pricing header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #ff9f50; }
header[role="banner"] #block-materiosapisearchblock {
padding: 0; }
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .form-item, header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form input.button {
@@ -1501,7 +1504,14 @@ article.node--type-frontpage .node__content > section.home-intro > div:nth-child
font-size: 3.5em;
line-height: 1; }
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description {
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description, article.node--type-frontpage #main-content > #pricing article.product section.content .description, #main-content > #pricing article.product section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content > #pricing article.product .views-field-body .description, #main-content > #pricing article.product .views-field-body article.node--type-frontpage .description,
article.node--type-frontpage #main-content > #pricing .views-row section.content .description, #main-content > #pricing .views-row section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content > #pricing .views-row .views-field-body .description, #main-content > #pricing .views-row .views-field-body article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content article.product section.content .description, #main-content .view-pricing-products .view-content article.product section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content article.product .views-field-body .description, #main-content .view-pricing-products .view-content article.product .views-field-body article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content .views-row section.content .description, #main-content .view-pricing-products .view-content .views-row section.content article.node--type-frontpage .description,
article.node--type-frontpage #main-content .view-pricing-products .view-content .views-row .views-field-body .description, #main-content .view-pricing-products .view-content .views-row .views-field-body article.node--type-frontpage .description {
font-size: 0.9em;
line-height: 1.3; }
@@ -1553,6 +1563,7 @@ article.node--type-frontpage .node__content > section.home-database {
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff;
color: #69cdcf; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home {
@@ -1594,6 +1605,7 @@ article.node--type-frontpage .node__content > section.home-showrooms {
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff;
color: #50aa3c; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
@@ -1672,6 +1684,7 @@ article.node--type-frontpage .node__content > section.home-blabla {
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff;
color: #9458aa; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
@@ -1740,6 +1753,7 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff; }
article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) {
background-color: #69cdcf; }
@@ -2071,6 +2085,91 @@ article.card {
#showrooms article.showroom figure img {
max-width: 100%; }
#main-content > #pricing,
#main-content .view-pricing-products .view-content {
display: flex;
flex-flow: row nowrap; }
#main-content > #pricing article.product,
#main-content > #pricing .views-row,
#main-content .view-pricing-products .view-content article.product,
#main-content .view-pricing-products .view-content .views-row {
flex: auto;
text-align: center;
padding: 2em 0; }
#main-content > #pricing article.product > header h1,
#main-content > #pricing article.product .views-field-title,
#main-content > #pricing .views-row > header h1,
#main-content > #pricing .views-row .views-field-title,
#main-content .view-pricing-products .view-content article.product > header h1,
#main-content .view-pricing-products .view-content article.product .views-field-title,
#main-content .view-pricing-products .view-content .views-row > header h1,
#main-content .view-pricing-products .view-content .views-row .views-field-title {
font-size: 4em;
line-height: 1;
color: #fff; }
#main-content > #pricing article.product section.content,
#main-content > #pricing article.product .views-field-body,
#main-content > #pricing .views-row section.content,
#main-content > #pricing .views-row .views-field-body,
#main-content .view-pricing-products .view-content article.product section.content,
#main-content .view-pricing-products .view-content article.product .views-field-body,
#main-content .view-pricing-products .view-content .views-row section.content,
#main-content .view-pricing-products .view-content .views-row .views-field-body {
color: #fff; }
#main-content > #pricing article.product section.content .description p,
#main-content > #pricing article.product .views-field-body .description p,
#main-content > #pricing .views-row section.content .description p,
#main-content > #pricing .views-row .views-field-body .description p,
#main-content .view-pricing-products .view-content article.product section.content .description p,
#main-content .view-pricing-products .view-content article.product .views-field-body .description p,
#main-content .view-pricing-products .view-content .views-row section.content .description p,
#main-content .view-pricing-products .view-content .views-row .views-field-body .description p {
margin: 0; }
#main-content > #pricing article.product section.content span.price,
#main-content > #pricing article.product .views-field-body span.price,
#main-content > #pricing .views-row section.content span.price,
#main-content > #pricing .views-row .views-field-body span.price,
#main-content .view-pricing-products .view-content article.product section.content span.price,
#main-content .view-pricing-products .view-content article.product .views-field-body span.price,
#main-content .view-pricing-products .view-content .views-row section.content span.price,
#main-content .view-pricing-products .view-content .views-row .views-field-body span.price {
font-size: 2em;
font-weight: 700; }
#main-content > #pricing article.product button,
#main-content > #pricing .views-row button,
#main-content .view-pricing-products .view-content article.product button,
#main-content .view-pricing-products .view-content .views-row button {
display: inline-block;
font-size: 0.9em;
font-weight: bold;
padding: 0.7em 1em;
margin-bottom: 0.3em;
background-color: #fff;
color: #000;
border-radius: 5px;
border: none;
background-color: #fff; }
#main-content > #pricing article.product:nth-child(1),
#main-content > #pricing .views-row:nth-child(1),
#main-content .view-pricing-products .view-content article.product:nth-child(1),
#main-content .view-pricing-products .view-content .views-row:nth-child(1) {
background-color: #69cdcf; }
#main-content > #pricing article.product:nth-child(1) button,
#main-content > #pricing .views-row:nth-child(1) button,
#main-content .view-pricing-products .view-content article.product:nth-child(1) button,
#main-content .view-pricing-products .view-content .views-row:nth-child(1) button {
color: #69cdcf; }
#main-content > #pricing article.product:nth-child(2),
#main-content > #pricing .views-row:nth-child(2),
#main-content .view-pricing-products .view-content article.product:nth-child(2),
#main-content .view-pricing-products .view-content .views-row:nth-child(2) {
background-color: #ff9f50; }
#main-content > #pricing article.product:nth-child(2) button,
#main-content > #pricing .views-row:nth-child(2) button,
#main-content .view-pricing-products .view-content article.product:nth-child(2) button,
#main-content .view-pricing-products .view-content .views-row:nth-child(2) button {
color: #ff9f50; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }