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
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";
}
#ressources .layout-content .content_container .views-element-container {
margin-left: 20%;
margin-left: 15%;
width: 65%;
}
#ressources .layout-content .content_container .views-element-container h3 {
@@ -3982,7 +3982,7 @@ main {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
margin-top: 3rem;
margin-left: 15%;
margin-bottom: 1rem;
margin-bottom: 4rem;
width: 70%;
}
@media (max-width: 810px) {
@@ -4010,44 +4010,80 @@ main {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
width: 100%;
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 {
width: 100%;
padding-bottom: 7rem;
width: 85%;
}
#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;
grid-template-columns: 1fr 2fr;
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-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 {
width: 100%;
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama {
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;
}
#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-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;
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 div .field_field_date,
#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 div .field_title,
#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 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_images .actu-diaporama button {
margin: auto;
transform: none;
top: 20%;
height: 0;
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;
}
#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;
}
#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;
color: red;
font-size: 0.6rem;
@@ -4055,11 +4091,11 @@ main {
display: inline-flex;
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");
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;
color: red;
font-size: 0.6rem;
@@ -4067,43 +4103,47 @@ main {
display: inline-flex;
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");
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;
}
#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;
font-size: 0.6rem;
font-weight: 600;
display: inline-flex;
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");
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;
}
#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);
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;
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;
}
#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;
padding-bottom: 2rem;
padding-top: 2rem;
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;
flex-direction: row;
padding-left: 0.5rem;
@@ -4114,12 +4154,26 @@ main {
text-transform: uppercase;
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;
}
#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;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 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 //////////////////////////
$(document).ready(function(){
let actuview = $('.content-actus .view .view-rows-wrapper')
if (actuview) {
actuview.slick({
slidesToShow: 3,
// slidesToScroll: 1,
dots: false,
arrows: true,
// centerMode: true,
adaptiveHeight: false,
autoplay: false,
// autoplaySpeed: 1500,
// infinite: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
// slidesToScroll: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
// centerMode: true,
// centerPadding: '100px',
autoplay: false,
// autoplaySpeed: 2000,
}
}]
});
@@ -414,9 +402,6 @@ $(document).ready(function(){
});
$(document).ready(function () {
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
@@ -448,9 +433,41 @@ $(document).ready(function () {
}
});
//////////// 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////////////////////////
// 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);

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

@@ -13,7 +13,7 @@
#block-quartiers-de-demain-titredepage{
margin-top: 3rem;
margin-left: 15%;
margin-bottom: 1rem;
margin-bottom: 4rem;
width: 70%;
@media(max-width: 810px){
margin-top: 14rem;
@@ -42,29 +42,70 @@
.views-row{
width: 100%;
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{
width: 100%;
padding-bottom: 7rem;
div{
width: 85%;
// padding-bottom: 2rem;
.content-wrapper-actu{
display: grid;
// grid-template-columns: 1fr 1.2fr;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr);
.field_field_images{
grid-column: 1;
grid-column: 1;
grid-row: 1 /span 5;
img{
width: 100%;
height: auto;
}
blockquote.image-field-caption{
margin-left: 0;
margin-top: 0;
p{
margin-top: 0;
font-size: 0.4rem;
width: 250px;
.actu-diaporama{
// height: 150px;
// width: 100%;
display: flex;
flex-direction: row;
align-items: center !important;
margin:auto;
.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,
@@ -121,13 +162,17 @@
}
.field_title{
order: 5;
a{
color: $blue_QDD;
font-size: 1.2rem;
}
}
.field_body {
order: 6;
padding-bottom: 2rem;
opacity: 1 !important;
transform:none !important;
p{
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{
margin-left: 20%;
margin-left: 15%;
width: 65%;
h3{
&::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>
{% endif %}
<div{{ content_attributes }}>
<div class="content-wrapper-actu"{{ content_attributes }}>
{{ content }}
</div>
{# {% block content %}