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

node actu page

Browse Source
This commit is contained in:
ouidade
2024-07-03 15:53:06 +02:00
parent 766099b2b4
commit 869db4c869
4 changed files with 174 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/dist/css/bundle.css
Vendored
+81
View File
@@ -3220,6 +3220,87 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
display: none;
}
.node-type-actualite {
width: 100vw;
}
.node-type-actualite .entete_actu {
display: flex;
flex-direction: row;
width: 75%;
margin: auto;
align-items: center;
}
.node-type-actualite .entete_actu .image-actualite {
width: 60%;
height: 100%;
}
.node-type-actualite .entete_actu .image-actualite img {
width: 100%;
height: auto;
object-fit: contain;
}
.node-type-actualite .entete_actu .infos-content {
position: relative;
display: flex;
flex-direction: column;
border: solid #fdc300 1px;
background-color: rgb(255, 255, 255);
padding: 1rem;
height: 350px;
width: 30%;
position: relative;
right: 5%;
margin-bottom: 30px;
}
.node-type-actualite .entete_actu .infos-content h2 {
order: 2;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
padding: 0;
}
.node-type-actualite .entete_actu .infos-content .field--name-field-sous-titre {
order: 3;
font-size: 1.3rem;
}
.node-type-actualite .entete_actu .infos-content .field--name-field-date {
order: 4;
font-weight: 900;
padding-bottom: 1rem;
}
.node-type-actualite .entete_actu .infos-content .field--name-field-type-d-actualite {
order: 1;
text-transform: uppercase;
font-size: 1.2rem;
}
.node-type-actualite .entete_actu .infos-content .field--name-field-site {
order: 5;
background-color: rgb(153, 147, 174);
color: white;
border-radius: 50px;
width: fit-content;
padding: 0.2rem 0.9rem;
}
.node-type-actualite .entete_actu .infos-content .field--name-field-site .field__item {
display: inline;
color: white;
font-weight: 900;
font-size: 0.8rem;
vertical-align: top;
}
.node-type-actualite .entete_actu .infos-content ul.links {
order: 6;
display: none;
}
.node-type-actualite .body-content .summary-content {
width: 60%;
margin: auto;
}
.node-type-actualite .body-content .links-content {
width: 15%;
margin-left: 15%;
}
.page-mon-espace-de-travail .layout-content {
width: 50%;
margin-left: 8%;
web/themes/custom/reha/scss/pages/node-actualite.scss
+76 -41
View File
@@ -1,49 +1,84 @@
.page-node-site{
.node-type-actualite{
width: 70%;
margin: auto;
display: grid;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(2, auto);
padding-top: 3rem;
.image-actualite{
grid-row: 1;
grid-column: 1 /span 2;
margin-right: 2rem;
img{
height: fit-content;
// width: auto;
width: 100vw;
.entete_actu{
display: flex;
flex-direction: row;
width: 75%;
margin: auto;
align-items: center;
.image-actualite{
width: 60%;
height: 100%;
img{
width: 100%;
height: auto;
object-fit: contain;
}
}
}
.infos-content{
grid-row: 1;
grid-column: 3 /span 4;
border: solid $yellow-puca 1px;
background-color: $white-button;
padding: 1rem;
.field--name-field-type-de-actualite{
text-transform: uppercase;
font-size: 1.5rem;
}
.field--name-field-sous-titre{
font-size: 2rem;
}
.field--name-field-auteur{
font-weight: 800;
font-size: 1.4rem;
.infos-content{
position: relative;
display: flex;
flex-direction: column;
border: solid $yellow-puca 1px;
background-color: $white-button;
padding: 1rem;
height: 350px;
width: 30%;
position: relative;
right: 5%;
margin-bottom: 30px;
h2{
order: 2;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
padding: 0;;
}
.field--name-field-sous-titre {
order: 3;
font-size: 1.3rem;
}
.field--name-field-date{
order: 4;
font-weight: 900;
padding-bottom: 1rem;
}
.field--name-field-type-d-actualite{
order: 1;
text-transform: uppercase;
font-size: 1.2rem;
}
.field--name-field-site{
order: 5;
background-color: $gris-violet;
color: white;
border-radius: 50px;
width: fit-content;
padding: 0.2rem 0.9rem;
.field__item{
display: inline;
color: white;
font-weight: 900;
font-size: 0.8rem;
vertical-align: top;
}
}
ul.links{
order: 6;
display: none;
}
}
}
.body-content {
grid-row: 2;
grid-column: 1 /span 3;
width: 100%;
margin-top: 2rem;
.field--name-field-fichiers{
width: fit-content;
.summary-content{
width: 60%;
margin: auto;
}
.links-content{
width: 15%;
margin-left: 15%;
}
}
}
}
web/themes/custom/reha/scss/reha.scss
+1
View File
@@ -41,4 +41,5 @@
@import "pages/ressources";
@import "pages/node-ressource";
@import "pages/actualites";
@import "pages/node-actualite";
@import "pages/page-mon-espace-de-travail";
web/themes/custom/reha/templates/node--actualite.html.twig
+16 -18
View File
@@ -72,27 +72,25 @@
{{ title_prefix }}
{# Afficher le champ image séparément #}
{% if image_field_content %}
<div class="image-actualite">
{{ image_field_content }}
</div>
{% endif %}
{# Envelopper les autres champs dans des divs distinctes #}
<div class="infos-content">
{% if label and not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
<div class="entete_actu">
{% if image_field_content %}
<div class="image-actualite">
{{ image_field_content }}
</div>
{% endif %}
{% for field_name, field_content in filtered_content %}
{{ field_content }}
{% endfor %}
</div>
<div class="infos-content">
{% if label and not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{# Ajouter une nouvelle div pour le champ body et fichiers #}
{% for field_name, field_content in filtered_content %}
{{ field_content }}
{% endfor %}
</div>
</div>
{% if body_field_content is defined or files_field_content is defined %}
<div class="body-content">
{% if body_field_content is defined %}