34 Commits

Author SHA1 Message Date
50de82d79c Merge branch 'master' of gitea-figureslibres.io:bachir/drupal-quartiersdedemain into stage 2025-11-28 10:30:34 +01:00
3eb54aae88 badge laureat css 2025-11-28 10:29:46 +01:00
c3874cfee6 Merge branch 'master' of gitea-figureslibres.io:bachir/drupal-quartiersdedemain into stage 2025-11-28 10:24:56 +01:00
1e02cc5587 badge laureat twig et css 2025-11-28 10:22:43 +01:00
d58970f7d7 Merge branch 'master' into stage 2025-11-27 22:21:04 +01:00
bdeacad925 Home node actu cliquable pur toggle 2025-11-27 22:11:33 +01:00
ecb40418aa En savoir + clicable entièrement 2025-11-27 22:11:33 +01:00
dc661c6139 padding buton liens home 2025-11-27 22:11:33 +01:00
3641c9feff margin et padding bottom top ressources 2025-11-27 22:09:47 +01:00
45d6f1ba04 Home node actu cliquable pur toggle 2025-11-27 22:09:47 +01:00
b68b573e94 En savoir + clicable entièrement 2025-11-27 22:09:47 +01:00
7251762137 padding buton liens home 2025-11-27 22:09:47 +01:00
fb590bfee2 poid videos 2025-11-27 22:01:28 +01:00
eab3cabde3 ponderation sites 2025-11-27 21:54:22 +01:00
c0ccf25959 projets finalistes 2025-11-27 21:42:36 +01:00
a85122bbc7 Sur le même site de projet 2025-11-27 21:40:25 +01:00
21e92aee1d lauréat 2025-11-27 21:39:11 +01:00
a26f9140ce intro ressources 2025-11-27 21:34:30 +01:00
c94ec553eb interactivité carte ressource 2025-11-27 19:04:38 +01:00
7ba0a0ec05 js timelin et header séparé 2025-11-27 18:43:33 +01:00
e3a31427d3 js lightbox séparé 2025-11-27 18:11:14 +01:00
7a8abd9b5e taille et légende img lightbox 2025-11-27 17:42:02 +01:00
fd8584a9a6 change class mission photo 2025-11-27 17:15:40 +01:00
2cb4716015 header right langue switcher hidden 2025-11-27 17:04:29 +01:00
2666e046a9 enlever 2 dernière formes bleu dan shome 2025-11-27 16:57:47 +01:00
d947fa7aab desactive 2e partie enjeux sur home 2025-11-27 16:23:25 +01:00
15778d737d fleche ouverture presentation equipe 2025-11-25 19:02:26 +01:00
9c873c3b67 fleche ouverture presentation equipe 2025-11-25 18:58:06 +01:00
d7026f45e7 fleche ouverture presentation equipe 2025-11-25 18:55:24 +01:00
6272ac893c homogénéisation link ressources 2025-11-25 18:42:45 +01:00
fabad3ca5b bug js 2025-11-25 17:42:30 +01:00
6715b83031 bug js 2025-11-25 17:39:58 +01:00
c5748a9a30 webpack 2025-11-25 17:35:52 +01:00
3bfcc5e288 webpack 2025-11-25 17:26:05 +01:00
44 changed files with 1847 additions and 1118 deletions

View File

@@ -0,0 +1,17 @@
uuid: 480abc89-4c77-4260-a432-043c122cc0de
langcode: fr
status: true
dependencies: { }
id: intro_ressources
label: 'Intro ressources'
token: true
context:
show_warning: true
group:
language: true
fallback:
language: ''
menu:
path: /edit/ressources
weight: 0
description: ''

View File

@@ -0,0 +1,24 @@
uuid: dcde5806-938b-46b8-80f5-ce7e8b065dfc
langcode: fr
status: true
dependencies:
config:
- config_pages.type.intro_ressources
- field.field.config_pages.intro_ressources.field_intro
module:
- text
id: config_pages.intro_ressources.default
targetEntityType: config_pages
bundle: intro_ressources
mode: default
content:
field_intro:
type: text_textarea
weight: 0
region: content
settings:
rows: 5
placeholder: ''
third_party_settings: { }
hidden:
label: true

View File

@@ -10,6 +10,7 @@ dependencies:
- field.field.node.ressource.field_images
- field.field.node.ressource.field_liens
- field.field.node.ressource.field_mots_clefs
- field.field.node.ressource.field_poid
- field.field.node.ressource.field_site
- field.field.node.ressource.field_sous_titre
- field.field.node.ressource.field_tous_les_sites
@@ -34,6 +35,7 @@ third_party_settings:
- field_author
- field_type_de_ressource
- field_mots_clefs
- field_poid
- status
- promote
- path
@@ -183,6 +185,13 @@ content:
size: 60
placeholder: ''
third_party_settings: { }
field_poid:
type: number
weight: 41
region: content
settings:
placeholder: ''
third_party_settings: { }
field_site:
type: entity_reference_autocomplete
weight: 45
@@ -222,20 +231,20 @@ content:
third_party_settings: { }
path:
type: path
weight: 43
weight: 44
region: content
settings: { }
third_party_settings: { }
promote:
type: boolean_checkbox
weight: 42
weight: 43
region: content
settings:
display_label: true
third_party_settings: { }
status:
type: boolean_checkbox
weight: 41
weight: 42
region: content
settings:
display_label: true

View File

@@ -0,0 +1,23 @@
uuid: d7ddf5cc-556b-4b0e-9b4d-be805337b385
langcode: fr
status: true
dependencies:
config:
- config_pages.type.intro_ressources
- field.field.config_pages.intro_ressources.field_intro
module:
- text
id: config_pages.intro_ressources.default
targetEntityType: config_pages
bundle: intro_ressources
mode: default
content:
field_intro:
type: text_default
label: visually_hidden
settings: { }
third_party_settings: { }
weight: 0
region: content
hidden:
search_api_excerpt: true

View File

@@ -10,6 +10,7 @@ dependencies:
- field.field.node.ressource.field_images
- field.field.node.ressource.field_liens
- field.field.node.ressource.field_mots_clefs
- field.field.node.ressource.field_poid
- field.field.node.ressource.field_site
- field.field.node.ressource.field_sous_titre
- field.field.node.ressource.field_tous_les_sites
@@ -93,6 +94,15 @@ content:
third_party_settings: { }
weight: 103
region: content
field_poid:
type: number_integer
label: above
settings:
thousand_separator: ''
prefix_suffix: true
third_party_settings: { }
weight: 108
region: content
field_site:
type: entity_reference_label
label: visually_hidden

