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

simplification js fleche toggle actu

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-03-17 13:26:59 +01:00
parent 2e066b1a83
commit a248020a69
7 changed files with 127 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@@ -1699,6 +1699,7 @@ footer {
padding-bottom: 1rem;
opacity: 1 !important;
transform: none !important;
font-family: "gilroy-light";
}
#actus-caroussel .content-actus .views-row .node-type-actualite .content-wrapper-actu .field_body p {
font-size: 0.8rem;
@@ -4092,6 +4093,9 @@ main {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite {
width: 85%;
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite a {
pointer-events: none;
}
#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;
@@ -4238,6 +4242,7 @@ main {
padding-bottom: 2rem;
opacity: 1 !important;
transform: none !important;
font-family: "gilroy-light";
}
#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;
@@ -4274,10 +4279,13 @@ main {
margin: 10px auto;
border: none;
background-color: transparent;
font-size: 24px;
background-image: url("../img/fleche-bas.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
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);
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .toggle-actualite.open {
transform: rotate(180deg);
}

44
web/themes/custom/quartiers_de_demain/dist/assets/img/fleche-bas.svg vendored Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="34.876163mm"
height="17.028625mm"
viewBox="0 0 34.876163 17.028626"
version="1.1"
id="svg1"
sodipodi:docname="grandes_fleches_prev.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm">
<inkscape:page
x="0"
y="0"
width="34.876163"
height="17.028625"
id="page2"
margin="0"
bleed="0" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
id="layer1"
transform="rotate(-90,9.3578179,144.70338)">
<path
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
id="path1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

44
web/themes/custom/quartiers_de_demain/src/assets/img/fleche-bas.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="34.876163mm"
height="17.028625mm"
viewBox="0 0 34.876163 17.028626"
version="1.1"
id="svg1"
sodipodi:docname="grandes_fleches_prev.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm">
<inkscape:page
x="0"
y="0"
width="34.876163"
height="17.028625"
id="page2"
margin="0"
bleed="0" />
</sodipodi:namedview>
<defs
id="defs1" />
<g
id="layer1"
transform="rotate(-90,9.3578179,144.70338)">
<path
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
id="path1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@@ -808,35 +808,24 @@ $(document).ready(function () {
$(document).ready(function () {
// if ($("#actualites").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
let article = $(this);
// Sélection des éléments à afficher/masquer
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
// Masquer les éléments au chargement
body.hide();
links.hide();
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
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.insertAfter(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
}
});
});
toggleButton.on("click", function () {
body.slideToggle();
links.slideToggle();
$(this).toggleClass("open");
});
});
// }
});

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

@@ -1,6 +1,7 @@
#actualites{
background-color: #f6f7f3;
.layout-content{
// padding-top: 1rem;
.content_container{
@@ -49,7 +50,7 @@
.node-type-actualite{
width: 85%;
// padding-bottom: 2rem;
a{pointer-events: none;}
.content-wrapper-actu{
display: grid;
grid-template-columns: 1fr 2fr;
@@ -208,6 +209,8 @@
padding-bottom: 2rem;
opacity: 1 !important;
transform:none !important;
font-family: 'gilroy-light';
p{
font-size: 0.8rem;
}
@@ -238,9 +241,6 @@
}
}
// a:not(.ext){
// display: none;
// }
}
@@ -253,15 +253,18 @@
margin: 10px auto;
border: none;
background-color: transparent;
font-size: 24px;
background-image: url("../img/fleche-bas.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: transform 0.3s ease;
}
.toggle-actualite:hover {
transform: scale(1.2);
.toggle-actualite.open {
transform: rotate(180deg);
}
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@@ -213,6 +213,8 @@
padding-bottom: 1rem;
opacity: 1 !important;
transform:none !important;
font-family: 'gilroy-light';
p{
font-size: 0.8rem;
}