bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored home database materials

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-27 11:09:03 +01:00
parent 0fc6347585
commit a2773b1b20
10 changed files with 294 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -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; }

2
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

@@ -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");
/***/ }),

70
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -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;
}
}
}

95
web/themes/custom/materiotheme/templates/content/node--materiau--card-home.html.twig Normal file
View File

@@ -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'
]
%}
<article{{ attributes.addClass(classes) }}>
<header>
{{ content.field_short_description }}
</header>
<section class="images">
{{ content.field_materiau_images }}
</section>
</article>

18
web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
View File

@@ -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({