From f2891d2bebc045eccf5a4a0e0b18c79ef8852070 Mon Sep 17 00:00:00 2001 From: ouidade Date: Sat, 6 Jul 2024 10:07:22 +0200 Subject: [PATCH] carroussel actus --- .../dist/assets/css/bundle.css | 71 ++++++++++++++++ .../scss/partials/actu-caroussel-home.scss | 84 +++++++++++++++++++ .../src/assets/scss/quartiers_de_demain.scss | 1 + ...lock--views-block--actus-block-1.html.twig | 48 +++++++++++ .../templates/views-view.html.twig | 72 ++++++++++++++++ 5 files changed, 276 insertions(+) create mode 100644 web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss create mode 100644 web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig create mode 100644 web/themes/custom/quartiers_de_demain/templates/views-view.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 09751ea..853246a 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 @@ -1075,6 +1075,77 @@ footer span.totop #toTop .arrow-up::before { display: none; } +#actus-caroussel { + display: flex; + flex-direction: column; + align-items: center; +} +#actus-caroussel .__timeline-arrows { + width: fit-content; + margin: auto; +} +#actus-caroussel .__timeline-arrows button { + background-color: transparent; + border: none; +} +#actus-caroussel .__timeline-arrows button:hover { + opacity: 0.5; +} +#actus-caroussel .__timeline-arrows button svg { + padding: 0.5rem; +} +#actus-caroussel h2 { + width: fit-content; +} +#actus-caroussel .content-actus .view { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100vw; +} +#actus-caroussel .content-actus .views-row { + width: 25%; + padding: 1rem; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images { + -moz-border-radius: 9px; /* pour Mozilla */ + -khtml-border-radius: 9px; /* pour Safari et Chrome */ + -webkit-border-radius: 9px; /* pour Safari sur Mac */ + border-radius: 9px; /* CSS3 */ + background-color: red; + height: 160px; + margin-bottom: 0.6rem; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img { + width: 100%; + height: auto; + max-height: 160px; + object-fit: cover; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite { + text-transform: uppercase; + color: red; + font-size: 0.6rem; + font-weight: 600; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date { + color: red; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 { + margin: 0; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 a { + font-size: 0.8rem; + color: rgb(7, 50, 194); +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_body p { + margin: 0; +} +#actus-caroussel .content-actus .views-row:nth-child(odd) { + position: relative; + top: 40px; +} + /*pages*/ #home .content_container #block-quartiers-de-demain-titredepage { display: none; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss new file mode 100644 index 0000000..e6596ca --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss @@ -0,0 +1,84 @@ +#actus-caroussel{ + display: flex; + flex-direction: column; + align-items: center; + .__timeline-arrows{ + width: fit-content; + margin: auto; + + button{ + background-color: transparent; + border: none; + &:hover{ + opacity: 0.5; + } + svg{ + padding: 0.5rem; + + } + } + } + h2{ + width: fit-content; + } + // html.js.sr body div.dialog-off-canvas-main-canvas div.layout-container.home main#home div.layout-content div.content_container div.layout.layout--onecol div.layout__region.layout__region--content div.block-region-content div#actus-caroussel.views-element-container div.content-actus div div.js-view-dom-id-b0034e5565032847800e2aa5b7dc6211f2b856c751ed2284dfe542976a01c20c + .content-actus{ + .view{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100vw; + + } + .views-row{ + width: 25%; + padding: 1rem; + .node-type-actualite{ + .field_field_images{ + -moz-border-radius: 9px; /* pour Mozilla */ + -khtml-border-radius: 9px; /* pour Safari et Chrome */ + -webkit-border-radius: 9px; /* pour Safari sur Mac */ + border-radius: 9px; /* CSS3 */ + background-color: red; + height: 160px; + margin-bottom: 0.6rem; + img{ + width: 100%; + height: auto; + max-height: 160px; + object-fit: cover; + } + } + .field_field_type_d_actualite{ + text-transform: uppercase; + color: red; + font-size: 0.6rem; + font-weight: 600; + } + .field_field_date{ + color: red; + } + .field_title{ + h2{ + margin: 0; + a{ + font-size: 0.8rem; + color: $blue_QDD; + } + } + } + .field_body{ + p{ + margin: 0; + } + } + } + + } + .views-row:nth-child(odd){ + position: relative; + top: 40px; + } + + } +} \ 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 4dfbed5..62a7c51 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 @@ -28,6 +28,7 @@ @import "partials/slick-theme"; @import "partials/slick"; @import "partials/timeline"; +@import "partials/actu-caroussel-home"; // @import "partials/slick_custom"; diff --git a/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig b/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig new file mode 100644 index 0000000..9c3f6c1 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig @@ -0,0 +1,48 @@ +{# +/** + * @file + * Default theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * 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. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +
+ {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} +
+ + +
+ {% block content %} +
{{ content }}
+ {% endblock %} +
diff --git a/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig b/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig new file mode 100644 index 0000000..d6b2222 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig @@ -0,0 +1,72 @@ +{# +/** + * @file + * Default theme implementation for main view template. + * + * Available variables: + * - attributes: Remaining HTML attributes for the element. + * - css_name: A CSS-safe version of the view name. + * - css_class: The user-specified classes names, if any. + * - header: The optional header. + * - footer: The optional footer. + * - rows: The results of the view query, if any. + * - empty: The content to display if there are no rows. + * - pager: The optional pager next/prev links to display. + * - exposed: Exposed widget form/info to display. + * - feed_icons: Optional feed icons to display. + * - more: An optional link to the next page of results. + * - title: Title of the view, only used when displaying in the admin preview. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the view title. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the view title. + * - attachment_before: An optional attachment view to be displayed before the + * view content. + * - attachment_after: An optional attachment view to be displayed after the + * view content. + * - dom_id: Unique id for every view being printed to give unique class for + * JavaScript. + * + * @see template_preprocess_views_view() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + dom_id ? 'js-view-dom-id-' ~ dom_id, + 'view', + ] +%} + + {{ title_prefix }} + {{ title }} + {{ title_suffix }} + + {% if header %} +
+ {{ header }} +
+ {% endif %} + + {{ exposed }} + {{ attachment_before }} + + {% if rows -%} + {{ rows }} + {% elseif empty -%} + {{ empty }} + {% endif %} + {{ pager }} + + {{ attachment_after }} + {{ more }} + + {% if footer %} + + {% endif %} + + {{ feed_icons }} +