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%;
padding-top: 320px;
}
@media (max-width: 500px) {
.layout-content {
padding-top: 50px;
.layout-container main {
padding-top: 110px;
}
}
@ -233,6 +232,11 @@ header {
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */
}
@media (max-width: 500px) {
header {
height: 110px;
}
}
header .contextual-region {
width: max-content;
}
@ -351,13 +355,31 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
position: relative;
top: 80px;
padding-left: 1rem;
padding-right: 1rem;
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 {
text-transform: uppercase;
color: white;
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 {
content: "";
display: block;
@ -1372,6 +1394,13 @@ footer {
font-size: 2.5rem;
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 {
display: flex;
flex-direction: row;
@ -1384,6 +1413,11 @@ footer {
padding: 0.5rem;
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 {
content: "";
display: block;
@ -1391,12 +1425,22 @@ footer {
height: 30%;
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 {
color: black;
width: 55%;
padding-top: 2rem;
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 {
width: 65%;
background-color: white;
@ -1407,17 +1451,33 @@ footer {
padding: 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 {
color: rgb(7, 50, 194);
font-size: 1.2rem;
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 {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
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 {
flex: 1 15%;
padding: 0rem;
@ -1455,6 +1515,12 @@ footer {
align-items: center;
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--13 .field_field_title {
color: rgb(7, 50, 194);
@ -1462,6 +1528,12 @@ footer {
font-weight: 500;
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 {
content: "";
display: block;
@ -1474,9 +1546,19 @@ footer {
flex-direction: row;
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 {
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 {
background-color: #f6f7f3;

6
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;
// display: grid;
// grid-template-columns: repeat(12, 1fr);
@media(max-width: 500px){
padding-top: $header-height-pad;
}
}
// .content_container{
// display: grid;
@ -48,9 +51,6 @@ $width-menu-slidedown : 550px;
.layout-content{
// grid-column: 1 / span 12;
// 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;
font-size: 2.5rem;
font-weight: 500;
@media(max-width: 500px){
font-size: 2.2rem;
padding: 0rem;
padding-top: 2rem;
}
}
.colone-picto{
display: flex;
flex-direction: row;
flex-wrap: wrap;
// padding: 1rem;
padding-bottom: 3rem;
p:not(:last-of-type){
flex: 1 15%;
color: $blue_QDD;
padding: 0.5rem;
margin-top: 0;
@media(max-width: 500px){
flex: 1 25%;
}
&::before{
content:"";
display: block;
border-left: solid 1px $blue_QDD;
height: 30%;
margin-bottom: 0.5rem;
@media(max-width: 500px){
height: 15%;
}
}
}
@ -72,6 +83,9 @@
width: 55%;
padding-top: 2rem;
margin: auto;
@media(max-width: 500px){
width: 80%;
}
}
}
@ -85,16 +99,26 @@
align-items: center;
padding: 1rem;
margin-bottom: 1rem;
@media(max-width: 500px){
width: 90%;
}
.field_field_title{
color: $blue_QDD;
font-size: 1.2rem;
font-weight: 500;
@media(max-width: 500px){
width: 80%;
}
}
.colone-picto{
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
padding: 1rem;
@media(max-width: 500px){
padding-left: 0;
padding-right: 0;
}
p{
flex: 1 15%;
padding: 0rem;
@ -136,11 +160,17 @@
flex-direction: column;
align-items: center;
padding: 1rem;
@media(max-width: 500px){
width: 90%;
}
.field_field_title{
color: $blue_QDD;
font-size: 1.2rem;
font-weight: 500;
padding-bottom: 1.5rem;
@media(max-width: 500px){
padding-bottom: 0.8rem;
}
}
}
@ -158,8 +188,14 @@
display: flex;
flex-direction: row;
justify-content: space-between ;
@media(max-width: 500px){
flex-direction: column;
}
p{
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;
top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
@media(max-width: 500px){
height: $header-height-pad;
}
.contextual-region{
width: max-content;
@ -23,7 +25,7 @@ header{
background-color: $white-header;
@media(max-width: 660px){
height: inherit;
}
}
#block-quartiers-de-demain-logorepu-2{
display: none;
@media(max-width: 891px){
@ -117,12 +119,25 @@ header{
position: relative;
top: calc($header-height / 4 );
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
@media(max-width: 500px){
top: calc($header-height-pad / 4 );
}
li{
@media(max-width: 500px){
padding-top: 0.3rem;
}
a{
text-transform: uppercase;
color: white;
font-size: 0.5rem;
@media(max-width: 500px){
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
&:not(:last-of-type){
::after{