index page projets

This commit is contained in:
Valentin 2024-11-05 01:44:18 +01:00
parent 018960837d
commit bd1b450a45
34 changed files with 1084 additions and 382 deletions

View File

@ -0,0 +1,31 @@
uuid: fdcecdf1-6b41-44be-9a67-d1bc81a2eab3
langcode: fr
status: true
dependencies:
config:
- system.menu.le-
module:
- menu_block
theme:
- erabletheme
id: erabletheme_leprogramme_2
theme: erabletheme
region: sidebar_first
weight: 0
provider: null
plugin: 'menu_block:le-'
settings:
id: 'menu_block:le-'
label: 'Le Programme'
label_display: visible
provider: menu_block
follow: false
follow_parent: child
label_link: false
label_type: block
level: 1
depth: 0
expand_all_items: false
parent: 'le-:'
suggestion: le_
visibility: { }

View File

@ -1,6 +1,6 @@
uuid: 8eb6829e-ca59-4575-9995-09c358c6044e uuid: 8eb6829e-ca59-4575-9995-09c358c6044e
langcode: fr langcode: fr
status: true status: false
dependencies: dependencies:
content: content:
- 'block_content:link:82c97cc5-9a38-42e6-852f-e160d945a338' - 'block_content:link:82c97cc5-9a38-42e6-852f-e160d945a338'

View File

@ -1,6 +1,6 @@
uuid: 06d94b61-c1be-4382-b4e0-2184f06300c7 uuid: 06d94b61-c1be-4382-b4e0-2184f06300c7
langcode: fr langcode: fr
status: true status: false
dependencies: dependencies:
content: content:
- 'block_content:link:40c00cc4-49aa-41f8-b27c-3545c6be2982' - 'block_content:link:40c00cc4-49aa-41f8-b27c-3545c6be2982'

View File

@ -46,8 +46,8 @@ variant_settings:
uuid: 42e5f5be-e990-4ced-854c-3f431dbfdcc0 uuid: 42e5f5be-e990-4ced-854c-3f431dbfdcc0
41595e31-d8d6-4940-a1e5-8687c04af5a5: 41595e31-d8d6-4940-a1e5-8687c04af5a5:
id: sitesmap_block id: sitesmap_block
label: 'Sites map Block' label: 'Carte des projets lauréats 2024'
label_display: '0' label_display: visible
provider: erable_mod provider: erable_mod
context_mapping: { } context_mapping: { }
region: content region: content

View File

@ -11,6 +11,8 @@ dependencies:
- image.style.medium - image.style.medium
- node.type.projet - node.type.projet
- system.menu.main - system.menu.main
content:
- 'config_pages:les_projets:7af1760d-0b6b-42ed-8032-76310f6a4eb2'
module: module:
- image_delta_formatter - image_delta_formatter
- node - node
@ -168,12 +170,7 @@ display:
replica: false replica: false
query_tags: { } query_tags: { }
relationships: { } relationships: { }
header: header: { }
entity_config_pages:
id: entity_config_pages
table: views
field: entity_config_pages
plugin_id: entity
footer: { } footer: { }
display_extenders: { } display_extenders: { }
cache_metadata: cache_metadata:
@ -685,8 +682,8 @@ display:
alter: alter:
alter_text: false alter_text: false
text: '' text: ''
make_link: false make_link: true
path: '' path: '/taxonomy/term/{{ field_th__target_id }}'
absolute: false absolute: false
external: false external: false
replace_spaces: false replace_spaces: false
@ -732,7 +729,7 @@ display:
delta_offset: 0 delta_offset: 0
delta_reversed: false delta_reversed: false
delta_first_last: false delta_first_last: false
multi_type: separator multi_type: ul
separator: ', ' separator: ', '
field_api_classes: false field_api_classes: false
defaults: defaults:
@ -747,8 +744,8 @@ display:
group_type: group group_type: group
admin_label: '' admin_label: ''
plugin_id: entity plugin_id: entity
empty: true empty: false
target: b8729588-5a4f-450a-ac00-e472ef8922be target: 7af1760d-0b6b-42ed-8032-76310f6a4eb2
view_mode: default view_mode: default
tokenize: true tokenize: true
bypass_access: false bypass_access: false

View File

@ -1,7 +1,7 @@
#sites-map-container { #sites-map-container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
max-width: 40vw; width: 100%;
} }
#map_base { #map_base {

View File

@ -1,91 +0,0 @@
#sites-map-container {
text-align: center;
position: relative;
width: 100%; /* Prend toute la largeur du conteneur parent */
max-width: 800px; /* Optionnel : Limiter la largeur maximale */
margin: 0 auto; /* Centrer le conteneur */
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
@media (max-width: 810px) {
width: 80%; /* Prend toute la largeur du conteneur parent */
}
@media (max-width: 530px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 485px;
}
@media (max-width: 400px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 430px;
}
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{
cursor: pointer;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
@media (max-width: 1090px) {
bottom: 20px;
}
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%; /* Centrer verticalement */
left: 80%; /* Placer le popup à droite de la carte */
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong{
color: #f7002b;
}
#sites-map-container a{
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content{
width: 300px;
padding-right: 30px;
p{
font-size: 0.7rem;
}
@media (max-width : 810px) {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}

View File

@ -186,7 +186,7 @@ function placeProjectsIcons(projectsIcons) {
const territory = findTerritory(lat, lon); const territory = findTerritory(lat, lon);
console.log(icon.dataset.title, territory); // console.log(icon.dataset.title, territory);
if (territory && localisationMapPlacements[territory]) { if (territory && localisationMapPlacements[territory]) {
@ -261,8 +261,11 @@ function hidePopup(){
placeProjectsIcons(projectsIcons); placeProjectsIcons(projectsIcons);
// debugMapPlacement(); // debugMapPlacement();
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('resize', placeProjectsIcons(projectsIcons)); window.addEventListener('resize', () => {
placeProjectsIcons(projectsIcons)
});
});
function debugMapPlacement() { function debugMapPlacement() {
const container = document.querySelector('#sites-map-container'); const container = document.querySelector('#sites-map-container');

View File

@ -1,115 +0,0 @@
// // Sélection des éléments principaux
const svgElement = document.querySelector('#sites-map-container svg');
const popup = document.querySelector('#sites-map-container #popup');
const popupContent = document.querySelector('#sites-map-container #popup-content');
const modalBackground = document.querySelector('#sites-map-container #modal-background');
// Vérifiez si la page contient la classe '.node-type-site'
const isSitePage = document.body.classList.contains('node-type-site');
console.log(isSitePage);
// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
if (isSitePage) return;
popupContent.innerHTML = content;
// Afficher le popup et le fond de modal
popup.style.display = 'block';
modalBackground.style.display = 'block';
}
// Fonction pour fermer le popup
function closePopup() {
popup.style.display = 'none';
modalBackground.style.display = 'none'; // Désactiver le fond modal
}
// Gérer le survol des cercles (au lieu du clic)
svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) {
const content = event.target.getAttribute('data-content');
// Afficher le popup avec la position et l'alignement adaptés
showPopup(content);
}
// Gestion du changement de couleur sur le cercle
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
});
// Fermer le popup lorsque la souris quitte le cercle
svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
// Réinitialiser la couleur du cercle au survol de la souris
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'black'); // Remettre en noir
}
});
// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
const allSites = document.querySelectorAll('.site-link');
allSites.forEach((site, index) => {
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
const lon = parseFloat(geofield.split(',')[0]);
const lat = parseFloat(geofield.split(',')[1]);
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
site.setAttribute('transform', `translate(${x}, ${y})`);
});
}
window.addEventListener('resize', function() {
recalculateSitePositions();
if (popup.style.display === 'block') {
const currentPopupRect = popup.getBoundingClientRect();
const rect = svgElement.getBoundingClientRect();
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
}
});
// Gérer le clic ou le toucher des cercles
function handleCircleClick(content) {
showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
}
// Écouter les événements de clic et de toucher sur le SVG
svgElement.addEventListener('click', function(event) {
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
const content = event.target.getAttribute('data-content');
handleCircleClick(content);
}
});
///////////////////// page site point rouge quand sur page ///////////////////////
// Récupérer l'ID de la page depuis la classe du body
const body = document.querySelector('body');
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
// Sélectionner le groupe SVG qui a l'ID correspondant
const matchingGroup = document.querySelector(`#site-${pageId}`);
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
if (matchingGroup) {
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
if (circle) {
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
}
}

