diff --git a/config/sync/core.entity_view_display.node.frontpage.default.yml b/config/sync/core.entity_view_display.node.frontpage.default.yml index e44bc02..1170240 100644 --- a/config/sync/core.entity_view_display.node.frontpage.default.yml +++ b/config/sync/core.entity_view_display.node.frontpage.default.yml @@ -242,7 +242,7 @@ content: weight: 9 region: content settings: - view_mode: card_medium + view_mode: card_home link: false third_party_settings: { } type: entity_reference_entity_view diff --git a/config/sync/core.entity_view_display.node.materiau.card_home.yml b/config/sync/core.entity_view_display.node.materiau.card_home.yml new file mode 100644 index 0000000..23fe5c3 --- /dev/null +++ b/config/sync/core.entity_view_display.node.materiau.card_home.yml @@ -0,0 +1,81 @@ +uuid: 33a2fcb7-0ab3-4cce-a9ae-4b9c8160b5f8 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.node.card_home + - field.field.node.materiau.body + - field.field.node.materiau.field_attachments + - field.field.node.materiau.field_distributor + - field.field.node.materiau.field_famille + - field.field.node.materiau.field_index + - field.field.node.materiau.field_linked_articles + - field.field.node.materiau.field_linked_materials + - field.field.node.materiau.field_localisation_old + - field.field.node.materiau.field_manufacturer + - field.field.node.materiau.field_materiau_images + - field.field.node.materiau.field_memo + - field.field.node.materiau.field_migration + - field.field.node.materiau.field_reference + - field.field.node.materiau.field_samples + - field.field.node.materiau.field_short_description + - field.field.node.materiau.field_tags + - field.field.node.materiau.field_thesaurus + - field.field.node.materiau.field_video + - field.field.node.materiau.field_workflow + - image.style.card_small + - node.type.materiau + module: + - image_delta_formatter + - user +id: node.materiau.card_home +targetEntityType: node +bundle: materiau +mode: card_home +content: + field_materiau_images: + weight: 11 + label: hidden + settings: + deltas: '0' + image_style: card_small + image_link: '' + deltas_reversed: 0 + third_party_settings: { } + type: image_delta_formatter + region: content + field_short_description: + weight: 8 + label: hidden + settings: + link_to_entity: false + third_party_settings: { } + type: string + region: content +hidden: + body: true + field_attachments: true + field_distributor: true + field_famille: true + field_index: true + field_linked_articles: true + field_linked_materials: true + field_localisation_old: true + field_manufacturer: true + field_memo: true + field_migration: true + field_reference: true + field_samples: true + field_tags: true + field_thesaurus: true + field_video: true + field_workflow: true + flag_admintest: true + flag_dossier: true + flag_flag_list_template_1: true + flag_projet_1: true + flag_projet_2: true + langcode: true + links: true + search_api_excerpt: true + title: true diff --git a/config/sync/core.entity_view_display.node.materiau.default.yml b/config/sync/core.entity_view_display.node.materiau.default.yml index 123c977..9a93d77 100644 --- a/config/sync/core.entity_view_display.node.materiau.default.yml +++ b/config/sync/core.entity_view_display.node.materiau.default.yml @@ -192,6 +192,31 @@ content: third_party_settings: { } type: list_default region: content + flag_admintest: + weight: 10 + region: content + settings: { } + third_party_settings: { } + flag_dossier: + weight: 10 + region: content + settings: { } + third_party_settings: { } + flag_flag_list_template_1: + weight: 10 + region: content + settings: { } + third_party_settings: { } + flag_projet_1: + weight: 10 + region: content + settings: { } + third_party_settings: { } + flag_projet_2: + weight: 10 + region: content + settings: { } + third_party_settings: { } links: weight: 100 region: content diff --git a/config/sync/core.entity_view_mode.node.card_home.yml b/config/sync/core.entity_view_mode.node.card_home.yml new file mode 100644 index 0000000..a966009 --- /dev/null +++ b/config/sync/core.entity_view_mode.node.card_home.yml @@ -0,0 +1,10 @@ +uuid: 77910894-9056-4143-a9f1-3340357690ca +langcode: en +status: true +dependencies: + module: + - node +id: node.card_home +label: card-home +targetEntityType: node +cache: true diff --git a/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php b/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php index 8318611..c7a74c9 100644 --- a/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php +++ b/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php @@ -45,7 +45,7 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList ->sort('created', 'DESC') ->range(0,200); $results = $query->execute(); - $nids = array_rand($results, 30); + $nids = array_rand($results, 70); foreach ($nids as $key => $nid) { $this->list[$key] = $this->createItem($key, $nid); } diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 657f832..df3bb5d 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -1513,15 +1513,18 @@ article.node--type-frontpage .node__content > section.home-intro, article.node-- text-align: center; } article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla { - display: grid; - grid-template-columns: 300px 1fr; - grid-column-gap: 2em; - padding: 2em 1em; } + display: flex; + flex-direction: row; + flex-wrap: nowrap; } article.node--type-frontpage .node__content > section.home-database > div:nth-child(1), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) { - color: #fff; - grid-column: 1; } + flex: 0 0 423px; + box-sizing: border-box; + padding: 1em; + color: #fff; } article.node--type-frontpage .node__content > section.home-database > div:nth-child(2), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(2), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(2) { - grid-column: 2; } + flex: 1 1 auto; + box-sizing: border-box; + padding: 1em 0.5em; } article.node--type-frontpage > h2 { display: none; } @@ -1549,28 +1552,23 @@ article.node--type-frontpage .node__content > section.home-database { width: 100%; margin: 0; padding: 0; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(50px, 130px)); - grid-template-rows: 1fr; - grid-gap: 1em; - justify-content: start; } + display: flex; + flex-flow: row wrap; + justify-content: space-between; } article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li { position: relative; list-style: none; margin: 0; - padding: 0; - padding-top: 140%; } + padding: 0 0 6.5px 0; + box-sizing: border-box; + width: 102.5px; + height: 147.5px; } article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: auto; - height: auto; } + width: 100%; + height: 100%; } article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card .field--name-field-short-description { - font-size: 0.756em; - line-height: 0.9; } + font-size: 0.656em; + line-height: 1.2; } article.node--type-frontpage .node__content > section.home-showrooms { background-color: #50aa3c; } diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 7080a60..59c687c 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 methods: {\n onClickLink: function onClickLink(e) {\n console.log(\"onClickLink\", e, this.$router);\n var path = null;\n this.$router.options.routes.forEach(function (route) {\n // console.log('route.path', route.path);\n if (route.path == e.originalTarget.pathname) {\n path = e.originalTarget.pathname; // TODO: check if path is current\n // TODO: as we can't break forEach is not the good method here\n }\n }, this);\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 // 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 methods: {\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 cebbf4e..e86b658 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -510,14 +510,35 @@ article.node--type-frontpage{ } } + // %part-columned-layout{ + // display:grid; + // grid-template-columns: 300px 1fr; + // grid-column-gap: 2em; + // padding:2em 1em; + // >div:nth-child(1){ + // color: #fff; + // grid-column: 1; + // .field__label{ + // @extend %front-col-field__label; + // } + // .field__item{ + // @extend %front-col-descritpion; + // } + // } + // >div:nth-child(2){ + // grid-column: 2; + // } + // } + %part-columned-layout{ - display:grid; - grid-template-columns: 300px 1fr; - grid-column-gap: 2em; - padding:2em 1em; + display:flex; + flex-direction: row; + flex-wrap: nowrap; >div:nth-child(1){ + flex: 0 0 $column_width * 2 + $column_goutiere; + box-sizing: border-box; + padding: 1em; color: #fff; - grid-column: 1; .field__label{ @extend %front-col-field__label; } @@ -526,7 +547,9 @@ article.node--type-frontpage{ } } >div:nth-child(2){ - grid-column: 2; + flex: 1 1 auto; + box-sizing: border-box; + padding: 1em 0.5em; } } @@ -574,25 +597,32 @@ article.node--type-frontpage{ ul{ width:100%; margin:0; padding:0; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(50px, 130px)); - grid-template-rows: 1fr; - grid-gap: 1em; - justify-content:start; + // display: grid; + // grid-template-columns: repeat(auto-fill, minmax(50px, 130px)); + // grid-template-rows: 1fr; + // grid-gap: 1em; + // justify-content:start; + display: flex; + flex-flow: row wrap; + justify-content: space-between; li{ position: relative; list-style: none; - margin:0; padding:0; - padding-top: 140%; + margin:0; + padding:0 0 $column_goutiere / 2 0; + box-sizing: border-box; + // padding-top: 140%; + width: $column_width / 2; + height: $card_height / 2; .card{ - position:absolute; - top:0; bottom:0; - left:0; right:0; - width: auto; - height: auto; + // position:absolute; + // top:0; bottom:0; + // left:0; right:0; + width: 100%; + height: 100%; .field--name-field-short-description{ - font-size: 0.756em; - line-height: 0.9; + font-size: 0.656em; + line-height: 1.2; } } } diff --git a/web/themes/custom/materiotheme/templates/content/node--materiau--card-home.html.twig b/web/themes/custom/materiotheme/templates/content/node--materiau--card-home.html.twig new file mode 100644 index 0000000..0eb0778 --- /dev/null +++ b/web/themes/custom/materiotheme/templates/content/node--materiau--card-home.html.twig @@ -0,0 +1,95 @@ +{# +/** + * @file + * Default theme implementation to display a node. + * + * Available variables: + * - node: The node entity with limited access to object properties and methods. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - node.getCreatedTime() will return the node creation timestamp. + * - node.hasField('field_example') returns TRUE if the node bundle includes + * field_example. (This does not indicate the presence of a value in this + * field.) + * - node.isPublished() will return whether the node is published or not. + * Calling other methods, such as node.delete(), will result in an exception. + * See \Drupal\node\Entity\Node for a full list of public properties and + * methods for the node object. + * - label: (optional) The title of the node. + * - content: All node items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - author_picture: The node author user entity, rendered using the "compact" + * view mode. + * - metadata: Metadata for this node. + * - date: (optional) Themed creation date field. + * - author_name: (optional) Themed author name field. + * - url: Direct URL of the current node. + * - display_submitted: Whether submission information should be displayed. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - node: The current template type (also known as a "theming hook"). + * - node--type-[type]: The current node type. For example, if the node is an + * "Article" it would result in "node--type-article". Note that the machine + * name will often be in a short form of the human readable label. + * - node--view-mode-[view_mode]: The View Mode of the node; for example, a + * teaser would result in: "node--view-mode-teaser", and + * full: "node--view-mode-full". + * The following are controlled through the node publishing options. + * - node--promoted: Appears on nodes promoted to the front page. + * - node--sticky: Appears on nodes ordered above other non-sticky nodes in + * teaser listings. + * - node--unpublished: Appears on unpublished nodes visible only to site + * admins. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main + * content tag that appears in the template. + * - author_attributes: Same as attributes, except applied to the author of + * the node tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - view_mode: View mode; for example, "teaser" or "full". + * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'. + * - page: Flag for the full page state. Will be true if view_mode is 'full'. + * - readmore: Flag for more state. Will be true if the teaser content of the + * node cannot hold the main body content. + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_node() + * + * @todo Remove the id attribute (or make it a class), because if that gets + * rendered twice on a page this is invalid CSS for example: two lists + * in different view modes. + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'node', + 'node--type-' ~ node.bundle|clean_class, + node.isPromoted() ? 'node--promoted', + node.isSticky() ? 'node--sticky', + not node.isPublished() ? 'node--unpublished', + view_mode ? view_mode|clean_class, + view_mode ? 'node--view-mode-' ~ view_mode|clean_class, + 'card' + ] +%} + + +
+ {{ content.field_short_description }} +
+
+ {{ content.field_materiau_images }} +
+ diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue index 2d9be88..0cd3f24 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue @@ -29,17 +29,17 @@ export default { }, methods: { onClickLink(e){ - console.log("onClickLink", e, this.$router); + console.log("onClickLink", e, this.$router, this.$route); let path = null; - - this.$router.options.routes.forEach(route => { - // console.log('route.path', route.path); - if (route.path == e.originalTarget.pathname) { - path = e.originalTarget.pathname - // TODO: check if path is current - // TODO: as we can't break forEach is not the good method here + // find existing router route compared with link href + for (var i = 0; i < this.$router.options.routes.length; i++) { + if (this.$router.options.routes[i].path == e.originalTarget.pathname) { + if (e.originalTarget.pathname !== this.$route.path) { + path = e.originalTarget.pathname + } + break; } - }, this) + } if (path) { this.$router.push({