From 68a7084deb7f43282e45d7e89a42ef3f742df765 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 16 Jul 2019 10:29:30 +0200 Subject: [PATCH] going on with home display --- ...tity_view_display.node.article.default.yml | 83 ++-------- ...ty_view_display.node.frontpage.default.yml | 2 +- .../FieldType/ComputedArticlesReferences.php | 2 +- .../custom/materiotheme/assets/dist/main.css | 147 +++++++++++------- .../materiotheme/assets/styles/main.scss | 109 ++++++++++--- ...d-articles-reference--frontpage.html.twig} | 0 ...d-materials-reference--frontpage.html.twig | 67 ++++++++ .../node--article--card-medium.html.twig | 96 ++++++++++++ 8 files changed, 358 insertions(+), 148 deletions(-) rename web/themes/custom/materiotheme/templates/content/{field--node--computed-materials-reference.html.twig => field--node--computed-articles-reference--frontpage.html.twig} (100%) create mode 100644 web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference--frontpage.html.twig create mode 100644 web/themes/custom/materiotheme/templates/content/node--article--card-medium.html.twig diff --git a/config/sync/core.entity_view_display.node.article.default.yml b/config/sync/core.entity_view_display.node.article.default.yml index 1e96e595..390ac272 100644 --- a/config/sync/core.entity_view_display.node.article.default.yml +++ b/config/sync/core.entity_view_display.node.article.default.yml @@ -15,29 +15,20 @@ dependencies: - field.field.node.article.field_video - field.field.node.article.field_visuel - field.field.node.article.field_workflow + - image.style.card_medium - node.type.article module: - datetime_range - image - - link - - text - user - - video_embed_field id: node.article.default targetEntityType: node bundle: article mode: default content: - body: - label: hidden - type: text_default - weight: 0 - settings: { } - third_party_settings: { } - region: content field_date: - weight: 6 - label: above + weight: 2 + label: hidden settings: separator: '-' format_type: medium @@ -45,78 +36,34 @@ content: third_party_settings: { } type: daterange_default region: content - field_linked_materials: - weight: 7 - label: above - settings: - link: true - third_party_settings: { } - type: entity_reference_label - region: content - field_source: - weight: 1 - label: above - settings: - trim_length: 80 - url_only: false - url_plain: false - rel: '' - target: '' - third_party_settings: { } - type: link - region: content - field_tags: - weight: 5 - label: above - settings: - link: true - third_party_settings: { } - type: entity_reference_label - region: content - field_thesaurus: - weight: 4 - label: above - settings: - link: true - third_party_settings: { } - type: entity_reference_label - region: content - field_video: - weight: 3 - label: above - settings: - responsive: true - width: 854 - height: 480 - autoplay: true - third_party_settings: { } - type: video_embed_field_video - region: content field_visuel: - weight: 2 - label: above + weight: 1 + label: hidden settings: - image_style: '' + image_style: card_medium image_link: '' third_party_settings: { } type: image region: content - links: - weight: 8 - region: content - settings: { } - third_party_settings: { } title: label: hidden type: string - weight: -5 + weight: 0 region: content settings: link_to_entity: false third_party_settings: { } hidden: + body: true + field_linked_materials: true field_memo: true field_migration: true field_showroom: true + field_source: true + field_tags: true + field_thesaurus: true + field_video: true field_workflow: true langcode: true + links: true + search_api_excerpt: true 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 a09366ff..987e2d19 100644 --- a/config/sync/core.entity_view_display.node.frontpage.default.yml +++ b/config/sync/core.entity_view_display.node.frontpage.default.yml @@ -119,7 +119,7 @@ content: weight: 5 region: content settings: - view_mode: teaser + view_mode: card_medium link: false third_party_settings: { } type: entity_reference_entity_view diff --git a/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedArticlesReferences.php b/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedArticlesReferences.php index e25dd2c2..f15eae7f 100644 --- a/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedArticlesReferences.php +++ b/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedArticlesReferences.php @@ -38,7 +38,7 @@ class ComputedArticlesReferences extends EntityReferenceFieldItemList $query = \Drupal::entityQuery('node') ->condition('status', 1) ->sort('created', 'DESC') - ->range(0,5) + ->range(0,6) ->condition('type', 'article'); $nids = $query->execute(); foreach ($nids as $key => $nid) { diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 0a244780..414b628e 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -1245,61 +1245,102 @@ header[role="banner"] { aside.messages { padding: 0; } -article.node--type-frontpage .node__content > section { - padding: 1em; } - article.node--type-frontpage .node__content > section.home-intro { - padding: 0; - background-color: #fff; } - article.node--type-frontpage .node__content > section.home-database { - background-color: #69cdcf; - display: grid; - grid-template-columns: 300px 1fr; - grid-column-gap: 1em; - color: #fff; } - article.node--type-frontpage .node__content > section.home-database .field--name-field-a-database { - grid-column: 1; } - article.node--type-frontpage .node__content > section.home-database .cards-list-home { - grid-column: 2; - position: relative; - max-height: 580px; - overflow-y: hidden; } - article.node--type-frontpage .node__content > section.home-database .cards-list-home ul { - width: 100%; +article.node--type-frontpage .node__content > section.home-intro, article.node--type-frontpage .node__content > section.home-pricing { + padding: 1.5em 0; + background-color: #fff; } + article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1), article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) { + width: 80%; + margin: 0 auto; + text-align: center; } + article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label { + font-size: 3em; } + article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item { + font-size: 0.9em; + line-height: 1.3; } + +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; } + 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; } + article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label { + font-size: 3em; + line-height: 0.9; } + article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item { + font-size: 0.9em; + line-height: 1.3; } + 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; } + +article.node--type-frontpage .node__content > section.home-database { + background-color: #69cdcf; } + article.node--type-frontpage .node__content > section.home-database .cards-list-home { + position: relative; + max-height: 580px; + overflow-y: hidden; } + article.node--type-frontpage .node__content > section.home-database .cards-list-home 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; } + article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li { + position: relative; + list-style: none; margin: 0; padding: 0; - display: grid; - justify-content: center; - grid-template-columns: repeat(auto-fill, minmax(50px, 130px)); - grid-template-rows: 1fr; - grid-gap: 1em; } - 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%; } - 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; } - 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; } - article.node--type-frontpage .node__content > section.home-showrooms { - background-color: #50aa3c; - display: grid; - grid-template-columns: 300px 1fr; - grid-column-gap: 1em; } - article.node--type-frontpage .node__content > section.home-showrooms .field--name-field-showrooms { - grid-column: 1; } - article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference { - grid-column: 2; } - article.node--type-frontpage .node__content > section.home-blabla { - background-color: #9458aa; } + padding-top: 140%; } + 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; } + 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; } + +article.node--type-frontpage .node__content > section.home-showrooms { + background-color: #50aa3c; } + +article.node--type-frontpage .node__content > section.home-blabla { + background-color: #9458aa; } + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home { + position: relative; } + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul { + width: 100%; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(80px, 220px)); + grid-gap: 1em; + justify-content: start; } + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li { + position: relative; + list-style: none; + margin: 0; + padding: 0; + padding-top: 140%; + overflow: hidden; } + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: auto; + height: auto; } + article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card .field--name-title { + font-size: 0.756em; + line-height: 0.9; } article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)), article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)), diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index e7409354..1082a556 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -249,31 +249,62 @@ aside.messages{ // } -// front +// __ _ +// / _|_ _ ___ _ _| |_ +// | _| '_/ _ \ ' \ _| +// |_| |_| \___/_||_\__| + +%part-centered-layout{ + padding:1.5em 0; + background-color: #fff; + >div:nth-child(1){ + width:80%; + margin: 0 auto; + text-align: center; + .field__label{ + font-size: 3em; + } + .field__item{ + font-size: 0.9em; + line-height: 1.3; + } + } +} + +%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{ + font-size: 3em; + line-height: 0.9 + } + .field__item{ + font-size: 0.9em; + line-height: 1.3; + } + } + >div:nth-child(2){ + grid-column: 2; + } +} + article.node--type-frontpage{ .node__content{ &>section{ - padding:1em; &.home-intro{ - padding:0; - background-color: #fff; + @extend %part-centered-layout; } &.home-database{ background-color: #69cdcf; - display:grid; - // $c: 300px; - // grid-template-columns: $c calc(100% - #{$c}); - grid-template-columns: 300px 1fr; - grid-column-gap: 1em; - // grid-template-rows: min-content; - color: #fff; - .field--name-field-a-database{ - grid-column: 1; - // outline: 1px solid green; - } + @extend %part-columned-layout; + .field--name-field-a-database{} .cards-list-home{ - grid-column: 2; position: relative; // max-height: (130px*1.4)*3; max-height: 580px; @@ -282,11 +313,10 @@ article.node--type-frontpage{ width:100%; margin:0; padding:0; display: grid; - justify-content: center; grid-template-columns: repeat(auto-fill, minmax(50px, 130px)); grid-template-rows: 1fr; grid-gap: 1em; - // justify-content:start; + justify-content:start; li{ position: relative; list-style: none; @@ -309,22 +339,51 @@ article.node--type-frontpage{ } &.home-showrooms{ background-color: #50aa3c; - display:grid; - // $c: 300px; - // grid-template-columns: $c calc(100% - #{$c}); - grid-template-columns: 300px 1fr; - grid-column-gap: 1em; + @extend %part-columned-layout; .field--name-field-showrooms{ - grid-column: 1; } .field--name-computed-showrooms-reference{ - grid-column: 2; } } &.home-blabla{ background-color: #9458aa; + @extend %part-columned-layout; + + .cards-list-home{ + position: relative; + // max-height: 580px; + // overflow-y: hidden; + ul{ + width:100%; + margin:0; padding:0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(80px, 220px)); + // grid-template-rows: 1fr; + grid-gap: 1em; + justify-content:start; + li{ + position: relative; + list-style: none; + margin:0; padding:0; + padding-top: 140%; + overflow: hidden; + .card{ + position:absolute; + top:0; bottom:0; + left:0; right:0; + width: auto; + height: auto; + .field--name-title{ + font-size: 0.756em; + line-height: 0.9; + } + } + } + } + } } &.home-pricing{ + @extend %part-centered-layout; } } diff --git a/web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference.html.twig b/web/themes/custom/materiotheme/templates/content/field--node--computed-articles-reference--frontpage.html.twig similarity index 100% rename from web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference.html.twig rename to web/themes/custom/materiotheme/templates/content/field--node--computed-articles-reference--frontpage.html.twig diff --git a/web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference--frontpage.html.twig b/web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference--frontpage.html.twig new file mode 100644 index 00000000..3c513b13 --- /dev/null +++ b/web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference--frontpage.html.twig @@ -0,0 +1,67 @@ +{# +/** + * @file + * Default theme implementation for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + * + * @ingroup themeable + */ +#} +{% + set title_classes = [ + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} +
+ {% if label_hidden %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + {% else %} + + {{ label }}
+ {% if multiple %} + + {% endif %} + + {% endif %} + diff --git a/web/themes/custom/materiotheme/templates/content/node--article--card-medium.html.twig b/web/themes/custom/materiotheme/templates/content/node--article--card-medium.html.twig new file mode 100644 index 00000000..9cb14be4 --- /dev/null +++ b/web/themes/custom/materiotheme/templates/content/node--article--card-medium.html.twig @@ -0,0 +1,96 @@ +{# +/** + * @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' + ] +%} + + +
+ {{ label }} + {{ content.field_date }} +
+
+ {{ content.field_visuel }} +
+