View File

@ -1,7 +1,6 @@
sites_map_block: sites_map_block:
css: css:
theme: theme:
assets/css/fontface.scss: {}
assets/css/carte-interactive.css: {} assets/css/carte-interactive.css: {}
js: js:
assets/js/carte-interactive.js: {} assets/js/carte-interactive.js: {}

View File

@ -11,7 +11,7 @@
function erable_mod_theme() { function erable_mod_theme() {
return array( return array(
'svg_mapsites' => array( 'svg_mapsites' => array(
'variables' => array('vpw' => null, 'vph' => null, 'sites' => []), 'variables' => array('sites' => [], 'intro' => null),
), ),
); );
} }

View File

@ -26,6 +26,9 @@ class SitesMap extends BlockBase {
$allSites = \Drupal::entityTypeManager()->getStorage('node') $allSites = \Drupal::entityTypeManager()->getStorage('node')
->loadByProperties(['type' => 'projet', 'status' => 1]); ->loadByProperties(['type' => 'projet', 'status' => 1]);
$intro_text = \Drupal::entityTypeManager()->getStorage('config_pages')
->load('2')->get('field_intro')-> value;
$sites_paths = ""; $sites_paths = "";
foreach($allSites as $index => $site){ foreach($allSites as $index => $site){
@ -35,11 +38,8 @@ class SitesMap extends BlockBase {
$link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']]; $link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']];
$site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options); $site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options);
// $link = $site_link_object->toString()->getGeneratedLink();
$href = $site_link_object->getUrl()->toString(); $href = $site_link_object->getUrl()->toString();
// $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
$geofield = $site->get('field_carte')->get(0); $geofield = $site->get('field_carte')->get(0);
$lon = $geofield->lon; $lon = $geofield->lon;
$lat = $geofield->lat; $lat = $geofield->lat;
@ -60,6 +60,7 @@ class SitesMap extends BlockBase {
'svg_mapsites' => [ 'svg_mapsites' => [
'#theme' => 'svg_mapsites', '#theme' => 'svg_mapsites',
'#sites' => $sites_paths, '#sites' => $sites_paths,
'#intro' => $intro_text,
'#attached' => [ '#attached' => [
'library' => [ 'library' => [
'erable_mod/sites_map_block', 'erable_mod/sites_map_block',
@ -69,9 +70,6 @@ class SitesMap extends BlockBase {
]; ];
return $return; return $return;
// return [
// '#markup' => $this->t('Hello, Sites Map!'),
// ];
} }
public function getCacheMaxAge() { public function getCacheMaxAge() {
return 0; return 0;

View File

@ -1,3 +1,6 @@
<div class="projets_intro">
{{ intro|raw }}
</div>
<div id="sites-map-container"> <div id="sites-map-container">
{# <svg {{ svg_attributes }}> {# <svg {{ svg_attributes }}>
<path {{ path_attributes }}></path> <path {{ path_attributes }}></path>

View File

@ -0,0 +1 @@
<svg width="108.419" xmlns="http://www.w3.org/2000/svg" height="108.092" fill="none"><g style="fill: rgb(0, 0, 0);"><path d="M53.605 108.065a9.942 9.942 0 0 0-1.683-.015c-.776.074-3.383-.459-3.919-.802-.12-.078-.544-.173-.941-.214-.398-.036-1.149-.187-1.669-.329-1.571-.426-2.372-.605-3.239-.722-.454-.061-.976-.218-1.16-.348-.183-.13-.568-.277-.855-.329-.286-.052-.941-.269-1.455-.485-.515-.216-1.094-.376-1.289-.356-.195.026-.482-.088-.64-.242-.157-.153-.678-.418-1.159-.589-1.398-.498-4.034-1.643-4.601-2-.287-.181-.618-.318-.736-.306-.119.015-.47-.176-.782-.416-.544-.421-1.082-.749-2.93-1.788-.462-.26-1.662-1.102-2.667-1.871-1.005-.768-2.065-1.548-2.356-1.731-1.029-.649-6.502-3.595-7.426-4.943-.215-.316-.772-.947-1.236-1.404-.464-.457-1.019-1.089-1.234-1.403-.957-1.407-4.13-6.791-4.157-7.056-.015-.161-.485-1.022-1.04-1.913-1.297-2.082-2.961-5.629-3.547-7.561-.434-1.43-1.57-7.99-1.434-8.281.037-.076-.175-1.157-.466-2.403.038-9.187-1.287-5.212-.92-12.207.157-2.86 1.497-15.281 2.09-16.902.827-2.259 1.863-8.206 3.081-9.679 2.466-2.983 5.326-6.077 6.373-6.897a331.45 331.45 0 0 0 2.877-2.306c2.684-2.171 4.009-3.036 5.78-3.77a61.243 61.243 0 0 0 2.928-1.325c.803-.394 2.124-.95 2.936-1.237a25.144 25.144 0 0 0 2.831-1.239c.746-.396 1.471-.731 1.611-.746.141-.016 1.287-.493 2.546-1.061 1.352-.611 2.904-1.153 3.791-1.326C38.279 1.595 48.11.304 50.512.075c2.113-.199 4.148.004 5.369.541.353.156 1.005.311 1.449.345.443.031 1.619.344 2.612.69 1.005.349 2.173.608 2.632.584 1.245-.063 2.552.205 4.005.823 2.906 1.237 3.112 1.297 7.301 2.128.55.109 1.556.574 2.254 1.042.693.465 1.785 1.028 2.427 1.253 1.139.398 1.861.898 3.304 2.288.668.644 2.241 1.329 3.442 1.5.688.099 2.242 1.319 3.43 2.694.511.591 1.203 1.175 1.538 1.297.836.304 3.976 2.848 4.815 3.901.378.475.935 1.364 1.238 1.976.396.799.779 1.244 1.354 1.577 1.051.608 3.679 3.578 5.005 5.656.708 1.111 1.141 2.043 1.321 2.849.148.659.381 1.508.517 1.887s.41 1.224.609 1.877c.199.654.798 2.43 1.331 3.948a32.715 32.715 0 0 1 1.47 5.669c.275 1.601.475 2.965.444 3.031-.03.066-.026 1.398.027 2.96.046 1.687-.03 3.39-.191 4.196a49.596 49.596 0 0 0-.483 3.115c-.118.967-.345 2.324-.506 3.015-.162.691-.4 2.003-.53 2.916-.339 2.386-.762 3.629-1.628 4.779-.896 1.19-1.067 1.577-1.143 2.596-.03.418-.312 1.229-.624 1.803-.828 1.519-1.051 2.2-1.079 3.295-.03 1.39-.395 2.141-1.358 2.849-.792.582-2.13 2.184-2.101 2.514.018.218-1.209 1.778-2.233 2.838-.484.5-1.064 1.388-1.289 1.973-.743 1.929-.935 2.148-2.357 2.696-.777.3-1.786.906-2.46 1.477a32.982 32.982 0 0 1-2.165 1.67c-.563.386-1.486 1.326-2.052 2.09-.567.763-1.363 1.57-1.769 1.792a7.793 7.793 0 0 0-1.31.934c-.314.291-.973.638-1.465.77-.492.133-1.032.333-1.2.444-.168.111-.874.356-1.569.544-.885.239-1.549.582-2.211 1.141-1.959 1.658-4.901 2.981-8.047 3.62-2.589.525-4.31 1.086-5.494 1.79-.774.461-2.885 1.185-4.734 1.625-2.313.55-3.404.834-3.68.955-.161.071-.665.086-1.123.037Zm11.404-5.251c1.352-.507 2.76-1.112 3.129-1.345a7.618 7.618 0 0 1 1.262-.632 9.23 9.23 0 0 0 1.17-.534c.319-.179.976-.48 1.463-.668.485-.189 1.709-.801 2.718-1.361 3.161-1.754 5.087-2.725 6.308-3.18.649-.241 1.826-.83 2.616-1.308 1.472-.89 4.242-3.18 4.469-3.694.07-.158.67-.79 1.334-1.404 1.89-1.751 3.441-3.641 4.071-4.963.317-.667 1.319-2.101 2.225-3.187 2.657-3.183 4.402-6.134 5.559-9.401.864-2.44 1.26-3.663 1.242-3.834-.011-.082.118-.537.281-1.011l.94-2.737c1.279-3.724 2.232-9.935 2.194-14.312-.026-2.377-.468-4.975-1.311-7.59-.594-1.847-.887-2.947-1.452-5.446-.617-2.733-1.277-4.228-2.804-6.348a153.158 153.158 0 0 1-2.514-3.62c-1.558-2.329-2.612-3.568-4.566-5.365-3.876-3.566-9.096-7.295-13.422-9.589-3.367-1.786-6.413-3.278-6.965-3.412a2.806 2.806 0 0 1-.721-.31c-.181-.119-.705-.291-1.164-.384-.46-.092-1.882-.514-3.163-.937-1.28-.424-3.041-1.005-3.914-1.293-2.397-.791-5.922-1.512-7.357-1.506-.703.002-1.613-.121-2.023-.274-1.063-.4-3.245-.461-7.132-.203-3.309.22-5.433.624-8.653 1.645-.49.155-1.521.407-2.292.558-.826.163-2.402.738-3.838 1.401-4.856 2.24-8.656 4.091-9.375 4.567-.404.267-.864.5-1.024.516-.354.031-1.939.737-2.765 1.222-.333.195-.675.363-.759.372-.282.031-3.641 2.079-4.599 2.806-2.041 1.55-6.245 6.104-7.152 7.748-.364.659-1.769 5.258-2.138 6.998-.189.892-.41 2.774-.49 4.183-.081 1.408-.289 3.311-.463 4.228-1.535 8.969-2.899 13.525-.996 21.686.682 2.874 3.432 10.78 4.56 13.111.774 1.598 2.258 5.12 2.291 5.436.131 1.258 4.504 8.963 6.197 10.921 1.889 2.184 8.381 4.947 11.007 6.135.748.338 1.95.977 2.67 1.418 2.256 1.383 3.337 1.889 7.401 3.467 2.172.844 4.344 1.707 4.827 1.918.482.211 1.961.682 3.286 1.047 2.215.61 2.631.657 5.149.58 1.506-.046 4.873-.333 7.482-.638 4.608-.539 4.813-.581 7.201-1.477Z" style="stroke-width: 0.999992; fill: rgb(36, 180, 150);" class="fills"/></g></svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -0,0 +1 @@
<svg width="222.286" xmlns="http://www.w3.org/2000/svg" height="250.807" viewBox="7878 1982 222.286 250.807" fill="none"><path d="M7956.274 1986.469c25.826-15.086 24.896 10.832 72.919 35.887 41.211 21.501 51.92 2.311 60.932 33.947 16.959 59.537 14.65 49.316-21.976 102.812-42.619 62.248-26.611 59.748-96.892 70.804-48.919 7.695-58.343 2.108-81.909-42.677-23.049-43.801-6.853-33.684 11.987-90.202 25.777-77.331-4.474-75.867 54.939-110.571Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

After

Width:  |  Height:  |  Size: 512 B

View File

@ -0,0 +1 @@
<svg width="246.591" xmlns="http://www.w3.org/2000/svg" height="246.879" viewBox="8155 1982 246.591 246.879" fill="none"><path d="M8256.909 1982.503c76.411 8.718 66.157-14.28 112 36 36.824 40.387 2.098 33.617 12 100 8.098 54.284 31.324 71.301 15 81-75.676 44.968-62.248 32.62-153 1-56.582-19.714-40.462-17.852-68-78-23.129-50.519-26.519-38.204-8-88 11.481-30.87 16.98-12.188 53-33 23.98-13.855 14.077-21.615 37-19Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

After

Width:  |  Height:  |  Size: 488 B

View File

@ -0,0 +1 @@
<svg width="230.664" xmlns="http://www.w3.org/2000/svg" height="241.787" viewBox="7868 2259 230.664 241.787" fill="none"><path d="M7963.867 2265.939c58.528-9.681 50.845-14.68 94 23 46.178 40.32 38.587 30.769 40 94 1.253 56.102 5.89 49.362-36 85-47.444 40.362-34.76 34.359-98 29-54.76-4.641-56.58.554-79-44-29.58-58.779-14.343-40.179 1-111 3.183-14.695 10.234-4.116 26.788-17.274 9.446-7.509 4.162-4.495 12.212-13.726 26.091-29.92 8.862-40.015 39-45Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

After

Width:  |  Height:  |  Size: 523 B

View File

@ -0,0 +1 @@
<svg width="219.442" xmlns="http://www.w3.org/2000/svg" height="223.162" viewBox="8214 2263 219.442 223.162" fill="none"><path d="M8285.563 2265.424c70.579-3.629 54.165-9.494 108 36 40.831 34.506 28.952 26.455 34 84 4.952 56.455 16.723 53.83-19 87-29.611 27.496-26.449 5.468-79 4-66.782-1.865-64.362 27.389-100-9-27.695-28.278 9.074-29.852 5-88-3.259-46.519-31.368-34.647-16-69 18.632-41.647 20.913-42.629 67-45Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

After

Width:  |  Height:  |  Size: 486 B

View File

@ -58,8 +58,22 @@ a {
margin-top: calc(10vh + 3rem); margin-top: calc(10vh + 3rem);
} }
} */ } */
body {
background-color: lightgrey;
}
.layout-container { .layout-container {
margin: 0 !important; display: flex;
}
main:has(#block-erabletheme-leprogramme-2) {
display: flex;
flex-direction: column-reverse;
}
@media screen and (min-width: 760px) {
main:has(#block-erabletheme-leprogramme-2) {
flex-direction: row-reverse;
}
} }
strong { strong {
@ -808,7 +822,7 @@ body.toolbar-fixed header[role=banner] {
} }
.views-row article.actu-teaser > div:first-of-type { .views-row article.actu-teaser > div:first-of-type {
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 20/9;
overflow: hidden; overflow: hidden;
padding-left: 3vw; padding-left: 3vw;
padding-right: 3vw; padding-right: 3vw;
@ -851,6 +865,7 @@ body.toolbar-fixed header[role=banner] {
} }
.views-row article.actu-teaser h2 { .views-row article.actu-teaser h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-top: 1rem !important;
font-family: "Barlow Condensed", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: 1.2rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
@ -959,7 +974,8 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
background-color: white; background-color: white;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 4rem 1rem; padding: 3rem 1rem;
margin: 2rem 0;
} }
.home_introduction h2 { .home_introduction h2 {
display: none; display: none;
@ -975,12 +991,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
width: 50%; width: 50%;
height: auto; height: auto;
} }
@media (min-width: 760px) { @media (min-width: 1080px) {
.home_introduction > .logo img { .home_introduction > .logo img {
width: 100%; width: 100%;
} }
} }
@media (min-width: 760px) { @media (min-width: 1080px) {
.home_introduction > .logo { .home_introduction > .logo {
width: 170%; width: 170%;
margin: 0 3rem; margin: 0 3rem;
@ -998,9 +1014,15 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.home_introduction article > div p { .home_introduction article > div p {
padding-left: 3rem;
padding-right: 3rem; padding-right: 3rem;
} }
} }
@media (min-width: 1080px) {
.home_introduction article > div p {
padding-left: 0;
}
}
@media (min-width: 760px) { @media (min-width: 760px) {
.home_introduction article > div { .home_introduction article > div {
padding: 0 !important; padding: 0 !important;
@ -1045,6 +1067,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
margin-left: 20vw; margin-left: 20vw;
margin-right: 20vw; margin-right: 20vw;
width: calc(100% - 40vw); width: calc(100% - 40vw);
}
}
@media (min-width: 1080px) {
.home_introduction {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
@ -1150,18 +1176,74 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
} }
} }
#sites-map-container #popup h3 { .map-projets {
background-color: white;
padding: 1rem 0;
margin-left: 3vw;
width: calc(100% - 3vw * 2);
}
@media (min-width: 760px) {
.map-projets {
margin-left: 20vw;
width: calc(100% - 40vw);
}
}
@media (min-width: 1080px) {
.map-projets {
margin-left: 25vw;
width: calc(100% - 50vw);
}
}
.map-projets > h2 {
font-family: "Barlow Condensed", sans-serif;
font-size: 1.2rem;
padding: 0 3vw;
margin-top: 1rem;
color: #038788;
text-transform: uppercase;
}
.map-projets > h2 a {
color: #038788;
}
@media (min-width: 760px) {
.map-projets > h2 {
font-size: 2.3rem;
}
}
.map-projets > .projets_intro {
padding: 0 3vw;
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
}
.map-projets > .projets_intro h1, .map-projets > .projets_intro h2, .map-projets > .projets_intro h3,
.map-projets > .projets_intro h4, .map-projets > .projets_intro h5, .map-projets > .projets_intro h6 {
font-family: "Barlow", sans-serif;
color: black;
font-size: 1.6rem;
}
.map-projets > .projets_intro a {
color: black;
}
.map-projets > .projets_intro > p {
margin: 1rem 0;
}
.map-projets > #sites-map-container {
margin: 0 2rem;
width: calc(100% - 4rem);
}
.map-projets > #sites-map-container #popup h3 {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 0.9rem; font-size: 0.9rem;
color: #038788; color: #038788;
font-weight: 800; font-weight: 800;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
#sites-map-container #popup h3 { .map-projets > #sites-map-container #popup h3 {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
#sites-map-container #popup p { .map-projets > #sites-map-container #popup p {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.4; line-height: 1.4;
@ -1169,15 +1251,14 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.fullpage { .fullpage {
margin-bottom: 10vh; margin-bottom: 10vh;
margin-top: -3vh;
padding-top: 3vh; padding-top: 3vh;
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); padding-bottom: 3vh;
background-color: white;
position: relative; position: relative;
} }
.fullpage > h2 { .fullpage h2 {
margin-top: 5vh; margin-top: 5vh !important;
margin-bottom: 7vh; margin-bottom: 7vh;
background-color: #fcf9ee;
z-index: 1; z-index: 1;
position: relative; position: relative;
width: auto; width: auto;
@ -1189,51 +1270,21 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
color: #038788; color: #038788;
text-transform: uppercase; text-transform: uppercase;
} }
.fullpage > h2 a { .fullpage h2 a {
color: #038788; color: #038788;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.fullpage > h2 { .fullpage h2 {
font-size: 2.3rem; font-size: 2.3rem;
} }
} }
@media (min-width: 760px) {
.fullpage > h2 {
background-color: unset;
}
}
.fullpage .legende { .fullpage .legende {
display: block !important; display: block !important;
font-size: 0.8rem; font-size: 0.8rem;
color: #314e41; color: #314e41;
} }
.fullpage .fullpage_content > h2 { .fullpage .fullpage_content > h2 {
margin-top: 5vh;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: #fcf9ee;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
font-family: "Barlow Condensed", sans-serif;
font-size: 1.2rem;
padding: 0 3vw;
margin-top: 1rem;
color: #038788;
text-transform: uppercase;
}
.fullpage .fullpage_content > h2 a {
color: #038788;
}
@media (min-width: 760px) {
.fullpage .fullpage_content > h2 {
font-size: 2.3rem;
}
}
@media (min-width: 760px) {
.fullpage .fullpage_content > h2 {
background-color: unset;
}
} }
.fullpage .fullpage_content .sous_titre { .fullpage .fullpage_content .sous_titre {
font-size: 1.2rem; font-size: 1.2rem;
@ -1313,7 +1364,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.fullpage { .fullpage {
margin-top: 2vh; margin-top: 5vh;
padding-top: 0; padding-top: 0;
width: 75vw; width: 75vw;
margin-left: 12.5vw; margin-left: 12.5vw;
@ -1321,7 +1372,8 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
} }
@media (min-width: 1080px) { @media (min-width: 1080px) {
.fullpage { .fullpage {
width: 50%; margin-top: 13vh;
width: 50vw;
margin-left: 25%; margin-left: 25%;
} }
} }
@ -1333,12 +1385,121 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
} }
} }
@media (min-width: 760px) {
main:has(#block-erabletheme-leprogramme-2) .fullpage {
width: 70vw;
margin-left: 2vw;
}
}
@media (min-width: 1080px) {
main:has(#block-erabletheme-leprogramme-2) .fullpage {
width: 50vw;
margin-left: 3vw;
margin-right: 24vw;
}
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
height: auto;
margin-top: 2vh;
margin-bottom: 2vh;
}
@media screen and (min-width: 760px) {
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
margin-top: 5vh;
margin-bottom: 0;
}
}
@media screen and (min-width: 1080px) {
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
margin-top: 13vh;
}
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div {
width: auto;
display: inline-block;
}
@media screen and (min-width: 760px) {
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div {
position: sticky;
top: 5vh;
width: 27vw;
}
}
@media screen and (min-width: 1080px) {
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div {
top: 12vh;
width: 22vw;
}
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 {
padding: 1.5rem;
background-color: white;
margin-left: 2vw;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 {
padding-bottom: 1rem;
border-bottom: solid 1px #038788;
display: flex;
justify-content: space-between;
cursor: pointer;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > span {
font-family: "Marianne", sans-serif;
font-size: 0.9rem;
color: #038788;
font-weight: 800;
}
@media (min-width: 760px) {
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > span {
font-size: 1.2rem;
}
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div {
mask-image: url("/themes/erabletheme/assets/icons/arrow-down-s-line.svg");
background-size: contain;
background-color: #038788;
width: 1.3rem;
height: 1.3rem;
color: #038788;
transform: rotate(0deg);
transition: transform 0.3s ease;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div.closed {
transform: rotate(180deg);
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul {
max-height: 100vh;
overflow: hidden;
transition: max-height 0.6s ease;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li {
margin: 1rem 0;
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li > a {
color: black;
font-size: 0.9rem;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li > a:hover, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li > a.is-active {
font-weight: 800;
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul.closed {
max-height: 0vh;
}
.paragraph--type--membre-equipe { .paragraph--type--membre-equipe {
height: auto; height: auto;
display: grid; display: grid;
grid-template-columns: 30vw auto 1fr; grid-template-columns: 30vw auto 1fr;
grid-auto-rows: auto; grid-auto-rows: auto;
margin-bottom: 5vh; margin-bottom: 5vh;
padding: 0 3vw !important;
}
.paragraph--type--membre-equipe:first-of-type {
margin-top: 5vh;
} }
.paragraph--type--membre-equipe > div:first-of-type { .paragraph--type--membre-equipe > div:first-of-type {
grid-row: 1/3; grid-row: 1/3;
@ -1348,14 +1509,26 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.paragraph--type--membre-equipe > div:first-of-type > div { .paragraph--type--membre-equipe > div:first-of-type > div {
width: 20vw; width: 20vw;
height: 20vw; height: 20vw;
overflow: hidden; position: relative;
border-radius: 10vw;
} }
.paragraph--type--membre-equipe > div:first-of-type > div img { .paragraph--type--membre-equipe > div:first-of-type > div img {
border-radius: 10vw;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.paragraph--type--membre-equipe > div:first-of-type > div::after {
top: 0;
left: 0;
position: absolute;
content: "";
height: 100%;
width: 100%;
background-image: url("/themes/erabletheme/assets/cercle_dessin.svg");
background-size: cover;
display: block;
pointer-events: none;
}
.paragraph--type--membre-equipe > div:nth-of-type(2), .paragraph--type--membre-equipe > div:nth-of-type(2),
.paragraph--type--membre-equipe > div:nth-of-type(3) { .paragraph--type--membre-equipe > div:nth-of-type(3) {
margin-bottom: 2vh; margin-bottom: 2vh;
@ -1380,6 +1553,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
font-size: 1rem; font-size: 1rem;
line-height: 1.4; line-height: 1.4;
} }
.paragraph--type--membre-equipe > div:last-of-type > div > p {
margin-top: 0 !important;
padding-left: 0;
}
@media (min-width: 760px) { @media (min-width: 760px) {
.paragraph--type--membre-equipe { .paragraph--type--membre-equipe {
grid-template-columns: 10vw auto 1fr; grid-template-columns: 10vw auto 1fr;
@ -1392,7 +1569,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.paragraph--type--membre-equipe > div:nth-of-type(2) { .paragraph--type--membre-equipe > div:nth-of-type(2) {
padding-left: 3vw; padding-left: 3vw;
} }
.paragraph--type--membre-equipe > div:last-of-type { .paragraph--type--membre-equipe > div:last-of-type > div > p {
padding-left: 3vw; padding-left: 3vw;
} }
} }
@ -1431,6 +1608,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
display: grid; display: grid;
grid-template-columns: 0.3fr 1fr; grid-template-columns: 0.3fr 1fr;
align-items: center; align-items: center;
padding: 0 3vw;
} }
.content_partenaires .views-row article > div:first-of-type > div:first-of-type > div { .content_partenaires .views-row article > div:first-of-type > div:first-of-type > div {
width: 30vw; width: 30vw;
@ -1699,6 +1877,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
grid-row: 1/7; grid-row: 1/7;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
position: relative;
} }
.fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) > img, .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) > img { .fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) > img, .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) > img {
width: 10rem; width: 10rem;
@ -1707,6 +1886,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
padding: 1rem; padding: 1rem;
margin-right: 1rem; margin-right: 1rem;
} }
.fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."])::after, .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."])::after {
top: 1.2rem;
left: 1.2rem;
position: absolute;
content: "";
width: 8rem;
height: 8rem;
background-image: url("/themes/erabletheme/assets/cercle_dessin.svg");
background-size: cover;
display: block;
pointer-events: none;
}
.fullpage.meetup > .meetup_list > .views-row > a > article > p.occupation, .fullpage.meetup > .meetup_list > .views-row > article > p.occupation { .fullpage.meetup > .meetup_list > .views-row > a > article > p.occupation, .fullpage.meetup > .meetup_list > .views-row > article > p.occupation {
grid-column: 2; grid-column: 2;
grid-row: 1/2; grid-row: 1/2;
@ -2048,6 +2239,204 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
display: none; display: none;
} }
.fullpage.projets {
padding-top: 5vh;
}
@media (min-width: 1080px) {
.fullpage.projets > .intro_map {
display: flex;
flex-direction: row;
}
}
.fullpage.projets > .intro_map > header {
margin-right: 5vw;
padding: 0 3vw;
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
}
.fullpage.projets > .intro_map > header h1, .fullpage.projets > .intro_map > header h2, .fullpage.projets > .intro_map > header h3,
.fullpage.projets > .intro_map > header h4, .fullpage.projets > .intro_map > header h5, .fullpage.projets > .intro_map > header h6 {
padding: 0 !important;
margin: 0 !important;
font-family: "Barlow", sans-serif;
color: black;
font-size: 1.6rem;
}
.fullpage.projets > .intro_map > header > h2 {
margin-bottom: 5vh !important;
padding-bottom: 3.5vh !important;
border-bottom: 1px solid #038788;
font-family: "Barlow Condensed", sans-serif;
font-size: 1.2rem;
padding: 0 3vw;
margin-top: 1rem;
color: #038788;
text-transform: uppercase;
}
.fullpage.projets > .intro_map > header > h2 a {
color: #038788;
}
@media (min-width: 760px) {
.fullpage.projets > .intro_map > header > h2 {
font-size: 2.3rem;
}
}
@media (min-width: 1080px) {
.fullpage.projets > .intro_map > header > h2 {
width: 100%;
}
}
.fullpage.projets > .intro_map .projets_intro {
display: none;
}
.fullpage.projets > .intro_map #sites-map-container {
width: 70%;
padding: 0 !important;
}
@media screen and (min-width: 760px) {
.fullpage.projets > .intro_map #sites-map-container {
width: 50%;
}
}
@media (min-width: 1080px) {
.fullpage.projets > .intro_map #sites-map-container {
margin-right: 8vw !important;
width: 85%;
}
}
.fullpage.projets > .intro_map #sites-map-container #popup h3 {
font-family: "Marianne", sans-serif;
font-size: 0.9rem;
color: #038788;
font-weight: 800;
}
@media (min-width: 760px) {
.fullpage.projets > .intro_map #sites-map-container #popup h3 {
font-size: 1.2rem;
}
}
.fullpage.projets > .intro_map #sites-map-container #popup p {
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
}
.fullpage.projets > .projets_list {
display: grid;
margin: 3vh 3vw;
margin-top: 8vh;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 760px) {
.fullpage.projets > .projets_list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1080px) {
.fullpage.projets > .projets_list {
grid-template-columns: repeat(3, 1fr);
}
}
.fullpage.projets > .projets_list > h3 {
display: none;
}
.fullpage.projets > .projets_list > .views-row {
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(4, auto);
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama {
grid-column: 1;
grid-row: 1/5;
align-self: center;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama > .field-content {
width: 8rem;
height: 8rem;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama > .field-content > a {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama > .field-content > a img {
width: 100%;
height: 100%;
mask-image: url("/themes/erabletheme/assets/shapes/shape_1.svg");
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: center;
object-fit: cover;
}
.fullpage.projets > .projets_list > .views-row > .views-field-title {
grid-column: 2;
grid-row: 1;
margin-bottom: 1rem;
font-family: "Marianne", sans-serif;
font-size: 0.9rem;
color: #038788;
font-weight: 800;
}
.fullpage.projets > .projets_list > .views-row > .views-field-title a {
color: #038788;
}
@media (min-width: 760px) {
.fullpage.projets > .projets_list > .views-row > .views-field-title {
font-size: 1.2rem;
}
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre {
grid-column: 2;
grid-row: 2;
font-size: 1.1rem !important;
margin-bottom: 1rem;
line-height: 1.3;
font-family: "Barlow", sans-serif;
color: black;
font-size: 1.6rem;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre a {
color: black;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-localisation-textuel {
grid-column: 2;
grid-row: 3;
margin-bottom: 1rem;
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-localisation-textuel a {
color: black;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-th {
grid-column: 2;
grid-row: 4;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li {
display: inline-block;
font-size: 0.8rem !important;
background-color: #d3f0ea;
margin: 0.2rem;
transition: background-color 0.3s ease;
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li:hover {
background-color: #8ec2b8;
}
.fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li a {
display: block;
color: black;
padding: 0.2rem 0.4rem;
}
@media (min-width: 760px) { @media (min-width: 760px) {
.fullpage.actus .actus_list { .fullpage.actus .actus_list {
display: grid; display: grid;

File diff suppressed because one or more lines are too long

View File

@ -11,7 +11,6 @@
function erabletheme_preprocess_html(&$variables) { function erabletheme_preprocess_html(&$variables) {
} }
/** /**
* Implements hook_preprocess_HOOK() for page.html.twig. * Implements hook_preprocess_HOOK() for page.html.twig.
*/ */
@ -61,8 +60,16 @@ function erabletheme_preprocess_region(&$variables) {
$t="t"; $t="t";
} }
function erabletheme_preprocess_views_view(&$variables) {
$t="t"; function erabletheme_preprocess_views_view(array &$variables) {
if ($variables['view']->current_display === 'page_1') {
$block_id = 'sitesmap_block';
$block = \Drupal::service('plugin.manager.block')->createInstance($block_id, []);
if ($block) {
$block_render_array = $block->build();
$variables['custom_sites_map'] = $block_render_array;
}
}
} }
/* fonctionne mais meilleure méthode avec les suggestions page--xxx */ /* fonctionne mais meilleure méthode avec les suggestions page--xxx */
@ -99,6 +106,9 @@ function erabletheme_theme_suggestions_views_view_alter(array &$suggestions, arr
case 'meetup': case 'meetup':
$suggestions[] = 'views_view__content_meetup'; $suggestions[] = 'views_view__content_meetup';
break; break;
case 'projets':
$suggestions[] = 'views_view__content_projets';
break;
} }
} }

View File

@ -232,6 +232,39 @@
programSubmenu.addEventListener("mouseenter", showSubmenu); programSubmenu.addEventListener("mouseenter", showSubmenu);
programSubmenu.addEventListener("mouseleave", hideSubmenu); programSubmenu.addEventListener("mouseleave", hideSubmenu);
//
// Aside menu toggle
//
const sideMenuTitle = document.querySelector('#block-erabletheme-leprogramme-2 h2');
if (sideMenuTitle) {
sideMenuTitle.addEventListener('click', () => {
const sideMenu = document.querySelector('#block-erabletheme-leprogramme-2 > ul');
const titleArrow = sideMenuTitle.querySelector('div');
if (!sideMenu.classList.contains('closed')) {
sideMenu.classList.add('closed');
titleArrow.classList.add('closed');
} else {
sideMenu.classList.remove('closed');
titleArrow.classList.remove('closed');
}
});
}
//
// index projets random shape
//
if (document.querySelector('.projets_list')) {
const projets = document.querySelectorAll('.projets_list > .views-row');
const shapesAmount = 4;
for (let i = 0; i < projets.length; i++) {
const randomShape = Math.floor(Math.random() * shapesAmount) + 1;
const img = projets[i].querySelector('img');
img.style.maskImage = `url('/themes/erabletheme/assets/shapes/shape_${randomShape}.svg')`;
}
}
} }
} }

View File

@ -1,21 +1,17 @@
.fullpage { .fullpage {
margin-bottom: 10vh; margin-bottom: 10vh;
margin-top: -3vh;
padding-top: 3vh; padding-top: 3vh;
@include beige_gradient(); padding-bottom: 3vh;
background-color: white;
position: relative; position: relative;
> h2 { h2 {
margin-top: 5vh; margin-top: 5vh !important;
margin-bottom: 7vh; margin-bottom: 7vh;
background-color: $beige;
z-index: 1; z-index: 1;
position: relative; position: relative;
width: auto; width: auto;
display: inline-block; display: inline-block;
@include main_title(); @include main_title();
@media (min-width: $breakpoint_tablet) {
background-color: unset;
}
} }
.legende { .legende {
@ -26,17 +22,7 @@
.fullpage_content { .fullpage_content {
> h2 { > h2 {
margin-top: 5vh;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: $beige;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
@include main_title();
@media (min-width: $breakpoint_tablet) {
background-color: unset;
}
} }
.sous_titre { .sous_titre {
@ -82,7 +68,6 @@
display: none; display: none;
} }
h3, h4, h5, h6 { h3, h4, h5, h6 {
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: $x_margin; padding-left: $x_margin;
@ -94,13 +79,14 @@
margin-bottom: 8vh; margin-bottom: 8vh;
} }
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
margin-top: 2vh; margin-top: 5vh;
padding-top: 0; padding-top: 0;
width: 75vw; width: 75vw;
margin-left: 12.5vw; margin-left: 12.5vw;
} }
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
width: 50%; margin-top: 13vh;
width: 50vw;
margin-left: 25%; margin-left: 25%;
} }
@ -112,3 +98,91 @@
} }
} }
} }
main:has(#block-erabletheme-leprogramme-2) {
.fullpage {
@media (min-width: $breakpoint_tablet) {
width: 70vw;
margin-left: 2vw;
}
@media (min-width: $breakpoint_desktop) {
width: 50vw;
margin-left: 3vw;
margin-right: 24vw;
}
}
}
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
height: auto;
margin-top: 2vh;
margin-bottom: 2vh;
@media screen and (min-width: $breakpoint_tablet) {
margin-top: 5vh;
margin-bottom: 0;
}
@media screen and (min-width: $breakpoint_desktop) {
margin-top: 13vh;
}
> div {
width: auto;
display: inline-block;
@media screen and (min-width: $breakpoint_tablet) {
position: sticky;
top: 5vh;
width: 27vw;
}
@media screen and (min-width: $breakpoint_desktop) {
top: 12vh;
width: 22vw;
}
#block-erabletheme-leprogramme-2 {
padding: 1.5rem;
background-color: white;
margin-left: 2vw;
> h2 {
padding-bottom: 1rem;
border-bottom: solid 1px $teal;
display: flex;
justify-content: space-between;
cursor: pointer;
> span {
@include sous_titre();
}
> div {
mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
background-size: contain;
background-color: $teal;
width: 1.3rem;
height: 1.3rem;
color: $teal;
transform: rotate(0deg);
transition: transform 0.3s ease;
&.closed {
transform: rotate(180deg);
}
}
}
> ul {
max-height: 100vh;
overflow: hidden;
transition: max-height 0.6s ease;
> li {
margin: 1rem 0;
@include main_text_content();
> a {
color: black;
font-size: $m_font_size;
&:hover,
&.is-active {
font-weight: 800;
}
}
}
&.closed {
max-height: 0vh;
}
}
}
}
}

View File

@ -4,6 +4,10 @@
grid-template-columns: 30vw auto 1fr; grid-template-columns: 30vw auto 1fr;
grid-auto-rows: auto; grid-auto-rows: auto;
margin-bottom: 5vh; margin-bottom: 5vh;
padding: 0 3vw !important;
&:first-of-type {
margin-top: 5vh;
}
> div:first-of-type { > div:first-of-type {
grid-row: 1 / 3; grid-row: 1 / 3;
display: flex; display: flex;
@ -11,13 +15,25 @@
> div { > div {
width: 20vw; width: 20vw;
height: 20vw; height: 20vw;
overflow: hidden; position: relative;
border-radius: 10vw;
img { img {
border-radius: 10vw;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
&::after {
top: 0;
left: 0;
position: absolute;
content: '';
height: 100%;
width: 100%;
background-image: url('/themes/erabletheme/assets/cercle_dessin.svg');
background-size: cover;
display: block;
pointer-events: none;
}
} }
} }
@ -35,6 +51,10 @@
> div:last-of-type { > div:last-of-type {
grid-column: 2 / 4; grid-column: 2 / 4;
@include main_text_content(); @include main_text_content();
> div > p {
margin-top: 0 !important;
padding-left: 0;
}
} }
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
grid-template-columns: 10vw auto 1fr; grid-template-columns: 10vw auto 1fr;
@ -48,7 +68,7 @@
padding-left: 3vw; padding-left: 3vw;
} }
> div:last-of-type { > div:last-of-type > div > p {
padding-left: 3vw; padding-left: 3vw;
} }
} }

View File

@ -2,7 +2,8 @@
background-color: white; background-color: white;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 4rem 1rem; padding: 3rem 1rem;
margin: 2rem 0;
h2 { h2 {
display: none; display: none;
} }
@ -15,14 +16,11 @@
img { img {
width: 50%; width: 50%;
height: auto; height: auto;
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_desktop) {
width: 100%; width: 100%;
} }
}
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
//width: 18vw;
}
}
@media (min-width: $breakpoint_tablet) {
width: 170%; width: 170%;
margin: 0 3rem; margin: 0 3rem;
} }
@ -34,8 +32,12 @@
@include main_text_content(); @include main_text_content();
width: 100%; width: 100%;
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
padding-left: 3rem;
padding-right: 3rem; padding-right: 3rem;
} }
@media (min-width: $breakpoint_desktop) {
padding-left: 0;
}
} }
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
padding: 0 !important; padding: 0 !important;
@ -61,6 +63,8 @@
margin-left: 20vw; margin-left: 20vw;
margin-right: 20vw; margin-right: 20vw;
width: calc(100% - 40vw); width: calc(100% - 40vw);
}
@media (min-width: $breakpoint_desktop) {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
@ -122,7 +126,39 @@
} }
} }
#sites-map-container { .map-projets {
background-color: white;
padding: 1rem 0;
margin-left: $x_margin;
width: calc(100% - #{$x_margin} * 2);
@media (min-width: $breakpoint_tablet) {
margin-left: 20vw;
width: calc(100% - 40vw);
}
@media (min-width: $breakpoint_desktop) {
margin-left: 25vw;
width: calc(100% - 50vw);
}
> h2 {
@include main_title();
}
> .projets_intro {
padding: 0 3vw;
@include main_text_content();
h1, h2, h3,
h4, h5, h6 {
@include sous_titre_alt();
}
a {
color: black;
}
> p {
margin: 1rem 0;
}
}
> #sites-map-container {
margin: 0 2rem;
width: calc(100% - 4rem);
#popup { #popup {
h3 { h3 {
@include sous_titre(); @include sous_titre();
@ -131,4 +167,5 @@
@include main_text_content(); @include main_text_content();
} }
} }
}
} }

