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 d7b15a1..a09366f 100644 --- a/config/sync/core.entity_view_display.node.frontpage.default.yml +++ b/config/sync/core.entity_view_display.node.frontpage.default.yml @@ -10,8 +10,105 @@ dependencies: - field.field.node.frontpage.field_what_is_materio - node.type.frontpage module: + - field_group - text - user +third_party_settings: + field_group: + group_intro: + children: + - title + - field_what_is_materio + parent_name: '' + weight: 0 + format_type: html_element + format_settings: + element: section + show_label: false + label_element: h3 + label_element_classes: '' + attributes: '' + effect: none + speed: fast + id: '' + classes: home-intro + label: intro + region: content + group_database: + children: + - field_a_database + - computed_materials_reference + parent_name: '' + weight: 1 + format_type: html_element + format_settings: + element: section + show_label: false + label_element: h3 + label_element_classes: '' + attributes: '' + effect: none + speed: fast + id: '' + classes: home-database + label: database + region: content + group_showrooms: + children: + - field_showrooms + - computed_showrooms_reference + parent_name: '' + weight: 2 + format_type: html_element + format_settings: + element: section + show_label: false + label_element: h3 + label_element_classes: '' + attributes: '' + effect: none + speed: fast + id: '' + classes: home-showrooms + label: showrooms + region: content + group_blabla: + children: + - field_blabla + - computed_articles_reference + parent_name: '' + weight: 3 + format_type: html_element + format_settings: + element: section + show_label: false + label_element: h3 + label_element_classes: '' + attributes: '' + effect: none + speed: fast + id: '' + classes: home-blabla + label: blabla + region: content + group_pricing: + children: + - field_pricing + parent_name: '' + weight: 4 + format_type: html_element + format_settings: + element: section + show_label: false + label_element: h3 + label_element_classes: '' + attributes: '' + effect: none + speed: fast + id: '' + classes: home-pricing + label: pricing + region: content id: node.frontpage.default targetEntityType: node bundle: frontpage @@ -19,7 +116,7 @@ mode: default content: computed_articles_reference: label: hidden - weight: 7 + weight: 5 region: content settings: view_mode: teaser @@ -30,14 +127,14 @@ content: weight: 3 region: content settings: - view_mode: teaser + view_mode: card_medium link: false third_party_settings: { } type: entity_reference_entity_view label: hidden computed_showrooms_reference: label: hidden - weight: 5 + weight: 4 region: content settings: view_mode: default @@ -52,28 +149,28 @@ content: type: text_default region: content field_blabla: - weight: 6 - label: above - settings: { } - third_party_settings: { } - type: text_default - region: content - field_pricing: - weight: 8 - label: above - settings: { } - third_party_settings: { } - type: text_default - region: content - field_showrooms: weight: 4 label: above settings: { } third_party_settings: { } type: text_default region: content + field_pricing: + weight: 5 + label: above + settings: { } + third_party_settings: { } + type: text_default + region: content + field_showrooms: + weight: 3 + label: above + settings: { } + third_party_settings: { } + type: text_default + region: content field_what_is_materio: - weight: 1 + weight: 2 label: above settings: { } third_party_settings: { } @@ -81,7 +178,7 @@ content: region: content title: type: string - weight: 0 + weight: 1 region: content label: hidden settings: @@ -90,3 +187,4 @@ content: hidden: langcode: true links: true + search_api_excerpt: true diff --git a/config/sync/core.entity_view_display.node.materiau.card_big.yml b/config/sync/core.entity_view_display.node.materiau.card_big.yml new file mode 100644 index 0000000..e301e99 --- /dev/null +++ b/config/sync/core.entity_view_display.node.materiau.card_big.yml @@ -0,0 +1,211 @@ +uuid: cc2be770-7536-4bce-a840-86a37e5e7198 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.node.card_big + - 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 + - node.type.materiau + module: + - computed_field + - file + - image + - materio_samples + - options + - text + - user + - video_embed_field +id: node.materiau.card_big +targetEntityType: node +bundle: materiau +mode: card_big +content: + body: + label: hidden + type: text_default + weight: 101 + settings: { } + third_party_settings: { } + region: content + field_attachments: + weight: 109 + label: above + settings: + use_description_as_link_text: true + third_party_settings: { } + type: file_default + region: content + field_distributor: + weight: 108 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_famille: + weight: 113 + label: above + settings: { } + third_party_settings: { } + type: list_default + region: content + field_index: + weight: 114 + label: above + settings: + cache_unit: -1 + cache_duration: 1 + thousand_separator: '' + prefix_suffix: true + third_party_settings: { } + type: computed_integer + region: content + field_linked_articles: + weight: 120 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_linked_materials: + weight: 110 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_localisation_old: + weight: 119 + label: above + settings: + link_to_entity: false + third_party_settings: { } + type: string + region: content + field_manufacturer: + weight: 107 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_materiau_images: + weight: 105 + label: above + settings: + image_style: '' + image_link: '' + third_party_settings: { } + type: image + region: content + field_memo: + weight: 112 + label: above + settings: { } + third_party_settings: { } + type: basic_string + region: content + field_migration: + weight: 117 + label: above + settings: { } + third_party_settings: { } + type: list_default + region: content + field_reference: + weight: 115 + label: above + settings: + sanitized: true + cache_unit: -1 + cache_duration: 1 + third_party_settings: { } + type: computed_string + region: content + field_samples: + weight: 118 + label: above + settings: { } + third_party_settings: { } + type: materio_samples_default_formatter + region: content + field_short_description: + weight: 102 + label: above + settings: + link_to_entity: false + third_party_settings: { } + type: string + region: content + field_tags: + weight: 104 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_thesaurus: + weight: 103 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_video: + weight: 106 + label: above + settings: + responsive: true + width: 854 + height: 480 + autoplay: true + third_party_settings: { } + type: video_embed_field_video + region: content + field_workflow: + weight: 116 + label: above + settings: { } + third_party_settings: { } + type: list_default + region: content + links: + weight: 100 + region: content + settings: { } + third_party_settings: { } + title: + label: hidden + type: string + weight: -5 + region: content + settings: + link_to_entity: false + third_party_settings: { } +hidden: + langcode: true + search_api_excerpt: true diff --git a/config/sync/core.entity_view_display.node.materiau.card_full.yml b/config/sync/core.entity_view_display.node.materiau.card_full.yml new file mode 100644 index 0000000..3a4d487 --- /dev/null +++ b/config/sync/core.entity_view_display.node.materiau.card_full.yml @@ -0,0 +1,211 @@ +uuid: 1092f6d4-d300-4863-ad65-dfcf5acb7b92 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.node.card_full + - 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 + - node.type.materiau + module: + - computed_field + - file + - image + - materio_samples + - options + - text + - user + - video_embed_field +id: node.materiau.card_full +targetEntityType: node +bundle: materiau +mode: card_full +content: + body: + label: hidden + type: text_default + weight: 101 + settings: { } + third_party_settings: { } + region: content + field_attachments: + weight: 109 + label: above + settings: + use_description_as_link_text: true + third_party_settings: { } + type: file_default + region: content + field_distributor: + weight: 108 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_famille: + weight: 113 + label: above + settings: { } + third_party_settings: { } + type: list_default + region: content + field_index: + weight: 114 + label: above + settings: + cache_unit: -1 + cache_duration: 1 + thousand_separator: '' + prefix_suffix: true + third_party_settings: { } + type: computed_integer + region: content + field_linked_articles: + weight: 120 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_linked_materials: + weight: 110 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_localisation_old: + weight: 119 + label: above + settings: + link_to_entity: false + third_party_settings: { } + type: string + region: content + field_manufacturer: + weight: 107 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_materiau_images: + weight: 105 + label: above + settings: + image_style: '' + image_link: '' + third_party_settings: { } + type: image + region: content + field_memo: + weight: 112 + label: above + settings: { } + third_party_settings: { } + type: basic_string + region: content + field_migration: + weight: 117 + label: above + settings: { } + third_party_settings: { } + type: list_default + region: content + field_reference: + weight: 115 + label: above + settings: + sanitized: true + cache_unit: -1 + cache_duration: 1 + third_party_settings: { } + type: computed_string + region: content + field_samples: + weight: 118 + label: above + settings: { } + third_party_settings: { } + type: materio_samples_default_formatter + region: content + field_short_description: + weight: 102 + label: above + settings: + link_to_entity: false + third_party_settings: { } + type: string + region: content + field_tags: + weight: 104 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_thesaurus: + weight: 103 + label: above + settings: + link: true + third_party_settings: { } + type: entity_reference_label + region: content + field_video: + weight: 106 + label: above + settings: + responsive: true + width: 854 + height: 480 + autoplay: true + third_party_settings: { } + type: video_embed_field_video + region: content + field_workflow: + weight: 116 + label: above + settings: { } + third_party_settings: { } + type: list_default + region: content + links: + weight: 100 + region: content + settings: { } + third_party_settings: { } + title: + label: hidden + type: string + weight: -5 + region: content + settings: + link_to_entity: false + third_party_settings: { } +hidden: + langcode: true + search_api_excerpt: true diff --git a/config/sync/core.entity_view_display.node.materiau.card_medium.yml b/config/sync/core.entity_view_display.node.materiau.card_medium.yml new file mode 100644 index 0000000..a178778 --- /dev/null +++ b/config/sync/core.entity_view_display.node.materiau.card_medium.yml @@ -0,0 +1,90 @@ +uuid: b2406930-5d1a-4926-a849-4379a595b5d0 +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.node.card_medium + - 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_medium + - node.type.materiau + module: + - image_delta_formatter + - options + - user +id: node.materiau.card_medium +targetEntityType: node +bundle: materiau +mode: card_medium +content: + field_famille: + type: list_default + weight: 0 + region: content + label: hidden + settings: { } + third_party_settings: { } + field_materiau_images: + type: image_delta_formatter + weight: 2 + region: content + label: hidden + settings: + deltas: '0' + image_style: card_medium + image_link: '' + deltas_reversed: 0 + third_party_settings: { } + field_short_description: + type: string + weight: 1 + region: content + label: hidden + settings: + link_to_entity: false + third_party_settings: { } + title: + type: string + weight: 3 + region: content + label: hidden + settings: + link_to_entity: false + third_party_settings: { } +hidden: + body: true + field_attachments: true + field_distributor: 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 + langcode: true + links: true + search_api_excerpt: true diff --git a/config/sync/core.entity_view_display.node.materiau.card_small.yml b/config/sync/core.entity_view_display.node.materiau.card_small.yml new file mode 100644 index 0000000..02b2878 --- /dev/null +++ b/config/sync/core.entity_view_display.node.materiau.card_small.yml @@ -0,0 +1,90 @@ +uuid: 67321572-ce60-4640-8385-da325147ec2d +langcode: en +status: true +dependencies: + config: + - core.entity_view_mode.node.card_small + - 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 + - options + - user +id: node.materiau.card_small +targetEntityType: node +bundle: materiau +mode: card_small +content: + field_famille: + weight: 2 + label: hidden + settings: { } + third_party_settings: { } + type: list_default + region: content + field_materiau_images: + weight: 3 + label: hidden + settings: + deltas: '0' + image_style: card_small + image_link: content + deltas_reversed: 0 + third_party_settings: { } + type: image_delta_formatter + region: content + field_short_description: + weight: 1 + label: hidden + settings: + link_to_entity: false + third_party_settings: { } + type: string + region: content + title: + label: hidden + type: string + weight: 0 + region: content + settings: + link_to_entity: false + third_party_settings: { } +hidden: + body: true + field_attachments: true + field_distributor: 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 + langcode: true + links: true + search_api_excerpt: 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 740e24a..123c977 100644 --- a/config/sync/core.entity_view_display.node.materiau.default.yml +++ b/config/sync/core.entity_view_display.node.materiau.default.yml @@ -197,5 +197,14 @@ content: region: content settings: { } third_party_settings: { } + title: + label: hidden + type: string + weight: -5 + region: content + settings: + link_to_entity: false + third_party_settings: { } hidden: langcode: true + search_api_excerpt: true diff --git a/config/sync/core.entity_view_display.node.materiau.teaser.yml b/config/sync/core.entity_view_display.node.materiau.teaser.yml index d0ea043..c9c603c 100644 --- a/config/sync/core.entity_view_display.node.materiau.teaser.yml +++ b/config/sync/core.entity_view_display.node.materiau.teaser.yml @@ -23,7 +23,7 @@ dependencies: - field.field.node.materiau.field_thesaurus - field.field.node.materiau.field_video - field.field.node.materiau.field_workflow - - image.style.card_medium + - image.style.card_small - node.type.materiau module: - image_delta_formatter @@ -35,20 +35,28 @@ mode: teaser content: field_materiau_images: type: image_delta_formatter - weight: 1 + weight: 2 region: content label: hidden settings: deltas: '0' - image_style: card_medium + image_style: card_small image_link: '' deltas_reversed: 0 third_party_settings: { } + field_short_description: + type: string + weight: 1 + region: content + label: above + settings: + link_to_entity: false + third_party_settings: { } title: type: string weight: 0 region: content - label: hidden + label: above settings: link_to_entity: false third_party_settings: { } @@ -68,10 +76,10 @@ hidden: field_migration: true field_reference: true field_samples: true - field_short_description: 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_mode.node.card_big.yml b/config/sync/core.entity_view_mode.node.card_big.yml new file mode 100644 index 0000000..5677a6f --- /dev/null +++ b/config/sync/core.entity_view_mode.node.card_big.yml @@ -0,0 +1,10 @@ +uuid: cab3c14f-2849-4436-9867-27de743a799b +langcode: en +status: true +dependencies: + module: + - node +id: node.card_big +label: card-big +targetEntityType: node +cache: true diff --git a/config/sync/core.entity_view_mode.node.card_full.yml b/config/sync/core.entity_view_mode.node.card_full.yml new file mode 100644 index 0000000..f0d20ff --- /dev/null +++ b/config/sync/core.entity_view_mode.node.card_full.yml @@ -0,0 +1,10 @@ +uuid: 2b71b232-6d76-4a9c-916e-f28e51feda32 +langcode: en +status: true +dependencies: + module: + - node +id: node.card_full +label: card-full +targetEntityType: node +cache: true diff --git a/config/sync/core.entity_view_mode.node.card_medium.yml b/config/sync/core.entity_view_mode.node.card_medium.yml new file mode 100644 index 0000000..49aea36 --- /dev/null +++ b/config/sync/core.entity_view_mode.node.card_medium.yml @@ -0,0 +1,10 @@ +uuid: 0cc55609-bd6d-4e43-8c7b-afd637b04a2e +langcode: en +status: true +dependencies: + module: + - node +id: node.card_medium +label: card-medium +targetEntityType: node +cache: true diff --git a/config/sync/core.entity_view_mode.node.card_small.yml b/config/sync/core.entity_view_mode.node.card_small.yml new file mode 100644 index 0000000..1bc2d55 --- /dev/null +++ b/config/sync/core.entity_view_mode.node.card_small.yml @@ -0,0 +1,10 @@ +uuid: cfb0ddfc-2b42-4de5-9ecc-ff1eb5abd962 +langcode: en +status: true +dependencies: + module: + - node +id: node.card_small +label: card-small +targetEntityType: node +cache: true diff --git a/config/sync/image.style.card_big.yml b/config/sync/image.style.card_big.yml new file mode 100644 index 0000000..5ea2c2c --- /dev/null +++ b/config/sync/image.style.card_big.yml @@ -0,0 +1,15 @@ +uuid: ed3fc572-5f86-4c90-b356-473f5350d2af +langcode: en +status: true +dependencies: { } +name: card_big +label: 'card-big (430x240)' +effects: + 84451f7d-4b5d-41ae-ac3e-bf75aebad1e7: + uuid: 84451f7d-4b5d-41ae-ac3e-bf75aebad1e7 + id: image_scale_and_crop + weight: 1 + data: + width: 430 + height: 340 + anchor: center-center diff --git a/config/sync/image.style.card_full.yml b/config/sync/image.style.card_full.yml new file mode 100644 index 0000000..2323067 --- /dev/null +++ b/config/sync/image.style.card_full.yml @@ -0,0 +1,15 @@ +uuid: fa3fff88-3b7d-43cf-9bc9-df5588735554 +langcode: en +status: true +dependencies: { } +name: card_full +label: 'card-full (425x610)' +effects: + 31bf30ba-8cec-4232-8675-41b41765e52e: + uuid: 31bf30ba-8cec-4232-8675-41b41765e52e + id: image_scale_and_crop + weight: 1 + data: + width: 425 + height: 610 + anchor: center-center 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 944b3e3..4c2599d 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 @@ -43,7 +43,7 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList ->sort('created', 'DESC') ->range(0,200); $results = $query->execute(); - $nids = array_rand($results, 20); + $nids = array_rand($results, 30); 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 5394cbc..0a24478 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -1245,6 +1245,62 @@ 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%; + 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; } + 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)), article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)), @@ -1300,9 +1356,9 @@ article.node--type-frontpage .node__content .field--name-computed-articles-refer article.card { position: relative; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); width: 210px; - height: 295px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } + height: 295px; } article.card header { position: absolute; bottom: 0; diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 89f6820..e740935 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -252,6 +252,83 @@ aside.messages{ // front article.node--type-frontpage{ .node__content{ + + &>section{ + padding:1em; + &.home-intro{ + padding:0; + background-color: #fff; + } + &.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; + } + .cards-list-home{ + grid-column: 2; + position: relative; + // max-height: (130px*1.4)*3; + max-height: 580px; + overflow-y: hidden; + ul{ + 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; + li{ + position: relative; + list-style: none; + margin:0; padding:0; + padding-top: 140%; + .card{ + position:absolute; + top:0; bottom:0; + left:0; right:0; + width: auto; + height: auto; + .field--name-field-short-description{ + font-size: 0.756em; + line-height: 0.9; + } + } + } + } + } + } + &.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; + .field--name-field-showrooms{ + grid-column: 1; + } + .field--name-computed-showrooms-reference{ + grid-column: 2; + } + } + &.home-blabla{ + background-color: #9458aa; + } + &.home-pricing{ + + } + } + .field--name-field-what-is-materio, .field--name-field-a-database, .field--name-field-showrooms, @@ -283,6 +360,7 @@ article.node--type-frontpage{ } } } + } } @@ -325,8 +403,11 @@ article.node--type-frontpage{ article.card{ position: relative; - width:$column_width; height:295px; box-shadow: 0 0 5px rgba(0,0,0,0.2); + width:$column_width; height:295px; + // &.card-small{ + // width:100px; height:140px; + // } // focused // box-shadow: 0 0 7px rgba(0,0,0,0.9); header{ 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-materials-reference.html.twig index 369372f..3c513b1 100644 --- a/web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference.html.twig +++ b/web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference.html.twig @@ -43,7 +43,7 @@ label_display == 'visually_hidden' ? 'visually-hidden', ] %} -
+
{% if label_hidden %} {% for item in items %} @@ -64,4 +64,4 @@ {% endif %}
{% endif %} -
\ No newline at end of file + diff --git a/web/themes/custom/materiotheme/templates/content/node--materiau--teaser.html.twig b/web/themes/custom/materiotheme/templates/content/node--materiau--card-medium.html.twig similarity index 90% rename from web/themes/custom/materiotheme/templates/content/node--materiau--teaser.html.twig rename to web/themes/custom/materiotheme/templates/content/node--materiau--card-medium.html.twig index eb4b6d3..0eb0778 100644 --- a/web/themes/custom/materiotheme/templates/content/node--materiau--teaser.html.twig +++ b/web/themes/custom/materiotheme/templates/content/node--materiau--card-medium.html.twig @@ -72,11 +72,22 @@ * @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_short_description }}
{{ content.field_materiau_images }} diff --git a/web/themes/custom/materiotheme/templates/content/node--materiau--card-small.html.twig b/web/themes/custom/materiotheme/templates/content/node--materiau--card-small.html.twig new file mode 100644 index 0000000..f0d2e38 --- /dev/null +++ b/web/themes/custom/materiotheme/templates/content/node--materiau--card-small.html.twig @@ -0,0 +1,98 @@ +{# +/** + * @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_familly }}

+

{{ content.field_short_description }}

+ {# {{ content.field_reference }} #} +
+
+ {{ content.field_materiau_images }} +
+