diff --git a/.gitignore b/.gitignore index f7dc4cc..4670276 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,7 @@ node_modules/ /index.php /robots.txt /update.php -/web.config \ No newline at end of file +/web.config + +config/sync/flag.flag.*.yml +config/sync/system.action.flag_action.*.yml diff --git a/config/sync/jsonapi_extras.jsonapi_resource_config.field_config--field_config.yml b/config/sync/jsonapi_extras.jsonapi_resource_config.field_config--field_config.yml new file mode 100644 index 0000000..89c1ca3 --- /dev/null +++ b/config/sync/jsonapi_extras.jsonapi_resource_config.field_config--field_config.yml @@ -0,0 +1,119 @@ +uuid: ec97d652-086c-4b4e-91f0-e1d30d97cb1a +langcode: fr +status: true +dependencies: + module: + - field +id: field_config--field_config +disabled: false +path: field_config/field_config +resourceType: field_config--field_config +resourceFields: + uuid: + fieldName: uuid + publicName: uuid + enhancer: + id: '' + disabled: false + langcode: + fieldName: langcode + publicName: langcode + enhancer: + id: '' + disabled: false + status: + disabled: true + fieldName: status + publicName: status + enhancer: + id: '' + dependencies: + disabled: true + fieldName: dependencies + publicName: dependencies + enhancer: + id: '' + third_party_settings: + disabled: true + fieldName: third_party_settings + publicName: third_party_settings + enhancer: + id: '' + _core: + disabled: true + fieldName: _core + publicName: _core + enhancer: + id: '' + id: + fieldName: id + publicName: id + enhancer: + id: '' + disabled: false + field_name: + fieldName: field_name + publicName: field_name + enhancer: + id: '' + disabled: false + entity_type: + disabled: true + fieldName: entity_type + publicName: entity_type + enhancer: + id: '' + bundle: + disabled: true + fieldName: bundle + publicName: bundle + enhancer: + id: '' + label: + fieldName: label + publicName: label + enhancer: + id: '' + disabled: false + description: + disabled: true + fieldName: description + publicName: description + enhancer: + id: '' + required: + disabled: true + fieldName: required + publicName: required + enhancer: + id: '' + translatable: + disabled: true + fieldName: translatable + publicName: translatable + enhancer: + id: '' + default_value: + disabled: true + fieldName: default_value + publicName: default_value + enhancer: + id: '' + default_value_callback: + disabled: true + fieldName: default_value_callback + publicName: default_value_callback + enhancer: + id: '' + settings: + disabled: true + fieldName: settings + publicName: settings + enhancer: + id: '' + field_type: + disabled: true + fieldName: field_type + publicName: field_type + enhancer: + id: '' diff --git a/config/sync/language.types.yml b/config/sync/language.types.yml index efa15bc..7bea0a0 100644 --- a/config/sync/language.types.yml +++ b/config/sync/language.types.yml @@ -14,7 +14,7 @@ negotiation: language-url-fallback: 1 language_interface: enabled: - language-graphql: -999 + language-graphql-operation: -999 language-url: 0 _core: default_config_hash: dqouFqVseNJNvEjsoYKxbinFOITuCxYhi4y2OTNQP_8 diff --git a/config/sync/rest.resource.entity.node_type.yml b/config/sync/rest.resource.entity.node_type.yml index 8073b91..09224fa 100644 --- a/config/sync/rest.resource.entity.node_type.yml +++ b/config/sync/rest.resource.entity.node_type.yml @@ -1,6 +1,6 @@ uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f langcode: en -status: false +status: true dependencies: module: - node diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index e285c70..fcef9f3 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -75,6 +75,7 @@ h4[data-v-4e9a834e]{ } .cool-lightbox{position:fixed;left:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;right:0;transition:all .3s ease}.cool-lightbox .cool-lightbox-zoom{position:absolute;bottom:15px;left:50%;display:flex;z-index:99999;background-color:rgba(15,15,15,.8);border-radius:8px;padding:0 12px;align-items:center;transform:translateX(-50%)}.cool-lightbox .cool-lightbox-zoom input[type=range]{-webkit-appearance:none;margin:10px 0;width:105px;background:0 0}.cool-lightbox .cool-lightbox-zoom input[type=range]:focus{outline:0}.cool-lightbox .cool-lightbox-zoom input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #000;background:#e6e6e6;border-radius:11px;border:0 solid #000}.cool-lightbox .cool-lightbox-zoom input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 1px #000;border:1px solid #000;height:12px;width:12px;border-radius:13px;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-4.5px}.cool-lightbox .cool-lightbox-zoom input[type=range]:focus::-webkit-slider-runnable-track{background:#e6e6e6}.cool-lightbox .cool-lightbox-zoom input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #000;background:#e6e6e6;border-radius:11px;border:0 solid #000}.cool-lightbox .cool-lightbox-zoom input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #000;border:1px solid #000;height:12px;width:12px;border-radius:13px;background:#fff;cursor:pointer}.cool-lightbox .cool-lightbox-zoom input[type=range]::-ms-track{width:100%;height:4px;cursor:pointer;animate:.2s;background:0 0;border-color:transparent;color:transparent}.cool-lightbox .cool-lightbox-zoom input[type=range]::-ms-fill-lower{background:#e6e6e6;border:0 solid #000;border-radius:22px;box-shadow:0 0 0 #000}.cool-lightbox .cool-lightbox-zoom input[type=range]::-ms-fill-upper{background:#e6e6e6;border:0 solid #000;border-radius:22px;box-shadow:0 0 0 #000}.cool-lightbox .cool-lightbox-zoom input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000;border:1px solid #000;height:12px;width:12px;border-radius:13px;background:#fff;cursor:pointer}.cool-lightbox .cool-lightbox-zoom input[type=range]:focus::-ms-fill-lower{background:#e6e6e6}.cool-lightbox .cool-lightbox-zoom input[type=range]:focus::-ms-fill-upper{background:#e6e6e6}.cool-lightbox .cool-lightbox-zoom .cool-lightbox-zoom__icon{height:15px;width:15px;color:#fff}.cool-lightbox .cool-lightbox-zoom .cool-lightbox-zoom__icon:first-of-type{margin-right:10px}.cool-lightbox .cool-lightbox-zoom .cool-lightbox-zoom__icon:last-of-type{margin-left:10px}.cool-lightbox .cool-lightbox-thumbs{position:absolute;height:100vh;overflow-y:auto;width:102px;right:-102px;top:0;overflow-x:hidden;transition:none;background-color:#ddd;scrollbar-width:thin;scrollbar-color:#fa4242 rgba(175,175,175,.9)}@media (min-width:767px){.cool-lightbox .cool-lightbox-thumbs{transition:all .3s ease}}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar{width:6px;height:6px}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-button{width:0;height:0}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-thumb{background:#fa4242;border:0 none #fff;border-radius:50px}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-thumb:hover{background:#fff}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-thumb:active{background:#000}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-track{background:#e1e1e1;border:0 none #fff;border-radius:8px}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-track:hover{background:#666}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-track:active{background:#333}.cool-lightbox .cool-lightbox-thumbs::-webkit-scrollbar-corner{background:0 0}@media (min-width:767px){.cool-lightbox .cool-lightbox-thumbs{width:212px;right:-212px}}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list{display:flex;flex-wrap:wrap;padding:2px;padding-right:0}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb{background-color:#000;width:100%;margin-right:2px;margin-bottom:2px;display:block;height:75px;position:relative}@media (min-width:767px){.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb{width:calc(100%/2 - 2px)}}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb:before{top:0;left:0;right:0;bottom:0;opacity:0;content:'';z-index:150;transition:all .3s ease;position:absolute;visibility:hidden;border:3px solid #fa4242}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb img{width:100%;height:100%;object-fit:cover}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb.is-video .cool-lightbox__thumb__icon{position:absolute;z-index:100;top:50%;left:50%;width:25px;height:25px;transform:translate(-50%,-50%)}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb.is-video .cool-lightbox__thumb__icon path{fill:#fff}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb.is-video:after{content:'';top:0;left:0;right:0;bottom:0;z-index:50;position:absolute;background:rgba(0,0,0,.6)}.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb.active:before,.cool-lightbox .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb:hover:before{opacity:1;visibility:visible}.cool-lightbox .cool-lightbox__inner{padding:60px 0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;transition:none}@media (min-width:767px){.cool-lightbox .cool-lightbox__inner{transition:all .3s ease}}.cool-lightbox .cool-lightbox__progressbar{position:absolute;top:0;left:0;right:0;height:2px;z-index:500;transform-origin:0;transform:scaleX(0);transition:transform 3s linear;display:block}.cool-lightbox.cool-lightbox--is-swipping{cursor:-webkit-grabbing;cursor:grabbing}.cool-lightbox.cool-lightbox--is-swipping iframe{pointer-events:none}.cool-lightbox.cool-lightbox--is-swipping .cool-lightbox__slide{transition:none}.cool-lightbox.cool-lightbox--is-swipping .cool-lightbox__slide.cool-lightbox__slide--hide{display:flex;z-index:50}.cool-lightbox.cool-lightbox--zoom-disabled .cool-lightbox__slide .cool-lightbox__slide__img{transform:translate3d(-50%,-50%,0)}.cool-lightbox.cool-lightbox--can-zoom .cool-lightbox__slide img{cursor:zoom-in}.cool-lightbox.cool-lightbox--is-zooming .cool-lightbox__slide img{cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.cool-lightbox.cool-lightbox--is-zooming .cool-lightbox-caption{opacity:0}.cool-lightbox.cool-lightbox--thumbs-right.cool-lightbox--show-thumbs .cool-lightbox__inner{right:102px}@media (min-width:767px){.cool-lightbox.cool-lightbox--thumbs-right.cool-lightbox--show-thumbs .cool-lightbox__inner{right:212px}}.cool-lightbox.cool-lightbox--thumbs-right.cool-lightbox--show-thumbs .cool-lightbox-thumbs{right:0}.cool-lightbox.cool-lightbox--thumbs-bottom .cool-lightbox-thumbs{width:100%;left:0;right:0;top:auto;height:70px;bottom:-70px;overflow:auto}@media (min-width:767px){.cool-lightbox.cool-lightbox--thumbs-bottom .cool-lightbox-thumbs{bottom:-79px;height:79px}}.cool-lightbox.cool-lightbox--thumbs-bottom .cool-lightbox-thumbs .cool-lightbox-thumbs__list{width:100%;flex-wrap:nowrap;justify-content:center}.cool-lightbox.cool-lightbox--thumbs-bottom .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb{width:100px;flex-shrink:0;margin-bottom:0;height:65px}@media (min-width:767px){.cool-lightbox.cool-lightbox--thumbs-bottom .cool-lightbox-thumbs .cool-lightbox-thumbs__list .cool-lightbox__thumb{height:75px}}.cool-lightbox.cool-lightbox--thumbs-bottom.cool-lightbox--show-thumbs .cool-lightbox__inner{bottom:70px}@media (min-width:767px){.cool-lightbox.cool-lightbox--thumbs-bottom.cool-lightbox--show-thumbs .cool-lightbox__inner{bottom:79px}}.cool-lightbox.cool-lightbox--thumbs-bottom.cool-lightbox--show-thumbs .cool-lightbox-thumbs{bottom:0}.cool-lightbox *{box-sizing:border-box;padding:0;margin:0}.cool-lightbox button{background:0 0;border:none;cursor:pointer;outline:0}.cool-lightbox svg path,.cool-lightbox svg rect{fill:currentColor}.cool-lightbox .cool-lightbox-button{padding:21px 16px 21px 4px;height:100px;opacity:1;z-index:800;color:#ccc;transition:all .3s ease;position:absolute;top:calc(50% - 50px);width:54px;transition:all .3s ease;visibility:visible}@media (min-width:767px){.cool-lightbox .cool-lightbox-button{width:70px;padding:31px 26px 31px 6px}}.cool-lightbox .cool-lightbox-button.hidden{opacity:0;visibility:hidden}.cool-lightbox .cool-lightbox-button:hover{color:#fff}.cool-lightbox .cool-lightbox-button>.cool-lightbox-button__icon{padding:7px;display:flex;align-items:center;justify-content:center;background:rgba(30,30,30,.6)}.cool-lightbox .cool-lightbox-button>.cool-lightbox-button__icon>svg{width:100%;height:100%}.cool-lightbox .cool-lightbox-button.cool-lightbox-button--prev{left:0}.cool-lightbox .cool-lightbox-button.cool-lightbox-button--next{right:0;padding:21px 4px 21px 16px}@media (min-width:767px){.cool-lightbox .cool-lightbox-button.cool-lightbox-button--next{padding:31px 6px 31px 26px}}.cool-lightbox .cool-lightbox-pdf{max-width:100%}.cool-lightbox .cool-lightbox__iframe{width:100%;display:flex;top:50%;left:50%;align-items:center;justify-content:center;position:relative;transform:translate3d(-50%,-50%,0) scale3d(1,1,1)}.cool-lightbox .cool-lightbox__iframe iframe{width:100%;height:100%}@media (min-width:767px){.cool-lightbox .cool-lightbox__iframe iframe{max-width:80vw;max-height:80vh}}.cool-lightbox .cool-lightbox__wrapper{width:100%;height:100%;position:relative}.cool-lightbox .cool-lightbox__wrapper.cool-lightbox__wrapper--swipe{display:flex;align-items:center}.cool-lightbox .cool-lightbox__wrapper.cool-lightbox__wrapper--swipe .cool-lightbox__slide{flex-shrink:0;display:flex;position:relative;height:100%;opacity:.4;transition:opacity .3s linear}.cool-lightbox .cool-lightbox__wrapper.cool-lightbox__wrapper--swipe .cool-lightbox__slide.cool-lightbox__slide--current{opacity:1}.cool-lightbox .cool-lightbox__slide{width:100%;top:0;bottom:0;left:0;right:0;z-index:100;display:none;position:absolute;margin-right:30px;transition:transform .3s ease}.cool-lightbox .cool-lightbox__slide:last-of-type{margin-right:0}.cool-lightbox .cool-lightbox__slide.cool-lightbox__slide--current{display:flex}.cool-lightbox .cool-lightbox__slide .cool-lightbox__slide__img{position:absolute;height:100%;width:100%;left:50%;top:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(-50%,-50%,0) scale3d(1,1,1);transition:all .3s ease;display:flex}.cool-lightbox .cool-lightbox__slide img{max-width:100%;max-height:100%;margin:auto;z-index:9999;-webkit-backface-visibility:hidden;backface-visibility:hidden;-ms-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1.5rem rgba(0,0,0,.45)}.cool-lightbox-toolbar{position:absolute;top:0;right:0;opacity:1;display:flex;transition:all .3s ease;visibility:visible}.cool-lightbox-toolbar.hidden{opacity:0;visibility:hidden}.cool-lightbox-toolbar .cool-lightbox-toolbar__btn{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;justify-content:center;align-items:center;display:inline-flex;margin:0;padding:9px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:40px;height:40px;color:#ccc}@media (min-width:767px){.cool-lightbox-toolbar .cool-lightbox-toolbar__btn{width:44px;height:44px;padding:10px}}.cool-lightbox-toolbar .cool-lightbox-toolbar__btn>svg{width:100%;height:100%}.cool-lightbox-toolbar .cool-lightbox-toolbar__btn:hover{color:#fff}.cool-lightbox-caption{bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;opacity:1;line-height:1.5;padding:18px 28px 16px 24px;right:0;text-align:center;direction:ltr;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;z-index:99997;background:linear-gradient(0deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent)}@media (min-width:767px){.cool-lightbox-caption{padding:22px 30px 23px 30px}}.cool-lightbox-caption a{color:#eee;text-decoration:underline}.cool-lightbox-caption h6{font-size:14px;margin:0 0 6px 0;line-height:130%}@media (min-width:767px){.cool-lightbox-caption h6{font-size:16px;margin:0 0 6px 0}}.cool-lightbox-caption p{font-size:13px;line-height:130%;color:#ccc}@media (min-width:767px){.cool-lightbox-caption p{font-size:15px}}.cool-lightbox-caption p a{color:#ccc}.cool-lightbox-caption p a:hover{color:#eee}.cool-lightbox-modal-enter-active,.cool-lightbox-modal-leave-active{transition:opacity .35s}.cool-lightbox-modal-enter,.cool-lightbox-modal-leave-to{opacity:0}.cool-lightbox-slide-change-enter-active,.cool-lightbox-slide-change-leave-active{transition:opacity .27s}.cool-lightbox-slide-change-enter,.cool-lightbox-slide-change-leave-to{opacity:0}.cool-lightbox-loading-wrapper{top:50%;left:50%;position:absolute;transform:translate(-50%,-50%)}.cool-lightbox-loading-wrapper .cool-lightbox-loading{animation:cool-lightbox-rotate 1s linear infinite;background:0 0;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;opacity:.7;padding:0;width:50px;z-index:500}@keyframes cool-lightbox-rotate{100%{transform:rotate(360deg)}} +@charset "UTF-8"; body { background: white; } @@ -1586,6 +1587,7 @@ article.node--type-frontpage .node__content > section.home-showrooms { background-color: #fff; color: #50aa3c; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference { + overflow: hidden; position: relative; display: grid; grid-template-rows: 1fr; } @@ -1605,7 +1607,7 @@ article.node--type-frontpage .node__content > section.home-showrooms { article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item { grid-row: 1; opacity: 0; - transition: opacity 0.3s ease-in-out; } + transition: all 0.7s ease-out; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item.active { opacity: 1; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term { @@ -1614,7 +1616,7 @@ article.node--type-frontpage .node__content > section.home-showrooms { height: 100%; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel { width: 100%; - padding-bottom: 10em; } + padding-bottom: 5em; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel img { max-width: 100%; height: auto; } @@ -1624,13 +1626,28 @@ article.node--type-frontpage .node__content > section.home-showrooms { left: 0; width: 100%; box-sizing: border-box; - padding: 1em 0; + padding: 1em 0 0; background-color: #50aa3c; color: #fff; } - article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text > * { - font-size: 0.9em; } article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text h2, article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text p { margin: 0; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text h2 { + font-size: 2em; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text .field--name-field-public-address br { + display: none; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text .field--name-field-public-address span:not(:nth-last-of-type(1)) { + margin-right: 0.4em; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text .field--name-field-public-address span:not(:nth-last-of-type(1)):after { + padding-left: 0.5em; + content: "⋅"; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text .field--name-field-public-phone { + display: inline-block; + margin-right: 0.4em; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text .field--name-field-public-phone:after { + padding-left: 0.5em; + content: "⋅"; } + article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text .field--name-field-public-email { + display: inline-block; } article.node--type-frontpage .node__content > section.home-blabla { background-color: #9458aa; } diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index f81fed9..0ae715f 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -1190,7 +1190,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n props: ['html'],\n // get the html from parent with props\n data: function data() {\n return {\n template: null // compiled template from html used in render\n\n };\n },\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('Home beforeMount');\n // compile the html src (coming from parent with props or from ajax call)\n if (this.html) {\n // console.log('html', this.html);\n this.template = _vue.default.compile(this.html);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n render: function render(h) {\n if (!this.template) {\n return h('span', 'Loading ...');\n } else {\n return this.template.render.call(this);\n }\n },\n mounted: function mounted() {\n this.initShowroomCarroussel();\n },\n methods: {\n initShowroomCarroussel: function initShowroomCarroussel() {\n console.log(\"startShowroomCarroussel\");\n var $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n console.log('$showrooms', $showrooms); // TODO: share media query and variables between scss and js\n\n var column_width = 205;\n var column_goutiere = 13;\n var bp = (column_width + column_goutiere) * 7 + 1;\n var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\"));\n\n if (mediaQuery.matches) {\n var $showroomsOdd = [];\n var $showroomsEven = [];\n\n for (var i = 0; i < $showrooms.length; i++) {\n if (i % 2 === 0) {\n $showroomsOdd.push($showrooms[i]);\n } else {\n $showroomsEven.push($showrooms[i]);\n }\n }\n\n console.log('Odd', $showroomsOdd);\n console.log('Even', $showroomsEven);\n this.switchShowroomCarroussel($showroomsEven, 0);\n this.switchShowroomCarroussel($showroomsOdd, 0);\n } else {\n this.switchShowroomCarroussel($showrooms, 0);\n }\n },\n switchShowroomCarroussel: function switchShowroomCarroussel($elmts, i) {\n // console.log('switchShowroomCarroussel i', $elmts, i);\n $elmts[i].classList.add('active');\n $elmts[i - 1 < 0 ? $elmts.length - 1 : i - 1].classList.remove('active');\n i++;\n\n if (i >= $elmts.length) {\n i = 0;\n }\n\n setTimeout(this.switchShowroomCarroussel.bind(this, $elmts, i), 5000);\n },\n onClickLink: function onClickLink(e) {\n console.log(\"onClickLink\", e, this.$router, this.$route);\n var path = null; // find existing router route compared with link href\n\n for (var i = 0; i < this.$router.options.routes.length; i++) {\n if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n if (e.originalTarget.pathname !== this.$route.path) {\n path = e.originalTarget.pathname;\n }\n\n break;\n }\n }\n\n if (path) {\n this.$router.push({\n path: path\n });\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n props: ['html'],\n // get the html from parent with props\n data: function data() {\n return {\n template: null,\n // compiled template from html used in render\n showrooms: [],\n showroomsOdd: [],\n showroomsEven: [],\n showroomMode: 1,\n showroomInterval: 0,\n showroomI: 0,\n showroomJ: 0\n };\n },\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('Home beforeMount');\n // compile the html src (coming from parent with props or from ajax call)\n if (this.html) {\n // console.log('html', this.html);\n this.template = _vue.default.compile(this.html);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n render: function render(h) {\n if (!this.template) {\n return h('span', 'Loading ...');\n } else {\n return this.template.render.call(this);\n }\n },\n mounted: function mounted() {\n this.initShowroomCarroussel();\n },\n methods: {\n initShowroomCarroussel: function initShowroomCarroussel() {\n console.log(\"startShowroomCarroussel\");\n this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n console.log('showrooms', this.showrooms);\n\n for (var i = 0; i < this.showrooms.length; i++) {\n if (i % 2 === 0) {\n this.showroomsOdd.push(this.showrooms[i]);\n } else {\n this.showroomsEven.push(this.showrooms[i]);\n }\n }\n\n console.log('Odd', this.showroomsOdd);\n console.log('Even', this.showroomsEven); // TODO: share media query and variables between scss and js\n\n var column_width = 205;\n var column_goutiere = 13;\n var bp = (column_width + column_goutiere) * 7 + 1;\n var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\")); // Register event listener\n\n mediaQuery.addListener(this.checkShowroomMode);\n this.checkShowroomMode(mediaQuery); // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n // console.log('this.showroomInterval', this.showroomInterval);\n // this.switchShowroomCarroussel()\n },\n checkShowroomMode: function checkShowroomMode(mq) {\n // default mode 1\n var newmode = 1;\n\n if (mq.matches) {\n // if mediaquery match switch to mode 2\n newmode = 2;\n }\n\n if (newmode !== this.showroomMode) {\n // if new mode different from old mode\n // reset sowrooms classes\n for (var i = 0; i < this.showrooms.length; i++) {\n this.showrooms[i].classList.remove('active');\n } // record new mode\n\n\n this.showroomMode = newmode; // clear interval\n // if (this.showroomInterval) {\n\n clearInterval(this.showroomInterval);\n this.showroomInterval = 0; // }\n // reset indexes\n\n this.showroomI = 0;\n this.showroomJ = 0;\n } // in any case (re)launch the animation\n\n\n this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n console.log('this.showroomInterval', this.showroomInterval);\n this.switchShowroomCarroussel();\n },\n switchShowroomCarroussel: function switchShowroomCarroussel() {\n // console.log('switchShowroomCarroussel i', $elmts, i);\n if (this.showroomMode === 1) {\n this.showrooms[this.showroomI].classList.add('active');\n this.showrooms[this.showroomI - 1 < 0 ? this.showrooms.length - 1 : this.showroomI - 1].classList.remove('active');\n this.showroomI = this.showroomI + 1 >= this.showrooms.length ? 0 : this.showroomI + 1;\n } else {\n this.showroomsOdd[this.showroomI].classList.add('active');\n this.showroomsOdd[this.showroomI - 1 < 0 ? this.showroomsOdd.length - 1 : this.showroomI - 1].classList.remove('active');\n this.showroomI = this.showroomI + 1 >= this.showroomsOdd.length ? 0 : this.showroomI + 1;\n this.showroomsEven[this.showroomJ].classList.add('active');\n this.showroomsEven[this.showroomJ - 1 < 0 ? this.showroomsEven.length - 1 : this.showroomJ - 1].classList.remove('active');\n this.showroomJ = this.showroomJ + 1 >= this.showroomsEven.length ? 0 : this.showroomJ + 1;\n }\n },\n onClickLink: function onClickLink(e) {\n console.log(\"onClickLink\", e, this.$router, this.$route);\n var path = null; // find existing router route compared with link href\n\n for (var i = 0; i < this.$router.options.routes.length; i++) {\n if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n if (e.originalTarget.pathname !== this.$route.path) {\n path = e.originalTarget.pathname;\n }\n\n break;\n }\n }\n\n if (path) {\n this.$router.push({\n path: path\n });\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 7032eac..0e76f54 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -644,6 +644,7 @@ article.node--type-frontpage{ } } .field--name-computed-showrooms-reference{ + overflow: hidden; position:relative; // height:550px; display: grid; @@ -673,17 +674,23 @@ article.node--type-frontpage{ // top:0; left:0; // width:100%; height:100%; // overflow: hidden; + opacity: 0; - transition: opacity 0.3s ease-in-out; + // transform: translateX(100%); + transition: all 0.7s ease-out; + &.active{ opacity: 1; + // transform: translateX(0); + // transition: all 0.3s ease-in-out; } + .taxonomy-term{ position: relative; width:100%; height:100%; div.visuel{ width:100%; - padding-bottom: 10em; + padding-bottom: 5em; img{ max-width: 100%; height: auto; @@ -694,17 +701,42 @@ article.node--type-frontpage{ bottom:0; left:0; width:100%; box-sizing:border-box; - padding:1em 0; + padding:1em 0 0; background-color:$color-showrooms; color: #fff; - >*{ - // display: inline-block; - font-size: 0.9em; - } + // >*{ + // // display: inline-block; + // font-size: 0.9em; + // } h2,p{ margin:0; } - + h2{ + font-size: 2em; + } + .field--name-field-public-address{ + br{ + display:none; + } + span:not(:nth-last-of-type(1)) { + margin-right: 0.4em; + &:after{ + padding-left: 0.5em; + content:"⋅" + } + } + } + .field--name-field-public-phone { + display: inline-block; + margin-right: 0.4em; + &:after{ + padding-left: 0.5em; + content:"⋅" + } + } + .field--name-field-public-email { + display: inline-block; + } } } } diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue index 09ff4f5..d112996 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue @@ -6,7 +6,14 @@ export default { props: ['html'], // get the html from parent with props data() { return { - template: null // compiled template from html used in render + template: null, // compiled template from html used in render + showrooms: [], + showroomsOdd: [], + showroomsEven: [], + showroomMode: 1, + showroomInterval: 0, + showroomI:0, + showroomJ:0 } }, beforeMount() { @@ -33,43 +40,77 @@ export default { methods: { initShowroomCarroussel(){ console.log("startShowroomCarroussel"); - let $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item') - console.log('$showrooms', $showrooms); + this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item') + console.log('showrooms', this.showrooms); + + for (var i = 0; i < this.showrooms.length; i++) { + if (i%2 === 0) { + this.showroomsOdd.push(this.showrooms[i]) + }else{ + this.showroomsEven.push(this.showrooms[i]) + } + } + console.log('Odd', this.showroomsOdd); + console.log('Even', this.showroomsEven); // TODO: share media query and variables between scss and js let column_width= 205 let column_goutiere= 13 let bp = (column_width + column_goutiere )*7 +1 const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`) - if (mediaQuery.matches) { - let $showroomsOdd = [] - let $showroomsEven = [] - for (var i = 0; i < $showrooms.length; i++) { - if (i%2 === 0) { - $showroomsOdd.push($showrooms[i]) - }else{ - $showroomsEven.push($showrooms[i]) - } - } - console.log('Odd', $showroomsOdd); - console.log('Even', $showroomsEven); - this.switchShowroomCarroussel($showroomsEven, 0) - this.switchShowroomCarroussel($showroomsOdd, 0) - }else{ - this.switchShowroomCarroussel($showrooms, 0) - } + // Register event listener + mediaQuery.addListener(this.checkShowroomMode) + this.checkShowroomMode(mediaQuery) + + // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000); + // console.log('this.showroomInterval', this.showroomInterval); + // this.switchShowroomCarroussel() }, - switchShowroomCarroussel($elmts, i){ - // console.log('switchShowroomCarroussel i', $elmts, i); - - $elmts[i].classList.add('active') - $elmts[i-1 < 0 ? $elmts.length -1 : i-1].classList.remove('active') - - i++ - if(i >= $elmts.length){ - i = 0 + checkShowroomMode(mq){ + // default mode 1 + let newmode = 1 + if (mq.matches) { + // if mediaquery match switch to mode 2 + newmode = 2 + } + if(newmode !== this.showroomMode) { + // if new mode different from old mode + // reset sowrooms classes + for (var i = 0; i < this.showrooms.length; i++) { + this.showrooms[i].classList.remove('active') + } + // record new mode + this.showroomMode = newmode + // clear interval + // if (this.showroomInterval) { + clearInterval(this.showroomInterval) + this.showroomInterval = 0 + // } + // reset indexes + this.showroomI = 0 + this.showroomJ = 0 + } + // in any case (re)launch the animation + this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000); + console.log('this.showroomInterval', this.showroomInterval); + this.switchShowroomCarroussel() + }, + switchShowroomCarroussel(){ + // console.log('switchShowroomCarroussel i', $elmts, i); + if (this.showroomMode === 1) { + this.showrooms[this.showroomI].classList.add('active') + this.showrooms[this.showroomI-1 < 0 ? this.showrooms.length -1 : this.showroomI-1].classList.remove('active') + this.showroomI = this.showroomI+1 >= this.showrooms.length ? 0 : this.showroomI+1 + }else{ + this.showroomsOdd[this.showroomI].classList.add('active') + this.showroomsOdd[this.showroomI-1 < 0 ? this.showroomsOdd.length -1 : this.showroomI-1].classList.remove('active') + this.showroomI = this.showroomI+1 >= this.showroomsOdd.length ? 0 : this.showroomI+1 + + this.showroomsEven[this.showroomJ].classList.add('active') + this.showroomsEven[this.showroomJ-1 < 0 ? this.showroomsEven.length -1 : this.showroomJ-1].classList.remove('active') + this.showroomJ = this.showroomJ+1 >= this.showroomsEven.length ? 0 : this.showroomJ+1 + } - setTimeout(this.switchShowroomCarroussel.bind(this,$elmts,i), 5000); }, onClickLink(e){ console.log("onClickLink", e, this.$router, this.$route);