View File

@ -116,6 +116,7 @@
grid-row: 1/7; grid-row: 1/7;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
position: relative;
> img { > img {
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
@ -123,6 +124,18 @@
padding: 1rem; padding: 1rem;
margin-right: 1rem; margin-right: 1rem;
} }
&::after {
top: 1.2rem;
left: 1.2rem;
position: absolute;
content: '';
width: 8rem;
height: 8rem;
background-image: url('/themes/erabletheme/assets/cercle_dessin.svg');
background-size: cover;
display: block;
pointer-events: none;
}
} }
> p.occupation { > p.occupation {
grid-column: 2; grid-column: 2;

View File

@ -11,6 +11,7 @@
display: grid; display: grid;
grid-template-columns: 0.3fr 1fr; grid-template-columns: 0.3fr 1fr;
align-items: center; align-items: center;
padding: 0 3vw;
> div:first-of-type { > div:first-of-type {
> div { > div {
width: 30vw; width: 30vw;

View File

@ -0,0 +1,150 @@
.fullpage.projets {
padding-top: 5vh;
> .intro_map {
@media (min-width: $breakpoint_desktop) {
display: flex;
flex-direction: row;
}
> header {
margin-right: 5vw;
padding: 0 3vw;
@include main_text_content();
h1, h2, h3,
h4, h5, h6 {
padding: 0 !important;
margin: 0 !important;
@include sous_titre_alt();
}
> h2 {
margin-bottom: 5vh !important;
padding-bottom: 3.5vh !important;
border-bottom: 1px solid $teal;
@include main_title();
@media (min-width: $breakpoint_desktop) {
width: 100%;
}
}
}
.projets_intro {
display: none;
}
#sites-map-container {
width: 70%;
padding: 0 !important;
@media screen and (min-width: $breakpoint_tablet) {
width: 50%;
}
@media (min-width: $breakpoint_desktop) {
margin-right: 8vw !important;
width: 85%;
}
#popup {
h3 {
@include sous_titre();
}
p {
@include main_text_content();
}
}
}
}
> .projets_list {
display: grid;
margin: 3vh $x_margin;
margin-top: 8vh;
grid-template-columns: 1fr;
gap: 2rem;
@media (min-width: $breakpoint_tablet) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $breakpoint_desktop) {
grid-template-columns: repeat(3, 1fr);
}
> h3 {
display: none;
}
> .views-row{
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(4, auto);
> .views-field-field-diaporama {
grid-column: 1;
grid-row: 1/5;
align-self: center;
> .field-content {
width: 8rem;
height: 8rem;
> a {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: center;
object-fit: cover;
}
}
}
}
> .views-field-title {
grid-column: 2;
grid-row: 1;
margin-bottom: 1rem;
a {
color: $teal;
}
@include sous_titre();
}
> .views-field-field-sous-titre {
grid-column: 2;
grid-row: 2;
font-size: 1.1rem !important;
margin-bottom: 1rem;
line-height: 1.3;
a {
color: black;
}
@include sous_titre_alt();
}
> .views-field-field-localisation-textuel {
grid-column: 2;
grid-row: 3;
margin-bottom: 1rem;
@include main_text_content();
a {
color: black;
}
}
> .views-field-field-th {
grid-column: 2;
grid-row: 4;
ul {
li {
display: inline-block;
font-size: 0.8rem !important;
background-color: #d3f0ea;
margin: 0.2rem;
transition: background-color 0.3s ease;
@include main_text_content();
&:hover {
background-color: #8ec2b8;
}
a {
display: block;
color: black;
padding: 0.2rem 0.4rem;
}
}
}
}
}
}
}

View File

@ -6,8 +6,20 @@
} }
} */ } */
body {
background-color: lightgrey;
}
.layout-container { .layout-container {
margin: 0 !important; display: flex;
}
main:has(#block-erabletheme-leprogramme-2) {
display: flex;
flex-direction: column-reverse;
@media screen and (min-width: $breakpoint_tablet) {
flex-direction: row-reverse;
}
} }
strong { strong {

View File

@ -5,7 +5,7 @@
box-sizing: border-box; box-sizing: border-box;
> div:first-of-type { > div:first-of-type {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 20 / 9;
overflow: hidden; overflow: hidden;
padding-left: $x_margin; padding-left: $x_margin;
padding-right: $x_margin; padding-right: $x_margin;
@ -49,6 +49,7 @@
h2 { h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-top: 1rem !important;
@include main_title(); @include main_title();
} }
} }

View File

@ -22,5 +22,6 @@
@import "_partenaires.scss"; @import "_partenaires.scss";
@import "_consultation.scss"; @import "_consultation.scss";
@import "_meetup.scss"; @import "_meetup.scss";
@import "_projets.scss";
@import "_actualites.scss"; @import "_actualites.scss";
@import "_faq.scss"; @import "_faq.scss";

View File

@ -0,0 +1,64 @@
{#
/**
* @file
* Default theme implementation for a menu block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - in_preview: Whether the plugin is being rendered in preview mode.
* - content: The content of this block.
* - attributes: HTML attributes for the containing element.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: HTML attributes for the title element.
* - content_attributes: HTML attributes for the content element.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* Headings should be used on navigation menus that consistently appear on
* multiple pages. When this menu block's label is configured to not be
* displayed, it is automatically made invisible using the 'visually-hidden' CSS
* class, which still keeps it visible for screen-readers and assistive
* technology. Headings allow screen-reader and keyboard only users to navigate
* to or skip the links.
* See http://juicystudio.com/article/screen-readers-display-none.php and
* http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
*
* @ingroup themeable
*/
#}
{% set heading_id = attributes.id ~ '-menu'|clean_id %}
{% set active_item_found = false %}
{% for item in content['#items'] %}
{% if item.in_active_trail %}
{% set active_item_found = true %}
{% endif %}
{% endfor %}
{% if active_item_found %}
<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
{# Label. If not displayed, we still provide it for screen readers. #}
{% if not configuration.label_display %}
{% set title_attributes = title_attributes.addClass('visually-hidden') %}
{% endif %}
{{ title_prefix }}
<h2{{ title_attributes.setAttribute('id', heading_id) }}>
<span>{{ configuration.label }}</span>
<div></div>
</h2>
{{ title_suffix }}
{# Menu. #}
{% block content %}
{{ content }}
{% endblock %}
</nav>
{% endif %}

View File

@ -28,7 +28,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div{{ attributes }}> <div{{ attributes.addClass('map-projets') }}>
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>

View File

@ -0,0 +1,67 @@
{#
/**
* @file
* Default theme implementation for main view template.
*
* Available variables:
* - attributes: Remaining HTML attributes for the element.
* - css_name: A CSS-safe version of the view name.
* - css_class: The user-specified classes names, if any.
* - header: The optional header.
* - footer: The optional footer.
* - rows: The results of the view query, if any.
* - empty: The content to display if there are no rows.
* - pager: The optional pager next/prev links to display.
* - exposed: Exposed widget form/info to display.
* - feed_icons: Optional feed icons to display.
* - more: An optional link to the next page of results.
* - title: Title of the view, only used when displaying in the admin preview.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the view title.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the view title.
* - attachment_before: An optional attachment view to be displayed before the
* view content.
* - attachment_after: An optional attachment view to be displayed after the
* view content.
* - dom_id: Unique id for every view being printed to give unique class for
* JavaScript.
*
* @see template_preprocess_views_view()
*
* @ingroup themeable
*/
#}
{%
set classes = [
dom_id ? 'js-view-dom-id-' ~ dom_id,
]
%}
<div{{ attributes.addClass(classes).addClass('fullpage', 'projets', 'large-container') }}>
<div class="intro_map">
{% if header %}
<header>
<h2>
{{ view_array['#title']['#markup'] }}
</h2>
{{ header }}
</header>
{% endif %}
{{ custom_sites_map }}
</div>
{{ exposed }}
{{ attachment_before }}
<div class="projets_list">
{% if rows -%}
{{ rows }}
{% elseif empty -%}
{{ empty }}
{% endif %}
{{ pager }}
</div>
{{ attachment_after }}
{{ more }}
</div>