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;
}
}
.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
display: grid;
grid-template-columns: 1fr repeat(9, 1fr) 1fr;
column-gap: 30px;
.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;
flex-direction: row;
justify-content: space-between;
margin-left: 2rem;
}
@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;
flex-direction: column;
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 {
order: 1;
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 .actus-teaser-home .home_actu_photo {
width: 50%;
}
.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;
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-height: 456px;
object-fit: cover;
object-position: center;
}
@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-width: 100%;
object-fit: cover;
@@ -627,12 +626,12 @@ svg.ext {
}
}
@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;
}
}
@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;
object-fit: cover;
max-width: 70vw;
@@ -641,89 +640,77 @@ svg.ext {
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 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 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 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 div:first-child .field--name-field-actu-type {
display: inline-block;
block-size: fit-content;
grid-column: 9/span 9;
order: auto;
.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 {
width: 45%;
align-content: center;
color: rgb(9, 57, 139) !important;
}
@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-date,
.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 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 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 div:first-child .field--name-field-actu-type {
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 {
.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 .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 .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 .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 .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 .actus-teaser-home .home_actu_infos .ul:empty {
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 {
order: 2;
.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 {
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;
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;
flex-direction: row;
font-size: 0.9rem;
font-size: 1.3rem;
font-weight: 800;
padding-right: 1rem;
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;
}
@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;
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 {
color: rgb(0, 158, 227) !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-title {
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;
}
@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;
}
}
.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 {
order: 6;
.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 {
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%;
}
.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;
}
.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);
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 {
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 {
.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 {
display: none;
}
.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;
margin: auto;
margin-bottom: 2rem;
@media (max-width: 810px){
width: 65%;
height: auto;
}
div:first-child{ // block actu dans le bandeau
display: grid;
grid-template-columns: 1fr repeat(9, 1fr) 1fr;
column-gap: 30px;
.actus-teaser-home{ // block actu dans le bandeau
// display: grid;
// grid-template-columns: 1fr repeat(9, 1fr) 1fr;
// column-gap: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 2rem;
@media (max-width: 810px){
display: flex;
flex-direction: column;
height: auto;
}
.field--name-field-images {
order: 1;
grid-column: 1 /span 8;
grid-row: 1 / span 6;
.field__item{
display: flex;
max-height: 420px;
}
.field__item img{
max-width: 100%;
max-height: 456px;
object-fit: cover;
object-position: center;
@media(max-width:810px){
max-height: 310px;
max-width: 100%;
object-fit: cover;
padding-left: 0;
margin-bottom: 1rem;
}
@media(max-width:724px){
max-height: 400px;
}
@media (max-width: 680px){
height: 200px;
object-fit: cover;
max-width: 70vw;
margin: auto;
padding-left: 0;
padding-bottom: 1rem;
.home_actu_photo{
width: 50%;
.field--name-field-images {
.field__item{
display: flex;
max-height: 420px;
}
.field__item img{
max-width: 100%;
max-height: 456px;
object-fit: cover;
object-position: center;
@media(max-width:810px){
max-height: 310px;
max-width: 100%;
object-fit: cover;
padding-left: 0;
margin-bottom: 1rem;
}
@media(max-width:724px){
max-height: 400px;
}
@media (max-width: 680px){
height: 200px;
object-fit: cover;
max-width: 70vw;
margin: auto;
padding-left: 0;
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-lieu,
.field--name-title,
.field--name-field-sous-titre,
.field--name-field-actu-type {
display: inline-block;
block-size: fit-content;
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: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{
order: 2;
font-size: 1.3rem;
@media (min-width: 811px) {
// margin-top: 5rem;
}
@@ -131,7 +133,7 @@
time{
display: flex;
flex-direction: row;
font-size: 0.9rem;
font-size: 1.3rem;
font-weight: 800;
padding-right: 1rem;
width: fit-content;
@@ -139,23 +141,28 @@
}
.field--name-field-lieu{
font-size: 1.3rem;
padding-top: 1rem;
.field__label{
display: none;
}
@media (max-width: 811px){
display: inline-flex;
order: 3;
}
}
.field--name-title {
line-height: 1.1;
font-size: 1.5rem;
padding-top: 1rem;
h2 a {
color: $blue-light !important;
color: $blue-dark !important;
}
}
.field--name-field-sous-titre {
display: none;
font-weight: 800;
@media (min-width: 811px) {
font-size: 1.5rem;
@@ -163,7 +170,8 @@
}
.field--name-field-actu-type {
order: 6;
padding-top: 2rem;
font-size: 1.3rem;
}
.field:not(.field--name-field-images) {
@@ -175,20 +183,14 @@
}
a {
color: $black;
grid-column: 1 / span 8;
color: $black;
}
.inline.links {
padding-top: none !important;
list-style: none;
width: fit-content;
align-self: flex-end;
padding-right: 1rem;
a {
display: none;
}
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 %}
<div{{ content_attributes }}>
{{content}}
{# <div class='home_actu_infos'>
{{ content.right }}
</div>
{# {{content}} #}
{# {{ dump(content) }} #}
<div class='actus-teaser-home'>
<div class='home_actu_photo'>
{{ content.left }}
</div> #}
{{ content.field_images }}
</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>
</article>