View File

@@ -11,6 +11,7 @@ dependencies:
- field.field.node.ressource.field_images
- field.field.node.ressource.field_liens
- field.field.node.ressource.field_mots_clefs
- field.field.node.ressource.field_poid
- field.field.node.ressource.field_site
- field.field.node.ressource.field_sous_titre
- field.field.node.ressource.field_tous_les_sites
@@ -79,6 +80,7 @@ hidden:
field_date_ressource: true
field_documents: true
field_mots_clefs: true
field_poid: true
field_sous_titre: true
field_tous_les_sites: true
field_type_de_ressource: true

View File

@@ -11,6 +11,7 @@ dependencies:
- field.field.node.ressource.field_images
- field.field.node.ressource.field_liens
- field.field.node.ressource.field_mots_clefs
- field.field.node.ressource.field_poid
- field.field.node.ressource.field_site
- field.field.node.ressource.field_sous_titre
- field.field.node.ressource.field_tous_les_sites
@@ -67,11 +68,11 @@ content:
label: visually_hidden
settings:
deltas: '0'
image_style: wide
deltas_reversed: false
image_link: content
image_style: wide
image_loading:
attribute: lazy
deltas_reversed: 0
third_party_settings: { }
weight: 0
region: content
@@ -122,6 +123,7 @@ content:
region: content
hidden:
created: true
field_poid: true
field_tous_les_sites: true
field_type_de_ressource: true
field_video: true

View File

@@ -0,0 +1,24 @@
uuid: 8b9c2799-90e2-4409-93fd-a087cf0b33d3
langcode: fr
status: true
dependencies:
config:
- config_pages.type.intro_ressources
- field.storage.config_pages.field_intro
- filter.format.wysiwyg
module:
- text
id: config_pages.intro_ressources.field_intro
field_name: field_intro
entity_type: config_pages
bundle: intro_ressources
label: Intro
description: ''
required: false
translatable: false
default_value: { }
default_value_callback: ''
settings:
allowed_formats:
- wysiwyg
field_type: text_long

View File

@@ -0,0 +1,25 @@
uuid: 9f3c0cbe-5562-4660-b4bc-fc9787491962
langcode: fr
status: true
dependencies:
config:
- field.storage.node.field_poid
- node.type.ressource
id: node.ressource.field_poid
field_name: field_poid
entity_type: node
bundle: ressource
label: Poid
description: ''
required: false
translatable: false
default_value:
-
value: 0
default_value_callback: ''
settings:
min: -20
max: 20
prefix: ''
suffix: ''
field_type: integer

View File

@@ -290,7 +290,7 @@ variant_settings:
css_styles: ''
0e71ab04-a5cc-4eca-a7c2-a18fc9d0b7e1:
id: 'entity_field:node:field_projets_lie'
label: 'Les projets sélectionnés'
label: 'Projets finalistes'
label_display: visible
provider: ctools_block
context_mapping:

View File

@@ -104,3 +104,212 @@ blocks:
height: '444'
caption: null
caption_format: null
menus:
-
menu_name: admin
title: 'Intro ressources'
parent: system.admin_content
uri: 'internal:/edit/ressources'
link_title: ''
description: null
enabled: true
expanded: false
weight: 0
langcode: fr
uuid: e28fb66f-21c1-42d3-9d85-ee19e1a28d14
options:
attributes:
class:
- ''
-
menu_name: entete
title: Partenaires
parent: null
uri: 'internal:/partenaires'
link_title: ''
description: null
enabled: true
expanded: false
weight: -46
langcode: fr
uuid: 608ba43c-1931-4ee1-9b6c-bc3637f2a0dc
options:
attributes:
class:
- ''
-
menu_name: entete
title: Contacts
parent: null
uri: 'entity:node/2'
link_title: ''
description: null
enabled: true
expanded: false
weight: -45
langcode: fr
uuid: efdff74d-685c-4f20-8e16-4351cd4f929c
options:
attributes:
class:
- ''
-
menu_name: entete
title: 'Mentions légales'
parent: null
uri: 'entity:node/1'
link_title: ''
description: null
enabled: false
expanded: false
weight: -44
langcode: fr
uuid: 1b21428d-c068-48b3-8cb6-ba3c1113bb59
options:
attributes:
class:
- ''
-
menu_name: entete
title: Présentation
parent: null
uri: 'entity:node/6'
link_title: ''
description: null
enabled: false
expanded: false
weight: -50
langcode: fr
uuid: a833cd74-00fa-46a0-950b-aedc100c908f
options:
attributes:
class:
- ''
-
menu_name: entete
title: 'La consultation'
parent: null
uri: 'entity:node/7'
link_title: ''
description: null
enabled: true
expanded: true
weight: -49
langcode: fr
uuid: 1415f75a-0c82-4d29-9b67-8f0eff863069
options:
attributes:
class:
- ''
-
menu_name: entete
title: 'les 10 Sites'
parent: null
uri: 'internal:/lessites'
link_title: ''
description: null
enabled: true
expanded: false
weight: -48
langcode: fr
uuid: 0c6fa9f3-65f6-403d-a357-6338c532b95e
options:
attributes:
class:
- ''
-
menu_name: entete
title: 'Pour candidater'
parent: null
uri: 'entity:node/44'
link_title: ''
description: null
enabled: false
expanded: false
weight: -47
langcode: fr
uuid: e466f110-e5f7-4a38-bd20-b1be732d9179
options:
attributes:
class:
- ''
-
menu_name: entete
title: 'Les 30 projets'
parent: null
uri: 'internal:/lesprojets'
link_title: ''
description: null
enabled: true
expanded: true
weight: -48
langcode: fr
uuid: da75c27c-9a00-4f16-980a-10f5467bf0ac
options:
attributes:
class:
- ''
-
menu_name: footer
title: 'Mentions légales'
parent: null
uri: 'entity:node/1'
link_title: ''
description: null
enabled: true
expanded: false
weight: -46
langcode: fr
uuid: d95fd71b-4146-4328-b5b5-1e5c66919596
options:
attributes:
class:
- ''
-
menu_name: footer
title: Contacts
parent: null
uri: 'entity:node/2'
link_title: ''
description: null
enabled: true
expanded: false
weight: -47
langcode: fr
uuid: 55c4cb76-62cf-4d80-ad13-84481430b74d
options:
attributes:
class:
- ''
-
menu_name: footer
title: Accueil
parent: null
uri: 'internal:/'
link_title: ''
description: null
enabled: true
expanded: false
weight: -50
langcode: fr
uuid: c1f56a2d-5e1f-492a-92a5-4902ba4eb343
options:
attributes:
class:
- ''
-
menu_name: footer
title: 'La consultation'
parent: null
uri: 'entity:node/7'
link_title: ''
description: null
enabled: true
expanded: false
weight: -49
langcode: fr
uuid: 5e39cdc7-1bf4-4684-869b-87ce57b7dae4
options:
attributes:
class:
- ''

