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

mobile page consultation

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

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;
// 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{