improved projet page, created projet archives page
This commit is contained in:
@@ -0,0 +1,91 @@
|
|||||||
|
uuid: 682395cd-d791-41ab-ac31-4199911aa22f
|
||||||
|
langcode: fr
|
||||||
|
status: true
|
||||||
|
dependencies:
|
||||||
|
config:
|
||||||
|
- core.entity_view_mode.node.tableau_liste
|
||||||
|
- field.field.node.projet.body
|
||||||
|
- field.field.node.projet.field_artiste_s_invite_s
|
||||||
|
- field.field.node.projet.field_dates
|
||||||
|
- field.field.node.projet.field_fichiers
|
||||||
|
- field.field.node.projet.field_images
|
||||||
|
- field.field.node.projet.field_invite_accompagne_curate_p
|
||||||
|
- field.field.node.projet.field_partenaire_s
|
||||||
|
- field.field.node.projet.field_portage
|
||||||
|
- field.field.node.projet.field_projet_s_lie_s
|
||||||
|
- field.field.node.projet.field_type_de_projet
|
||||||
|
- image.style.large
|
||||||
|
- node.type.projet
|
||||||
|
module:
|
||||||
|
- datetime_range
|
||||||
|
- image_delta_formatter
|
||||||
|
- layout_builder
|
||||||
|
- text
|
||||||
|
- user
|
||||||
|
third_party_settings:
|
||||||
|
layout_builder:
|
||||||
|
enabled: false
|
||||||
|
allow_custom: false
|
||||||
|
id: node.projet.tableau_liste
|
||||||
|
targetEntityType: node
|
||||||
|
bundle: projet
|
||||||
|
mode: tableau_liste
|
||||||
|
content:
|
||||||
|
body:
|
||||||
|
type: text_summary_or_trimmed
|
||||||
|
label: hidden
|
||||||
|
settings:
|
||||||
|
trim_length: 100
|
||||||
|
third_party_settings: { }
|
||||||
|
weight: 4
|
||||||
|
region: content
|
||||||
|
field_artiste_s_invite_s:
|
||||||
|
type: entity_reference_label
|
||||||
|
label: hidden
|
||||||
|
settings:
|
||||||
|
link: false
|
||||||
|
third_party_settings: { }
|
||||||
|
weight: 1
|
||||||
|
region: content
|
||||||
|
field_dates:
|
||||||
|
type: daterange_default
|
||||||
|
label: hidden
|
||||||
|
settings:
|
||||||
|
timezone_override: ''
|
||||||
|
format_type: d_m_y
|
||||||
|
from_to: both
|
||||||
|
separator: '-'
|
||||||
|
third_party_settings: { }
|
||||||
|
weight: 2
|
||||||
|
region: content
|
||||||
|
field_images:
|
||||||
|
type: image_delta_formatter
|
||||||
|
label: hidden
|
||||||
|
settings:
|
||||||
|
deltas:
|
||||||
|
- 1
|
||||||
|
deltas_reversed: false
|
||||||
|
image_link: content
|
||||||
|
image_style: large
|
||||||
|
image_loading:
|
||||||
|
attribute: lazy
|
||||||
|
third_party_settings: { }
|
||||||
|
weight: 0
|
||||||
|
region: content
|
||||||
|
field_type_de_projet:
|
||||||
|
type: entity_reference_label
|
||||||
|
label: hidden
|
||||||
|
settings:
|
||||||
|
link: false
|
||||||
|
third_party_settings: { }
|
||||||
|
weight: 3
|
||||||
|
region: content
|
||||||
|
hidden:
|
||||||
|
field_fichiers: true
|
||||||
|
field_invite_accompagne_curate_p: true
|
||||||
|
field_partenaire_s: true
|
||||||
|
field_portage: true
|
||||||
|
field_projet_s_lie_s: true
|
||||||
|
langcode: true
|
||||||
|
links: true
|
||||||
|
search_api_excerpt: true
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
uuid: ac968411-2b96-4643-b24a-4e77735f024c
|
||||||
|
langcode: fr
|
||||||
|
status: true
|
||||||
|
dependencies:
|
||||||
|
module:
|
||||||
|
- node
|
||||||
|
id: node.tableau_liste
|
||||||
|
label: 'Tableau liste'
|
||||||
|
description: ''
|
||||||
|
targetEntityType: node
|
||||||
|
cache: true
|
||||||
@@ -0,0 +1,187 @@
|
|||||||
|
uuid: ad48e5a0-36b0-4e30-82d1-0644e114c98c
|
||||||
|
langcode: fr
|
||||||
|
status: true
|
||||||
|
dependencies:
|
||||||
|
config:
|
||||||
|
- core.entity_view_mode.node.tableau_liste
|
||||||
|
- node.type.projet
|
||||||
|
- system.menu.main
|
||||||
|
module:
|
||||||
|
- datetime
|
||||||
|
- node
|
||||||
|
- user
|
||||||
|
id: archives
|
||||||
|
label: Archives
|
||||||
|
module: views
|
||||||
|
description: ''
|
||||||
|
tag: ''
|
||||||
|
base_table: node_field_data
|
||||||
|
base_field: nid
|
||||||
|
display:
|
||||||
|
default:
|
||||||
|
id: default
|
||||||
|
display_title: Default
|
||||||
|
display_plugin: default
|
||||||
|
position: 0
|
||||||
|
display_options:
|
||||||
|
title: Archives
|
||||||
|
fields:
|
||||||
|
title:
|
||||||
|
id: title
|
||||||
|
table: node_field_data
|
||||||
|
field: title
|
||||||
|
relationship: none
|
||||||
|
group_type: group
|
||||||
|
admin_label: ''
|
||||||
|
entity_type: node
|
||||||
|
entity_field: title
|
||||||
|
plugin_id: field
|
||||||
|
label: ''
|
||||||
|
exclude: false
|
||||||
|
alter:
|
||||||
|
alter_text: false
|
||||||
|
make_link: false
|
||||||
|
absolute: false
|
||||||
|
word_boundary: false
|
||||||
|
ellipsis: false
|
||||||
|
strip_tags: false
|
||||||
|
trim: false
|
||||||
|
html: false
|
||||||
|
element_type: ''
|
||||||
|
element_class: ''
|
||||||
|
element_label_type: ''
|
||||||
|
element_label_class: ''
|
||||||
|
element_label_colon: true
|
||||||
|
element_wrapper_type: ''
|
||||||
|
element_wrapper_class: ''
|
||||||
|
element_default_classes: true
|
||||||
|
empty: ''
|
||||||
|
hide_empty: false
|
||||||
|
empty_zero: false
|
||||||
|
hide_alter_empty: true
|
||||||
|
click_sort_column: value
|
||||||
|
type: string
|
||||||
|
settings:
|
||||||
|
link_to_entity: true
|
||||||
|
group_column: value
|
||||||
|
group_columns: { }
|
||||||
|
group_rows: true
|
||||||
|
delta_limit: 0
|
||||||
|
delta_offset: 0
|
||||||
|
delta_reversed: false
|
||||||
|
delta_first_last: false
|
||||||
|
multi_type: separator
|
||||||
|
separator: ', '
|
||||||
|
field_api_classes: false
|
||||||
|
pager:
|
||||||
|
type: none
|
||||||
|
options:
|
||||||
|
offset: 0
|
||||||
|
exposed_form:
|
||||||
|
type: basic
|
||||||
|
options:
|
||||||
|
submit_button: Appliquer
|
||||||
|
reset_button: false
|
||||||
|
reset_button_label: Réinitialiser
|
||||||
|
exposed_sorts_label: 'Trier par'
|
||||||
|
expose_sort_order: true
|
||||||
|
sort_asc_label: Asc
|
||||||
|
sort_desc_label: Desc
|
||||||
|
access:
|
||||||
|
type: perm
|
||||||
|
options:
|
||||||
|
perm: 'access content'
|
||||||
|
cache:
|
||||||
|
type: tag
|
||||||
|
options: { }
|
||||||
|
empty: { }
|
||||||
|
sorts:
|
||||||
|
field_dates_value:
|
||||||
|
id: field_dates_value
|
||||||
|
table: node__field_dates
|
||||||
|
field: field_dates_value
|
||||||
|
relationship: none
|
||||||
|
group_type: group
|
||||||
|
admin_label: ''
|
||||||
|
plugin_id: datetime
|
||||||
|
order: DESC
|
||||||
|
expose:
|
||||||
|
label: ''
|
||||||
|
field_identifier: ''
|
||||||
|
exposed: false
|
||||||
|
granularity: second
|
||||||
|
arguments: { }
|
||||||
|
filters:
|
||||||
|
status:
|
||||||
|
id: status
|
||||||
|
table: node_field_data
|
||||||
|
field: status
|
||||||
|
entity_type: node
|
||||||
|
entity_field: status
|
||||||
|
plugin_id: boolean
|
||||||
|
value: '1'
|
||||||
|
group: 1
|
||||||
|
expose:
|
||||||
|
operator: ''
|
||||||
|
type:
|
||||||
|
id: type
|
||||||
|
table: node_field_data
|
||||||
|
field: type
|
||||||
|
entity_type: node
|
||||||
|
entity_field: type
|
||||||
|
plugin_id: bundle
|
||||||
|
value:
|
||||||
|
projet: projet
|
||||||
|
style:
|
||||||
|
type: default
|
||||||
|
row:
|
||||||
|
type: 'entity:node'
|
||||||
|
options:
|
||||||
|
relationship: none
|
||||||
|
view_mode: tableau_liste
|
||||||
|
query:
|
||||||
|
type: views_query
|
||||||
|
options:
|
||||||
|
query_comment: ''
|
||||||
|
disable_sql_rewrite: false
|
||||||
|
distinct: false
|
||||||
|
replica: false
|
||||||
|
query_tags: { }
|
||||||
|
relationships: { }
|
||||||
|
css_class: views-archives-projets
|
||||||
|
header: { }
|
||||||
|
footer: { }
|
||||||
|
display_extenders: { }
|
||||||
|
cache_metadata:
|
||||||
|
max-age: -1
|
||||||
|
contexts:
|
||||||
|
- 'languages:language_content'
|
||||||
|
- 'languages:language_interface'
|
||||||
|
- 'user.node_grants:view'
|
||||||
|
- user.permissions
|
||||||
|
tags: { }
|
||||||
|
page_1:
|
||||||
|
id: page_1
|
||||||
|
display_title: Page
|
||||||
|
display_plugin: page
|
||||||
|
position: 1
|
||||||
|
display_options:
|
||||||
|
display_extenders: { }
|
||||||
|
path: archives
|
||||||
|
menu:
|
||||||
|
type: normal
|
||||||
|
title: archives
|
||||||
|
description: ''
|
||||||
|
weight: -48
|
||||||
|
expanded: false
|
||||||
|
menu_name: main
|
||||||
|
parent: ''
|
||||||
|
context: '0'
|
||||||
|
cache_metadata:
|
||||||
|
max-age: -1
|
||||||
|
contexts:
|
||||||
|
- 'languages:language_content'
|
||||||
|
- 'languages:language_interface'
|
||||||
|
- 'user.node_grants:view'
|
||||||
|
- user.permissions
|
||||||
|
tags: { }
|
||||||
+6
-6
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -55,8 +55,9 @@ gsap.registerPlugin(ScrollTrigger);
|
|||||||
initTitles();
|
initTitles();
|
||||||
initBurgerMenu();
|
initBurgerMenu();
|
||||||
initSmoothScroll();
|
initSmoothScroll();
|
||||||
initColumnScrollSync();
|
initHomeColumnScrollSync();
|
||||||
initFsLightbox();
|
initFsLightbox();
|
||||||
|
initPageFull();
|
||||||
// initVues()
|
// initVues()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -89,7 +90,7 @@ gsap.registerPlugin(ScrollTrigger);
|
|||||||
};
|
};
|
||||||
|
|
||||||
function initTitles() {
|
function initTitles() {
|
||||||
const titles = document.querySelectorAll('#block-leshed-identitedusite>a, article.node-type-projet>header>h2, article.node-type-projet>.cols>.left>h2');
|
const titles = document.querySelectorAll('#block-leshed-identitedusite>a, article.node-type-projet>header>h2, article.node-type-projet>.cols>.left>h2, article.node-type-projet.view-mode-full h2.node-title');
|
||||||
for (const txt of titles) {
|
for (const txt of titles) {
|
||||||
txt.classList.add("variable-title");
|
txt.classList.add("variable-title");
|
||||||
const splitted = Splitting({ target: txt, by: 'chars' });
|
const splitted = Splitting({ target: txt, by: 'chars' });
|
||||||
@@ -100,43 +101,6 @@ gsap.registerPlugin(ScrollTrigger);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const pageTitle = document.querySelector('article.node-type-projet.view-mode-full h2.node-title');
|
|
||||||
console.log('pageTitle', pageTitle);
|
|
||||||
|
|
||||||
|
|
||||||
if (pageTitle) {
|
|
||||||
// needs requestAnimationFrame to get the real titleHeight after splitting
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
|
|
||||||
const initTitleH = pageTitle.offsetHeight;
|
|
||||||
// console.log(`initTitleH: ${initTitleH}`);
|
|
||||||
const titleScaleTarget = 0.4;
|
|
||||||
const end = initTitleH - initTitleH * titleScaleTarget;
|
|
||||||
// console.log(`end: ${end}`);
|
|
||||||
|
|
||||||
gsap_mm.add('(min-width: 768px)', () => {
|
|
||||||
gsap.to(pageTitle, {
|
|
||||||
scale: titleScaleTarget,
|
|
||||||
y: end,
|
|
||||||
ease: 'none',
|
|
||||||
scrollTrigger: {
|
|
||||||
scroller: scroller,
|
|
||||||
start: 0,
|
|
||||||
end: end, // scroll maximum du conteneur (robuste au resize)
|
|
||||||
scrub: true,
|
|
||||||
invalidateOnRefresh: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -301,8 +265,8 @@ gsap.registerPlugin(ScrollTrigger);
|
|||||||
* `main[role="main"]`, pas dans la fenêtre : GSAP utilise donc ce conteneur
|
* `main[role="main"]`, pas dans la fenêtre : GSAP utilise donc ce conteneur
|
||||||
* comme `scroller`.
|
* comme `scroller`.
|
||||||
*/
|
*/
|
||||||
function initColumnScrollSync() {
|
function initHomeColumnScrollSync() {
|
||||||
console.log('initColumnScrollSync');
|
console.log('initHomeColumnScrollSync');
|
||||||
|
|
||||||
const firstColumn = document.querySelector('.layout--twocol-section--50-50 .layout__region--first');
|
const firstColumn = document.querySelector('.layout--twocol-section--50-50 .layout__region--first');
|
||||||
const secondColumn = document.querySelector('.layout--twocol-section--50-50 .layout__region--second');
|
const secondColumn = document.querySelector('.layout--twocol-section--50-50 .layout__region--second');
|
||||||
@@ -344,6 +308,89 @@ gsap.registerPlugin(ScrollTrigger);
|
|||||||
window.addEventListener('load', () => ScrollTrigger.refresh());
|
window.addEventListener('load', () => ScrollTrigger.refresh());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function initPageFull(){
|
||||||
|
console.log('initPageFull');
|
||||||
|
|
||||||
|
// PAGE TITLE SCALING DOWN
|
||||||
|
const pageTitle = document.querySelector('article.node-type-projet.view-mode-full h2.node-title');
|
||||||
|
console.log('pageTitle', pageTitle);
|
||||||
|
|
||||||
|
if (pageTitle) {
|
||||||
|
// needs requestAnimationFrame to get the real titleHeight after splitting
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
|
||||||
|
const initTitleH = pageTitle.offsetHeight;
|
||||||
|
// console.log(`initTitleH: ${initTitleH}`);
|
||||||
|
const titleScaleTarget = 0.4;
|
||||||
|
const end = initTitleH - initTitleH * titleScaleTarget;
|
||||||
|
// console.log(`end: ${end}`);
|
||||||
|
|
||||||
|
gsap_mm.add('(min-width: 768px)', () => {
|
||||||
|
gsap.to(pageTitle, {
|
||||||
|
scale: titleScaleTarget,
|
||||||
|
y: end,
|
||||||
|
ease: 'none',
|
||||||
|
scrollTrigger: {
|
||||||
|
scroller: scroller,
|
||||||
|
start: 0,
|
||||||
|
end: end, // scroll maximum du conteneur (robuste au resize)
|
||||||
|
scrub: true,
|
||||||
|
invalidateOnRefresh: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// BLOCAGE DE LA COLONNE GAUCHE
|
||||||
|
// La gauche défile normalement puis se fige (pin) quand le bas de son
|
||||||
|
// contenu atteint le bas du viewport, pendant que la colonne droite (plus
|
||||||
|
// haute) continue. Piloté en GSAP plutôt qu'en `position: sticky` (qui ne
|
||||||
|
// prend pas dans ce contexte scroller custom + GSAP). `.cols` est en
|
||||||
|
// `align-items: flex-start`, donc .col.left a bien la hauteur de son
|
||||||
|
// contenu (sinon `bottom bottom` tomberait à la fin du scroll).
|
||||||
|
const cols = document.querySelector('article.node-type-projet.view-mode-full .cols');
|
||||||
|
const leftColumn = cols && cols.querySelector('.col.left');
|
||||||
|
if (cols && leftColumn) {
|
||||||
|
// Doit rester identique au scale-down du titre (voir plus haut).
|
||||||
|
const titleScaleTarget = 0.4;
|
||||||
|
// Seuil de scroll (px) après lequel la colonne gauche se fige :
|
||||||
|
// - gauche plus haute que le viewport : quand son bas atteint le bas ;
|
||||||
|
// - gauche plus courte : quand le scale-down du titre est terminé, pour
|
||||||
|
// qu'elle remonte AVEC le titre puis s'arrête (sans disparaître en haut).
|
||||||
|
const leftFreezeStart = () => {
|
||||||
|
const overflow = leftColumn.offsetHeight - scroller.clientHeight;
|
||||||
|
if (overflow > 0) return overflow;
|
||||||
|
return pageTitle ? pageTitle.offsetHeight * (1 - titleScaleTarget) : 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
gsap_mm.add('(min-width: 768px)', () => {
|
||||||
|
// On NE pin PAS (le pin sort l'élément du flux et casse le flex .cols).
|
||||||
|
// On translate la colonne : défilement natif jusqu'à `leftFreezeStart`,
|
||||||
|
// puis contre-translation 1:1 du scroll → elle se fige, tout en restant
|
||||||
|
// un flex-item normal (la colonne droite garde sa place).
|
||||||
|
gsap.fromTo(leftColumn,
|
||||||
|
{ y: 0 },
|
||||||
|
{
|
||||||
|
y: () => (scroller.scrollHeight - scroller.clientHeight) - leftFreezeStart(),
|
||||||
|
ease: 'none',
|
||||||
|
scrollTrigger: {
|
||||||
|
scroller: scroller,
|
||||||
|
start: leftFreezeStart, // px de scroll où la gauche se fige
|
||||||
|
end: 'max',
|
||||||
|
scrub: true,
|
||||||
|
invalidateOnRefresh: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function initFsLightbox(){
|
function initFsLightbox(){
|
||||||
console.log('initFsLightbox');
|
console.log('initFsLightbox');
|
||||||
// console.log(window.FsLightbox);
|
// console.log(window.FsLightbox);
|
||||||
|
|||||||
@@ -205,38 +205,23 @@ header[role="banner"]{
|
|||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// _____ _____ __ ____ ___ _ ____
|
@mixin projetListe{
|
||||||
// |_ _/ _ \ \ / / / ___/ _ \| | / ___|
|
|
||||||
// | || | | \ \ /\ / / | | | | | | | \___ \
|
|
||||||
// | || |_| |\ V V / | |__| |_| | |___ ___) |
|
|
||||||
// |_| \___/ \_/\_/ \____\___/|_____|____/
|
|
||||||
|
|
||||||
div.layout.layout--twocol-section--50-50{
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
// Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
|
|
||||||
// même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
|
|
||||||
// flex-start = chaque colonne prend la hauteur de son contenu.
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
column-gap: $colsgap;
|
|
||||||
div.layout__region{
|
|
||||||
max-width: calc(50% - $colsgap / 2);
|
|
||||||
flex: 1 0 calc(50% - $colsgap / 2);
|
|
||||||
.views-row{
|
|
||||||
// border: 1px solid red;
|
|
||||||
// box-sizing: border-box;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
max-width: 100%;
|
|
||||||
article.node-type-projet{
|
|
||||||
>header{
|
>header{
|
||||||
>h2{
|
>h2{
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>div{
|
|
||||||
// margin-top: 3em;
|
|
||||||
}
|
|
||||||
// only with images, title overlap the image
|
// only with images, title overlap the image
|
||||||
|
div.field_artiste_s_invite_s.field-items.multiple{
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: row;
|
||||||
|
.field-item{
|
||||||
|
display: inline-block;
|
||||||
|
&:not(:last-of-type):after{
|
||||||
|
content: ", ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
&.has-image{
|
&.has-image{
|
||||||
>header{
|
>header{
|
||||||
>h2{
|
>h2{
|
||||||
@@ -262,6 +247,32 @@ div.layout.layout--twocol-section--50-50{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// _____ _____ __ ____ ___ _ ____
|
||||||
|
// |_ _/ _ \ \ / / / ___/ _ \| | / ___|
|
||||||
|
// | || | | \ \ /\ / / | | | | | | | \___ \
|
||||||
|
// | || |_| |\ V V / | |__| |_| | |___ ___) |
|
||||||
|
// |_| \___/ \_/\_/ \____\___/|_____|____/
|
||||||
|
|
||||||
|
div.layout.layout--twocol-section--50-50{
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
// Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
|
||||||
|
// même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
|
||||||
|
// flex-start = chaque colonne prend la hauteur de son contenu.
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
column-gap: $colsgap;
|
||||||
|
div.layout__region{
|
||||||
|
max-width: calc(50% - $colsgap / 2);
|
||||||
|
flex: 1 0 calc(50% - $colsgap / 2);
|
||||||
|
.views-row{
|
||||||
|
// border: 1px solid red;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
max-width: 100%;
|
||||||
|
article.node-type-projet{
|
||||||
|
@include projetListe();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -279,12 +290,15 @@ article.node-type-projet.view-mode-full{
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: $colsgap;
|
gap: $colsgap;
|
||||||
// column-gap: 2em;
|
align-items: flex-start;
|
||||||
div.col{
|
div.col{
|
||||||
flex:0 0 calc(50% - $colsgap / 2);
|
flex:0 0 calc(50% - $colsgap / 2);
|
||||||
max-width: calc(50% - $colsgap / 2);
|
max-width: calc(50% - $colsgap / 2);
|
||||||
|
|
||||||
&.left{
|
&.left{
|
||||||
|
z-index: 10;
|
||||||
|
// padding-bottom: 5em;
|
||||||
|
// box-sizing: border-box;
|
||||||
>h2.node-title{
|
>h2.node-title{
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 12em;
|
font-size: 12em;
|
||||||
@@ -313,6 +327,11 @@ article.node-type-projet.view-mode-full{
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
>div.spacer{
|
||||||
|
display: block;
|
||||||
|
height: 5em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.right{
|
&.right{
|
||||||
// Étire .field_images sur toute la hauteur de la colonne (= colonne la
|
// Étire .field_images sur toute la hauteur de la colonne (= colonne la
|
||||||
@@ -389,3 +408,29 @@ article.node-type-projet.view-mode-full{
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// __ ___ _ _ _ ____ _ _
|
||||||
|
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | _ \ _ __ ___ (_) ___| |_
|
||||||
|
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __|
|
||||||
|
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | __/| | | (_) | | __/ |_
|
||||||
|
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__|
|
||||||
|
// |__/
|
||||||
|
div.views-archives-projets{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2em;
|
||||||
|
gap: $colsgap;
|
||||||
|
div.views-row{
|
||||||
|
flex: 1 0 calc(25% - $colsgap);
|
||||||
|
width: calc(25% - $colsgap);
|
||||||
|
article.node-type-projet.view-mode-tableau_liste{
|
||||||
|
|
||||||
|
@include projetListe();
|
||||||
|
>header{
|
||||||
|
>h2{
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -84,13 +84,13 @@ function leshed_preprocess_node(&$variables) {
|
|||||||
|
|
||||||
$variables["attributes"]['class'][] = "view-mode-{$variables['view_mode']}";
|
$variables["attributes"]['class'][] = "view-mode-{$variables['view_mode']}";
|
||||||
|
|
||||||
if ($variables['view_mode'] === "teaser") {
|
// if ($variables['view_mode'] === "teaser") {
|
||||||
/** @var \Drupal\file\Plugin\\Field\FieldType\FileFieldItemList $field_images */
|
/** @var \Drupal\file\Plugin\\Field\FieldType\FileFieldItemList $field_images */
|
||||||
$field_images = $node->get('field_images');
|
$field_images = $node->get('field_images');
|
||||||
if (!$field_images->isEmpty()) {
|
if (!$field_images->isEmpty()) {
|
||||||
$variables["attributes"]['class'][] = "has-image";
|
$variables["attributes"]['class'][] = "has-image";
|
||||||
}
|
}
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -70,6 +70,7 @@
|
|||||||
{{ label }}
|
{{ label }}
|
||||||
</h2>
|
</h2>
|
||||||
{{ content|without('field_images') }}
|
{{ content|without('field_images') }}
|
||||||
|
<div class="spacer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col right">
|
<div class="col right">
|
||||||
{{ content.field_images }}
|
{{ content.field_images }}
|
||||||
|
|||||||
@@ -0,0 +1,89 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation to display a node.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - node: The node entity with limited access to object properties and methods.
|
||||||
|
* Only method names starting with "get", "has", or "is" and a few common
|
||||||
|
* methods such as "id", "label", and "bundle" are available. For example:
|
||||||
|
* - node.getCreatedTime() will return the node creation timestamp.
|
||||||
|
* - node.hasField('field_example') returns TRUE if the node bundle includes
|
||||||
|
* field_example. (This does not indicate the presence of a value in this
|
||||||
|
* field.)
|
||||||
|
* - node.isPublished() will return whether the node is published or not.
|
||||||
|
* Calling other methods, such as node.delete(), will result in an exception.
|
||||||
|
* See \Drupal\node\Entity\Node for a full list of public properties and
|
||||||
|
* methods for the node object.
|
||||||
|
* - label: (optional) The title of the node.
|
||||||
|
* - content: All node items. Use {{ content }} to print them all,
|
||||||
|
* or print a subset such as {{ content.field_example }}. Use
|
||||||
|
* {{ content|without('field_example') }} to temporarily suppress the printing
|
||||||
|
* of a given child element.
|
||||||
|
* - author_picture: The node author user entity, rendered using the "compact"
|
||||||
|
* view mode.
|
||||||
|
* - metadata: Metadata for this node.
|
||||||
|
* - date: (optional) Themed creation date field.
|
||||||
|
* - author_name: (optional) Themed author name field.
|
||||||
|
* - url: Direct URL of the current node.
|
||||||
|
* - display_submitted: Whether submission information should be displayed.
|
||||||
|
* - attributes: HTML attributes for the containing element.
|
||||||
|
* The attributes.class element may contain one or more of the following
|
||||||
|
* classes:
|
||||||
|
* - node: The current template type (also known as a "theming hook").
|
||||||
|
* - node--type-[type]: The current node type. For example, if the node is an
|
||||||
|
* "Article" it would result in "node--type-article". Note that the machine
|
||||||
|
* name will often be in a short form of the human readable label.
|
||||||
|
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
|
||||||
|
* teaser would result in: "node--view-mode-teaser", and
|
||||||
|
* full: "node--view-mode-full".
|
||||||
|
* The following are controlled through the node publishing options.
|
||||||
|
* - node--promoted: Appears on nodes promoted to the front page.
|
||||||
|
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
|
||||||
|
* teaser listings.
|
||||||
|
* - node--unpublished: Appears on unpublished nodes visible only to site
|
||||||
|
* admins.
|
||||||
|
* - title_attributes: Same as attributes, except applied to the main title
|
||||||
|
* tag that appears in the template.
|
||||||
|
* - content_attributes: Same as attributes, except applied to the main
|
||||||
|
* content tag that appears in the template.
|
||||||
|
* - author_attributes: Same as attributes, except applied to the author of
|
||||||
|
* the node tag that appears in the template.
|
||||||
|
* - title_prefix: Additional output populated by modules, intended to be
|
||||||
|
* displayed in front of the main title tag that appears in the template.
|
||||||
|
* - title_suffix: Additional output populated by modules, intended to be
|
||||||
|
* displayed after the main title tag that appears in the template.
|
||||||
|
* - view_mode: View mode; for example, "teaser" or "full".
|
||||||
|
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
|
||||||
|
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_node()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
|
||||||
|
{#
|
||||||
|
{% if content.field_images.getvalue|length %}
|
||||||
|
{% set attributes = attributes.addClass('has-image') %}
|
||||||
|
{% endif %} #}
|
||||||
|
|
||||||
|
<article{{ attributes }}>
|
||||||
|
|
||||||
|
{# {{ title_prefix }} #}
|
||||||
|
{# {% if label and not page %} #}
|
||||||
|
<header>
|
||||||
|
<h2{{ title_attributes }}>
|
||||||
|
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
|
||||||
|
</h2>
|
||||||
|
{{ content.field_images }}
|
||||||
|
</header>
|
||||||
|
{# {% endif %} #}
|
||||||
|
{# {{ title_suffix }} #}
|
||||||
|
|
||||||
|
|
||||||
|
<div{{ content_attributes }}>
|
||||||
|
{{ content|without('field_images') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
Reference in New Issue
Block a user