View File

@@ -73,6 +73,7 @@ permissions:
- 'edit deroulement config page entity'
- 'edit diaporama_home config page entity'
- 'edit intro_partenaires config page entity'
- 'edit intro_ressources config page entity'
- 'execute entity:save_action menu_link_content'
- 'execute entity:save_action node'
- 'execute entity:save_action taxonomy_term'

View File

@@ -18,3 +18,4 @@ permissions:
- 'view deroulement config page entity'
- 'view diaporama_home config page entity'
- 'view intro_partenaires config page entity'
- 'view intro_ressources config page entity'

View File

@@ -20,3 +20,4 @@ permissions:
- 'view deroulement config page entity'
- 'view diaporama_home config page entity'
- 'view intro_partenaires config page entity'
- 'view intro_ressources config page entity'

View File

@@ -59,6 +59,7 @@ permissions:
- 'edit deroulement config page entity'
- 'edit diaporama_home config page entity'
- 'edit intro_partenaires config page entity'
- 'edit intro_ressources config page entity'
- 'execute entity:save_action node'
- 'execute node_make_sticky_action node'
- 'execute node_make_unsticky_action node'

View File

@@ -3,6 +3,7 @@ langcode: fr
status: true
dependencies:
config:
- field.storage.node.field_laureats
- field.storage.node.field_nom_de_l_equipe
- node.type.projet
module:
@@ -23,8 +24,73 @@ display:
display_plugin: default
position: 0
display_options:
title: 'Les autres projets sélectionnés'
title: 'Sur le même site de projet'
fields:
field_laureats:
id: field_laureats
table: node__field_laureats
field: field_laureats
relationship: none
group_type: group
admin_label: ''
plugin_id: field
label: ''
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
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: boolean
settings:
format: custom
format_custom_false: ''
format_custom_true: Lauréat
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
title:
id: title
table: node_field_data
@@ -368,6 +434,7 @@ display:
- 'user.node_grants:view'
- user.permissions
tags:
- 'config:field.storage.node.field_laureats'
- 'config:field.storage.node.field_nom_de_l_equipe'
block_1:
id: block_1
@@ -409,4 +476,5 @@ display:
- 'user.node_grants:view'
- user.permissions
tags:
- 'config:field.storage.node.field_laureats'
- 'config:field.storage.node.field_nom_de_l_equipe'

View File

@@ -19,6 +19,8 @@ dependencies:
- system.menu.entete
- taxonomy.vocabulary.mots_clefs
- taxonomy.vocabulary.type_de_ressources
content:
- 'config_pages:intro_ressources:85c7dc7e-0448-4073-9c7e-58ab7a809374'
module:
- datetime
- formatter_suite
@@ -1426,6 +1428,33 @@ display:
label: ''
field_identifier: ''
exposed: false
field_poid_value:
id: field_poid_value
table: node__field_poid
field: field_poid_value
relationship: none
group_type: group
admin_label: ''
plugin_id: standard
order: ASC
expose:
label: ''
field_identifier: ''
exposed: false
field_date_ressource_value:
id: field_date_ressource_value
table: node__field_date_ressource
field: field_date_ressource_value
relationship: none
group_type: group
admin_label: ''
plugin_id: datetime
order: ASC
expose:
label: ''
field_identifier: ''
exposed: false
granularity: second
arguments: { }
filters:
status:
@@ -1744,7 +1773,20 @@ display:
admin_label: 'field_type_de_ressource : Terme de taxonomie'
plugin_id: standard
required: true
header: { }
header:
entity_config_pages:
id: entity_config_pages
table: views
field: entity_config_pages
relationship: none
group_type: group
admin_label: ''
plugin_id: entity
empty: false
target: 85c7dc7e-0448-4073-9c7e-58ab7a809374
view_mode: default
tokenize: true
bypass_access: false
footer: { }
display_extenders: { }
cache_metadata:

View File

@@ -494,6 +494,19 @@ display:
options: { }
empty: { }
sorts:
field_poid_value:
id: field_poid_value
table: node__field_poid
field: field_poid_value
relationship: none
group_type: group
admin_label: ''
plugin_id: standard
order: ASC
expose:
label: ''
field_identifier: ''
exposed: false
created:
id: created
table: node_field_data
@@ -510,19 +523,6 @@ display:
field_identifier: ''
exposed: false
granularity: second
field_poid_value:
id: field_poid_value
table: node__field_poid
field: field_poid_value
relationship: none
group_type: group
admin_label: ''
plugin_id: standard
order: DESC
expose:
label: ''
field_identifier: ''
exposed: false
arguments: { }
filters:
status:

View File

