From 1ff973d995f977fbbfc2b388c24ad2cea3d7c456 Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 26 Jan 2021 11:43:42 +0100 Subject: [PATCH] improved industriels display --- .../custom/materiotheme/assets/dist/main.css | 4 +-- .../custom/materiotheme/assets/dist/main.js | 4 +-- .../materiotheme/assets/styles/main.scss | 4 +-- .../vuejs/components/Content/ModalCard.vue | 29 ++++++++++--------- 4 files changed, 22 insertions(+), 19 deletions(-) diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index c33606d..0442a1e 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -2054,14 +2054,14 @@ article.card { article.card.modal-card section.col-right section.industriels > section { flex: 0 0 50%; } article.card.modal-card section.col-right section.industriels > section ul li { - padding: .5em 0; } + padding: 0.1em 0 .4em 0; } article.card.modal-card section.col-right section.industriels > section h2 { margin: 0; font-size: 1em; line-height: 1; } article.card.modal-card section.col-right section.industriels > section p { margin: 0; - font-size: 0.882em; } + font-size: 0.756em; } article.card.modal-card section.col-right section.attachments a { margin: 0; font-size: 0.882em; diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 101cfcf..653fb9e 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -1055,7 +1055,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 _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _LinkedMaterialCard = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/LinkedMaterialCard */ \"./web/themes/custom/materiotheme/vuejs/components/Content/LinkedMaterialCard.vue\"));\n\nvar _cardMixins = _interopRequireDefault(__webpack_require__(/*! vuejs/components/cardMixins */ \"./web/themes/custom/materiotheme/vuejs/components/cardMixins.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 _materiaumodalFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/materiaumodal.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n materiau(id: \", \", lang: \\\"\", \"\\\") {\\n ...MateriauFields\\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\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar prettyBytes = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n\nvar _default = {\n name: \"ModalCard\",\n props: ['item'],\n mixins: [_cardMixins.default],\n components: {\n LinkedMaterialCard: _LinkedMaterialCard.default\n },\n data: function data() {\n return {\n material: null,\n loading: false,\n blanksrc: \"\".concat(drupalSettings.path.themePath, \"/assets/img/blank.gif\"),\n loadingFlag: false,\n lightbox_index: null\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n flagcolls: function flagcolls(state) {\n return state.User.flagcolls;\n },\n showrooms: function showrooms(state) {\n return state.Showrooms.showrooms_by_tid;\n }\n })),\n created: function created() {\n console.log('modale item', this.item);\n this.loadMaterial();\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n flagUnflag: 'User/flagUnflag'\n })), {}, {\n loadMaterial: function loadMaterial() {\n var _this = this;\n\n console.log('loadMaterial', this.item.id);\n this.loading = true;\n var ast = (0, _graphqlTag.default)(_templateObject(), this.item.id, drupalDecoupled.lang_code, _materiaumodalFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var materiau = _ref.data.data.materiau;\n console.log('loadMaterial material loaded', materiau);\n _this.material = materiau;\n _this.loading = false; // delay the lazyload to let the card the time to update dom\n // maybe not the best method\n\n setTimeout(function () {\n this.activateLazyLoad();\n }.bind(_this), 5);\n }).catch(function (error) {\n console.warn('Issue with loadMaterial', error);\n Promise.reject(error);\n });\n },\n flagIsActive: function flagIsActive(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;\n return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;\n },\n flagIsLoading: function flagIsLoading(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n return collid === this.loadingFlag;\n },\n onFlagActionCard: function onFlagActionCard(e) {\n var _this2 = this;\n\n console.log(\"Card onFlagActionCard\", e);\n\n if (!this.loadingFlag) {\n var collid = e.target.getAttribute('collid');\n var isActive = this.flagIsActive(collid);\n var action = isActive ? 'unflag' : 'flag'; // console.log('collid', collid);\n // console.log(\"this.item\", this.item);\n\n this.loadingFlag = collid;\n this.flagUnflag({\n action: action,\n id: this.item.id,\n collid: collid\n }).then(function (data) {\n console.log(\"onFlagActionCard then\", data);\n _this2.loadingFlag = false;\n });\n }\n },\n onCloseModalCard: function onCloseModalCard(e) {\n // this.$modal.hideAll()\n this.$modal.hide(\"modal-\".concat(this.item.id));\n },\n prettyFileSize: function prettyFileSize(bytes) {\n return prettyBytes(parseInt(bytes));\n }\n })\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.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 _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _LinkedMaterialCard = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/LinkedMaterialCard */ \"./web/themes/custom/materiotheme/vuejs/components/Content/LinkedMaterialCard.vue\"));\n\nvar _cardMixins = _interopRequireDefault(__webpack_require__(/*! vuejs/components/cardMixins */ \"./web/themes/custom/materiotheme/vuejs/components/cardMixins.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 _materiaumodalFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/materiaumodal.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n materiau(id: \", \", lang: \\\"\", \"\\\") {\\n ...MateriauFields\\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\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar prettyBytes = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n\nvar _default = {\n name: \"ModalCard\",\n props: ['item'],\n mixins: [_cardMixins.default],\n components: {\n LinkedMaterialCard: _LinkedMaterialCard.default\n },\n data: function data() {\n return {\n material: null,\n loading: false,\n blanksrc: \"\".concat(drupalSettings.path.themePath, \"/assets/img/blank.gif\"),\n loadingFlag: false,\n lightbox_index: null\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n flagcolls: function flagcolls(state) {\n return state.User.flagcolls;\n },\n showrooms: function showrooms(state) {\n return state.Showrooms.showrooms_by_tid;\n }\n })),\n created: function created() {\n console.log('modale item', this.item);\n this.loadMaterial();\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n flagUnflag: 'User/flagUnflag'\n })), {}, {\n loadMaterial: function loadMaterial() {\n var _this = this;\n\n console.log('loadMaterial', this.item.id);\n this.loading = true;\n var ast = (0, _graphqlTag.default)(_templateObject(), this.item.id, drupalDecoupled.lang_code, _materiaumodalFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var materiau = _ref.data.data.materiau;\n console.log('loadMaterial material loaded', materiau);\n _this.material = materiau;\n _this.loading = false; // delay the lazyload to let the card the time to update dom\n // maybe not the best method\n\n setTimeout(function () {\n this.activateLazyLoad();\n }.bind(_this), 5);\n }).catch(function (error) {\n console.warn('Issue with loadMaterial', error);\n Promise.reject(error);\n });\n },\n flagIsActive: function flagIsActive(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;\n return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;\n },\n flagIsLoading: function flagIsLoading(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n return collid === this.loadingFlag;\n },\n onFlagActionCard: function onFlagActionCard(e) {\n var _this2 = this;\n\n console.log(\"Card onFlagActionCard\", e);\n\n if (!this.loadingFlag) {\n var collid = e.target.getAttribute('collid');\n var isActive = this.flagIsActive(collid);\n var action = isActive ? 'unflag' : 'flag'; // console.log('collid', collid);\n // console.log(\"this.item\", this.item);\n\n this.loadingFlag = collid;\n this.flagUnflag({\n action: action,\n id: this.item.id,\n collid: collid\n }).then(function (data) {\n console.log(\"onFlagActionCard then\", data);\n _this2.loadingFlag = false;\n });\n }\n },\n onCloseModalCard: function onCloseModalCard(e) {\n // this.$modal.hideAll()\n this.$modal.hide(\"modal-\".concat(this.item.id));\n },\n prettyFileSize: function prettyFileSize(bytes) {\n return prettyBytes(parseInt(bytes));\n },\n shortUrl: function shortUrl(url) {\n return url.replace(/^http:\\/\\//, '').replace(/^www\\./, '');\n }\n })\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -3356,7 +3356,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.material || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\n \"article\",\n { staticClass: \"card modal-card\" },\n [\n _c(\n \"section\",\n { staticClass: \"col col-right\" },\n [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.material.title))]),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.material.short_description))]),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.material.reference))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"tools\" }, [\n _c(\"section\", { staticClass: \"tool close\" }, [\n _c(\"span\", {\n staticClass: \"btn mdi mdi-close\",\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onCloseModalCard($event)\n }\n }\n })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool flags\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-folder-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.My folders\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.flagcolls, function(coll) {\n return _vm.flagcolls\n ? _c(\"li\", { key: coll.id }, [\n _c(\n \"span\",\n {\n staticClass: \"flag mdi\",\n class: [\n _vm.flagIsLoading(coll.id)\n ? \"mdi-loading mdi-spin\"\n : _vm.flagIsActive(coll.id)\n ? \"mdi-close-circle isActive\"\n : \"mdi-plus\"\n ],\n attrs: { collid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onFlagActionCard($event)\n }\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(coll.name) +\n \"\\n \"\n )\n ]\n )\n ])\n : _vm._e()\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _vm.item.samples && _vm.item.samples.length\n ? _c(\"section\", { staticClass: \"tool samples\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-beaker-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Samples\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.samples, function(sample) {\n return _c(\"li\", { key: sample.showroom.id }, [\n _c(\"span\", { staticClass: \"showroom\" }, [\n _vm._v(_vm._s(sample.showroom.name))\n ]),\n _vm._v(\n \": \" +\n _vm._s(sample.location) +\n \"\\n \"\n )\n ])\n }),\n 0\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool print\" }, [\n _c(\n \"a\",\n {\n attrs: {\n href: _vm.material.path + \"/printable/print\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"btn mdi mdi-printer\" })]\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\n \"vsa-list\",\n [\n _c(\n \"vsa-item\",\n { attrs: { initActive: true } },\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\"Description\")\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.material.body) }\n })\n ])\n ],\n 1\n ),\n _vm._v(\" \"),\n _vm.material.linked_materials\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Linked materials\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"linked-materials\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.linked_materials, function(\n m\n ) {\n return _c(\n \"li\",\n { key: m.id },\n [\n _c(\"LinkedMaterialCard\", {\n attrs: { item: m }\n })\n ],\n 1\n )\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.manufacturer || _vm.material.distributor\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"default.Contact\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"industriels\" }, [\n _vm.material.distributor\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.Distributor\"))\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.distributor, function(\n distrib\n ) {\n return _c(\"li\", { key: distrib.id }, [\n _c(\"h2\", [\n _vm._v(_vm._s(distrib.name))\n ]),\n _vm._v(\" \"),\n distrib.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: distrib.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n distrib.website.url\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n distrib.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" +\n distrib.email\n }\n },\n [\n _vm._v(\n _vm._s(distrib.email)\n )\n ]\n )\n ])\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.manufacturer\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.Manufacturer\"))\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(\n _vm.material.manufacturer,\n function(manu) {\n return _c(\"li\", { key: manu.id }, [\n _c(\"h2\", [\n _vm._v(_vm._s(manu.name))\n ]),\n _vm._v(\" \"),\n manu.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: manu.website.url\n }\n },\n [\n _vm._v(\n _vm._s(manu.website.url)\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n manu.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" + manu.email\n }\n },\n [_vm._v(_vm._s(manu.email))]\n )\n ])\n : _vm._e()\n ])\n }\n ),\n 0\n )\n ])\n : _vm._e()\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.attachments && _vm.material.attachments.length\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Attachments\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"attachments\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.attachments, function(\n attachmt\n ) {\n return _c(\"li\", { key: attachmt.file.fid }, [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: attachmt.file.url\n }\n },\n [\n _vm._v(\n _vm._s(attachmt.file.filename) + \" \"\n ),\n _c(\"span\", [\n _vm._v(\n \"(\" +\n _vm._s(\n _vm.prettyFileSize(\n attachmt.file.filesize\n )\n ) +\n \")\"\n )\n ])\n ]\n ),\n _vm._v(\" \"),\n attachmt.description\n ? _c(\"p\", {\n staticClass: \"description\",\n domProps: {\n innerHTML: _vm._s(\n attachmt.description\n )\n }\n })\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"col col-left images\"\n },\n _vm._l(_vm.material.images, function(img, index) {\n return _c(\"figure\", { key: img.url }, [\n _c(\"img\", {\n directives: [\n {\n name: \"lazy\",\n rawName: \"v-lazy\",\n value: index,\n expression: \"index\"\n }\n ],\n staticClass: \"lazy\",\n attrs: {\n \"data-src\": img.style_cardfull.url,\n title: img.title\n }\n }),\n _vm._v(\" \"),\n _c(\"img\", {\n staticClass: \"blank\",\n attrs: { src: _vm.blanksrc },\n on: {\n click: function($event) {\n _vm.lightbox_index = index\n }\n }\n })\n ])\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"CoolLightBox\", {\n attrs: {\n items: _vm.material.images,\n index: _vm.lightbox_index,\n srcName: \"url\",\n loop: true\n },\n on: {\n close: function($event) {\n _vm.lightbox_index = null\n }\n }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.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.material || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\n \"article\",\n { staticClass: \"card modal-card\" },\n [\n _c(\n \"section\",\n { staticClass: \"col col-right\" },\n [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.material.title))]),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.material.short_description))]),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.material.reference))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"tools\" }, [\n _c(\"section\", { staticClass: \"tool close\" }, [\n _c(\"span\", {\n staticClass: \"btn mdi mdi-close\",\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onCloseModalCard($event)\n }\n }\n })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool flags\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-folder-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.My folders\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.flagcolls, function(coll) {\n return _vm.flagcolls\n ? _c(\"li\", { key: coll.id }, [\n _c(\n \"span\",\n {\n staticClass: \"flag mdi\",\n class: [\n _vm.flagIsLoading(coll.id)\n ? \"mdi-loading mdi-spin\"\n : _vm.flagIsActive(coll.id)\n ? \"mdi-close-circle isActive\"\n : \"mdi-plus\"\n ],\n attrs: { collid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onFlagActionCard($event)\n }\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(coll.name) +\n \"\\n \"\n )\n ]\n )\n ])\n : _vm._e()\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _vm.item.samples && _vm.item.samples.length\n ? _c(\"section\", { staticClass: \"tool samples\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-beaker-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Samples\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.samples, function(sample) {\n return _c(\"li\", { key: sample.showroom.id }, [\n _c(\"span\", { staticClass: \"showroom\" }, [\n _vm._v(_vm._s(sample.showroom.name))\n ]),\n _vm._v(\n \": \" +\n _vm._s(sample.location) +\n \"\\n \"\n )\n ])\n }),\n 0\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool print\" }, [\n _c(\n \"a\",\n {\n attrs: {\n href: _vm.material.path + \"/printable/print\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"btn mdi mdi-printer\" })]\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\n \"vsa-list\",\n [\n _c(\n \"vsa-item\",\n { attrs: { initActive: true } },\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\"Description\")\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.material.body) }\n })\n ])\n ],\n 1\n ),\n _vm._v(\" \"),\n _vm.material.linked_materials\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Linked materials\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"linked-materials\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.linked_materials, function(\n m\n ) {\n return _c(\n \"li\",\n { key: m.id },\n [\n _c(\"LinkedMaterialCard\", {\n attrs: { item: m }\n })\n ],\n 1\n )\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.manufacturer || _vm.material.distributor\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"default.Contact\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"industriels\" }, [\n _vm.material.manufacturer\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.Manufacturer\"))\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(\n _vm.material.manufacturer,\n function(manu) {\n return _c(\"li\", { key: manu.id }, [\n _c(\"h2\", [\n _vm._v(_vm._s(manu.name))\n ]),\n _vm._v(\" \"),\n manu.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: manu.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n _vm.shortUrl(\n manu.website.url\n )\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n manu.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" + manu.email\n }\n },\n [_vm._v(_vm._s(manu.email))]\n )\n ])\n : _vm._e()\n ])\n }\n ),\n 0\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.distributor\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.Distributor\"))\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.distributor, function(\n distrib\n ) {\n return _c(\"li\", { key: distrib.id }, [\n _c(\"h2\", [\n _vm._v(_vm._s(distrib.name))\n ]),\n _vm._v(\" \"),\n distrib.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: distrib.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n _vm.shortUrl(\n distrib.website.url\n )\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n distrib.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" +\n distrib.email\n }\n },\n [\n _vm._v(\n _vm._s(distrib.email)\n )\n ]\n )\n ])\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n : _vm._e()\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.attachments && _vm.material.attachments.length\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Attachments\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"attachments\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.attachments, function(\n attachmt\n ) {\n return _c(\"li\", { key: attachmt.file.fid }, [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: attachmt.file.url\n }\n },\n [\n _vm._v(\n _vm._s(attachmt.file.filename) + \" \"\n ),\n _c(\"span\", [\n _vm._v(\n \"(\" +\n _vm._s(\n _vm.prettyFileSize(\n attachmt.file.filesize\n )\n ) +\n \")\"\n )\n ])\n ]\n ),\n _vm._v(\" \"),\n attachmt.description\n ? _c(\"p\", {\n staticClass: \"description\",\n domProps: {\n innerHTML: _vm._s(\n attachmt.description\n )\n }\n })\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"col col-left images\"\n },\n _vm._l(_vm.material.images, function(img, index) {\n return _c(\"figure\", { key: img.url }, [\n _c(\"img\", {\n directives: [\n {\n name: \"lazy\",\n rawName: \"v-lazy\",\n value: index,\n expression: \"index\"\n }\n ],\n staticClass: \"lazy\",\n attrs: {\n \"data-src\": img.style_cardfull.url,\n title: img.title\n }\n }),\n _vm._v(\" \"),\n _c(\"img\", {\n staticClass: \"blank\",\n attrs: { src: _vm.blanksrc },\n on: {\n click: function($event) {\n _vm.lightbox_index = index\n }\n }\n })\n ])\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"CoolLightBox\", {\n attrs: {\n items: _vm.material.images,\n index: _vm.lightbox_index,\n srcName: \"url\",\n loop: true\n },\n on: {\n close: function($event) {\n _vm.lightbox_index = null\n }\n }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.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 d305065..4fc27a1 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -1274,7 +1274,7 @@ article.card{ flex: 0 0 50%; ul{ li{ - padding: .5em 0; + padding:0.1em 0 .4em 0; } } h2{ @@ -1284,7 +1284,7 @@ article.card{ } p{ margin: 0; - font-size: 0.882em; + font-size: 0.756em; } } } diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue b/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue index 34086cd..89e2a04 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue @@ -116,30 +116,30 @@
-
- {{ $t("materio.Distributor") }} - -
{{ $t("materio.Manufacturer") }}
+
+ {{ $t("materio.Distributor") }} + +
@@ -295,6 +295,9 @@ export default { }, prettyFileSize(bytes){ return prettyBytes(parseInt(bytes)) + }, + shortUrl(url){ + return url.replace(/^http:\/\//, '').replace(/^www\./, '') } } }