added engagement de 12 mois to product variations descriptions

web/themes/custom/materiotheme/assets/dist/module-pricing.bundle.js

@@ -1 +1 @@
-(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[665],{1003:(t,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>v});var s=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{attrs:{id:"pricing"}},[t.products.length?t._l(t.products,(function(t){return r("Product",{key:t.uuid,attrs:{product:t}})})):r("div",{staticClass:"loading"},[r("span",[t._v(t._s(t.$t("default.Loading…")))])])],2)};s._withStripped=!0;var o=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("article",{staticClass:"product"},[r("header",[r("h1",{domProps:{innerHTML:t._s(t.product.title)}})]),t._v(" "),r("section",{staticClass:"content"},[r("div",{staticClass:"description",domProps:{innerHTML:t._s(t.product.body)}})]),t._v(" "),t.isAdherent?t._e():r("aside",[t._l(t.product.variations,(function(e){return r("div",{key:e.id,staticClass:"variation"},[r("div",{staticClass:"variation-description",domProps:{innerHTML:t._s(e.description)}}),t._v(" "),r("button",{attrs:{type:"button",name:"addtocart"},on:{click:function(r){return r.stopPropagation(),t.checkaddtocart(r,e.id)}}},[t._v("\n        "+t._s(t.$t("default."+t.variation_btn_txt[e.id]))+"\n      ")])])})),t._v(" "),4==t.product.id?r("div",[r("a",{staticClass:"btn",attrs:{href:"/pricing/multijoueur"}},[t._v("\n        "+t._s(t.$t("default.Ask for a quote"))+"\n      ")])]):t._e()],2)])};o._withStripped=!0;var i=r(4408),n=r(1423);const a={name:"Product",router:i.Z,props:["product"],mixins:[n.Z],data:()=>({quantity:1,variation_btn_txt:{3:"Yeees!",4:"Yay!",5:"Great!",6:"OKAY!"}}),created(){this.product}};var c=r(1900),d=(0,c.Z)(a,o,[],!1,null,"0f9e2147",null);d.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Product.vue";const u=d.exports;var p=r(629);const l={name:"Pricing",computed:{...(0,p.rn)({products:t=>t.Pages.products})},created(){this.products.length||this.getProducts()},methods:{...(0,p.nv)({getProducts:"Pages/getProducts"})},components:{Product:u}};var _=(0,c.Z)(l,s,[],!1,null,"bdd44e2e",null);_.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue";const v=_.exports}}]);
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[665],{1003:(t,e,s)=>{"use strict";s.r(e),s.d(e,{default:()=>v});var r=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{attrs:{id:"pricing"}},[t.products.length?t._l(t.products,(function(t){return s("Product",{key:t.uuid,attrs:{product:t}})})):s("div",{staticClass:"loading"},[s("span",[t._v(t._s(t.$t("default.Loading…")))])])],2)};r._withStripped=!0;var i=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("article",{staticClass:"product"},[s("header",[s("h1",{domProps:{innerHTML:t._s(t.product.title)}})]),t._v(" "),s("section",{staticClass:"content"},[s("div",{staticClass:"description",domProps:{innerHTML:t._s(t.product.body)}})]),t._v(" "),t.isAdherent?t._e():s("aside",[t._l(t.product.variations,(function(e){return s("div",{key:e.id,staticClass:"variation"},[s("div",{staticClass:"variation-description",domProps:{innerHTML:t._s(e.description)}}),t._v(" "),s("div",{staticClass:"actions"},[s("button",{attrs:{type:"button",name:"addtocart"},on:{click:function(s){return s.stopPropagation(),t.checkaddtocart(s,e.id)}}},[t._v("\n          "+t._s(t.$t("default."+t.variation_btn_txt[e.id]))+"\n        ")])])])})),t._v(" "),4==t.product.id?s("div",[s("a",{staticClass:"btn",attrs:{href:"/pricing/multijoueur"}},[t._v("\n        "+t._s(t.$t("default.Ask for a quote"))+"\n      ")])]):t._e()],2)])};i._withStripped=!0;var o=s(4408),n=s(1423);const a={name:"Product",router:o.Z,props:["product"],mixins:[n.Z],data:()=>({quantity:1,variation_btn_txt:{3:"Yeees!",4:"Yay!",5:"Great!",6:"OKAY!"}}),created(){this.product}};var c=s(1900),d=(0,c.Z)(a,i,[],!1,null,"0f9e2147",null);d.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Product.vue";const u=d.exports;var p=s(629);const l={name:"Pricing",computed:{...(0,p.rn)({products:t=>t.Pages.products})},created(){this.products.length||this.getProducts()},methods:{...(0,p.nv)({getProducts:"Pages/getProducts"})},components:{Product:u}};var _=(0,c.Z)(l,r,[],!1,null,"bdd44e2e",null);_.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue";const v=_.exports}}]);

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1282,27 +1282,59 @@ article.node--type-frontpage{
               }
             }
 						.field--name-variations{
-							.field__item{
+							>.field__item{
+                // text-align: center;
+                // display: table;
+                // width: 100%;
+                // &:last-child{
+                //   margin: 0.1em 0 0;
+                // }  
+                margin-top: 0.5em;
 								>div{
-									display: flex;
+									// display: flex;
-									flex-direction: row;
+									// flex-direction: row;
-									justify-content: center;
+									// justify-content: center;
-									align-items: baseline;
+									// align-items: center;
-									.form-actions,p{
+                  // display: table-row;
-										margin:0;
+                  // height: 1em; 
+                  display: grid;
+                  grid-template-columns: 50% 50%;
+
+                  >*{
+                    // height:2em;
+                    // display: table-cell;
+                    // vertical-align: middle;
+                    align-self: center;
                   }
 									.field--name-field-description{
-										margin-right: 0.5em;
+                    text-align: right;
-										p{
+                    // width: 55%;
+										// margin-right: 0.5em;
+                    // min-width: 10em;
+										h4{
 											font-size: 1.512em;
 											font-weight: 800;
 											color: #fff;
 											white-space: nowrap;
-											text-align: right;
+                      line-height: 1;
 										}
+                    p{
+                      font-size: 0.882em;
+                      line-height: 0.8;
+                      margin: 0;
+                    }
+									}
+                  form{
+                    text-align: left;
+                    padding-left: 1em;
+                    // position: relative;
+                    .form-actions{
+                      margin:0;
                     }
                     input.button--add-to-cart{
                       @include btn;
+                      margin: 0;
+                    }
                   }
 								}
 							}
@@ -2264,28 +2296,41 @@ article.card{
       }
     }
     aside{
-      padding:1em 0;
+      // padding:1em 0;
       .variation{
-        display: flex;
+        // display: flex;
-        flex-flow: row nowrap;
+        // flex-flow: row nowrap;
-        justify-content: center;
+        // justify-content: center;
-        align-items:stretch;
+        // align-items:stretch;
+        display: grid;
+        grid-template-columns: 50% 50%;
+        margin-top: 0.5em;
+        >*{
+          align-self: center;
+        }
         div.variation-description{
-          flex: 0 0 6.7em;
+          // flex: 0 0 auto;
+          color: #fff;
+          text-align: right;
+          h4{
             font-size: 1.5em;
             font-weight: 800;
-          color: #fff;
+            margin:0;
+            line-height: 1;
+          }
           p{
             margin:0;
-            text-align: right;
+            line-height: 0.8;
-						padding-right: 0.5em;
-						padding-top: 0.1em;
           }
         }
+        div.actions{
+          text-align: left;
+          padding-left: 1em;
           button{
             @include btn;
             background-color: #fff;
           }
+        }
       }
 			a.btn{
 				@include btn;
@@ -2294,19 +2339,19 @@ article.card{
     }
     &:nth-child(1){
       background-color: $color-base;
-      aside .variation button{
+      aside .variation .actions button{
         color: $color-base;
       }
     }
     &:nth-child(2){
       background-color: $color-webshowroom;
-      aside .variation button{
+      aside .variation .actions button{
         color: $color-webshowroom;
       }
     }
 		&:nth-child(3){
       background-color: $color-showrooms;
-      aside .variation button,
+      aside .variation .actions button,
 			a.btn{
         color: $color-showrooms;
       }

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -13,6 +13,7 @@
         :key="variation.id"
       >
         <div class="variation-description" v-html="variation.description"/>
+        <div class="actions">
           <button
             type="button"
             name="addtocart"
@@ -21,6 +22,7 @@
             {{ $t('default.'+variation_btn_txt[variation.id]) }}
           </button>
         </div>
+      </div>
       <div v-if="product.id == 4">
         <a href="/pricing/multijoueur" class="btn">
           {{ $t("default.Ask for a quote") }}