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

responsive /actualites

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-03-28 16:25:07 +01:00
parent a9ed7254ea
commit b0862a3058
4 changed files with 123 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -808,17 +808,11 @@ footer {
margin: 1rem 2rem; margin: 1rem 2rem;
background-color: transparent; background-color: transparent;
} }
@media (max-width: 891px) { @media (max-width: 810px) {
.layout-sidebar-first { .layout-sidebar-first {
margin-left: 5%;
top: 550px;
}
}
@media (max-width: 500px) {
.layout-sidebar-first {
width: 80%;
position: relative; position: relative;
top: 550px; width: 80%;
top: 160px;
} }
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
@ -827,6 +821,13 @@ footer {
padding: 0.3rem 1rem 1rem 1rem; padding: 0.3rem 1rem 1rem 1rem;
width: 100%; width: 100%;
} }
@media (max-width: 810px) {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 {
display: flex;
flex-direction: column;
}
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2 { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2 {
text-transform: uppercase; text-transform: uppercase;
@ -837,10 +838,26 @@ footer {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after {
content: " :"; content: " :";
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-item input, @media (max-width: 810px) {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-item input { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form .js-form-item {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item input,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form .js-form-item input {
max-width: 100%; max-width: 100%;
} }
@media (max-width: 810px) {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select {
display: flex; display: flex;
@ -869,6 +886,12 @@ footer {
font-family: "gilroy-medium"; font-family: "gilroy-medium";
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
} }
@media (max-width: 810px) {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select select,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select select {
width: 100%;
}
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label {
text-transform: lowercase; text-transform: lowercase;
@ -1579,6 +1602,12 @@ footer {
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (max-width: 810px) {
#actus-caroussel .content-actus .view-rows-wrapper {
margin-left: 5%;
width: 90%;
}
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row { #actus-caroussel .content-actus .view-rows-wrapper .views-row {
display: flex; display: flex;
margin: auto; margin: auto;
@ -1600,6 +1629,12 @@ footer {
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
} }
@media (max-width: 810px) {
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
display: flex;
flex-direction: column;
}
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images { #actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
grid-column: 1; grid-column: 1;
grid-row: 1/span 5; grid-row: 1/span 5;
@ -4278,6 +4313,17 @@ main {
background-color: white; background-color: white;
padding-bottom: 0; padding-bottom: 0;
} }
@media (max-width: 810px) {
#actualites main {
display: flex;
flex-direction: column-reverse;
}
}
@media (max-width: 810px) {
#actualites main aside {
position: relative;
}
}
#actualites .layout-container main { #actualites .layout-container main {
padding-top: 250px; padding-top: 250px;
} }
@ -4295,6 +4341,8 @@ main {
} }
@media (max-width: 810px) { @media (max-width: 810px) {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage { #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: flex;
margin: auto;
margin-top: 14rem; margin-top: 14rem;
} }
} }
@ -4322,9 +4370,10 @@ main {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
@media (max-width: 500px) { @media (max-width: 810px) {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
margin-left: 5%; margin-left: 5%;
width: 90%;
} }
} }
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:not(:last-of-type) { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:not(:last-of-type) {
@ -4338,6 +4387,12 @@ main {
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
} }
@media (max-width: 810px) {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
display: flex;
flex-direction: column;
}
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
grid-column: 1; grid-column: 1;
grid-row: 1/span 5; grid-row: 1/span 5;

23
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
View File

@ -5,6 +5,15 @@
main{ main{
background-color:white ; background-color:white ;
padding-bottom: 0; padding-bottom: 0;
@media(max-width: 810px){
display: flex;
flex-direction: column-reverse;
}
aside{
@media(max-width: 810px){
position: relative;
}
}
} }
.layout-container main{ .layout-container main{
padding-top: $header-height-big; padding-top: $header-height-big;
@ -24,6 +33,8 @@
margin-bottom: 4rem; margin-bottom: 4rem;
width: 70%; width: 70%;
@media(max-width: 810px){ @media(max-width: 810px){
display: flex;
margin:auto;
margin-top: 14rem; margin-top: 14rem;
} }
h1{ h1{
@ -47,8 +58,6 @@
flex-wrap: wrap; flex-wrap: wrap;
background-color: white; background-color: white;
// margin-left: 20%; // margin-left: 20%;
.views-row{ .views-row{
width: 60%; width: 60%;
@ -59,10 +68,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@media (max-width:500px) { @media(max-width: 810px){
margin-left: 5%; margin-left: 5%;
width: 90%;
} }
&:not(:last-of-type){ &:not(:last-of-type){
border-bottom: solid black 0.5px;} border-bottom: solid black 0.5px;}
.node-type-actualite{ .node-type-actualite{
@ -73,6 +82,10 @@
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
@media(max-width: 810px){
display: flex;
flex-direction: column;
}
.field_field_images{ .field_field_images{
grid-column: 1; grid-column: 1;
grid-row: 1 /span 5; grid-row: 1 /span 5;

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

@ -33,7 +33,11 @@
width: 65%; width: 65%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
@media(max-width: 810px){
margin-left: 5%;
width: 90%;
}
.views-row{ .views-row{
display: flex; display: flex;
margin: auto; margin: auto;
@ -54,6 +58,10 @@
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
@media(max-width: 810px){
display: flex;
flex-direction: column;
}
.field_field_images{ .field_field_images{
grid-column: 1; grid-column: 1;
grid-row: 1 /span 5; grid-row: 1 /span 5;

60
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/aside.scss
View File

@ -7,42 +7,22 @@
// z-index: 98; // z-index: 98;
margin: 1rem 2rem; margin: 1rem 2rem;
background-color: transparent; background-color: transparent;
@media(max-width: 810px){
@media(max-width:891px){
margin-left: 5%;
// margin-top: 9rem;
top: $width-menu-slidedown;
}
@media (max-width:500px) {
width: 80%;
// margin-top: 3rem;
position: relative; position: relative;
top: $width-menu-slidedown; width: 80%;
top: $header-height-pad;
}
}
// #block-quartiers-de-demain-formulaireexposeactuspage-1{
// h2{
// text-transform: uppercase;
// font-family: "gilroy-medium";
// font-size: 0.7rem;
// &::after{
// content: ' :';
// }
// }
// label{
// text-transform: lowercase;
// font-size: 0.7rem;
// font-family: 'gilroy-light';
// }
// }
#block-quartiers-de-demain-formulaireexposeressourcespage-1, #block-quartiers-de-demain-formulaireexposeressourcespage-1,
#block-quartiers-de-demain-formulaireexposeactuspage-1{ #block-quartiers-de-demain-formulaireexposeactuspage-1{
background-color: white; background-color: white;
padding: 0.3rem 1rem 1rem 1rem; padding: 0.3rem 1rem 1rem 1rem;
width: 100%; width: 100%;
@media(max-width: 810px){
display: flex;
flex-direction: column;
}
h2{ h2{
text-transform: uppercase; text-transform: uppercase;
font-family: "gilroy-medium"; font-family: "gilroy-medium";
@ -51,11 +31,26 @@
content: ' :'; content: ' :';
} }
} }
.js-form-item{ form{
input{
max-width: 100%; .js-form-item{
@media(max-width: 810px){
display: flex;
flex-direction: column;
justify-content: space-between;
}
input{
max-width: 100%;
}
}
@media(max-width: 810px){
display: flex;
flex-direction: column;
justify-content: space-between;
} }
} }
.js-form-type-select{ .js-form-type-select{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -79,6 +74,9 @@
font-size: 0.6rem; font-size: 0.6rem;
font-family: 'gilroy-medium'; font-family: 'gilroy-medium';
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
@media(max-width: 810px){
width: 100%;
}
} }
} }
.js-form-type-textfield{ .js-form-type-textfield{