diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 4d510fc..b785bc5 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -2113,6 +2113,9 @@ article.card { background-color: #69cdcf; padding: 0.5em 1em 1em; } +#main-content > article.thematique div.col-left section.visuel img { + width: 100%; } + #main-content > article.thematique aside.linked-materials ul { width: calc(100% + 13px); } #main-content > article.thematique aside.linked-materials ul li { diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 0f1944c..18efd5e 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -1423,7 +1423,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 _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _thematiqueFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/thematique.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/thematique.fragment.gql\"));\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n route(path: \\\"\", \"\\\", lang: \\\"\", \"\\\") {\\n ...ThematiqueFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar _default = {\n name: \"Thematique\",\n router: _route.default,\n store: _store.default,\n data: function data() {\n return {\n nid: null,\n path: null,\n thematique: {},\n image_accroche: null,\n loading: true\n };\n },\n metaInfo: function metaInfo() {\n return {\n title: this.thematique.title\n };\n },\n // computed: {\n // ...mapState({\n // items: state => state.Blabla.items\n // })\n // },\n created: function created() {\n this.getThematique();\n },\n methods: {\n // ...mapActions({\n // getItems: 'Blabla/getItems',\n // getItemIndex: 'Blabla/getItemIndex',\n // getPrevNextItems: 'Blabla/getPrevNextItems'\n // }),\n getThematique: function getThematique() {\n console.log('getThematique', this.$route); // get the article uuid\n // if(this.$route.query.nid){\n // // we come from internal link with vuejs\n // // directly record uuid\n // this.nid = this.$route.query.nid\n //\n // }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){\n // // we landed in an internal page\n // // get the uuid from drupalDeclouped, provided by materio_decoupled.module\n // this.nid = drupalDecoupled.entity_id\n // }\n\n if (this.$route.path) {\n // we come from internal link with vuejs\n this.path = this.$route.path;\n } else {\n // we landed in an internal page\n this.path = window.location.pathname;\n }\n\n if (this.path) {\n this.loadThematique();\n } else {\n // if for any reason we dont have the uuid\n // redirect to home\n this.$route.replace('home');\n }\n },\n loadThematique: function loadThematique() {\n var _this = this;\n\n console.log('loadThematique');\n this.loading = true;\n var ast = (0, _graphqlTag.default)(_templateObject(), this.path, drupalDecoupled.lang_code, _thematiqueFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var route = _ref.data.data.route;\n console.log('loaded Thematique', route);\n\n _this.parseDataGQL(route);\n }).catch(function (error) {\n console.warn('Issue with loadThematique', error);\n Promise.reject(error);\n });\n },\n parseDataGQL: function parseDataGQL(thematique) {\n console.log('parseDataGQL thematique', thematique);\n this.thematique = thematique;\n this.image_accroche = thematique.images[0]; // update main page title\n\n this.$store.commit('Common/setPagetitle', thematique.title);\n this.loading = false;\n }\n },\n components: {\n Card: _Card.default\n },\n watch: {\n '$route': function $route(to, from) {\n console.log('route change');\n this.getThematique();\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.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 _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _thematiqueFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/thematique.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/thematique.fragment.gql\"));\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n route(path: \\\"\", \"\\\", lang: \\\"\", \"\\\") {\\n ...ThematiqueFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar _default = {\n name: \"Thematique\",\n router: _route.default,\n store: _store.default,\n data: function data() {\n return {\n nid: null,\n path: null,\n thematique: {},\n image_accroche: null,\n loading: true\n };\n },\n metaInfo: function metaInfo() {\n return {\n title: this.thematique.title\n };\n },\n // computed: {\n // ...mapState({\n // items: state => state.Blabla.items\n // })\n // },\n created: function created() {\n this.getThematique();\n },\n methods: {\n // ...mapActions({\n // getItems: 'Blabla/getItems',\n // getItemIndex: 'Blabla/getItemIndex',\n // getPrevNextItems: 'Blabla/getPrevNextItems'\n // }),\n getThematique: function getThematique() {\n console.log('getThematique', this.$route); // get the article uuid\n // if(this.$route.query.nid){\n // // we come from internal link with vuejs\n // // directly record uuid\n // this.nid = this.$route.query.nid\n //\n // }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){\n // // we landed in an internal page\n // // get the uuid from drupalDeclouped, provided by materio_decoupled.module\n // this.nid = drupalDecoupled.entity_id\n // }\n\n if (this.$route.path) {\n // we come from internal link with vuejs\n this.path = this.$route.path;\n } else {\n // we landed in an internal page\n this.path = window.location.pathname;\n }\n\n if (this.path) {\n this.loadThematique();\n } else {\n // if for any reason we dont have the uuid\n // redirect to home\n this.$route.replace('home');\n }\n },\n loadThematique: function loadThematique() {\n var _this = this;\n\n console.log('loadThematique');\n this.loading = true;\n var ast = (0, _graphqlTag.default)(_templateObject(), this.path, drupalDecoupled.lang_code, _thematiqueFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var route = _ref.data.data.route;\n console.log('loaded Thematique', route);\n\n _this.parseDataGQL(route);\n }).catch(function (error) {\n console.warn('Issue with loadThematique', error);\n Promise.reject(error);\n });\n },\n parseDataGQL: function parseDataGQL(thematique) {\n console.log('parseDataGQL thematique', thematique);\n\n if (thematique) {\n this.thematique = thematique;\n\n if (thematique.images) {\n this.image_accroche = thematique.images[0];\n } // update main page title\n\n\n this.$store.commit('Common/setPagetitle', thematique.title);\n } else {\n console.warn('Thematique not loaded');\n }\n\n this.loading = false;\n }\n },\n components: {\n Card: _Card.default\n },\n watch: {\n '$route': function $route(to, from) {\n console.log('route change');\n this.getThematique();\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -3660,7 +3660,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.thematique || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"thematique\" }, [\n _c(\"div\", { staticClass: \"cols\" }, [\n _c(\"div\", { staticClass: \"col col-left\" }, [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.thematique.body) }\n })\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"col col-right\" }, [\n _c(\"aside\", { staticClass: \"linked-materials\" }, [\n _c(\"div\", { staticClass: \"card-list\" }, [\n _c(\n \"ul\",\n {},\n _vm._l(_vm.thematique.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 ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.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.thematique || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"thematique\" }, [\n _c(\"div\", { staticClass: \"cols\" }, [\n _c(\"div\", { staticClass: \"col col-left\" }, [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.thematique.body) }\n }),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"visuel\" }, [\n _c(\"img\", {\n attrs: { src: _vm.image_accroche.style_cardmedium.url, alt: \"\" }\n })\n ])\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"col col-right\" }, [\n _c(\"aside\", { staticClass: \"linked-materials\" }, [\n _c(\"div\", { staticClass: \"card-list\" }, [\n _c(\n \"ul\",\n {},\n _vm._l(_vm.thematique.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 ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.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 e943e63..b29484b 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -1362,9 +1362,16 @@ article.card{ } div.col-right{} } - div.col-left section.body{ - background-color: $color-base; - padding: 0.5em 1em 1em; + div.col-left{ + section.body{ + background-color: $color-base; + padding: 0.5em 1em 1em; + } + section.visuel{ + img{ + width: 100%; + } + } } aside.linked-materials{ ul{ diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue index 12020ae..bafc4a6 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Thematique.vue @@ -6,6 +6,9 @@
+
+ +