From 017d6c57398d4cd33ecc046597a772d6148d7c31 Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 8 Jul 2024 14:34:55 +0200 Subject: [PATCH] page node-actualite --- .../dist/assets/css/bundle.css | 41 +++++++ .../src/assets/scss/pages/actualite.scss | 44 ++++++++ .../src/assets/scss/quartiers_de_demain.scss | 1 + .../templates/node--actualite.html.twig | 104 ++++++++++++++++++ 4 files changed, 190 insertions(+) create mode 100644 web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss create mode 100644 web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 889d5ff..3d599ba 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -2054,4 +2054,45 @@ footer { } .node-type-static .layout-content .content_container article.node-type-static div.field_body p { margin-top: 0; +} + +body.node-type-actualite .content_container { + width: 60%; + display: flex; + flex-direction: column; + margin: auto; + align-items: center; +} +body.node-type-actualite .content_container .infos-actu { + display: flex; + flex-direction: row; + border-top: solid red 1px; + border-bottom: solid red 1px; + padding: 1rem 0rem; + margin-bottom: 1rem; +} +body.node-type-actualite .content_container .infos-actu .field_field_type_d_actualite a { + text-transform: uppercase; + color: red; + font-size: 0.6rem; + font-weight: 600; + display: inline-flex; + align-items: center; +} +body.node-type-actualite .content_container .infos-actu .field_field_type_d_actualite a::before { + content: url("../img/type-actu.svg"); + padding-right: 0.4rem; +} +body.node-type-actualite .content_container .infos-actu .field_field_date { + color: red; + display: inline-flex; + align-items: center; + margin-left: 1rem; +} +body.node-type-actualite .content_container .infos-actu .field_field_date::before { + content: url("../img/date-actu.svg"); + padding-right: 0.4rem; +} +body.node-type-actualite .content_container .field_body p { + font-size: 0.8rem; } \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss new file mode 100644 index 0000000..a6b2ab5 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss @@ -0,0 +1,44 @@ +body.node-type-actualite{ + .content_container{ + width: 60%; + display: flex; + flex-direction: column; + margin: auto; + align-items: center; + .infos-actu{ + display: flex; + flex-direction: row; + border-top: solid red 1px; + border-bottom: solid red 1px; + padding: 1rem 0rem; + margin-bottom: 1rem; + .field_field_type_d_actualite a{ + text-transform: uppercase; + color: red; + font-size: 0.6rem; + font-weight: 600; + display: inline-flex; + align-items: center; + &::before{ + content: url('../img/type-actu.svg'); + padding-right: 0.4rem; + } + } + .field_field_date{ + color: red; + display: inline-flex; + align-items: center; + margin-left: 1rem; + &::before{ + content: url('../img/date-actu.svg'); + padding-right: 0.4rem; + } + } + + } + .field_body p{ + font-size: 0.8rem; + } + + } +} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss index 62a7c51..f4157d3 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss @@ -39,4 +39,5 @@ @import "pages/partenaires"; // @import "pages/presentation"; @import "pages/static"; +@import "pages/actualite"; diff --git a/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig b/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig new file mode 100644 index 0000000..ae9af51 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig @@ -0,0 +1,104 @@ +{# +/** + * @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() + * + * @ingroup themeable + */ +#} + + + {{ title_prefix }} + {% if label and not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + {% if display_submitted %} +
+ {{ author_picture }} + + {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %} + {{ metadata }} + +
+ {% endif %} + + {# #} + {# {{ content }} #} + {# #} + {% block content %} +
+ {{content.field_type_d_actualite}} + {{content.field_date}} +
+ {{content.body}} + {{content.field_images}} + + {% endblock %} + +