carroussel actus

This commit is contained in:
ouidade 2024-07-06 10:07:22 +02:00
parent a0e5c1d028
commit f2891d2beb
5 changed files with 276 additions and 0 deletions

View File

@ -1075,6 +1075,77 @@ footer span.totop #toTop .arrow-up::before {
display: none; 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*/ /*pages*/
#home .content_container #block-quartiers-de-demain-titredepage { #home .content_container #block-quartiers-de-demain-titredepage {
display: none; display: none;

View File

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

View File

@ -28,6 +28,7 @@
@import "partials/slick-theme"; @import "partials/slick-theme";
@import "partials/slick"; @import "partials/slick";
@import "partials/timeline"; @import "partials/timeline";
@import "partials/actu-caroussel-home";
// @import "partials/slick_custom"; // @import "partials/slick_custom";

View File

@ -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
*/
#}
<div id="actus-caroussel"{{ attributes }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
<div class="__timeline-arrows">
<button id='arrowPrev' class="arrow arrow__prev">
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
</button>
<button id='arrowNext' class="arrow arrow__next">
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
</button>
</div>
{% block content %}
<div class='content-actus'> {{ content }}</div>
{% endblock %}
</div>

View File

@ -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',
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{{ title }}
{{ title_suffix }}
{% if header %}
<header>
{{ header }}
</header>
{% endif %}
{{ exposed }}
{{ attachment_before }}
{% if rows -%}
{{ rows }}
{% elseif empty -%}
{{ empty }}
{% endif %}
{{ pager }}
{{ attachment_after }}
{{ more }}
{% if footer %}
<footer>
{{ footer }}
</footer>
{% endif %}
{{ feed_icons }}
</div>