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/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 &&
-          drupalDecoupled.route_name.indexOf('flagging_collection') === -1 &&
-          drupalDecoupled.route_name.indexOf('user') === -1 &&
-          drupalDecoupled.route_name !== 'entity.webform.canonical' &&
-          (drupalDecoupled.route_name === 'entity.webform.canonical' && drupalDecoupled.sys_path.indexOf('/webform/multi_joueur') === -1)) {
-        return false
-      } else {
+      // if (drupalDecoupled.route_name.indexOf('commerce') === -1 &&
+      //     drupalDecoupled.route_name.indexOf('flagging_collection') === -1 &&
+      //     drupalDecoupled.route_name.indexOf('user') === -1 &&
+      //     drupalDecoupled.route_name !== 'entity.webform.canonical' &&
+      //     (drupalDecoupled.route_name === 'entity.webform.canonical' && drupalDecoupled.sys_path.indexOf('/webform/multi_joueur') === -1)) {
+      //   return false
+      // } 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>