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

fix tamporaire bug actu carroussel =responsive

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-03-03 22:20:11 +01:00
parent 5eceec0083
commit 4aaa3f90c5
8 changed files with 193 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -202,7 +202,7 @@ h2, h3 {
}
@media (max-width: 810px) {
.layout-container main#home {
padding-top: 380px;
padding-top: 300px;
}
}
@media (max-width: 810px) {
@ -432,17 +432,17 @@ header .header_nav_container {
transform: translateX(0);
transition: transform 0.3s ease-in-out;
z-index: -1;
}
@media (max-width: 1090px) {
header .header_nav_container {
height: fit-content;
}
display: flex;
flex-direction: column;
}
@media (max-width: 500px) {
header .header_nav_container {
flex: 0 0 40%;
}
}
header .header_nav_container #block-quartiers-de-demain-entete {
margin: auto;
}
header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none;
}
@ -564,7 +564,6 @@ header .header:hover + .header_nav_container {
flex: 1 0 100%;
position: relative;
left: -100%;
top: -45px;
}
}
@ -607,7 +606,11 @@ header .header:hover + .header_nav_container {
flex: 1 0 100%;
position: relative;
left: -100%;
top: -75px;
}
}
@media (max-width: 550px) {
.header--collapsed-already .header_nav_container {
top: 0px;
}
}
@ -1511,9 +1514,19 @@ footer {
#actus-caroussel button {
top: -2.5rem;
}
@media (max-width: 810px) {
#actus-caroussel button {
top: -1.5rem;
}
}
#actus-caroussel .content-actus .slick-list {
padding-bottom: 4rem;
}
@media (max-width: 810px) {
#actus-caroussel .content-actus .slick-list {
padding-bottom: 0rem;
}
}
#actus-caroussel .content-actus .view {
display: flex;
flex-direction: row;
@ -3171,8 +3184,11 @@ body {
#page-node .content_container .node-type-actualite {
width: 100%;
padding-bottom: 7rem;
display: flex;
flex-direction: column;
}
#page-node .content_container .node-type-actualite .infos-actu {
order: 1;
display: flex;
flex-direction: row;
border-top: solid red 1px;
@ -3203,12 +3219,14 @@ body {
padding-right: 0.4rem;
}
#page-node .content_container .node-type-actualite .field_body {
order: 2;
padding-bottom: 2rem;
}
#page-node .content_container .node-type-actualite .field_body p {
font-size: 0.8rem;
}
#page-node .content_container .node-type-actualite .field_field_liens {
order: 3;
padding-bottom: 2rem;
}
#page-node .content_container .node-type-actualite .field_field_liens a {
@ -3229,6 +3247,12 @@ body {
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#page-node .content_container .node-type-actualite .field_field_liens a:not(.ext) {
display: none;
}
#page-node .content_container .node-type-actualite .field_field_images {
order: 5;
}
#page-node .content_container .node-type-actualite .field_field_images img {
width: 100%;
height: auto;

0
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-original.svg → web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

129
web/themes/custom/quartiers_de_demain/dist/assets/img/rect4.svg vendored Normal file
View File

