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

new twig et css teaser actus home

Browse Source
This commit is contained in:
ouidade
2025-07-24 16:53:14 +02:00
parent c5d0df7d39
commit 4a8f57a0fd
3 changed files with 141 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/dist/assets/css/bundle.css
Vendored
+51 -64
View File
@@ -590,35 +590,34 @@ svg.ext {
height: auto; height: auto;
} }
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home {
display: grid; display: flex;
grid-template-columns: 1fr repeat(9, 1fr) 1fr; flex-direction: row;
column-gap: 30px; justify-content: space-between;
margin-left: 2rem;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
} }
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo {
order: 1; width: 50%;
grid-column: 1/span 8;
grid-row: 1/span 6;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item {
display: flex; display: flex;
max-height: 420px; max-height: 420px;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
max-width: 100%; max-width: 100%;
max-height: 456px; max-height: 456px;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
max-height: 310px; max-height: 310px;
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
@@ -627,12 +626,12 @@ svg.ext {
} }
} }
@media (max-width: 724px) { @media (max-width: 724px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
max-height: 400px; max-height: 400px;
} }
} }
@media (max-width: 680px) { @media (max-width: 680px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
height: 200px; height: 200px;
object-fit: cover; object-fit: cover;
max-width: 70vw; max-width: 70vw;
@@ -641,89 +640,77 @@ svg.ext {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date, .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu, width: 45%;
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title, align-content: center;
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre, color: rgb(9, 57, 139) !important;
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
display: inline-block;
block-size: fit-content;
grid-column: 9/span 9;
order: auto;
} }
@media (min-width: 811px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date, .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu, .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title, .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-sous-titre:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre, .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-actu-type:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .ul:empty {
margin-top: 1rem;
}
}
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type:empty,
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .ul:empty {
display: none; display: none;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date {
order: 2; font-size: 1.3rem;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date div { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date div {
display: flex !important; display: flex !important;
flex-direction: row; flex-direction: row;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date time { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date time {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 0.9rem; font-size: 1.3rem;
font-weight: 800; font-weight: 800;
padding-right: 1rem; padding-right: 1rem;
width: fit-content; width: fit-content;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu .field__label { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu {
font-size: 1.3rem;
padding-top: 1rem;
}
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu .field__label {
display: none; display: none;
} }
@media (max-width: 811px) { @media (max-width: 811px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu {
display: inline-flex; display: inline-flex;
order: 3;
} }
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title h2 a { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title {
color: rgb(0, 158, 227) !important; line-height: 1.1;
font-size: 1.5rem;
padding-top: 1rem;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title h2 a {
color: rgb(9, 57, 139) !important;
}
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-sous-titre {
display: none;
font-weight: 800; font-weight: 800;
} }
@media (min-width: 811px) { @media (min-width: 811px) {
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-sous-titre {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-actu-type {
order: 6; padding-top: 2rem;
font-size: 1.3rem;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field:not(.field--name-field-images) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field:not(.field--name-field-images) {
width: 100%; width: 100%;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child h2 { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos h2 {
margin: 0; margin: 0;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child a { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos a {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
grid-column: 1/span 8;
} }
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links { .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .inline.links {
padding-top: none !important;
list-style: none;
width: fit-content;
align-self: flex-end;
padding-right: 1rem;
}
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links a {
display: none; display: none;
} }
.path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {
web/themes/custom/eql/scss/pages/_home.scss
+76 -74
View File
@@ -47,80 +47,82 @@
height: auto; height: auto;
margin: auto; margin: auto;
margin-bottom: 2rem; margin-bottom: 2rem;
@media (max-width: 810px){ @media (max-width: 810px){
width: 65%; width: 65%;
height: auto; height: auto;
} }
div:first-child{ // block actu dans le bandeau .actus-teaser-home{ // block actu dans le bandeau
display: grid; // display: grid;
grid-template-columns: 1fr repeat(9, 1fr) 1fr; // grid-template-columns: 1fr repeat(9, 1fr) 1fr;
column-gap: 30px; // column-gap: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 2rem;
@media (max-width: 810px){ @media (max-width: 810px){
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
} }
.field--name-field-images { .home_actu_photo{
order: 1; width: 50%;
grid-column: 1 /span 8; .field--name-field-images {
grid-row: 1 / span 6; .field__item{
.field__item{ display: flex;
display: flex; max-height: 420px;
max-height: 420px; }
} .field__item img{
.field__item img{ max-width: 100%;
max-width: 100%; max-height: 456px;
max-height: 456px; object-fit: cover;
object-fit: cover; object-position: center;
object-position: center; @media(max-width:810px){
@media(max-width:810px){ max-height: 310px;
max-height: 310px; max-width: 100%;
max-width: 100%; object-fit: cover;
object-fit: cover; padding-left: 0;
padding-left: 0; margin-bottom: 1rem;
margin-bottom: 1rem; }
}
@media(max-width:724px){
@media(max-width:724px){ max-height: 400px;
max-height: 400px; }
} @media (max-width: 680px){
@media (max-width: 680px){ height: 200px;
height: 200px; object-fit: cover;
object-fit: cover; max-width: 70vw;
max-width: 70vw; margin: auto;
margin: auto; padding-left: 0;
padding-left: 0; padding-bottom: 1rem;
padding-bottom: 1rem;
}
}
} }
}
.home_actu_infos{
width: 45%;
align-content: center;
color: $blue-dark !important;
.field--name-field-date,
.field--name-field-lieu,
.field--name-title,
.field--name-field-sous-titre,
.field--name-field-actu-type {
} }
}
.field--name-field-date, .field--name-field-date:empty,
.field--name-field-lieu, .field--name-field-lieu:empty,
.field--name-title, .field--name-title:empty,
.field--name-field-sous-titre, .field--name-field-sous-titre:empty,
.field--name-field-actu-type { .field--name-field-actu-type:empty,
display: inline-block; .ul:empty{
block-size: fit-content; display: none;
grid-column: 9 / span 9;
order: auto;
@media (min-width: 811px) {
margin-top: 1rem;
} }
}
.field--name-field-date:empty,
.field--name-field-lieu:empty,
.field--name-title:empty,
.field--name-field-sous-titre:empty,
.field--name-field-actu-type:empty,
.ul:empty{
display: none;
}
.field--name-field-date{ .field--name-field-date{
order: 2; font-size: 1.3rem;
@media (min-width: 811px) { @media (min-width: 811px) {
// margin-top: 5rem; // margin-top: 5rem;
} }
@@ -131,7 +133,7 @@
time{ time{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 0.9rem; font-size: 1.3rem;
font-weight: 800; font-weight: 800;
padding-right: 1rem; padding-right: 1rem;
width: fit-content; width: fit-content;
@@ -139,23 +141,28 @@
} }
.field--name-field-lieu{ .field--name-field-lieu{
font-size: 1.3rem;
padding-top: 1rem;
.field__label{ .field__label{
display: none; display: none;
} }
@media (max-width: 811px){ @media (max-width: 811px){
display: inline-flex; display: inline-flex;
order: 3;
} }
} }
.field--name-title { .field--name-title {
line-height: 1.1;
font-size: 1.5rem;
padding-top: 1rem;
h2 a { h2 a {
color: $blue-light !important; color: $blue-dark !important;
} }
} }
.field--name-field-sous-titre { .field--name-field-sous-titre {
display: none;
font-weight: 800; font-weight: 800;
@media (min-width: 811px) { @media (min-width: 811px) {
font-size: 1.5rem; font-size: 1.5rem;
@@ -163,7 +170,8 @@
} }
.field--name-field-actu-type { .field--name-field-actu-type {
order: 6; padding-top: 2rem;
font-size: 1.3rem;
} }
.field:not(.field--name-field-images) { .field:not(.field--name-field-images) {
@@ -175,20 +183,14 @@
} }
a { a {
color: $black; color: $black;
grid-column: 1 / span 8;
} }
.inline.links { .inline.links {
padding-top: none !important; display: none;
list-style: none;
width: fit-content;
align-self: flex-end;
padding-right: 1rem;
a {
display: none;
}
} }
}
} }
} }
} }
web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig
+14 -6
View File
@@ -101,13 +101,21 @@
{% endif %} {% endif %}
<div{{ content_attributes }}> <div{{ content_attributes }}>
{{content}} {# {{content}} #}
{# <div class='home_actu_infos'> {# {{ dump(content) }} #}
{{ content.right }} <div class='actus-teaser-home'>
</div>
<div class='home_actu_photo'> <div class='home_actu_photo'>
{{ content.left }} {{ content.field_images }}
</div> #} </div>
<div class='home_actu_infos'>
{{ content.field_date }}
{{ content.field_lieu }}
{{ content.title }}
{{ content.field_sous_titre }}
{{ content.field_actu_type }}
{{ content.links }}
</div>
</div>
</div> </div>
</article> </article>