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

mobile

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-08 14:06:57 +02:00
parent 92ce397036
commit 561dfbb315
13 changed files with 215 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -190,10 +190,10 @@ document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const totalSlides = slides.length;
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides;
const maxSlide = totalSlides - visibleSlides + 1;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(1, Math.min(index, maxSlide));
currentSlide = Math.max(0.6, Math.min(index, maxSlide));
// Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides;
@@ -273,7 +273,7 @@ document.addEventListener('DOMContentLoaded', function() {
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: true,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: true,

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

@@ -38,8 +38,8 @@ $width-menu-slidedown : 550px;
padding-top: $header-height;
// display: grid;
// grid-template-columns: repeat(12, 1fr);
@media(max-width: 500px){
padding-top: $header-height-pad;
@media(max-width: 810px){
padding-top: 180px;
}
}
// .content_container{

12
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -19,7 +19,7 @@
margin-bottom: 0;
flex: 1 100%;
font-size: 1.5rem;
@media(max-width: 500px){
@media(max-width: 1090px){
font-size: 1.3rem;
}
}
@@ -27,13 +27,14 @@
p:nth-child(3){
flex: 1 ;
padding: 1rem;
@media(max-width: 500px){
@media(max-width: 1090px){
padding-left: 0 ;
font-size: 1rem;
}
}
> p:nth-child(2){
padding-left: 15rem;
@media(max-width: 500px){
@media(max-width: 1090px){
padding-left: 0 ;
}
}
@@ -53,7 +54,7 @@
.field_field_texte{
width: 50%;
margin: auto;
@media(max-width: 500px){
@media(max-width: 1090px){
width: 80%;
}
.colone-picto{
@@ -82,10 +83,11 @@
max-width: 30%;
display: flex;
flex-direction: column;
@media(max-width: 500px){
@media(max-width: 1090px){
padding-right: 1rem;
flex: 1 30%;
max-width: 50%;
font-size: 0.9rem;
}
&:nth-of-type(1)::before{
background-image: url("../img/fanion.svg");

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

@@ -2,25 +2,29 @@
display: flex;
flex-direction: column;
align-items: center;
.__timeline-arrows{
width: fit-content;
margin: auto;
// .__timeline-arrows{
// width: fit-content;
// margin: auto;
button{
background-color: transparent;
border: none;
&:hover{
opacity: 0.5;
}
svg{
padding: 0.5rem;
// button{
// background-color: transparent;
// border: none;
// &:hover{
// opacity: 0.5;
// }
// svg{
// padding: 0.5rem;
}
}
}
// }
// }
// }
h2{
width: fit-content;
padding-bottom: 2rem;
padding-bottom: 1rem;
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.7rem;
font-weight: bold;
}
.content-actus{
.view{
@@ -42,7 +46,6 @@
-khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */
background-color: red;
height: 250px;
margin-bottom: 0.6rem;
@media(max-width: 550px){
@@ -53,6 +56,10 @@
height: fit-content;
max-height: 250px;
object-fit: cover;
-moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */
@media(max-width: 550px){
max-height: 170px;
}
@@ -63,9 +70,21 @@
color: red;
font-size: 0.6rem;
font-weight: 600;
display: inline-flex;
align-items: center;
&::before{
content: url('../img/type-actu.svg');
padding-right: 0.4rem;
}
}
.field_field_date{
color: red;
display: inline-flex;
align-items: center;
&::before{
content: url('../img/date-actu.svg');
padding-right: 0.4rem;
}
}
.field_title{
h2{

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

@@ -9,8 +9,8 @@ header{
position: fixed;
top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
@media(max-width: 500px){
height: $header-height-pad;
@media(max-width: 810px){
height: 170px;
}
.contextual-region{
@@ -123,7 +123,7 @@ header{
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
@media(max-width: 500px){
@media(max-width: 810px){
top: calc($header-height-pad / 4 );
}
li{

32
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@@ -13,11 +13,11 @@ $slick-loader-path: "./" !default;
$slick-arrow-color: black !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default;
// $slick-prev-character: url('../../img/prev.svg ') !default;
// $slick-prev-character: "\2190" !default;
// $slick-next-character: "\2192" !default;
$slick-prev-character: url('../img/prev.svg ') !default;
$slick-next-character: url('../img/next.svg ') !default;
$slick-dot-character: "\2022" !default;
$slick-dot-size: 6px !default;
@@ -76,14 +76,20 @@ $slick-opacity-not-active: 0.25 !default;
cursor: pointer;
background: transparent;
color: transparent;
top: -20px;
-webkit-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
transform: translate(0, -20px);
top: -1rem;
-webkit-transform: translate(0, -1rem);
-ms-transform: translate(0, -1rem);
transform: translate(0, -1rem);
padding: 0;
padding-bottom: 2rem;
border: none;
outline: none;
@media(max-width:810px){
top: -30px;
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
transform: translate(0, -30px);
}
&:hover, &:focus {
outline: none;
background: transparent;
@@ -107,7 +113,10 @@ $slick-opacity-not-active: 0.25 !default;
}
.slick-prev {
left: 45%;
left: 46%;
@media(max-width:810px){
left: 36%;
}
[dir="rtl"] & {
left: auto;
right: -25px;
@@ -121,7 +130,10 @@ $slick-opacity-not-active: 0.25 !default;
}
.slick-next {
right: 45%;
right: 48%;
@media(max-width:810px){
right: 42%;
}
[dir="rtl"] & {
left: -25px;
right: auto;

10
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -131,7 +131,7 @@
font-size: 0.6rem;
position: relative;
top: -10px;
@media(max-width:550px){
@media(max-width:1090px){
font-size: 1.2rem;
}
.field_field_date_de_annee{
@@ -176,10 +176,10 @@
border-radius: 5%;
padding: 0.6rem 0.6rem;
// width: fit-content;
min-width: 50%;
min-width: 65%;
.field_field_titre{
font-size: 0.6rem;
@media(max-width:700px){
font-size: 0.5rem;
@media(max-width:10900px){
font-size: 1rem;
}
}
@@ -187,7 +187,7 @@
p{
font-size: 0.5rem !important;
margin: 0;
@media(max-width:700px){
@media(max-width:1090px){
font-size: 1rem !important;
}
}