diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 8f6bb61..2ed7ef8 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -19717,7 +19717,7 @@ header[role="banner"] { padding: 1em 0 0; } body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle { display: none; } - header[role="banner"] #block-pagetitle h2 { + body.path-base header[role="banner"] #block-pagetitle h2 { padding: 0.5em 1em 0 !important; } } header[role="banner"] #block-pagetitle h2 { margin: 0; @@ -20175,20 +20175,20 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name- width: 100%; height: auto; box-shadow: none; } - .cards-list > ul > li > article > section.images { + #base .cards-list > ul > li > article > section.images { height: auto; } - .cards-list > ul > li > article > section.images > figure { - position: relative; } - .cards-list > ul > li > article > section.images > figure:not(:first-child) { - display: none; } - .cards-list > ul > li > article > section.images > figure img:not(.blank) { - width: 100%; - height: auto; } - .cards-list > ul > li > article > section.images > figure img.blank { - top: 0; - bottom: 0; - left: 0; - right: 0; } } + .cards-list > ul > li > article > section.images > figure { + position: relative; } + .cards-list > ul > li > article > section.images > figure:not(:first-child) { + display: none; } + .cards-list > ul > li > article > section.images > figure img:not(.blank) { + width: 100%; + height: auto; } + .cards-list > ul > li > article > section.images > figure img.blank { + top: 0; + bottom: 0; + left: 0; + right: 0; } } article.card { position: relative; @@ -20581,15 +20581,23 @@ article.card { font-size: 0.756em; font-weight: 400; } -#main-content > article.article div.cols { - display: grid; - grid-template-rows: 1fr; - grid-template-columns: repeat(6, 1fr); - grid-gap: 1em; } - #main-content > article.article div.cols div.col-left { - grid-column: 1; } - #main-content > article.article div.cols div.col-right { - grid-column: 2/6; } +@media (min-width: 655px) { + #main-content > article.article div.cols { + display: grid; + grid-template-rows: 1fr; + grid-template-columns: repeat(6, 1fr); + grid-gap: 1em; } + #main-content > article.article div.cols div.col-left { + grid-column: 1; } + #main-content > article.article div.cols div.col-right { + grid-column: 2/6; } } + +@media (max-width: 654px) { + #main-content > article.article div.cols { + padding: 1em; + box-sizing: border-box; } + #main-content > article.article div.cols .accroche figure { + width: 100%; } } #main-content > article.article section.accroche figure { width: 423px; @@ -20612,13 +20620,24 @@ article.card { height: 147.5px; background-size: cover; } -#main-content > article.article aside.linked-materials ul { - width: calc(100% + 13px); } - #main-content > article.article aside.linked-materials ul li { - display: inline-block; - vertical-align: top; - width: 205px; - margin: 0 13px 13px 0; } +@media (max-width: 654px) { + #main-content > article.article div.gallery-wrapper { + display: flex; + flex-flow: row wrap; + justify-content: space-between; } + #main-content > article.article div.gallery-wrapper .image { + display: block; + flex: 0 1 48%; + margin: 0 0 7.8px 0; } } + +@media (min-width: 655px) { + #main-content > article.article aside.linked-materials ul { + width: calc(100% + 13px); } + #main-content > article.article aside.linked-materials ul li { + display: inline-block; + vertical-align: top; + width: 205px; + margin: 0 13px 13px 0; } } #main-content > article.article aside.linked-materials h3.field__label { font-size: 1em; @@ -20637,6 +20656,10 @@ article.card { font-size: 0.756em; font-weight: 400; } +@media (max-width: 654px) { + #main-content > article.article nav.prevnext { + padding: 0 1em; } } + #main-content > article.article nav.prevnext.bottom { margin: 2em 0; } @@ -20652,16 +20675,24 @@ article.card { list-style: none; } #main-content > article.article nav.prevnext li a { font-size: 0.756em; - font-weight: 700; } + font-weight: 700; + line-height: 1.3; + display: block; + position: relative; + padding: 0 1em; } #main-content > article.article nav.prevnext li:nth-child(1) { grid-column: 1; } #main-content > article.article nav.prevnext li:nth-child(1) a:before { - content: '< '; } + content: '\021A4'; + position: absolute; + left: 0; } #main-content > article.article nav.prevnext li:nth-child(2) { grid-column: 2; text-align: right; } #main-content > article.article nav.prevnext li:nth-child(2) a:after { - content: ' >'; } + content: '\021A6'; + position: absolute; + right: 0; } #showrooms { width: calc(100% + 13px); } @@ -20794,6 +20825,15 @@ article.card { #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; } + @media (max-width: 654px) { + #main-content > #pricing, + #main-content .view-pricing-products .view-content { + flex-flow: column; } + #main-content > #pricing article.product, + #main-content > #pricing .views-row, + #main-content .view-pricing-products .view-content article.product, + #main-content .view-pricing-products .view-content .views-row { + flex: 0 1 auto; } } .modal { position: relative; } diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index b9f665d..e1f23b9 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -3640,7 +3640,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return !_vm.article || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"article\" }, [\n _c(\"nav\", { staticClass: \"prevnext top\" }, [\n _c(\"ul\", [\n _c(\"li\", [\n _vm.prevnext.prev\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.prev.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.prev.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.prev)\n }\n }\n })\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"li\", [\n _vm.prevnext.next\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.next.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.next.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.next)\n }\n }\n })\n : _vm._e()\n ])\n ])\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"cols\" }, [\n _c(\"div\", { staticClass: \"col col-left\" }, [\n _vm.image_accroche\n ? _c(\"section\", { staticClass: \"accroche\" }, [\n _c(\"figure\", [\n _c(\"img\", {\n attrs: {\n src: _vm.image_accroche.url,\n alt: _vm.image_accroche.alt,\n title: _vm.image_accroche.title\n },\n on: {\n click: function($event) {\n return _vm.setLightboxIndex(0)\n }\n }\n })\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"taxonomy\" }, [\n _c(\"div\", { staticClass: \"thesaurus\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.article.thesaurus, function(term) {\n return _c(\"li\", { key: term.id }, [\n _vm._v(_vm._s(term.name))\n ])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tags\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.article.tags, function(term) {\n return _c(\"li\", { key: term.id }, [\n _vm._v(_vm._s(term.name))\n ])\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _vm.article.showroom\n ? _c(\"section\", { staticClass: \"showroom\" }, [\n _c(\"h2\", [_vm._v(_vm._s(_vm.article.showroom.name))]),\n _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticClass: \"mail\",\n attrs: {\n href: \"mail:\" + _vm.article.showroom.field_public_email\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(_vm.article.showroom.field_public_email)\n )\n ]\n ),\n _vm._v(\" \"),\n _c(\"br\"),\n _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticClass: \"phone\",\n attrs: {\n href: \"tel:\" + _vm.article.showroom.field_public_phone\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(_vm.article.showroom.field_public_phone)\n )\n ]\n )\n ])\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"col col-right\" },\n [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.article.body) }\n }),\n _vm._v(\" \"),\n _c(\"CoolLightBox\", {\n attrs: {\n items: _vm.lightbox_items,\n index: _vm.lightbox_index,\n loop: true,\n srcName: \"url\"\n },\n on: {\n close: function($event) {\n _vm.lightbox_index = null\n }\n }\n }),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"gallery-wrapper\" },\n _vm._l(_vm.lightbox_items, function(image, imageIndex) {\n return imageIndex > 0\n ? _c(\"div\", {\n key: imageIndex,\n staticClass: \"image\",\n style: { backgroundImage: \"url(\" + image.thumb + \")\" },\n on: {\n click: function($event) {\n return _vm.setLightboxIndex(imageIndex)\n }\n }\n })\n : _vm._e()\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"aside\", { staticClass: \"linked-materials\" }, [\n _c(\"h3\", { staticClass: \"field__label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Linked Materials\")))\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"card-list\" }, [\n _c(\n \"ul\",\n {},\n _vm._l(_vm.article.linked_materials, function(node) {\n return _c(\n \"li\",\n { key: node.id },\n [_c(\"Card\", { attrs: { item: node } })],\n 1\n )\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"prevnext bottom\" }, [\n _c(\"ul\", [\n _c(\"li\", [\n _vm.prevnext.prev\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.prev.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.prev.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.prev)\n }\n }\n })\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"li\", [\n _vm.prevnext.next\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.next.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.next.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.next)\n }\n }\n })\n : _vm._e()\n ])\n ])\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return !_vm.article || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"article\" }, [\n _c(\"nav\", { staticClass: \"prevnext top\" }, [\n _c(\"ul\", [\n _c(\"li\", [\n _vm.prevnext.prev\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.prev.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.prev.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.prev)\n }\n }\n })\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"li\", [\n _vm.prevnext.next\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.next.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.next.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.next)\n }\n }\n })\n : _vm._e()\n ])\n ])\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"cols\" }, [\n _c(\"div\", { staticClass: \"col col-left\" }, [\n _vm.image_accroche\n ? _c(\"section\", { staticClass: \"accroche\" }, [\n _c(\"figure\", [\n _c(\"img\", {\n attrs: {\n src: _vm.image_accroche.url,\n alt: _vm.image_accroche.alt,\n title: _vm.image_accroche.title\n },\n on: {\n click: function($event) {\n return _vm.setLightboxIndex(0)\n }\n }\n })\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"taxonomy\" }, [\n _c(\"div\", { staticClass: \"thesaurus\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.article.thesaurus, function(term) {\n return _c(\"li\", { key: term.id }, [\n _vm._v(_vm._s(term.name))\n ])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tags\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.article.tags, function(term) {\n return _c(\"li\", { key: term.id }, [\n _vm._v(_vm._s(term.name))\n ])\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _vm.article.showroom\n ? _c(\"section\", { staticClass: \"showroom\" }, [\n _c(\"h2\", [_vm._v(_vm._s(_vm.article.showroom.name))]),\n _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticClass: \"mail\",\n attrs: {\n href: \"mail:\" + _vm.article.showroom.field_public_email\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(_vm.article.showroom.field_public_email)\n )\n ]\n ),\n _vm._v(\" \"),\n _c(\"br\"),\n _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticClass: \"phone\",\n attrs: {\n href: \"tel:\" + _vm.article.showroom.field_public_phone\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(_vm.article.showroom.field_public_phone)\n )\n ]\n )\n ])\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"col col-right\" },\n [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.article.body) }\n }),\n _vm._v(\" \"),\n _c(\"CoolLightBox\", {\n attrs: {\n items: _vm.lightbox_items,\n index: _vm.lightbox_index,\n loop: true,\n srcName: \"url\"\n },\n on: {\n close: function($event) {\n _vm.lightbox_index = null\n }\n }\n }),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"gallery-wrapper\" },\n _vm._l(_vm.lightbox_items, function(image, imageIndex) {\n return imageIndex > 0\n ? _c(\"div\", {\n key: imageIndex,\n staticClass: \"image\",\n style: { backgroundImage: \"url(\" + image.thumb + \")\" },\n on: {\n click: function($event) {\n return _vm.setLightboxIndex(imageIndex)\n }\n }\n })\n : _vm._e()\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"aside\", { staticClass: \"linked-materials\" }, [\n _c(\"h3\", { staticClass: \"field__label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Linked Materials\")))\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"cards-list\" }, [\n _c(\n \"ul\",\n {},\n _vm._l(_vm.article.linked_materials, function(node) {\n return _c(\n \"li\",\n { key: node.id },\n [_c(\"Card\", { attrs: { item: node } })],\n 1\n )\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"prevnext bottom\" }, [\n _c(\"ul\", [\n _c(\"li\", [\n _vm.prevnext.prev\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.prev.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.prev.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.prev)\n }\n }\n })\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"li\", [\n _vm.prevnext.next\n ? _c(\"a\", {\n attrs: { href: _vm.prevnext.next.view_node },\n domProps: { innerHTML: _vm._s(_vm.prevnext.next.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrevNext(_vm.prevnext.next)\n }\n }\n })\n : _vm._e()\n ])\n ])\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./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 962f0d5..5307688 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -527,9 +527,12 @@ header[role="banner"]{ display: none; } padding: 1em 0 0; - h2{ - padding: 0.5em 1em 0!important; + body.path-base &{ + h2{ + padding: 0.5em 1em 0!important; + } } + } h2{ margin:0; @@ -1240,7 +1243,9 @@ article.node--type-frontpage{ height:auto; box-shadow: none; >section.images{ - height: auto; + #base &{ + height: auto; + } >figure{ position: relative; &:not(:first-child){ @@ -1831,18 +1836,34 @@ article.card{ } #main-content > article.article{ - div.cols{ - display: grid; - grid-template-rows: 1fr; - grid-template-columns: repeat(6, 1fr); - grid-gap: 1em; - div.col-left{ - grid-column: 1; - } - div.col-right{ - grid-column: 2/6; - } - } + // grid only on big screens + @include col-mediaquery-min(3){ + div.cols{ + display: grid; + grid-template-rows: 1fr; + grid-template-columns: repeat(6, 1fr); + grid-gap: 1em; + div.col-left{ + grid-column: 1; + } + div.col-right{ + grid-column: 2/6; + } + } + } + + @include col-mediaquery-max(3){ + div.cols{ + padding:1em; + box-sizing: border-box; + .accroche{ + figure{ + width:100%; + } + } + } + } + section.accroche{ figure{ width:$column_width*2 + $column_goutiere; @@ -1870,6 +1891,17 @@ article.card{ height:$card_height / 2; background-size: cover; } + @include col-mediaquery-max(3){ + display: flex; + flex-flow: row wrap; + justify-content: space-between; + .image{ + // width: auto; height: auto; + display: block; + flex: 0 1 48%; + margin: 0 0 $column_goutiere*0.6 0; + } + } } // section.videos{ // ul{ @@ -1900,15 +1932,18 @@ article.card{ // } // } aside.linked-materials{ - ul{ - width:calc(100% + #{$column_goutiere}); - li{ - display: inline-block; - vertical-align: top; - width:$column_width; - margin:0 $column_goutiere $column_goutiere 0; - } - } + + @include col-mediaquery-min(3){ + ul{ + width:calc(100% + #{$column_goutiere}); + li{ + display: inline-block; + vertical-align: top; + width:$column_width; + margin:0 $column_goutiere $column_goutiere 0; + } + } + } h3.field__label{ font-size: 1em; font-weight: 500; @@ -1928,6 +1963,10 @@ article.card{ } } nav.prevnext{ + + @include col-mediaquery-max(3){ + padding: 0 1em; + } &.bottom{ margin:2em 0; } @@ -1944,18 +1983,26 @@ article.card{ a{ font-size: 0.756em; font-weight: 700; + line-height: 1.3; + display: block; + position: relative; + padding: 0 1em; } &:nth-child(1){ grid-column: 1; a:before{ - content:'< '; + content:'\021A4'; + position: absolute; + left:0; } } &:nth-child(2){ grid-column: 2; text-align: right; a:after{ - content:' >'; + content:'\021A6'; + position: absolute; + right: 0; } } } @@ -1998,6 +2045,7 @@ article.card{ #main-content .view-pricing-products .view-content{ display: flex; flex-flow: row nowrap; + article.product, .views-row{ flex:0 0 50%; @@ -2059,6 +2107,13 @@ article.card{ } } } + @include col-mediaquery-max(3){ + flex-flow: column; + article.product, + .views-row{ + flex:0 1 auto; + } + } } .modal{ diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue index 6187789..10ba4a7 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue @@ -81,7 +81,7 @@