From 8c365d816ab3eb5516f30a9755d7bf42147f0e59 Mon Sep 17 00:00:00 2001 From: ouidade Date: Sun, 8 Jun 2025 22:08:11 +0200 Subject: [PATCH] responsive slide ressources --- web/themes/custom/eql/dist/assets/bundle.js | 2 +- .../custom/eql/dist/assets/css/bundle.css | 66 ++++++++++++++++--- web/themes/custom/eql/scripts/main.js | 8 ++- .../custom/eql/scss/pages/ressources.scss | 57 +++++++++++++--- .../partials/_node-type-ressource-teaser.scss | 52 +++------------ 5 files changed, 122 insertions(+), 63 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/bundle.js b/web/themes/custom/eql/dist/assets/bundle.js index eb69cc6..7ebf74e 100644 --- a/web/themes/custom/eql/dist/assets/bundle.js +++ b/web/themes/custom/eql/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("/**\n * @file\n * External links js file.\n */\n\n (function ($, Drupal, d \*************************/ /***/ (function() { -eval("jQuery(function ($) {\n console.log('salut');\n\n // MENU BURGER\n const burger = document.getElementById(\"block-burger\");\n const burgertitle = document.getElementById(\"block-burger-menu\");\n if (burger && burgertitle) {\n burgertitle.addEventListener(\"click\", function () {\n burger.classList.toggle('opened');\n });\n }\n\n // FAQ — réponses\n const answers = document.getElementsByClassName(\"field--name-field-reponse\");\n const fichiers = document.getElementsByClassName(\"field--name-field-fichiers\");\n const liens = document.getElementsByClassName(\"field--name-field-liens\");\n const ressources = document.getElementsByClassName(\"field--name-field-ress\");\n const questions = document.getElementsByClassName(\"field--name-field-question\");\n\n for (let i = 0; i < questions.length; i++) {\n const q = questions[i];\n q.addEventListener(\"click\", function () {\n // Réponses\n Array.from(answers).forEach(a => a.classList.remove(\"opened\"));\n const r = this.parentNode.querySelector(\".field--name-field-reponse\");\n if (r) r.classList.add(\"opened\");\n\n // Fichiers\n Array.from(fichiers).forEach(f => f.classList.remove(\"opened\"));\n const f = this.parentNode.querySelector(\".field--name-field-fichiers\");\n if (f) f.classList.add(\"opened\");\n\n // Liens\n Array.from(liens).forEach(l => l.classList.remove(\"opened\"));\n const l = this.parentNode.querySelector(\".field--name-field-liens\");\n if (l) l.classList.add(\"opened\");\n\n // Ressources\n Array.from(ressources).forEach(r => r.classList.remove(\"opened\"));\n const res = this.parentNode.querySelector(\".field--name-field-ress\");\n if (res) res.classList.add(\"opened\");\n });\n }\n\n // SLIDESHOW INIT\n $('.path-frontpage .view-actus-blocks-pages .view-content .view-type-slide .views-row-wrapper').slick({\n slidesToShow: 1,\n dots: true,\n arrows: true,\n centerMode: true,\n responsive: [{\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n\n $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({\n dots: true,\n arrows: true,\n adaptiveHeight: true,\n responsive: [{\n breakpoint: 800,\n settings: { adaptiveHeight: true }\n }]\n });\n\n $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({\n slidesToShow: 1,\n dots: true,\n arrows: false,\n draggable: true,\n adaptiveHeight: true,\n responsive: [{\n breakpoint: 800,\n settings: { adaptiveHeight: true }\n }]\n });\n \n\n\n \n \n ///// fusion views-type-slide de class identique ////////////\n\n const seen = new Set();\n \n $('.view-type-slide').each(function () {\n const $slide = $(this);\n const classes = $slide.attr('class').split(/\\s+/);\n const typeClass = classes.find(cls => cls.startsWith('type-'));\n \n if (typeClass) {\n if (seen.has(typeClass)) {\n // Trouver le premier slide avec cette classe\n const $target = $('.view-type-slide.' + typeClass).first();\n \n // Déplacer les rows de la slide actuelle vers la première\n $slide.find('.views-row').appendTo($target.find('.views-row-wrapper'));\n \n // Supprimer la slide en double\n $slide.remove();\n } else {\n seen.add(typeClass);\n }\n }\n });\n if (!$('.view-content').hasClass('filtered')) {\n $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({\n slidesToShow: 3,\n dots: false,\n arrows: true,\n infinite: false,\n centerMode: false,\n draggable: true,\n \n responsive: [{\n breakpoint: 810,\n settings: {\n slidesToShow: 3,\n arrows: true,\n draggable: true,\n centerMode: false,\n }\n }]\n });\n }\n\n\n // Classes media → .wrapper-ressource\n $(\".wrapper-ressource\").each(function () {\n const media = $(this).find(\".field--name-field-type-de-media\").text().trim();\n const className = media\n .toLowerCase()\n .normalize(\"NFD\").replace(/[\\u0300-\\u036f]/g, \"\")\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/(^-|-$)/g, '');\n $(this).addClass('type-media-' + className);\n });\n console.log(\"classses media\");\n\n // MASQUER TYPE DE RESSOURCE DOUBLON\n if (document.body.classList.contains(\"path-ressources\")) {\n $(\".view-type-slide\").each(function () {\n const h3Content = $(this).find(\"h3\").text().trim();\n console.log(h3Content);\n $(this).find(\".field--name-field-type-de-ressource .field__item a\").each(function () {\n if ($(this).text().trim() === h3Content) {\n $(this).hide();\n }\n });\n });\n\n }\n\n // Ouvrir les liens externes dans un nouvel onglet\n document.querySelectorAll('a[href^=\"http\"]').forEach(link => {\n if (!link.href.includes(location.hostname)) {\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n }\n });\n\n // Scroll automatique au filtre\n if (document.body.classList.contains(\"path-projets\")) {\n const form = document.querySelector(\".views-exposed-form\");\n if (form) form.setAttribute(\"action\", form.action.split(\"#\")[0] + \"#filtres\");\n\n if (window.location.hash === \"#filtres\") {\n const target = document.getElementById(\"filtres\");\n if (target) {\n const offset = 300;\n const top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n window.scrollTo({ top: top, behavior: \"smooth\" });\n }\n }\n\n\n }\n});\n\n/////////////////start diaporama ressource //////////\ndocument.addEventListener('DOMContentLoaded', function () {\n // Vérifie que le body a la classe souhaitée\n if (!document.body.classList.contains('type-media-images---photos')) return;\n\n // Attendre que les éléments HTML soient bien présents\n const interval = setInterval(() => {\n const mainImage = document.getElementById('mainImage');\n const prevArrow = document.getElementById('prevArrow');\n const nextArrow = document.getElementById('nextArrow');\n const caption = document.getElementById('caption');\n const thumbsContainer = document.getElementById('thumbnails');\n const imagesInDom = document.querySelectorAll('.carousel-items .carousel-item img');\n\n if (mainImage && prevArrow && nextArrow && caption && thumbsContainer && imagesInDom.length > 0) {\n clearInterval(interval); // Tous les éléments sont là, on lance le carrousel\n initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer });\n }\n }, 100);\n});\n\nfunction initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer }) {\n const images = [];\n document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {\n images.push({\n src: img.getAttribute('src'),\n caption: img.getAttribute('alt') || ''\n });\n });\n\n if (!images.length) return;\n\n let currentIndex = 0;\n\n function scrollThumbnailToCenter(index) {\n const thumbnails = document.querySelectorAll('.thumbnails img');\n const activeThumb = thumbnails[index];\n if (activeThumb && thumbsContainer) {\n const containerHeight = thumbsContainer.clientHeight;\n const thumbOffsetTop = activeThumb.offsetTop;\n const thumbHeight = activeThumb.offsetHeight;\n const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);\n thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });\n }\n }\n\n function showImage(index) {\n mainImage.src = images[index].src;\n caption.textContent = images[index].caption;\n\n const thumbnails = document.querySelectorAll('.thumbnails img');\n thumbnails.forEach(img => img.classList.remove('active'));\n if (thumbnails[index]) {\n thumbnails[index].classList.add('active');\n scrollThumbnailToCenter(index);\n }\n }\n\n prevArrow.addEventListener('click', () => {\n currentIndex = (currentIndex - 1 + images.length) % images.length;\n showImage(currentIndex);\n });\n\n nextArrow.addEventListener('click', () => {\n currentIndex = (currentIndex + 1) % images.length;\n showImage(currentIndex);\n });\n\n images.forEach((img, index) => {\n const thumb = document.createElement('img');\n thumb.src = img.src;\n thumb.alt = img.caption;\n thumb.addEventListener('click', () => {\n currentIndex = index;\n showImage(index);\n });\n thumbsContainer.appendChild(thumb);\n });\n\n showImage(currentIndex);\n\n const thumbPrev = document.getElementById('thumbPrev');\n const thumbNext = document.getElementById('thumbNext');\n\n // ✅ Masquer les flèches de thumbnails si pas assez d’images pour scroller\n const thumbHeight = 70; // approx : image + gap\n const visibleCount = Math.floor(thumbsContainer.clientHeight / thumbHeight);\n if (images.length <= visibleCount) {\n if (thumbPrev) thumbPrev.style.display = 'none';\n if (thumbNext) thumbNext.style.display = 'none';\n }\n\n // Boucle haut/bas avec scroll\n thumbPrev.addEventListener('click', () => {\n if (thumbsContainer.scrollTop <= 0) {\n thumbsContainer.scrollTo({ top: thumbsContainer.scrollHeight, behavior: 'smooth' });\n } else {\n thumbsContainer.scrollBy({ top: -150, behavior: 'smooth' });\n }\n });\n\n thumbNext.addEventListener('click', () => {\n const maxScrollTop = thumbsContainer.scrollHeight - thumbsContainer.clientHeight;\n if (thumbsContainer.scrollTop >= maxScrollTop - 1) {\n thumbsContainer.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n thumbsContainer.scrollBy({ top: 150, behavior: 'smooth' });\n }\n });\n}\n\n \n/////////////////end diaporama ressource //////////\n\n\n//////////////////////////start classe en JS si des filtres sont présents///////////\ndocument.addEventListener('DOMContentLoaded', () => {\n if (window.location.search.length > 0) {\n document.querySelector('.view-content')?.classList.add('filtered');\n document.querySelectorAll('.tout-voir').forEach(btn => btn.remove());\n\n }\n});\n//////////////////////////end classe en JS si des filtres sont présents///////////\n\n// ////////////////// start tronquage sous titre //////////////////\n document.addEventListener(\"DOMContentLoaded\", function () {\n const maxLength = 80;\n\n document.querySelectorAll('.view-base-de-donnees .wrapper-ressource .field--name-field-sous-titre a').forEach(function (element) {\n const fullText = element.textContent.trim();\n\n if (fullText.length > maxLength) {\n const truncated = fullText.slice(0, maxLength).trim() + '...';\n element.textContent = truncated;\n }\n });\n });\n // //////////////////end tronquage sous titre //////////////////\n\n////////////////// start boutons media ////////////////\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n const mediaButtons = document.querySelectorAll('.buttons-filtres-ressources a');\n\n mediaButtons.forEach(button => {\n button.addEventListener('click', function (e) {\n e.preventDefault();\n\n // Récupérer l’ID media depuis l’URL du bouton\n const url = new URL(button.href);\n const mediaID = url.searchParams.get('field_type_de_media_target_id');\n\n // Appliquer la valeur dans le \n const select = document.getElementById('edit-field-type-de-media-target-id');\n if (select) {\n select.value = mediaID;\n // Simuler le clic sur le bouton \"Appliquer\"\n const submit = document.querySelector('input#edit-submit-base-de-donnees');\n if (submit) {\n submit.click();\n }\n }\n });\n });\n});\n////////////////// end boutons media ////////////////\n\n\n\n////////////// start croix clear input recherche ////////////\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n const input = document.getElementById(\"edit-combine\");\n const clearBtn = document.querySelector('.form-item-combine .clear-input');\n const form = document.querySelector(\"form.views-exposed-form\");\n\n if (input && clearBtn && form) {\n // Affiche la croix si contenu présent\n input.addEventListener('input', () => {\n clearBtn.style.display = input.value ? 'block' : 'none';\n });\n\n // Efface et soumet le formulaire\n clearBtn.addEventListener('click', () => {\n input.value = '';\n clearBtn.style.display = 'none';\n input.focus();\n form.submit(); // déclenche la recherche sans rechargement manuel\n });\n\n // Affiche la croix au chargement si une valeur est déjà présente\n if (input.value) {\n clearBtn.style.display = 'block';\n }\n }\n});\n\n\n////////////// end croix clear input recherche ////////////\n\n\n//# sourceURL=webpack://dev.eql.fr/./scripts/main.js?"); /***/ }) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index 8b9c174..8a37edb 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -5293,7 +5293,7 @@ svg.ext { } @media (max-width: 810px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale h2 { - margin-left: 0; + margin-left: 2rem; text-align: left; line-height: 4rem; } @@ -5315,14 +5315,14 @@ svg.ext { } @media (max-width: 810px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block { - margin-left: 0; - width: 90%; + margin-left: 2rem; + width: 85%; } } @media (max-width: 479px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block { order: 1; - margin-left: 0; + margin-left: 2rem; } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full { @@ -5331,7 +5331,6 @@ svg.ext { @media (max-width: 810px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full { padding-top: 1rem; - padding-left: 2rem; margin-top: 1rem; } } @@ -5711,6 +5710,11 @@ svg.ext { width: 110vw; z-index: 0; } +@media (max-width: 810px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer)::before { + left: 0; + } +} .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) > * { position: relative; z-index: 1; @@ -5729,6 +5733,12 @@ svg.ext { @media (max-width: 810px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3 { padding-left: 2rem; + width: 70%; + } +} +@media (max-width: 479px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3 { + width: 65% !important; } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) h3.type-publications-issues-du-programme-eqld { @@ -5773,7 +5783,12 @@ svg.ext { @media (max-width: 810px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .tout-voir { left: 81vw; - top: -4.3rem; + } +} +@media (max-width: 479px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .tout-voir { + left: 76vw; + top: -1.5rem; } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper { @@ -5797,18 +5812,31 @@ svg.ext { flex-direction: column; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .views-row { - width: 100%; + width: 100% !important; } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-next::before { content: url("../images/pictos/fleche-droite-dans-rond.png"); - display: block; + display: inline-block; +} +@media (max-width: 810px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-next::before { + transform: scale(0.5); /* Réduction à 50% */ + transform-origin: top left; /* Point d’ancrage du redimensionnement */ + } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-prev::before { content: url("../images/pictos/fleche-droite-dans-rond.png"); display: block; + display: inline-block; transform: scaleX(-1); } +@media (max-width: 810px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-prev::before { + transform: scale(-0.5, 0.5); + transform-origin: top right; /* Point d’ancrage du redimensionnement */ + } +} .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-prev.slick-disabled::before, .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-next.slick-disabled::before { opacity: 0 !important; @@ -5816,6 +5844,19 @@ svg.ext { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-next { right: 10%; } +@media (max-width: 810px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-prev { + left: -10%; + } + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-next { + right: 2%; + } +} +@media (max-width: 479px) { + .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide:not(footer) .views-row-wrapper .slick-prev { + left: -15%; + } +} .carousel { display: none; @@ -6804,6 +6845,11 @@ article.node-type-ressource .wrapper-ressource .field--name-title h2 a { font-weight: 900; font-style: normal; } +@media (max-width: 810px) { + article.node-type-ressource .wrapper-ressource .field--name-title h2 { + line-height: 0 !important; + } +} article.node-type-ressource .wrapper-ressource .field--name-field-auteur-s- { grid-column: 2; margin-top: 0.5rem; @@ -6965,4 +7011,8 @@ article.node-type-ressource.type-paroles-de-laureats .wrapper-ressource .field-- } article.node-type-ressource.type-presse .field--name-field-images { display: none; +} +article.node-type-ressource article.node-type-ressource.type-les-projets-en-images .views-row-wrapper { + display: flex; + background: lawngreen; } \ No newline at end of file diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 40fde73..c1cda35 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -122,10 +122,12 @@ jQuery(function ($) { responsive: [{ breakpoint: 810, settings: { - slidesToShow: 3, - arrows: true, + slidesToShow: 1, + dots: true, + arrows: false, draggable: true, - centerMode: false, + centerMode: true, + } }] }); diff --git a/web/themes/custom/eql/scss/pages/ressources.scss b/web/themes/custom/eql/scss/pages/ressources.scss index 9fda9ee..1c94006 100644 --- a/web/themes/custom/eql/scss/pages/ressources.scss +++ b/web/themes/custom/eql/scss/pages/ressources.scss @@ -20,7 +20,7 @@ margin-left: 28%; @media (max-width:810px) { - margin-left: 0; + margin-left: 2rem; text-align: left; line-height: 4rem; } @@ -43,19 +43,20 @@ margin: auto; margin-left: 28%; @media (max-width:810px) { - margin-left: 0; - width: 90%; + margin-left: 2rem; + width: 85%; } @media (max-width:479px) { order: 1; - margin-left: 0; + margin-left: 2rem; + // margin-right: 2rem; } .config_pages--base-de-donnees--full{ grid-column: 1 / span 5; @media (max-width: 810px){ padding-top: 1rem; - padding-left: 2rem; + // padding-left: 2rem; margin-top:1rem; } @media (max-width: 479px){ @@ -486,6 +487,9 @@ height: 100%; width: 110vw; z-index: 0; + @media (max-width: 810px){ + left: 0; + } } > * { position: relative; @@ -505,6 +509,10 @@ margin-block: 0em; @media (max-width: 810px){ padding-left: 2rem; + width: 70%; + } + @media (max-width: 479px){ + width: 65% !important; } } h3.type-publications-issues-du-programme-eqld { @@ -518,6 +526,7 @@ &:before{ content:url("../images/pictos/picto-ressource-paroleslaureats.svg"); padding-right: 1rem; + } } h3.type-les-projets-en-images { @@ -525,12 +534,14 @@ &:before{ content:url("../images/pictos/picto-ressource-projetsimages.svg"); padding-right: 1rem; + } } h3.type-presse { &:before{ content:url("../images/pictos/picto-ressource-presse.svg"); padding-right: 1rem; + } } @@ -557,7 +568,11 @@ } @media (max-width: 810px){ left: 81vw; - top: -4.3rem; + // top: -4.3rem; + } + @media (max-width: 479px){ + left: 76vw; + top: -1.5rem; } } @@ -580,19 +595,29 @@ padding-left: 2rem; flex-direction: column; .views-row{ - width: 100%; + width: 100% !important; } } .slick-next::before{ content:url("../images/pictos/fleche-droite-dans-rond.png"); - display: block; + // display: block; + display: inline-block; + @media (max-width: 810px){ + transform: scale(0.5); /* Réduction à 50% */ + transform-origin: top left; /* Point d’ancrage du redimensionnement */ + } } .slick-prev::before{ content:url("../images/pictos/fleche-droite-dans-rond.png"); display: block; + display: inline-block; transform: scaleX(-1); - // display: none; + @media (max-width: 810px){ + transform: scale(-0.5, 0.5); + transform-origin: top right; /* Point d’ancrage du redimensionnement */ + } + } .slick-prev.slick-disabled::before, .slick-next.slick-disabled::before{ @@ -601,6 +626,20 @@ .slick-next { right: 10%; } + @media (max-width: 810px){ + .slick-prev { + left: -10%; + } + .slick-next{ + right: 2%; + } + } + @media (max-width: 479px){ + .slick-prev { + left: -15%; + } + } + } } } diff --git a/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss b/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss index 81ca934..60264e7 100644 --- a/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss +++ b/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss @@ -1,7 +1,9 @@ article.node-type-ressource{ margin-bottom: 1rem ; padding-right: 1rem; - h2{text-align: left !important} + h2{ + text-align: left !important; + } .ext{ color: black; } @@ -55,7 +57,9 @@ article.node-type-ressource{ font-weight: 900; font-style: normal; } - + @media (max-width: 810px) { + line-height: 0 !important; + } } } .field--name-field-auteur-s-{ @@ -253,45 +257,9 @@ article.node-type-ressource{ } } - // &.type-les-projets-en-images{ - // width: 500px !important; - // .wrapper-ressource{ - // display: grid; - // grid-template-columns: 3fr 1fr; - // // grid-template-rows: repeat(5, 1fr); - // .field--name-field-type-de-ressource{ - // order: 2; - // grid-row: 2; - // grid-column: 1 /span 2; - // margin-bottom: 0.5rem; - // } - // .field--name-field-type-de-media{ - // order: 1; - // grid-row: 1; - // grid-column: 1 /span 2; - // } - // .field--name-field-images{ - // order: 3; - // grid-column: 1 ; - // grid-row: 3 /span 5; - // height: auto; - // // width: 90%; - // width: 400px !important; - // img{ - // height: auto; - // width: 90%; - // border: 1px solid #a3a3a3; - // } - // } - // .field--name-title, - // .field--name-field-sous-titre, - // .field--name-field-auteur-s-, - // .field--name-field-edition, - // .field--name-field-date-de-parution, - // .field--name-field-mots-clefs{ - // grid-column: 2; - // } + article.node-type-ressource.type-les-projets-en-images .views-row-wrapper { + display: flex; + background: lawngreen; + } - // } - // } } \ No newline at end of file