bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

@media teaser ressource image

Browse Source
This commit is contained in:
ouidade
2025-06-09 01:53:07 +02:00
parent f19639719e
commit c084bf159f
3 changed files with 200 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/dist/assets/css/bundle.css
Vendored
+93 -3
View File
@@ -5868,6 +5868,17 @@ svg.ext {
}
}
div.view-type-slide:nth-child(2) > div:nth-child(4) {
padding-left: 0 !important;
}
div.view-type-slide:nth-child(2) > div:nth-child(4) .slick-list {
padding-left: 8% !important;
padding-right: 8% !important;
}
div.view-type-slide:nth-child(2) > div:nth-child(4) article {
padding-right: 0;
}
.carousel {
display: none;
}
@@ -7083,7 +7094,86 @@ article.node-type-ressource.type-paroles-de-laureats .wrapper-ressource .field--
article.node-type-ressource.type-presse .field--name-field-images {
display: none;
}
article.node-type-ressource article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
display: flex;
background: lawngreen;
.type-les-projets-en-images.views-row {
width: 50% !important;
min-width: 550px !important;
max-width: 0 !important;
}
@media (max-width: 479px) {
.type-les-projets-en-images.views-row {
min-width: 100% !important;
}
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource {
display: grid;
grid-template-columns: 3fr 1fr !important;
width: 100%;
max-width: 100%;
gap: 1rem;
align-items: start;
}
@media (max-width: 479px) {
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource {
display: flex;
flex-direction: column;
}
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images {
grid-column: 1;
grid-row: 3/span 8;
width: 100%;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images img {
width: 100%;
height: auto;
object-fit: cover;
border: 1px solid #ccc;
}
@media (max-width: 479px) {
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images .field__item {
height: auto;
}
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-type-de-media {
grid-column: 1/span 2;
grid-row: 2;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-type-de-ressource {
grid-column: 1/span 2;
grid-row: 1;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-title,
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-sous-titre,
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-auteur-s-,
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-edition,
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-date-de-parution,
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-mots-clefs {
grid-column: 2;
width: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-title {
grid-row: 3;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-sous-titre {
grid-row: 4;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-auteur-s- {
grid-row: 5;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-edition {
grid-row: 6;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-date-de-parution {
grid-row: 7;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-mots-clefs {
grid-row: 8;
}
.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource h2, .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource p {
margin: 0;
padding: 0;
}
web/themes/custom/eql/scss/pages/ressources.scss
+13 -1
View File
@@ -579,6 +579,7 @@
}
}
.views-row-wrapper{
display: flex;
flex-direction: row;
@@ -593,7 +594,7 @@
max-width: 500px ;
}
}
@media (max-width: 810px){
padding-left: 2rem;
flex-direction: column;
@@ -644,6 +645,7 @@
}
}
}
}
}
@@ -655,3 +657,13 @@
}
}
}
div.view-type-slide:nth-child(2) > div:nth-child(4){
padding-left: 0 !important;
.slick-list{
padding-left: 8% !important;
padding-right: 8% !important;
}
article{
padding-right: 0;
}
}
web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss
+94 -5
View File
@@ -257,9 +257,98 @@ article.node-type-ressource{
}
}
article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
display: flex;
background: lawngreen;
}
}
}
.type-les-projets-en-images.views-row{
width: 50% !important;
// min-width: 0 !important;
min-width: 550px !important;
max-width: 0 !important;
@media (max-width: 479px) {
min-width: 100% !important;
}
article.node-type-ressource.type-les-projets-en-images {
.wrapper-ressource {
display: grid;
grid-template-columns: 3fr 1fr !important; // ✅ 85% pour image, 15% pour texte
width: 100%; // ✅ force la grille à s'étaler sur toute la ligne
max-width: 100%; // ✅ limite d'expansion
gap: 1rem;
align-items: start;
@media (max-width: 479px) {
display: flex;
flex-direction: column;
}
.field--name-field-images {
grid-column: 1;
grid-row: 3 / span 8;
width: 100%;
img {
width: 100%;
height: auto;
object-fit: cover;
border: 1px solid #ccc;
}
.field__item{
@media (max-width: 479px) {
// margin-bottom: 4rem;
height: auto;
}
}
}
.field--name-field-type-de-media{
grid-column: 1 /span 2;
grid-row: 2;
}
.field--name-field-type-de-ressource{
grid-column: 1 /span 2;
grid-row: 1;
}
// Forcer les champs texte à ne pas déborder
.field--name-title,
.field--name-field-sous-titre,
.field--name-field-auteur-s-,
.field--name-field-edition,
.field--name-field-date-de-parution,
.field--name-field-mots-clefs {
grid-column: 2;
width: 100%; // ✅ évite que ça casse la colonne
box-sizing: border-box;
padding: 0;
margin: 0;
}
.field--name-title{
grid-row: 3;
}
.field--name-field-sous-titre{
grid-row: 4;
}
.field--name-field-auteur-s-{
grid-row: 5;
}
.field--name-field-edition{
grid-row: 6;
}
.field--name-field-date-de-parution{
grid-row: 7;
}
.field--name-field-mots-clefs{
grid-row: 8;
}
// Supprimer les marges internes de h2, p, etc.
h2, p {
margin: 0;
padding: 0;
}
}
}
}