bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

imporved pricing page, better display for Login/register modal form

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-01-05 13:03:46 +01:00
parent 7f027f322c
commit ff03643ec7
17 changed files with 315 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -1504,14 +1504,7 @@ 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 #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 {
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 {
font-size: 0.9em;
line-height: 1.3; }
@@ -2093,9 +2086,14 @@ article.card {
#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;
flex: 0 0 50%;
text-align: center;
padding: 2em 0; }
#main-content > #pricing article.product > header,
#main-content > #pricing .views-row > header,
#main-content .view-pricing-products .view-content article.product > header,
#main-content .view-pricing-products .view-content .views-row > header {
padding-bottom: 1.3em; }
#main-content > #pricing article.product > header h1,
#main-content > #pricing article.product .views-field-title,
#main-content > #pricing .views-row > header h1,
@@ -2105,10 +2103,11 @@ article.card {
#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,
line-height: 0.6;
color: #fff;
text-align: center;
word-spacing: 30000px; }
#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,
@@ -2116,60 +2115,113 @@ article.card {
#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 section.content .description, #main-content > #pricing article.product .views-field-body .description,
#main-content > #pricing .views-row section.content .description,
#main-content > #pricing .views-row .views-field-body .description,
#main-content .view-pricing-products .view-content article.product section.content .description,
#main-content .view-pricing-products .view-content article.product .views-field-body .description,
#main-content .view-pricing-products .view-content .views-row section.content .description,
#main-content .view-pricing-products .view-content .views-row .views-field-body .description {
font-size: 1.134em; }
#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.3em; }
#main-content > #pricing article.product aside,
#main-content > #pricing .views-row aside,
#main-content .view-pricing-products .view-content article.product aside,
#main-content .view-pricing-products .view-content .views-row aside {
padding: 1em 0; }
#main-content > #pricing article.product aside .variation,
#main-content > #pricing .views-row aside .variation,
#main-content .view-pricing-products .view-content article.product aside .variation,
#main-content .view-pricing-products .view-content .views-row aside .variation {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end; }
#main-content > #pricing article.product aside .variation div.variation-description,
#main-content > #pricing .views-row aside .variation div.variation-description,
#main-content .view-pricing-products .view-content article.product aside .variation div.variation-description,
#main-content .view-pricing-products .view-content .views-row aside .variation div.variation-description {
flex: 0 0 6.7em;
font-size: 2.012em;
font-weight: 800;
color: #fff; }
#main-content > #pricing article.product aside .variation div.variation-description p,
#main-content > #pricing .views-row aside .variation div.variation-description p,
#main-content .view-pricing-products .view-content article.product aside .variation div.variation-description p,
#main-content .view-pricing-products .view-content .views-row aside .variation div.variation-description p {
margin: 0;
text-align: left; }
#main-content > #pricing article.product aside .variation button,
#main-content > #pricing .views-row aside .variation button,
#main-content .view-pricing-products .view-content article.product aside .variation button,
#main-content .view-pricing-products .view-content .views-row aside .variation 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 {
#main-content > #pricing article.product:nth-child(1) aside .variation button,
#main-content > #pricing .views-row:nth-child(1) aside .variation button,
#main-content .view-pricing-products .view-content article.product:nth-child(1) aside .variation button,
#main-content .view-pricing-products .view-content .views-row:nth-child(1) aside .variation 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 {
#main-content > #pricing article.product:nth-child(2) aside .variation button,
#main-content > #pricing .views-row:nth-child(2) aside .variation button,
#main-content .view-pricing-products .view-content article.product:nth-child(2) aside .variation button,
#main-content .view-pricing-products .view-content .views-row:nth-child(2) aside .variation button {
color: #ff9f50; }
.modal {
position: relative; }
#pricing-modal-login-register {
position: relative;
width: 100%;
text-align: left; }
#pricing-modal-login-register h2 {
margin: 0.4em 0 1.1em;
padding-right: 4em;
font-size: 1.2em;
font-weight: 300; }
#pricing-modal-login-register #login-register {
width: 100%;
display: flex;
flex-flow: row nowrap; }
#pricing-modal-login-register #login-register > section {
flex: 0 0 250px; }
#pricing-modal-login-register #login-register > section form .form-item, #pricing-modal-login-register #login-register > section form .form-actions {
margin: 0.5em 0;
max-width: none; }
#pricing-modal-login-register #login-register > section form .form-type-email,
#pricing-modal-login-register #login-register > section form .form-type-password,
#pricing-modal-login-register #login-register > section form .form-actions {
display: block; }
#pricing-modal-login-register #login-register > section form input[type="email"],
#pricing-modal-login-register #login-register > section form input[type="password"] {
max-width: 11em; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }

20
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

98
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -1374,48 +1374,114 @@ article.card{
flex-flow: row nowrap;
article.product,
.views-row{
flex: auto;
// flex:0 0 50%;
flex:0 0 50%;
text-align: center;
padding: 2em 0;
>header{
padding-bottom: 1.3em;
}
>header h1,
.views-field-title{
font-size: 4em;
line-height: 1;
line-height: 0.6;
color: #fff;
text-align: center;
word-spacing: 30000px;
}
section.content,
.views-field-body{
section.content, .views-field-body{
color: #fff;
.description{
@extend %front-col-description;
font-size: 1.134em;
p{
margin: 0;
margin: 0.3em;
}
}
span.price{
font-size: 2em;
font-weight: 700;
}
}
button{
@include btn;
background-color: #fff;
aside{
padding:1em 0;
.variation{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items:flex-end;
div.variation-description{
flex: 0 0 6.7em;
font-size: 2.012em;
font-weight: 800;
color: #fff;
p{
margin:0;
text-align: left;
}
}
button{
@include btn;
background-color: #fff;
}
}
}
&:nth-child(1){
background-color: $color-base;
button{
aside .variation button{
color: $color-base;
}
}
&:nth-child(2){
background-color: $color-webshowroom;
button{
aside .variation button{
color: $color-webshowroom;
}
}
}
}
.modal{
position: relative;
}
#pricing-modal-login-register{
position: relative;
width: 100%;
text-align: left;
h2{
margin: 0.4em 0 1.1em;
padding-right: 4em;
font-size: 1.2em;
font-weight: 300;
}
#login-register{
width: 100%;
display: flex;
flex-flow: row nowrap;
>section{
flex:0 0 250px;
form{
.form-item, .form-actions {
margin: 0.5em 0;
max-width: none;
}
.form-type-email,
.form-type-password,
.form-actions{
display:block;
}
input[type="email"],
input[type="password"]{
max-width: 11em;
}
}
}
section.login{
form{
>div{
// display: block;
}
}
}
section.register{
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|

1
web/themes/custom/materiotheme/vuejs/api/gql/products.fragment.gql
View File

@@ -4,6 +4,7 @@ fragment ProductsFields on Product {
uuid
bundle
body
price_description
path
variations{
id

32
web/themes/custom/materiotheme/vuejs/components/Content/Product.vue
View File

@@ -1,29 +1,39 @@
<template>
<article class="product">
<header>
<h1 v-html="product.title" />
<h1 v-html="product.title"/>
</header>
<section class="content">
<div class="description" v-html="product.body" />
<div class="description" v-html="product.body"/>
<!-- <div class="price-description" v-html="product.price_description"/> -->
</section>
<aside v-if="!isAdherent">
<button
<div
class="variation"
v-for="variation in product.variations"
type="button"
name="addtocart"
@click.stop="checkaddtocart"
:key="variation.id"
>
Commander {{ variation.price.value }}
</button>
<div class="variation-description" v-html="variation.description"/>
<button
type="button"
name="addtocart"
@click.stop="checkaddtocart"
>
Commander
</button>
</div>
</aside>
<Modal
v-if="showLoginModal"
@close="closeModal"
:styles="{width:'500px', height:'100%'}"
:styles="{width:'500px', height:'300px'}"
>
<h2>Please login or register before continue.</h2>
<LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
<section id="pricing-modal-login-register">
<h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
<LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
</section>
</Modal>
</article>

12
web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue
View File

@@ -1,9 +1,13 @@
<template>
<div id="login-register">
<h3>Login</h3>
<LoginForm @onLogedIn="onLogedIn" />
<h3>Register</h3>
<RegisterForm @onRegistered="onRegistered" />
<section class="login">
<h3>{{ $t("default.Login") }} </h3>
<LoginForm @onLogedIn="onLogedIn" />
</section>
<section class="register">
<h3>{{ $t("default.Register a new account") }}</h3>
<RegisterForm @onRegistered="onRegistered" />
</section>
</div>
</template>