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

mobile page consultation

This commit is contained in:
ouidade 2024-07-07 14:32:42 +02:00
parent e489a10c5b
commit 713e5df873
4 changed files with 143 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -181,10 +181,9 @@ h3 {
width: 100%; width: 100%;
padding-top: 320px; padding-top: 320px;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.layout-content { .layout-container main {
padding-top: 50px; padding-top: 110px;
} }
} }
@ -233,6 +232,11 @@ header {
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */ /* Classes for scroll effect */
} }
@media (max-width: 500px) {
header {
height: 110px;
}
}
header .contextual-region { header .contextual-region {
width: max-content; width: max-content;
} }
@ -351,13 +355,31 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
position: relative; position: relative;
top: 80px; top: 80px;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem;
margin: 0; margin: 0;
} }
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 27.5px;
}
}
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li {
padding-top: 0.3rem;
}
}
header .header_nav_container #block-quartiers-de-demain-entete ul li a { header .header_nav_container #block-quartiers-de-demain-entete ul li a {
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
font-size: 0.5rem; font-size: 0.5rem;
} }
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after { header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
content: ""; content: "";
display: block; display: block;
@ -1372,6 +1394,13 @@ footer {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500; font-weight: 500;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title {
font-size: 2.2rem;
padding: 0rem;
padding-top: 2rem;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto { #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -1384,6 +1413,11 @@ footer {
padding: 0.5rem; padding: 0.5rem;
margin-top: 0; margin-top: 0;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type) {
flex: 1 25%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before { #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
content: ""; content: "";
display: block; display: block;
@ -1391,12 +1425,22 @@ footer {
height: 30%; height: 30%;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
height: 15%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type { #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
color: black; color: black;
width: 55%; width: 55%;
padding-top: 2rem; padding-top: 2rem;
margin: auto; margin: auto;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
width: 80%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
width: 65%; width: 65%;
background-color: white; background-color: white;
@ -1407,17 +1451,33 @@ footer {
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
width: 90%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
width: 80%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
padding: 1rem; padding: 1rem;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
padding-left: 0;
padding-right: 0;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p {
flex: 1 15%; flex: 1 15%;
padding: 0rem; padding: 0rem;
@ -1455,6 +1515,12 @@ footer {
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--12,
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 {
width: 90%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title, #consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title { #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
@ -1462,6 +1528,12 @@ footer {
font-weight: 500; font-weight: 500;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
padding-bottom: 0.8rem;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after { #consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
content: ""; content: "";
display: block; display: block;
@ -1474,9 +1546,19 @@ footer {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto {
flex-direction: column;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p { #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
width: 30%; width: 30%;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
width: 100%;
}
}
.partenaires { .partenaires {
background-color: #f6f7f3; background-color: #f6f7f3;

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

@ -38,6 +38,9 @@ $width-menu-slidedown : 550px;
padding-top: $header-height; padding-top: $header-height;
// display: grid; // display: grid;
// grid-template-columns: repeat(12, 1fr); // grid-template-columns: repeat(12, 1fr);
@media(max-width: 500px){
padding-top: $header-height-pad;
}
} }
// .content_container{ // .content_container{
// display: grid; // display: grid;
@ -48,9 +51,6 @@ $width-menu-slidedown : 550px;
.layout-content{ .layout-content{
// grid-column: 1 / span 12; // grid-column: 1 / span 12;
// padding-top: $header-height; // padding-top: $header-height;
@media(max-width: 500px){
padding-top: $header-height-ultrasmall;
}
} }

38
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
View File

@ -45,24 +45,35 @@
color: $blue_QDD; color: $blue_QDD;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500; font-weight: 500;
@media(max-width: 500px){
font-size: 2.2rem;
padding: 0rem;
padding-top: 2rem;
}
} }
.colone-picto{ .colone-picto{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
// padding: 1rem;
padding-bottom: 3rem; padding-bottom: 3rem;
p:not(:last-of-type){ p:not(:last-of-type){
flex: 1 15%; flex: 1 15%;
color: $blue_QDD; color: $blue_QDD;
padding: 0.5rem; padding: 0.5rem;
margin-top: 0; margin-top: 0;
@media(max-width: 500px){
flex: 1 25%;
}
&::before{ &::before{
content:""; content:"";
display: block; display: block;
border-left: solid 1px $blue_QDD; border-left: solid 1px $blue_QDD;
height: 30%; height: 30%;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@media(max-width: 500px){
height: 15%;
}
} }
} }
@ -72,6 +83,9 @@
width: 55%; width: 55%;
padding-top: 2rem; padding-top: 2rem;
margin: auto; margin: auto;
@media(max-width: 500px){
width: 80%;
}
} }
} }
@ -85,16 +99,26 @@
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@media(max-width: 500px){
width: 90%;
}
.field_field_title{ .field_field_title{
color: $blue_QDD; color: $blue_QDD;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
@media(max-width: 500px){
width: 80%;
}
} }
.colone-picto{ .colone-picto{
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
padding: 1rem; padding: 1rem;
@media(max-width: 500px){
padding-left: 0;
padding-right: 0;
}
p{ p{
flex: 1 15%; flex: 1 15%;
padding: 0rem; padding: 0rem;
@ -136,11 +160,17 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
@media(max-width: 500px){
width: 90%;
}
.field_field_title{ .field_field_title{
color: $blue_QDD; color: $blue_QDD;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
@media(max-width: 500px){
padding-bottom: 0.8rem;
}
} }
} }
@ -158,8 +188,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between ; justify-content: space-between ;
@media(max-width: 500px){
flex-direction: column;
}
p{ p{
width: 30%; width: 30%;
@media(max-width: 500px){
width: 100%;
}
} }
} }
} }

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

@ -9,7 +9,9 @@ header{
position: fixed; position: fixed;
top: 0; top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
@media(max-width: 500px){
height: $header-height-pad;
}
.contextual-region{ .contextual-region{
width: max-content; width: max-content;
@ -23,7 +25,7 @@ header{
background-color: $white-header; background-color: $white-header;
@media(max-width: 660px){ @media(max-width: 660px){
height: inherit; height: inherit;
} }
#block-quartiers-de-demain-logorepu-2{ #block-quartiers-de-demain-logorepu-2{
display: none; display: none;
@media(max-width: 891px){ @media(max-width: 891px){
@ -117,12 +119,25 @@ header{
position: relative; position: relative;
top: calc($header-height / 4 ); top: calc($header-height / 4 );
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem;
margin: 0; margin: 0;
@media(max-width: 500px){
top: calc($header-height-pad / 4 );
}
li{ li{
@media(max-width: 500px){
padding-top: 0.3rem;
}
a{ a{
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
font-size: 0.5rem; font-size: 0.5rem;
@media(max-width: 500px){
display: flex;
flex-direction: column;
align-items: flex-start;
}
} }
&:not(:last-of-type){ &:not(:last-of-type){
::after{ ::after{