styled multijoueur webform

config/sync/webform.webform.multi_joueur.yml

@@ -12,7 +12,7 @@ id: multi_joueur
 title: Multi-Joueur
 description: ''
 category: ''
-elements: "address:\n  '#type': address\n  '#title': Address\n  '#required': true\n  '#default_value':\n    country_code: FR\n    langcode: ''\n    organization: ''\n    given_name: ''\n    family_name: ''\n    address_line1: ''\n    address_line2: ''\n    postal_code: ''\n    locality: ''\n    sorting_code: ''\n    additional_name: null\n    dependent_locality: null\n    administrative_area: null\nphone:\n  '#type': tel\n  '#title': Phone\n  '#required': true\ncollaborateur:\n  '#type': webform_contact\n  '#title': Collaborateur\n  '#multiple': true\n  '#multiple__min_items': 2\n  '#multiple__empty_items': 2\n  '#multiple__sorting': false\n  '#multiple__add_more_input': false\n  '#name__required': true\n  '#company__access': false\n  '#email__required': true\n  '#phone__access': false\n  '#address__access': false\n  '#address_2__access': false\n  '#city__access': false\n  '#state_province__access': false\n  '#postal_code__access': false\n  '#country__access': false\n  '#flexbox': '0'"
+elements: "address:\n  '#type': address\n  '#title': Address\n  '#required': true\n  '#default_value':\n    country_code: FR\n    langcode: ''\n    organization: ''\n    given_name: ''\n    family_name: ''\n    address_line1: ''\n    address_line2: ''\n    postal_code: ''\n    locality: ''\n    sorting_code: ''\n    additional_name: null\n    dependent_locality: null\n    administrative_area: null\nphone:\n  '#type': tel\n  '#title': Phone\n  '#required': true\ncollaborateur:\n  '#type': webform_contact\n  '#title': Collaborateur\n  '#multiple': true\n  '#multiple__min_items': 2\n  '#multiple__empty_items': 2\n  '#multiple__sorting': false\n  '#multiple__add': false\n  '#multiple__add_more_input': false\n  '#name__required': true\n  '#company__access': false\n  '#email__required': true\n  '#phone__access': false\n  '#address__access': false\n  '#address_2__access': false\n  '#city__access': false\n  '#state_province__access': false\n  '#postal_code__access': false\n  '#country__access': false\n  '#flexbox': '0'\nactions:\n  '#type': webform_actions\n  '#title': 'Submit button(s)'\n  '#submit__label': 'Ask for a Quote'"
 css: ''
 javascript: ''
 settings:

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

