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

responsive tâche 3273 - 3275 3276

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-04-04 11:12:19 +02:00
parent 57a99ee386
commit 681d3c9443
4 changed files with 92 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -819,10 +819,19 @@ footer {
@media (max-width: 810px) { @media (max-width: 810px) {
.layout-sidebar-first { .layout-sidebar-first {
position: relative; position: relative;
width: 80%; width: 100%;
top: 160px; top: 200px;
margin: auto; margin: auto;
margin-top: 1rem; margin-top: 1rem;
background-color: white;
padding-top: 1rem;
padding-bottom: 1rem;
}
}
@media (max-width: 810px) {
.layout-sidebar-first .sidebar_first_container {
width: 80%;
margin: auto;
} }
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
@ -4238,12 +4247,28 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-field-documents { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-field-documents {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation {
width: 25%;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation {
width: 50%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row {
width: 50%;
height: fit-content;
display: grid; display: grid;
grid-template-columns: 1fr 1.2fr; grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
margin-top: 1rem; margin-top: 1rem;
} }
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row {
width: 100%;
grid-template-columns: 1fr 2fr;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images, #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video {
grid-column: 1; grid-column: 1;
@ -4252,11 +4277,19 @@ main {
} }
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images iframe, #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images iframe,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video iframe { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video iframe {
width: 80%; width: 100%;
height: auto; height: auto;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 9px; border-radius: 9px;
} }
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images img,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-title-1 { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-title-1 {
margin-top: 0; margin-top: 0;
} }
@ -4290,24 +4323,12 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row iframe { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row iframe {
border-radius: 9px; border-radius: 9px;
} }
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row .views-field-title-1 {
width: 50%; margin-top: 1rem;
} }
@media (max-width: 810px) { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Kit-de-communication {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) {
width: 100%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-documentation) {
width: 25%;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-documentation) {
width: 50%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-Kit-de-communication) {
width: 100%; width: 100%;
background-color: rgb(7, 50, 194);
} }
.type-documentation .views-field-body-1, .type-documentation .views-field-body-1,
@ -4345,7 +4366,8 @@ main {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage { #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: flex; display: flex;
margin: auto; margin: auto;
margin-top: 16rem; margin-top: 13rem;
margin-bottom: 4rem;
} }
} }
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
@ -4401,6 +4423,11 @@ main {
width: 250px; width: 250px;
margin-right: 1rem; margin-right: 1rem;
} }
@media (max-width: 810px) {
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
margin-bottom: 1rem;
}
}
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama { #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama {
width: 100%; width: 100%;
display: flex; display: flex;

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

@ -30,7 +30,8 @@
@media(max-width: 810px){ @media(max-width: 810px){
display: flex; display: flex;
margin:auto; margin:auto;
margin-top: 16rem; margin-top: 13rem;
margin-bottom: 4rem;
} }
h1{ h1{
width: fit-content; width: fit-content;
@ -88,6 +89,9 @@
// display: flex; // display: flex;
// margin: auto; // margin: auto;
margin-right: 1rem; margin-right: 1rem;
@media(max-width: 810px){
margin-bottom: 1rem;
}
.actu-diaporama{ .actu-diaporama{
// height: 150px; // height: 150px;
@ -177,6 +181,7 @@
padding-right: 0.4rem; padding-right: 0.4rem;
} }
} }
} }
.field_field_date{ .field_field_date{
order: 3; order: 3;

53
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
View File

@ -173,31 +173,46 @@
} }
}
&.type-Documentation{
width: 25%;
@media(max-width: 810px){
width: 50%;
}
} }
&.type-Podcast{ &.type-Podcast{
.views-row{ .views-row{
width: 50%;
height: fit-content;
display: grid; display: grid;
grid-template-columns: 1fr 1.2fr; grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr); grid-template-rows: repeat(5 1fr);
margin-top: 1rem; margin-top: 1rem;
@media(max-width: 810px){
width: 100%;
grid-template-columns: 1fr 2fr;
}
.views-field-field-images, .views-field-field-images,
.views-field-field-video { .views-field-field-video {
grid-column: 1; grid-column: 1;
grid-row: 1 /span 5; grid-row: 1 /span 5;
padding: 0 1rem 1rem 1rem; padding: 0 1rem 1rem 1rem;
iframe{ iframe{
width: 80%; width: 100%;
height: auto; height: auto;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
border-radius: 9px; border-radius: 9px;
@media(max-width: 810px){
// width: 70%;
}
}
img{
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 9px;
} }
// img{
// width: 100%;
// height: auto;
// aspect-ratio: 1 / 1;
// object-fit: cover;
// border-radius: 9px;
// }
} }
.views-field-title-1{ .views-field-title-1{
margin-top: 0; margin-top: 0;
@ -235,25 +250,13 @@
iframe{ iframe{
border-radius: 9px; border-radius: 9px;
} }
.views-field-title-1{margin-top: 1rem;}
} }
} }
.views-row:has(.type-podcast){ &.type-Kit-de-communication{
width: 50%;
@media(max-width: 810px){
width: 100%;
}
}
.views-row:has(.type-documentation){
width: 25%;
@media(max-width: 810px){
width: 50%;
}
}
.type-vidéo{
}
.views-row:has(.type-Kit-de-communication){
width: 100%; width: 100%;
background-color: $blue_QDD;
} }
} }

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

@ -9,12 +9,21 @@
background-color: transparent; background-color: transparent;
@media(max-width: 810px){ @media(max-width: 810px){
position: relative; position: relative;
width: 80%; width: 100%;
top: $header-height-pad; top: $header-height;
margin: auto; margin: auto;
margin-top: 1rem; margin-top: 1rem;
background-color: white;
padding-top: 1rem;
padding-bottom: 1rem;
} }
.sidebar_first_container{
@media(max-width: 810px){
width: 80%;
margin: auto;
}
}
#block-quartiers-de-demain-formulaireexposeressourcespage-1, #block-quartiers-de-demain-formulaireexposeressourcespage-1,
#block-quartiers-de-demain-formulaireexposeactuspage-1{ #block-quartiers-de-demain-formulaireexposeactuspage-1{