@@ -10,6 +10,8 @@ const isLessitesPage = document.querySelector('div#lessites') !== null;
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
const isCandidaturePage = document.querySelector('main#pour_candidater') !== null;
const isNodeTypeProjetPage = document.body.classList.contains('node-type-projet');
const isNodeTypeRessourcePage = document.body.classList.contains('node-type-ressource');
// Identifier le cercle de la page courante pour node-type-site
let currentPageCircle = null;
@@ -51,6 +53,29 @@ if (isNodeTypeProjetPage && svgElement) {
}
}
// Identifier le cercle du SITE lié quand on est sur une page node-type-ressource
if (isNodeTypeRessourcePage && svgElement) {
// On récupère le nom du site dans le bloc "Site(s)"
const siteField = document.querySelector('.field_field_site');
if (siteField && siteField.children[1]) {
// children[0] = label "Site(s)", children[1] = wrapper du nom
const siteName = siteField.children[1].textContent.trim(); // ex : "Corbeil-Essonnes, quartier des Tarterêts"
// On cherche le cercle dont le data-content contient ce nom
const correspondingCircle = Array.from(svgElement.querySelectorAll('circle.site-link')).find(circle => {
const content = circle.getAttribute('data-content') || '';
return content.includes(siteName);
});
if (correspondingCircle) {
currentPageCircle = correspondingCircle;
currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle du site lié
}
}
}
// Fonction pour afficher le popup
function showPopup(content) {

View File

@@ -72,212 +72,6 @@ var __webpack_exports__ = {};
} (Drupal));
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////
@@ -353,99 +147,11 @@ document.addEventListener('DOMContentLoaded', function() {
//////////////////////// end script smooth apparition des textes /////////////////
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
//////////// start slideshow images home //////////////////////////
$(document).ready(function(){
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome.length) {
@@ -516,106 +222,6 @@ document.addEventListener('DOMContentLoaded', function() {
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images à ouvrir dans la lightbox
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
let currentIndex;
// Création de la lightbox
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
// Image affichée dans la lightbox
const img = document.createElement('img');
img.classList.add('lightbox-content');
lightbox.appendChild(img);
// Légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Bouton de fermeture
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);
// Bouton précédent avec image
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
const prevImg = document.createElement('img');
prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
prevImg.alt = 'Précédent';
prevBtn.appendChild(prevImg);
lightbox.appendChild(prevBtn);
// Bouton suivant avec image
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
const nextImg = document.createElement('img');
nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
nextImg.alt = 'Suivant';
nextBtn.appendChild(nextImg);
lightbox.appendChild(nextBtn);
// Fonction d'affichage
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
img.src = images[currentIndex].getAttribute('src');
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
?.nextElementSibling?.querySelector('.image-field-caption p')
?.textContent || '';
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// Clic sur une image
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault(); // empêche le <a> de naviguer
e.stopPropagation(); // (optionnel) empêche d'autres handlers de se déclencher
showImage(index);
});
});
// Navigation & fermeture
closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// Clic en dehors de l'image pour fermer
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) lightbox.style.display = 'none';
});
// Clavier
document.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') lightbox.style.display = 'none';
else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
}
});
//////////////// end lightbox galerie image page site////////////////////////
//////////////////// start wrapper views-row lessites /////////////////////////
@@ -802,7 +408,7 @@ $(document).ready(function () {
let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
// >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)
if (typeClass && typeClass.toLowerCase() === "type-galerie-photos") {
if (typeClass && typeClass.toLowerCase() === "type-mission-photo") {
items.show(); // aucun masquage
return; // on sort : pas de "voir plus"
}
@@ -879,61 +485,79 @@ $(document).ready(function () {
/////////////////// start voir plus... actualite dans /actualites & /home ////////////////////
if ($("#actualites" ).length > 0 || $("#home").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
if ($("#actualites").length > 0 || $("#home").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
body.hide();
links.hide();
body.hide();
links.hide();
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.insertAfter(article);
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.insertAfter(article);
toggleButton.on("click", function () {
body.slideToggle();
links.slideToggle();
$(this).toggleClass("open");
});
// Fonction commune
function toggleActu () {
body.slideToggle();
links.slideToggle();
toggleButton.toggleClass("open");
}
// Clic sur la flèche
toggleButton.on("click", function (e) {
e.stopPropagation();
toggleActu();
});
// slimselect
// duplicated due to embeded view (archives)
let actu_type_select = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
// Clic n'importe où sur le node
article.on("click", function (e) {
// Ne rien faire si clic sur un lien
if ($(e.target).closest("a").length) {
return;
}
})
let actu_type_select2 = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select = new SlimSelect({
select: '#edit-field-site-target-id-verf--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select2 = new SlimSelect({
select: '#edit-field-site-target-id-verf--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
}
toggleActu();
});
});
// slimselect
// duplicated due to embeded view (archives)
let actu_type_select = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_type_select2 = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select = new SlimSelect({
select: '#edit-field-site-target-id-verf--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select2 = new SlimSelect({
select: '#edit-field-site-target-id-verf--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
}
/////////////////// end voir plus... actualite dans /actualites & /home ////////////////////
/////////////// start class à view-rows-ressources ////////
$(".view-rows-wrapper").each(function () {
@@ -1084,6 +708,446 @@ if (svg) {
}
}();
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
!function() {
/*!***********************************!*\
!*** ./src/assets/js/lightbox.js ***!
\***********************************/
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images à ouvrir dans la lightbox
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
let currentIndex;
// Création de la lightbox
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
// Image affichée dans la lightbox
const img = document.createElement('img');
img.classList.add('lightbox-content');
lightbox.appendChild(img);
// Légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Bouton de fermeture
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);
// Bouton précédent avec image
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
const prevImg = document.createElement('img');
prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
prevImg.alt = 'Précédent';
prevBtn.appendChild(prevImg);
lightbox.appendChild(prevBtn);
// Bouton suivant avec image
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
const nextImg = document.createElement('img');
nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
nextImg.alt = 'Suivant';
nextBtn.appendChild(nextImg);
lightbox.appendChild(nextBtn);
// Fonction d'affichage
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
const currentImg = images[currentIndex];
// 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
const parentLink = currentImg.closest('a');
if (parentLink && parentLink.getAttribute('href')) {
img.src = parentLink.getAttribute('href');
} else {
img.src = currentImg.getAttribute('src');
}
// 👉 2. Trouver le conteneur qui porte la légende
// - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
// - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
const wrapper =
currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
currentImg.closest('.images'); // cas 2
let captionText =
wrapper?.querySelector('.image-field-caption p')?.textContent ||
currentImg.alt || // fallback si pas de blockquote
'';
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// Clic sur une image
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault(); // empêche le <a> de s'ouvrir
e.stopPropagation(); // empêche des comportements externes
showImage(index);
});
// 🔒 Empêche le clic sur le <a> parent d'agir aussi
const parentLink = image.closest('a');
if (parentLink) {
parentLink.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
}
});
// Navigation & fermeture
closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// Clic en dehors de l'image pour fermer
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) lightbox.style.display = 'none';
});
// Clavier
document.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') lightbox.style.display = 'none';
else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
}
});
//////////////// end lightbox galerie image page site////////////////////////
}();
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
!function() {
/*!*********************************!*\
!*** ./src/assets/js/header.js ***!
\*********************************/
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////
}();
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
!function() {
/*!***********************************!*\
!*** ./src/assets/js/timeline.js ***!
\***********************************/
(function($, window) {
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
});
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
})(jQuery, window);
}();
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
!function() {

File diff suppressed because one or more lines are too long

View File

@@ -379,6 +379,7 @@ header[role=banner] .header_left_container img {
}
}
header[role=banner] .header_right_container {
display: none;
flex: 0 0 0%;
width: fit-content;
min-width: fit-content;
@@ -1669,6 +1670,8 @@ footer {
text-transform: uppercase;
font-size: 0.6rem;
margin: auto;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
@media (max-width: 810px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_calendrier .file--application-pdf {
@@ -1757,6 +1760,7 @@ footer {
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite {
width: 85%;
cursor: pointer;
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
display: grid;
@@ -1935,18 +1939,28 @@ footer {
align-items: center;
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .links.inline a {
width: 5em;
display: block;
display: inline-flex;
overflow: hidden;
white-space: nowrap;
font-size: 0px;
align-items: baseline;
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .links.inline::after {
content: "+";
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .links.inline a::before {
content: "En savoir";
display: block;
padding-left: 0.4rem;
font-size: 1.8rem;
font-size: 0.7rem;
height: fit-content;
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .links.inline a::after {
content: " +";
display: flex;
padding-left: 0.3rem;
font-size: 1rem;
height: 26px;
margin: auto;
align-items: center;
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens {
order: 7;
padding: 0;
@@ -1963,6 +1977,8 @@ footer {
text-transform: uppercase;
font-size: 0.5rem;
margin-bottom: 0.5rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
#actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a svg {
display: none;
@@ -2002,6 +2018,8 @@ footer {
display: flex;
flex-direction: row;
padding-left: 0.5rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
display: inline-flex;
align-items: center;
color: white;
@@ -2391,6 +2409,8 @@ body {
text-transform: uppercase;
font-size: 0.5rem;
padding-left: 0.5rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
#home article.node-type-static .field_body h6 a svg {
display: none;
@@ -2576,6 +2596,7 @@ body {
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto .enjeux {
display: none !important;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -4086,25 +4107,11 @@ body {
position: relative;
transition: transform 0.4s ease-in-out;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet.is-laureat {
padding-top: 1.2rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:hover {
transform: scale(1.05); /* effet de zoom léger */
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:has(.laureat:not(:empty)) {
padding-top: 1.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:has(.laureat:not(:empty))::before {
content: "";
position: absolute;
top: -0.1rem;
left: -1rem;
width: 2.5rem;
height: 2.5rem;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.3rem;
transform: scale(1.05);
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .node-projet-title {
width: 80%;
@@ -4147,6 +4154,23 @@ body {
height: auto;
font-size: 0px;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats.is-laureat {
position: relative;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats.is-laureat::before {
content: "";
position: absolute;
top: -2.2rem;
left: -1rem;
width: 2.5rem;
height: 2.5rem;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.3rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third .prevnext {
display: none;
flex-direction: row;
@@ -4382,7 +4406,7 @@ body {
flex-direction: column;
padding-left: 2rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats:has(.laureat:not(:empty))::before {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats.is-laureat::before {
content: "";
position: absolute;
top: -0.1rem;
@@ -4472,10 +4496,13 @@ body {
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle::after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
content: url("../img/arrow-down-white.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
height: 25px;
height: 12px;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle[aria-expanded=true]::after {
content: url("../img/arrow-up-white.svg");
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .equipe-separator {
border-bottom: 1px solid black;
@@ -4630,7 +4657,28 @@ body {
transition: transform 0.4s ease-in-out;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row:hover {
transform: scale(1.05); /* effet de zoom léger */
transform: scale(1.05);
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat {
position: relative;
padding-top: 1.5rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat ::before {
content: "";
position: absolute;
top: 0.5rem;
left: -1.4rem;
width: 2.5rem;
height: 2.5rem;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.2rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat .field-content {
font-size: 0;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title h2 {
font-size: 0.5rem;
@@ -4706,32 +4754,8 @@ body {
font-size: 0.5rem;
padding-right: 0.5rem;
background-color: black;
padding-bottom: 0.1rem;
padding-top: 0.1rem;
padding-left: 0.2rem;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link a::before {
display: inline-flex;
content: url("../img/noun-arrow-to-left.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
height: 12px;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link div {
display: flex;
justify-content: center;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link a {
display: inline-flex;
justify-content: space-between;
align-items: center;
color: white;
text-transform: uppercase;
font-size: 0.5rem;
padding-right: 0.5rem;
background-color: black;
padding-bottom: 0.1rem;
padding-top: 0.1rem;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
padding-left: 0.2rem;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link a::before {
@@ -4852,9 +4876,10 @@ body {
background: black;
padding-left: 0.5rem;
text-transform: uppercase;
font-size: 0.6rem;
font-size: 0.5rem;
margin-bottom: 0.3rem;
padding: 0.3rem;
padding: 0.2rem 0.5rem;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_documents) .field_field_documents a {
color: white;
@@ -4873,7 +4898,7 @@ body {
background: black;
padding-left: 0.5rem;
text-transform: uppercase;
font-size: 0.6rem;
font-size: 0.5rem;
margin-bottom: 0.3rem;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_liens) .field_field_liens svg {
@@ -4884,6 +4909,7 @@ body {
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
height: 25px;
}
.node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_liens) .field_field_liens a {
color: white;
@@ -5078,6 +5104,9 @@ main {
background-color: #f6f7f3;
}
#lesprojets #header_right_container {
visibility: hidden !important;
}
#lesprojets .content_container {
display: flex;
flex-direction: column;
@@ -5583,7 +5612,18 @@ main {
width: 50%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-documents a {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row h2 {
margin-bottom: 0.2rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-date-ressource {
padding-top: 0.3rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-body-1 p {
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-documents a,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-liens a {
display: inline-flex;
align-items: center;
color: white;
@@ -5593,7 +5633,8 @@ main {
padding: 0.1rem 0.5rem;
padding-right: 0rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-documents a::after {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-documents a::after,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Documentation-générale .views-row .views-field-field-liens a::after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.1rem;
@@ -5696,45 +5737,45 @@ main {
width: 100%;
background-color: rgb(7, 50, 194);
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo {
justify-content: space-between;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row {
width: 18%;
justify-content: space-between;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row {
width: 100%;
}
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row img {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row img {
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row iframe {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row iframe {
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-title-1 {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-title-1 {
margin-top: 1rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-body-1,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-field-liens,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-field-sous-titre-1,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-field-documents,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-views-conditional-field {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-body-1,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-field-liens,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-field-sous-titre-1,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-field-documents,
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-views-conditional-field {
display: none;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-views-conditional-field-1 h2 {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-views-conditional-field-1 h2 {
font-family: "gilroy-medium";
color: rgb(7, 50, 194);
font-size: 0.6rem;
margin-bottom: 0;
}
@media (max-width: 810px) {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-views-conditional-field-1 h2 {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Mission-photo .views-row .views-field-views-conditional-field-1 h2 {
font-size: 1rem;
}
}

View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="14.947381"
height="18.174984"
viewBox="0 0 4.497851 5.4690765"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-102.76452,-145.67101)">
<path
d="m 107.0214,148.83607 -1.86476,1.82265 v -4.84236 a 0.14436835,0.14436835 0 1 0 -0.28873,0 v 4.84236 l -1.86476,-1.82265 a 0.14436835,0.14436835 0 0 0 -0.19851,0 0.1503837,0.1503837 0 0 0 0,0.20452 l 2.10537,2.06326 a 0.1624144,0.1624144 0 0 0 0.20452,0 l 2.10538,-2.06326 a 0.14436835,0.14436835 0 0 0 0,-0.20452 0.14436835,0.14436835 0 0 0 -0.19851,0 z"
id="path2-2"
style="fill:#ffffff;stroke-width:0.0601533" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 872 B

View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="14.947379"
height="18.174984"
viewBox="0 0 4.4978504 5.4690765"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-102.76452,-145.67101)">
<path
d="m 103.00549,147.97502 1.86476,-1.82265 v 4.84236 a 0.14436835,0.14436835 0 1 0 0.28873,0 v -4.84236 l 1.86476,1.82265 a 0.14436835,0.14436835 0 0 0 0.19851,0 0.1503837,0.1503837 0 0 0 0,-0.20452 l -2.10537,-2.06326 a 0.1624144,0.1624144 0 0 0 -0.20452,0 l -2.10538,2.06326 a 0.14436835,0.14436835 0 0 0 0,0.20452 0.14436835,0.14436835 0 0 0 0.19851,0 z"
id="path2-2"
style="fill:#ffffff;stroke-width:0.0601533" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 872 B

View File

@@ -5,41 +5,10 @@
version="1.1"
id="svg1"
width="1801.0212"
height="4029.4231"
viewBox="0 0 1801.0212 4029.4232"
sodipodi:docname="formes-animees.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
height="4008.7539"
viewBox="0 0 1801.0212 4008.754"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="0.22209622"
inkscape:cx="900.51061"
inkscape:cy="1339.5095"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="g2">
<inkscape:page
x="0"
y="0"
width="1801.0212"
height="4029.4231"
id="page2"
margin="0"
bleed="0" />
</sodipodi:namedview>
<defs
id="defs1">
<clipPath
@@ -72,21 +41,15 @@
transform="translate(-299.16899,-2519.6031)">
<g
id="g1"
transform="translate(0.17944336,-2.9196463)"
inkscape:export-filename="formes-animees.svg"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300">
transform="translate(0.17944336,-2.9196463)">
<path
id="path256"
d="m 321.27266,3436.1817 182.91889,175.8201"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="formes-animees.svg"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300" />
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path256-3"
d="m 1852.1683,6336.9184 -163.0856,194.3583"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
style="fill:none;stroke:none;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
@@ -102,7 +65,7 @@
<path
id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:none;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.82260013,0,0,-0.82260013,2051.1937,5635.4927)"
clip-path="url(#clipPath303)" />
<path
@@ -117,7 +80,7 @@
width="1550.348"
height="201.3089"
x="122.31378"
y="-9.4031076e-13" />
y="-2.4338836e-20" />
<rect
style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
id="rect1"
@@ -137,9 +100,6 @@
id="rect4"
width="1801.0212"
height="442.35608"
x="1.3299257e-06"
y="7.8992786"
inkscape:export-filename="formes-animees.svg"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300" />
x="1.1471996e-08"
y="7.8992786" />
</svg>

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@@ -13,7 +13,8 @@
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch"
"watch": "webpack --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",

View File

@@ -1,4 +1,4 @@
a<<?php
<?php
use Drupal\Core\Url;

View File

@@ -0,0 +1,205 @@
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////

View File

@@ -0,0 +1,126 @@
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images à ouvrir dans la lightbox
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
let currentIndex;
// Création de la lightbox
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
// Image affichée dans la lightbox
const img = document.createElement('img');
img.classList.add('lightbox-content');
lightbox.appendChild(img);
// Légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Bouton de fermeture
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);
// Bouton précédent avec image
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
const prevImg = document.createElement('img');
prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
prevImg.alt = 'Précédent';
prevBtn.appendChild(prevImg);
lightbox.appendChild(prevBtn);
// Bouton suivant avec image
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
const nextImg = document.createElement('img');
nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
nextImg.alt = 'Suivant';
nextBtn.appendChild(nextImg);
lightbox.appendChild(nextBtn);
// Fonction d'affichage
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
const currentImg = images[currentIndex];
// 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
const parentLink = currentImg.closest('a');
if (parentLink && parentLink.getAttribute('href')) {
img.src = parentLink.getAttribute('href');
} else {
img.src = currentImg.getAttribute('src');
}
// 👉 2. Trouver le conteneur qui porte la légende
// - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
// - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
const wrapper =
currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
currentImg.closest('.images'); // cas 2
let captionText =
wrapper?.querySelector('.image-field-caption p')?.textContent ||
currentImg.alt || // fallback si pas de blockquote
'';
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// Clic sur une image
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault(); // empêche le <a> de s'ouvrir
e.stopPropagation(); // empêche des comportements externes
showImage(index);
});
// 🔒 Empêche le clic sur le <a> parent d'agir aussi
const parentLink = image.closest('a');
if (parentLink) {
parentLink.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
}
});
// Navigation & fermeture
closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// Clic en dehors de l'image pour fermer
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) lightbox.style.display = 'none';
});
// Clavier
document.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') lightbox.style.display = 'none';
else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
}
});
//////////////// end lightbox galerie image page site////////////////////////

View File

@@ -14,212 +14,6 @@
} (Drupal));
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////
@@ -295,99 +89,11 @@ document.addEventListener('DOMContentLoaded', function() {
//////////////////////// end script smooth apparition des textes /////////////////
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
//////////// start slideshow images home //////////////////////////
$(document).ready(function(){
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome.length) {
@@ -458,106 +164,6 @@ document.addEventListener('DOMContentLoaded', function() {
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images à ouvrir dans la lightbox
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
let currentIndex;
// Création de la lightbox
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
// Image affichée dans la lightbox
const img = document.createElement('img');
img.classList.add('lightbox-content');
lightbox.appendChild(img);
// Légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Bouton de fermeture
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);
// Bouton précédent avec image
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
const prevImg = document.createElement('img');
prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
prevImg.alt = 'Précédent';
prevBtn.appendChild(prevImg);
lightbox.appendChild(prevBtn);
// Bouton suivant avec image
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
const nextImg = document.createElement('img');
nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
nextImg.alt = 'Suivant';
nextBtn.appendChild(nextImg);
lightbox.appendChild(nextBtn);
// Fonction d'affichage
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
img.src = images[currentIndex].getAttribute('src');
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
?.nextElementSibling?.querySelector('.image-field-caption p')
?.textContent || '';
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// Clic sur une image
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault(); // empêche le <a> de naviguer
e.stopPropagation(); // (optionnel) empêche d'autres handlers de se déclencher
showImage(index);
});
});
// Navigation & fermeture
closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// Clic en dehors de l'image pour fermer
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) lightbox.style.display = 'none';
});
// Clavier
document.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') lightbox.style.display = 'none';
else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
}
});
//////////////// end lightbox galerie image page site////////////////////////
//////////////////// start wrapper views-row lessites /////////////////////////
@@ -744,7 +350,7 @@ $(document).ready(function () {
let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
// >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)
if (typeClass && typeClass.toLowerCase() === "type-galerie-photos") {
if (typeClass && typeClass.toLowerCase() === "type-mission-photo") {
items.show(); // aucun masquage
return; // on sort : pas de "voir plus"
}
@@ -821,61 +427,79 @@ $(document).ready(function () {
/////////////////// start voir plus... actualite dans /actualites & /home ////////////////////
if ($("#actualites" ).length > 0 || $("#home").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
if ($("#actualites").length > 0 || $("#home").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
body.hide();
links.hide();
body.hide();
links.hide();
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.insertAfter(article);
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.insertAfter(article);
toggleButton.on("click", function () {
body.slideToggle();
links.slideToggle();
$(this).toggleClass("open");
});
// Fonction commune
function toggleActu () {
body.slideToggle();
links.slideToggle();
toggleButton.toggleClass("open");
}
// Clic sur la flèche
toggleButton.on("click", function (e) {
e.stopPropagation();
toggleActu();
});
// slimselect
// duplicated due to embeded view (archives)
let actu_type_select = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
// Clic n'importe où sur le node
article.on("click", function (e) {
// Ne rien faire si clic sur un lien
if ($(e.target).closest("a").length) {
return;
}
})
let actu_type_select2 = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select = new SlimSelect({
select: '#edit-field-site-target-id-verf--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select2 = new SlimSelect({
select: '#edit-field-site-target-id-verf--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
}
toggleActu();
});
});
// slimselect
// duplicated due to embeded view (archives)
let actu_type_select = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_type_select2 = new SlimSelect({
select: '#edit-field-type-d-actualite-target-id--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select = new SlimSelect({
select: '#edit-field-site-target-id-verf--2',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select2 = new SlimSelect({
select: '#edit-field-site-target-id-verf--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
}
/////////////////// end voir plus... actualite dans /actualites & /home ////////////////////
/////////////// start class à view-rows-ressources ////////
$(".view-rows-wrapper").each(function () {

View File

@@ -0,0 +1,91 @@
(function($, window) {
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
});
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
})(jQuery, window);

View File

@@ -130,6 +130,8 @@
text-transform: uppercase;
font-size: 0.5rem;
padding-left: 0.5rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
svg{
display: none;
}
@@ -305,6 +307,7 @@
}
.enjeux{
display: none !important;
display: flex;
flex-direction: row;
flex-wrap: wrap;

View File

@@ -2,6 +2,9 @@ main{
background-color: #f6f7f3;
}
#lesprojets{
#header_right_container{
visibility: hidden !important;
}
.content_container{
// background-color: red;
display: flex;

View File

@@ -128,7 +128,7 @@
}
.field_field_laureats{
&:has(.laureat:not(:empty))::before {
&.is-laureat::before {
content: "";
position: absolute;
// display: block;
@@ -222,20 +222,25 @@
margin: auto;
display: flex;
border: none;
// padding-top: 0.3rem;
// padding-bottom: 0.3rem;
svg{
display: none;
}
&::after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
content: url("../img/arrow-down-white.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
// padding-bottom: 0.2rem;
height: 25px;
height: 12px;
}
margin-bottom: 1rem;
}
.btn-equipe-toggle[aria-expanded="true"]::after {
content: url("../img/arrow-up-white.svg");
}
.equipe-separator {
border-bottom: 1px solid black;
margin: 20px 0;
@@ -392,10 +397,32 @@
border-bottom: solid black 1px;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
transition: transform 0.4s ease-in-out; // animation plus fluide
&:hover {
transform: scale(1.05); /* effet de zoom léger */
}
transition: transform 0.4s ease-in-out;
&:hover {
transform: scale(1.05);
}
.is-laureat{
position: relative;
padding-top: 1.5rem;
::before {
content: "";
position: absolute;
top: 0.5rem;
left: -1.4rem;
width: 2.5rem;
height: 2.5rem;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.2rem;
}
.field-content{
font-size: 0;
}
}
.views-field-title {
h2 {
font-size: 0.5rem;

View File

@@ -28,37 +28,8 @@
content: " :";
}
}
} .field_field_link{
div{
display: flex;
justify-content: center;
}
a{
display: inline-flex;
justify-content: space-between;
align-items: center;
color: white;
text-transform: uppercase;
font-size: 0.5rem;
padding-right: 0.5rem;
background-color: black;
padding-bottom: 0.1rem;
padding-top: 0.1rem;
padding-left: 0.2rem;
}
// svg{
// display: none;
// }
&::before{
display: inline-flex;
content: url("../img/noun-arrow-to-left.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
// padding-bottom: 0.2rem;
height: 12px;
}
}
}
.field_field_link{
div{
display: flex;
@@ -73,8 +44,8 @@
font-size: 0.5rem;
padding-right: 0.5rem;
background-color: black;
padding-bottom: 0.1rem;
padding-top: 0.1rem;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
padding-left: 0.2rem;
// svg{
@@ -206,9 +177,10 @@
background: black;
padding-left: 0.5rem;
text-transform: uppercase;
font-size: 0.6rem;
font-size: 0.5rem;
margin-bottom: 0.3rem;
padding: 0.3rem;
padding: 0.2rem 0.5rem;
svg{
display: none;
@@ -226,7 +198,7 @@
background: black;
padding-left: 0.5rem;
text-transform: uppercase;
font-size: 0.6rem;
font-size: 0.5rem;
margin-bottom: 0.3rem;
svg{
@@ -237,6 +209,7 @@
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
height: 25px;
}
a{
color: white;

View File

@@ -429,28 +429,12 @@
}
.node-type-projet {
position: relative;
transition: transform 0.4s ease-in-out; // animation plus fluide
&:hover {
transform: scale(1.05); /* effet de zoom léger */
}
&:has(.laureat:not(:empty)){
padding-top: 1.5rem;
transition: transform 0.4s ease-in-out;
&.is-laureat{
padding-top: 1.2rem;
}
&:has(.laureat:not(:empty))::before {
content: "";
position: absolute;
// display: block;
top: -0.1rem; // adapte la position selon ton visuel
left: -1rem;
width: 2.5rem;
height: 2.5rem;
// background-color: #f6f7f3;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.3rem;
&:hover {
transform: scale(1.05);
}
.node-projet-title{
width: 80%;
@@ -493,13 +477,26 @@
align-items: flex-start;
height: auto;
font-size: 0px;
&.is-laureat{
position: relative;
}
&.is-laureat::before {
content: "";
position: absolute;
top: -2.2rem;
left: -1rem;
width: 2.5rem;
height: 2.5rem;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.3rem;
}
}
}
}
}
.prevnext{
display: none;

View File

@@ -199,7 +199,16 @@
@media(max-width: 810px){
width: 50%;
}
.views-field-field-documents a{
h2{margin-bottom: 0.2rem;}
.views-field-field-date-ressource{
padding-top: 0.3rem;
}
.views-field-body-1 p{
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.views-field-field-documents a,
.views-field-field-liens a{
display: inline-flex;
align-items: center;
@@ -311,7 +320,7 @@
width: 100%;
background-color: $blue_QDD;
}
&.type-Galerie-photos{
&.type-Mission-photo{
justify-content: space-between;
.views-row{
width: 18%;

View File

@@ -54,6 +54,7 @@
.node-type-actualite{
width: 85%;
// padding-bottom: 2rem;
cursor: pointer;
.content-wrapper-actu{
display: grid;
@@ -250,21 +251,32 @@
display: inline-flex;
align-items: center;
a{
width: 5em;
display: block;
display: inline-flex;
overflow: hidden;
white-space: nowrap;
font-size: 0px;
align-items: baseline;
&::before{
content: "En savoir";
display: block;
// width: 20px;
padding-left: 0.4rem;
font-size: 0.7rem;
height: fit-content;
}
&::after{
content: " +";
display: flex;
padding-left: 0.3rem;
font-size: 1rem;
height: 26px;
margin: auto;
align-items: center;
}
}
&::after{
content: "+";
display: block;
// width: 20px;
padding-left: 0.4rem;
font-size: 1.8rem;
height: fit-content;
}
}
.field_field_liens{
order: 7;
@@ -281,7 +293,8 @@
text-transform: uppercase;
font-size: 0.5rem;
margin-bottom: 0.5rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
svg{
display: none;
}
@@ -330,8 +343,8 @@
display: flex;
flex-direction: row;
padding-left: 0.5rem;
// padding-top: 0.2rem;
// padding-bottom: 0.2rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
display: inline-flex;
align-items: center;
color: white;

View File

@@ -120,7 +120,7 @@ header[role="banner"]{
}
}
.header_right_container{
// display: none;
display: none;
flex: 0 0 0%;
width: fit-content;
min-width: fit-content;

View File

@@ -212,6 +212,8 @@
text-transform: uppercase;
font-size: 0.6rem;
margin: auto;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
@media (max-width:810px) {
margin-left: 0;
margin: auto;

View File

@@ -50,6 +50,15 @@
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{# Vrai si au moins un item a du contenu (donc booléen "vrai") #}
{% set is_laureat = false %}
{% for item in items %}
{% if item.content|render|trim is not empty %}
{% set is_laureat = true %}
{% endif %}
{% endfor %}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
@@ -63,17 +72,16 @@
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ attributes.addClass(is_laureat ? 'is-laureat') }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div>
{% endif %}
{% for item in items %}
{# {% for item in items %}
<div class="laureat"{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% endfor %} #}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
{% endif %}

View File

@@ -62,7 +62,11 @@
* @ingroup themeable
*/
#}
<article{{ attributes }}>
{# Le node est lauréat si field_laureats vaut "1" #}
{% set is_laureat = node.field_laureats is defined and node.field_laureats.value == '1' %}
<article{{ attributes.addClass(is_laureat ? 'is-laureat') }}>
{{ title_prefix }}
{% if label and not page %}

View File

@@ -31,7 +31,7 @@
* @ingroup themeable
*/
#}
{#
{% for field in fields -%}
@@ -54,5 +54,45 @@
{%- if field.wrapper_element -%}
</{{ field.wrapper_element }}>
{%- endif %}
{%- endfor %}
{%- endfor %} #}
{# Vrai si le champ field_laureats a une valeur brute #}
{# On récupère la valeur brute du champ field_laureats sur l'entité #}
{% set laureat_value = row._entity.field_laureats.value ?? null %}
{% set laureat_value = row._entity.field_laureats.value ?? null %}
{% for id, field in fields -%}
{{ field.separator }}
{%- if field.wrapper_element -%}
{# On part des attributs existants du wrapper #}
{% set wrapper_attributes = field.wrapper_attributes %}
{# Si c'est le champ field_laureats ET qu'il a une valeur, on ajoute la classe #}
{% if id == 'field_laureats' and laureat_value %}
{% set wrapper_attributes = wrapper_attributes.addClass('is-laureat') %}
{% endif %}
<{{ field.wrapper_element }}{{ wrapper_attributes }}>
{%- endif %}
{%- if field.label -%}
{%- if field.label_element -%}
<{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
{%- else -%}
{{ field.label }}{{ field.label_suffix }}
{%- endif %}
{%- endif %}
{%- if field.element_type -%}
<{{ field.element_type }}{{ field.element_attributes }}>
{{ field.content }}
</{{ field.element_type }}>
{%- endif %}
{%- if field.wrapper_element -%}
</{{ field.wrapper_element }}>
{%- endif %}
{%- endfor %}

View File

@@ -9,6 +9,9 @@ let config = {
// "./src/assets/js/animated_logo.js",
"./src/assets/js/animated_formes.js",
"./src/assets/js/lightbox.js",
"./src/assets/js/header.js",
"./src/assets/js/timeline.js",
"./src/assets/scss/quartiers_de_demain.scss",
// "./src/assets/fonts/*",
// "./src/assets/css/animated_logo.css",
@@ -66,11 +69,18 @@ let config = {
],
}
},
externals: {
drupal: 'Drupal',
Drupal: 'Drupal',
},
}
module.exports = config;
module.exports = config;