@@ -1 +1 @@
-(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[665],{1003:(t,e,s)=>{"use strict";s.r(e),s.d(e,{default:()=>v});var o=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)};o._withStripped=!0;var r=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("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:"mailto:info@materio.com?subject=Multi-Joueurs"}},[t._v("\n        "+t._s(t.$t("default.Ask for a quote"))+"\n      ")])]):t._e()],2)])};r._withStripped=!0;var i=s(4408),n=s(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=s(1900),d=(0,c.Z)(a,r,[],!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,o,[],!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,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}}]);

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -91,14 +91,24 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
     function checkNoVuePages () {
       // return drupalDecoupled.sys_path != '/cart'
       // && drupalDecoupled.sys_path.indexOf('checkout') != 1;
-      if (drupalDecoupled.route_name.indexOf('commerce') === -1 &&
+      // if (drupalDecoupled.route_name.indexOf('commerce') === -1 &&
-          drupalDecoupled.route_name.indexOf('flagging_collection') === -1 &&
+      //     drupalDecoupled.route_name.indexOf('flagging_collection') === -1 &&
-          drupalDecoupled.route_name.indexOf('user') === -1 &&
+      //     drupalDecoupled.route_name.indexOf('user') === -1 &&
-          drupalDecoupled.route_name !== 'entity.webform.canonical' &&
+      //     drupalDecoupled.route_name !== 'entity.webform.canonical' &&
-          (drupalDecoupled.route_name === 'entity.webform.canonical' && drupalDecoupled.sys_path.indexOf('/webform/multi_joueur') === -1)) {
+      //     (drupalDecoupled.route_name === 'entity.webform.canonical' && drupalDecoupled.sys_path.indexOf('/webform/multi_joueur') === -1)) {
-        return false
+      //   return false
-      } else {
+      // } else {
+      //   return true
+      // }
+      if (drupalDecoupled.route_name.indexOf('commerce') !== -1 ||
+          drupalDecoupled.route_name.indexOf('flagging_collection') !== -1 ||
+          drupalDecoupled.route_name.indexOf('user') !== -1 ||
+          drupalDecoupled.route_name.indexOf('entity.webform.canonical') !== -1) {
+        console.debug('NO VUEJS')
         return true
+      } else {
+        console.debug('VUJS')
+        return false
       }
     }
 

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

@@ -569,6 +569,10 @@ header[role="banner"]{
 				color: #fff;
 				background-color: $color-webshowroom;
 			}
+			body.path-webform & {
+				color: #fff;
+				background-color: $color-showrooms;
+			}
 		}
     @include col-mediaquery-max(3){
 	    body.path-frontpage &, body.path-home & {
@@ -2662,6 +2666,75 @@ form#user-pass{
 		color: #fff;
 	}
 }
+
+#webform-submission-multi-joueur-add-form{
+  $w:3;
+  max-width: $column_width * $w + $column_goutiere * ($w - 1);
+  .form-item{
+    margin:0.5em 0;
+  }
+  $lw:7em;
+  label{
+    display: inline-block;
+    width:$lw;
+    color: #fff;
+  }
+  .webform-element-description{
+    color:#fff;
+  }
+  .form-item{
+    position: relative;
+    box-sizing: border-box;
+  }
+  .form-item.form-no-label input[type="text"]{
+    margin-left: $lw*1.04;
+  }
+  input[type="text"],
+  input[type="tel"],
+  input[type="email"]{
+    width: calc(95% - #{$lw});
+  }
+  input[type="submit"]{
+    @include btn;
+  }
+  .address--wrapper{
+    background-color: $color-webshowroom;
+    margin:0;
+    padding: 1em 1em 0;
+  }
+  .form-item-vat-number{
+    background-color: $color-webshowroom;
+    margin:0;
+    padding: 1em 1em 0.6em;
+  }
+  .form-item-phone{
+    background-color: $color-webshowroom;
+    margin:0;
+    padding: 0 1em 1em;
+  }
+  .form-item-collaborateur{
+    background-color: $color-base;
+    margin:0;
+    padding: 1em;
+    input[type="image"]{
+      background-color: #fff;
+    }
+    input[type="submit"]{
+      background-color: #fff;
+      color: $color-base;
+    }
+  }
+  #edit-actions{
+    // background-color: $color-showrooms;
+    // margin:0;
+    // padding: 1em;
+    text-align: right;
+    input[type="submit"]{
+      background-color: $color-blabla;
+      color: #fff;
+    }
+  }
+}
 //  ___         _
 // | __|__  ___| |_ ___ _ _
 // | _/ _ \/ _ \  _/ -_) '_|

web/themes/custom/materiotheme/templates/content/commerce-product--4--home-summary.html.twig

@@ -27,7 +27,7 @@
 
 <article{{ attributes }}>
   {{- product|without('variation_attributes') -}}
-  <a href="mailto:info@materio.com?subject=Multi-Joueurs" class="btn">
+  <a href="/pricing/multijoueur" class="btn">
     {% trans %}Ask for a quote{% endtrans %}
   </a>
 </article>

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

@@ -22,7 +22,7 @@
         </button>
       </div>
       <div v-if="product.id == 4">
-        <a href="mailto:info@materio.com?subject=Multi-Joueurs" class="btn">
+        <a href="/pricing/multijoueur" class="btn">
           {{ $t("default.Ask for a quote") }}
         </a>
       </div>