@ -0,0 +1,129 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="1801.0212"
height="4029.4231"
viewBox="0 0 1801.0212 4029.4232"
sodipodi:docname="formes-animees.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:page
x="0"
y="0"
width="1801.0212"
height="4029.4231"
id="page2"
margin="0"
bleed="0" />
</sodipodi:namedview>
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath258">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1095.6993,-8098.7595)"
id="path258" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath301">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1476.5001,-5895.4337)"
id="path301" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath303">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1623.8512,-4272.9005)"
id="path303" />
</clipPath>
</defs>
<g
id="g2"
transform="translate(-299.16899,-2519.6031)">
<g
id="g1"
transform="translate(0.17944336,-2.9196463)">
<path
id="path256"
d="m 321.27266,3336.1817 182.91889,175.8201"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="formes-animees.svg"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300" />
<path
id="path256-3"
d="m 1852.1683,6336.9184 -163.0856,194.3583"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(-0.80902482,0,0,-0.80902482,1743.8143,2885.2905)"
clip-path="url(#clipPath258)" />
<path
id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.72647042,0,0,-0.72647042,1836.7965,4740.0583)"
clip-path="url(#clipPath301)" />
<path
id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.82260013,0,0,-0.82260013,2025.1937,5635.4927)"
clip-path="url(#clipPath303)" />
<path
id="path311"
d="M 456.65311,5469.771 V 5209.7705"
style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<rect
style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
id="rect2"
width="1550.348"
height="114.74608"
x="122.31378"
y="-9.4031076e-13" />
<rect
style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
id="rect1"
width="1540.1483"
height="112.19624"
x="73.095963"
y="68.049309" />
<rect
style="fill:none;stroke-width:0;paint-order:stroke fill markers"
id="rect3"
width="1559.4871"
height="238.19258"
x="108.70975"
y="3395.3674" />
<rect
style="fill:none;stroke-width:0;paint-order:stroke fill markers"
id="rect4"
width="1801.0212"
height="252.14297"
x="1.3299257e-06"
y="4.5025892" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
View File

@ -45,7 +45,7 @@ $width-menu-slidedown : 550px;
@media(max-width: 810px){
padding-top: 380px;
padding-top: 300px;
}
}
}

10
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss
View File

@ -33,7 +33,10 @@
.node-type-actualite{
width: 100%;
padding-bottom: 7rem;
display: flex;
flex-direction: column;
.infos-actu{
order: 1;
display: flex;
flex-direction: row;
border-top: solid red 1px;
@ -65,12 +68,14 @@
}
.field_body {
order: 2;
padding-bottom: 2rem;
p{
font-size: 0.8rem;
}
}
.field_field_liens{
order: 3;
padding-bottom: 2rem;
a{
padding-left: 0.5rem;
@ -91,9 +96,14 @@
}
}
a:not(.ext){
display: none;
}
}
.field_field_images{
order: 5;
img{
width: 100%;
height: auto;

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

@ -16,10 +16,16 @@
}
button{
top: -2.5rem;
@media(max-width: 810px){
top: -1.5rem;
}
}
.content-actus{
.slick-list{
padding-bottom: 4rem;
@media(max-width: 810px){
padding-bottom: 0rem;
}
}
.view{
display: flex;

13
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -184,14 +184,18 @@ header{
transform: translateX(0);
transition: transform 0.3s ease-in-out;
z-index: -1 ;
display: flex;
flex-direction: column;
@media(max-width: 1090px){
// text-align:left;
height: fit-content;
// height: fit-content;
}
@media(max-width: 500px){
flex: 0 0 40%;
}
#block-quartiers-de-demain-entete{
margin: auto;
h2{
display: none;
}
@ -307,7 +311,7 @@ header{
flex: 1 0 100%;
position: relative;
left: -100%;
top: -45px;
// top: -45px; /* a remettre et faire varier si ajoute éléments dans menu */
}
}
@ -343,7 +347,10 @@ header{
flex: 1 0 100%;
position: relative;
left: -100%;
top: -75px;
// top: -75px;
}
@media(max-width: 550px){
top: 0px;
}
}

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

@ -92,22 +92,17 @@
{# {{ content }} #}
{# </div> #}
{% block content %}
<a href="{{ url }}" rel="bookmark">{{ label }}
{{content.field_images}}
<a href="{{ url }}" rel="bookmark">{{ label }}
{{content.field_images}}
<div class="infos-actu">
{{content.field_type_d_actualite}}
{{content.field_date}}
</div>
<h2{{ title_attributes }}>
</h2>
{{content.body}}
{{content.field_liens}}
</a>
</a>
{% endblock %}
</article>