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
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;
background-color: transparent;
}
@media (max-width: 891px) {
@media (max-width: 810px) {
.layout-sidebar-first {
margin-left: 5%;
top: 550px;
}
}
@media (max-width: 500px) {
.layout-sidebar-first {
width: 80%;
position: relative;
top: 550px;
width: 80%;
top: 160px;
}
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
@@ -827,6 +821,13 @@ footer {
padding: 0.3rem 1rem 1rem 1rem;
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-formulaireexposeactuspage-1 h2 {
text-transform: uppercase;
@@ -837,10 +838,26 @@ footer {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after {
content: " :";
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-item input,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-item input {
@media (max-width: 810px) {
.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%;
}
@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-formulaireexposeactuspage-1 .js-form-type-select {
display: flex;
@@ -869,6 +886,12 @@ footer {
font-family: "gilroy-medium";
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-formulaireexposeactuspage-1 .js-form-type-textfield label {
text-transform: lowercase;
@@ -1579,6 +1602,12 @@ footer {
flex-direction: column;
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 {
display: flex;
margin: auto;
@@ -1600,6 +1629,12 @@ footer {
grid-template-columns: 1fr 2fr;
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 {
grid-column: 1;
grid-row: 1/span 5;
@@ -4278,6 +4313,17 @@ main {
background-color: white;
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 {
padding-top: 250px;
}
@@ -4295,6 +4341,8 @@ main {
}
@media (max-width: 810px) {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: flex;
margin: auto;
margin-top: 14rem;
}
}
@@ -4322,9 +4370,10 @@ main {
flex-direction: row;
align-items: center;
}
@media (max-width: 500px) {
@media (max-width: 810px) {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
margin-left: 5%;
width: 90%;
}
}
#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-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 {
grid-column: 1;
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{
background-color:white ;
padding-bottom: 0;
@media(max-width: 810px){
display: flex;
flex-direction: column-reverse;
}
aside{
@media(max-width: 810px){
position: relative;
}
}
}
.layout-container main{
padding-top: $header-height-big;
@@ -24,6 +33,8 @@
margin-bottom: 4rem;
width: 70%;
@media(max-width: 810px){
display: flex;
margin:auto;
margin-top: 14rem;
}
h1{
@@ -47,8 +58,6 @@
flex-wrap: wrap;
background-color: white;
// margin-left: 20%;
.views-row{
width: 60%;
@@ -59,10 +68,10 @@
display: flex;
flex-direction: row;
align-items: center;
@media (max-width:500px) {
@media(max-width: 810px){
margin-left: 5%;
}
width: 90%;
}
&:not(:last-of-type){
border-bottom: solid black 0.5px;}
.node-type-actualite{
@@ -73,6 +82,10 @@
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr);
@media(max-width: 810px){
display: flex;
flex-direction: column;
}
.field_field_images{
grid-column: 1;
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%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-wrap: wrap;
@media(max-width: 810px){
margin-left: 5%;
width: 90%;
}
.views-row{
display: flex;
margin: auto;
@@ -54,6 +58,10 @@
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr);
@media(max-width: 810px){
display: flex;
flex-direction: column;
}
.field_field_images{
grid-column: 1;
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;
margin: 1rem 2rem;
background-color: transparent;
@media(max-width:891px){
margin-left: 5%;
// margin-top: 9rem;
top: $width-menu-slidedown;
}
@media (max-width:500px) {
width: 80%;
// margin-top: 3rem;
@media(max-width: 810px){
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-formulaireexposeactuspage-1{
background-color: white;
padding: 0.3rem 1rem 1rem 1rem;
width: 100%;
@media(max-width: 810px){
display: flex;
flex-direction: column;
}
h2{
text-transform: uppercase;
font-family: "gilroy-medium";
@@ -51,11 +31,26 @@
content: ' :';
}
}
.js-form-item{
input{
max-width: 100%;
form{
.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{
display: flex;
flex-direction: row;
@@ -79,6 +74,9 @@
font-size: 0.6rem;
font-family: 'gilroy-medium';
padding-bottom: 0.2rem;
@media(max-width: 810px){
width: 100%;
}
}
}
.js-form-type-textfield{