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) {
.layout-sidebar-first {
position: relative;
width: 80%;
top: 160px;
width: 100%;
top: 200px;
margin: auto;
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,
@ -4238,12 +4247,28 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-field-documents {
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 {
width: 50%;
height: fit-content;
display: grid;
grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr);
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-video {
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-video iframe {
width: 80%;
width: 100%;
height: auto;
aspect-ratio: 1/1;
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 {
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 {
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) {
width: 50%;
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row .views-field-title-1 {
margin-top: 1rem;
}
@media (max-width: 810px) {
#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) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Kit-de-communication {
width: 100%;
background-color: rgb(7, 50, 194);
}
.type-documentation .views-field-body-1,
@ -4345,7 +4366,8 @@ main {
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: flex;
margin: auto;
margin-top: 16rem;
margin-top: 13rem;
margin-bottom: 4rem;
}
}
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
@ -4401,6 +4423,11 @@ main {
width: 250px;
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 {
width: 100%;
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){
display: flex;
margin:auto;
margin-top: 16rem;
margin-top: 13rem;
margin-bottom: 4rem;
}
h1{
width: fit-content;
@ -88,6 +89,9 @@
// display: flex;
// margin: auto;
margin-right: 1rem;
@media(max-width: 810px){
margin-bottom: 1rem;
}
.actu-diaporama{
// height: 150px;
@ -177,6 +181,7 @@
padding-right: 0.4rem;
}
}
}
.field_field_date{
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{
.views-row{
width: 50%;
height: fit-content;
display: grid;
grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr);
margin-top: 1rem;
@media(max-width: 810px){
width: 100%;
grid-template-columns: 1fr 2fr;
}
.views-field-field-images,
.views-field-field-video {
grid-column: 1;
grid-row: 1 /span 5;
padding: 0 1rem 1rem 1rem;
iframe{
width: 80%;
width: 100%;
height: auto;
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{
margin-top: 0;
@ -235,25 +250,13 @@
iframe{
border-radius: 9px;
}
.views-field-title-1{margin-top: 1rem;}
}
}
.views-row:has(.type-podcast){
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){
&.type-Kit-de-communication{
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;
@media(max-width: 810px){
position: relative;
width: 80%;
top: $header-height-pad;
width: 100%;
top: $header-height;
margin: auto;
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-formulaireexposeactuspage-1{