simplification js fleche toggle actu
This commit is contained in:
parent
2e066b1a83
commit
a248020a69
File diff suppressed because one or more lines are too long
@ -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
44
web/themes/custom/quartiers_de_demain/dist/assets/img/fleche-bas.svg
vendored
Normal 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>
|
After Width: | Height: | Size: 1.6 KiB |
@ -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>
|
After Width: | Height: | Size: 1.6 KiB |
@ -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("▼") // 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("▼"); // Changer en flèche vers le bas
|
||||
} else {
|
||||
body.slideDown();
|
||||
links.slideDown();
|
||||
$(this).html("▲"); // Changer en flèche vers le haut
|
||||
}
|
||||
});
|
||||
});
|
||||
toggleButton.on("click", function () {
|
||||
body.slideToggle();
|
||||
links.slideToggle();
|
||||
$(this).toggleClass("open");
|
||||
});
|
||||
});
|
||||
// }
|
||||
});
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
@ -213,6 +213,8 @@
|
||||
padding-bottom: 1rem;
|
||||
opacity: 1 !important;
|
||||
transform:none !important;
|
||||
font-family: 'gilroy-light';
|
||||
|
||||
p{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user