bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debut css /actualites

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-03-14 11:13:32 +01:00
parent 9a73e1cbaa
commit f5b4092e98
7 changed files with 328 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

118
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -3837,7 +3837,7 @@ main {
font-family: "gilroy-medium"; font-family: "gilroy-medium";
} }
#ressources .layout-content .content_container .views-element-container { #ressources .layout-content .content_container .views-element-container {
margin-left: 20%; margin-left: 15%;
width: 65%; width: 65%;
} }
#ressources .layout-content .content_container .views-element-container h3 { #ressources .layout-content .content_container .views-element-container h3 {
@ -3982,7 +3982,7 @@ main {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage { #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
margin-top: 3rem; margin-top: 3rem;
margin-left: 15%; margin-left: 15%;
margin-bottom: 1rem; margin-bottom: 4rem;
width: 70%; width: 70%;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
@ -4010,44 +4010,80 @@ main {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
width: 100%; width: 100%;
font-size: 0.5rem; font-size: 0.5rem;
margin-bottom: 1rem; margin-bottom: 2rem;
padding-bottom: 1rem;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: solid black 0.5px;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite {
width: 100%; width: 85%;
padding-bottom: 7rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
display: grid; display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
grid-column: 1; grid-column: 1;
grid-row: 1/span 5; grid-row: 1/span 5;
width: 250px;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images img { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama {
width: 100%; display: flex;
flex-direction: row;
align-items: center !important;
margin: auto;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list {
margin: auto;
padding-top: 0 !important;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom {
width: 250px;
height: auto; height: auto;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images blockquote.image-field-caption { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom img {
width: 100%;
height: 100%;
object-fit: cover;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom blockquote.image-field-caption {
margin-left: 0; margin-left: 0;
margin-top: 0; margin-top: 0;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images blockquote.image-field-caption p { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom blockquote.image-field-caption p {
margin-top: 0; margin-top: 0;
font-size: 0.4rem; font-size: 0.4rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite, #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date, margin: auto;
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site, transform: none;
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_title, top: 20%;
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body, height: 0;
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens { width: 0;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button.slick-next {
right: 0%;
padding: 0;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button.slick-prev {
left: 0%;
padding: 0;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite,
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date,
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site,
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title,
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_body,
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens {
grid-column: 2; grid-column: 2;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite {
order: 2; order: 2;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite a { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite a {
text-transform: uppercase; text-transform: uppercase;
color: red; color: red;
font-size: 0.6rem; font-size: 0.6rem;
@ -4055,11 +4091,11 @@ main {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite a::before { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite a::before {
content: url("../img/type-actu.svg"); content: url("../img/type-actu.svg");
padding-right: 0.4rem; padding-right: 0.4rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date {
order: 3; order: 3;
color: red; color: red;
font-size: 0.6rem; font-size: 0.6rem;
@ -4067,43 +4103,47 @@ main {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date::before { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date::before {
content: url("../img/date-actu.svg"); content: url("../img/date-actu.svg");
padding-right: 0.4rem; padding-right: 0.4rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site {
order: 4; order: 4;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site a { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site a {
color: red; color: red;
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 600; font-weight: 600;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site a::before { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site a::before {
content: url("../img/map_pointer.svg"); content: url("../img/map_pointer.svg");
padding-right: 0.4rem; padding-right: 0.4rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_title { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title {
order: 5; order: 5;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title a {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 1.2rem; font-size: 1.2rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_body {
order: 6; order: 6;
padding-bottom: 2rem; padding-bottom: 2rem;
opacity: 1 !important;
transform: none !important;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body p { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_body p {
font-size: 0.8rem; font-size: 0.8rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens {
order: 7; order: 7;
padding-bottom: 2rem; padding-bottom: 2rem;
padding-top: 2rem; padding-top: 2rem;
width: fit-content; width: fit-content;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-left: 0.5rem; padding-left: 0.5rem;
@ -4114,12 +4154,26 @@ main {
text-transform: uppercase; text-transform: uppercase;
font-size: 0.6rem; font-size: 0.6rem;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a svg { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a svg {
display: none; display: none;
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a::after { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a::after {
display: inline-flex; display: inline-flex;
content: url("../img/noun-arrow-to-right.svg"); content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem; padding-right: 0.2rem;
padding-left: 0.2rem; padding-left: 0.2rem;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .toggle-actualite {
display: block;
width: 40px;
height: 40px;
margin: 10px auto;
border: none;
background-color: transparent;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s ease;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .toggle-actualite:hover {
transform: scale(1.2);
} }

87
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -372,36 +372,24 @@ document.addEventListener('DOMContentLoaded', function() {
//////////// start slideshow home ////////////////////////// //////////// start slideshow home //////////////////////////
$(document).ready(function(){ $(document).ready(function(){
let actuview = $('.content-actus .view .view-rows-wrapper') let actuview = $('.content-actus .view .view-rows-wrapper')
if (actuview) { if (actuview) {
actuview.slick({ actuview.slick({
slidesToShow: 3, slidesToShow: 3,
// slidesToScroll: 1,
dots: false, dots: false,
arrows: true, arrows: true,
// centerMode: true,
adaptiveHeight: false, adaptiveHeight: false,
autoplay: false, autoplay: false,
// autoplaySpeed: 1500,
// infinite: true,
// centerPadding: '100px',
responsive: [ responsive: [
{ {
breakpoint: 810, breakpoint: 810,
settings: { settings: {
slidesToShow: 1, slidesToShow: 1,
// slidesToScroll: 1,
adaptiveHeight: false, adaptiveHeight: false,
arrows: true, arrows: true,
draggable: true, draggable: true,
// centerMode: true,
// centerPadding: '100px',
autoplay: false, autoplay: false,
// autoplaySpeed: 2000,
} }
}] }]
}); });
@ -414,9 +402,6 @@ $(document).ready(function(){
}); });
$(document).ready(function () { $(document).ready(function () {
let diapohome = $('.config_pages--type--diaporama-home .diaporama'); let diapohome = $('.config_pages--type--diaporama-home .diaporama');
@ -448,9 +433,41 @@ $(document).ready(function () {
} }
}); });
//////////// end slideshow home ////////////////////////// //////////// end slideshow home //////////////////////////
//////////// start slideshow /actualites //////////////////////////
$(document).ready(function(){
let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama')
if (actuview2) {
actuview2.slick({
slidesToShow: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
autoplay: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: true,
arrows: true,
draggable: true,
autoplay: false,
}
}]
});
console.log('salut slick actualites');
}
// $('.slick-carousel').slick({
// lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
// });
});
//////////// end slideshow /actualites //////////////////////////
//////////////// start lightbox galerie image page site//////////////////////// //////////////// start lightbox galerie image page site////////////////////////
// Sélection des images et de leurs légendes dans la galerie // Sélection des images et de leurs légendes dans la galerie
@ -779,6 +796,44 @@ $(document).ready(function () {
/////////////////// start voir plus... actualite dans /actualites ////////////////////
$(document).ready(function () {
if ($("#actualites").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
// Sélection des éléments à afficher/masquer
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
// Masquer les éléments au chargement
body.hide();
links.hide();
// Créer le bouton flèche
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.html("&#9660;") // Flèche vers le bas
.insertAfter(article); // Insérer après l'article
// Action au clic sur la flèche
toggleButton.on("click", function () {
if (body.is(":visible")) {
body.slideUp();
links.slideUp();
$(this).html("&#9660;"); // Changer en flèche vers le bas
} else {
body.slideDown();
links.slideDown();
$(this).html("&#9650;"); // Changer en flèche vers le haut
}
});
});
}
});
/////////////////// end voir plus... actualite dans /actualites ////////////////////
})(jQuery, window); })(jQuery, window);

98
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
View File

@ -13,7 +13,7 @@
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
margin-top: 3rem; margin-top: 3rem;
margin-left: 15%; margin-left: 15%;
margin-bottom: 1rem; margin-bottom: 4rem;
width: 70%; width: 70%;
@media(max-width: 810px){ @media(max-width: 810px){
margin-top: 14rem; margin-top: 14rem;
@ -42,29 +42,70 @@
.views-row{ .views-row{
width: 100%; width: 100%;
font-size: 0.5rem; font-size: 0.5rem;
margin-bottom: 1rem; margin-bottom: 2rem;
padding-bottom: 1rem;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: solid black 0.5px;
.node-type-actualite{ .node-type-actualite{
width: 100%; width: 85%;
padding-bottom: 7rem; // padding-bottom: 2rem;
div{
.content-wrapper-actu{
display: grid; display: grid;
// grid-template-columns: 1fr 1.2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
.field_field_images{ .field_field_images{
grid-column: 1; grid-column: 1;
grid-row: 1 /span 5; grid-row: 1 /span 5;
img{ width: 250px;
width: 100%;
height: auto; .actu-diaporama{
} // height: 150px;
blockquote.image-field-caption{ // width: 100%;
margin-left: 0; display: flex;
margin-top: 0; flex-direction: row;
p{ align-items: center !important;
margin-top: 0; margin:auto;
font-size: 0.4rem; .slick-list{
margin: auto;
padding-top: 0 !important;
.cadre-img-zoom{
width: 250px;
height: auto;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
blockquote.image-field-caption{
margin-left: 0;
margin-top: 0;
p{
margin-top: 0;
font-size: 0.4rem;
}
}
}
}
button{
margin: auto;
transform: none;
top: 20%;
height: 0;
width: 0;
}
button.slick-next{
right: 0% ;
padding: 0;
}
button.slick-prev{
left: 0%;
padding: 0;
} }
} }
} }
.field_field_type_d_actualite, .field_field_type_d_actualite,
@ -121,13 +162,17 @@
} }
.field_title{ .field_title{
order: 5; order: 5;
a{
color: $blue_QDD; color: $blue_QDD;
font-size: 1.2rem; font-size: 1.2rem;
}
} }
.field_body { .field_body {
order: 6; order: 6;
padding-bottom: 2rem; padding-bottom: 2rem;
opacity: 1 !important;
transform:none !important;
p{ p{
font-size: 0.8rem; font-size: 0.8rem;
} }
@ -167,7 +212,22 @@
} }
} }
.toggle-actualite {
display: block;
width: 40px;
height: 40px;
margin: 10px auto;
border: none;
background-color: transparent;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s ease;
}
.toggle-actualite:hover {
transform: scale(1.2);
}
} }

2
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
View File

@ -30,7 +30,7 @@
} }
.views-element-container{ .views-element-container{
margin-left: 20%; margin-left: 15%;
width: 65%; width: 65%;
h3{ h3{
&::before{ &::before{

78
web/themes/custom/quartiers_de_demain/templates/field--node--field-images--actualite.html.twig Normal file
View File

@ -0,0 +1,78 @@
{#
/**
* @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 = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class="actu-diaporama">
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}

3
web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig
View File

@ -88,9 +88,8 @@
</footer> </footer>
{% endif %} {% endif %}
<div{{ content_attributes }}> <div class="content-wrapper-actu"{{ content_attributes }}>
{{ content }} {{ content }}
</div> </div>
{# {% block content %} {# {% block content %}