From bc743b346afb179ddaffe3550c4bf82459e37acc Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 16 Sep 2024 11:34:24 +0200 Subject: [PATCH] design page ressource --- web/themes/custom/reha/dist/bundle.js | 2 +- web/themes/custom/reha/dist/css/bundle.css | 40 ++++++++++++++----- web/themes/custom/reha/js/reha.js | 2 +- .../reha/scss/pages/node-ressource.scss | 32 ++++++++++++--- .../custom/reha/scss/pages/ressources.scss | 14 +++++-- 5 files changed, 70 insertions(+), 20 deletions(-) diff --git a/web/themes/custom/reha/dist/bundle.js b/web/themes/custom/reha/dist/bundle.js index 06821d7..406389e 100644 --- a/web/themes/custom/reha/dist/bundle.js +++ b/web/themes/custom/reha/dist/bundle.js @@ -15,7 +15,7 @@ \********************/ /***/ (() => { -eval("/**\n * @file\n * reha behaviors.\n */\n(function (Drupal) {\n\n 'use strict';\n\n Drupal.behaviors.reha = {\n attach: function (context, settings) {\n\n console.log('It works!');\n\n }\n };\n\n \n} (Drupal));\n\njQuery(document).ready(function($){\n\n // menu déroulant\n\n ////////////// contacts ///////\n\n $(\".bouton-contact\").click(function(event) {\n // Fermer .connexion-full s'il est déroulé\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n // Ouvrir .contacts-full\n $(\".contacts-full\").slideToggle();\n\n });\n\n////////////// connexion ///////\n\n $(\".bouton-connexion\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connexion-full\n $(\".connexion-full\").slideToggle();\n });\n \n $(\".bouton-connected\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connected-full\n $(\".connected-full\").slideToggle();\n });\n \n $(\".titre\").click(function(event) {\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n // // Ouvrir .connexion-full\n // $(\".connected-full\").slideToggle();\n });\n \n $(\"#edit-field-dossier-de-candidature-0--label\").click(function(event) {\n event.preventDefault();\n // Ouvrir .connexion-full\n $(\"#edit-field-dossier-de-candidature-0--description>ul.main\").slideToggle();\n });\n\n\n ////////////// tiroir fichiers ///////\n\n $(document).ready(function() {\n // Vérifier l'état initial depuis sessionStorage\n if (sessionStorage.getItem('asideOpened') === 'true') {\n $(\".layout-sidebar-second\").addClass('close');\n $(\".layout-sidebar-second h2\").addClass('__close');\n }\n\n $(\".view-current-user-doc-profile\").click(function(event) {\n // Ouvrir .tiroir fichiers\n $(\".layout-sidebar-second\").addClass('close');\n $(\".layout-sidebar-second h2\").addClass('__close');\n sessionStorage.setItem('asideOpened', 'true');\n });\n\n $(\"#block-reha-views-block-current-user-doc-profile-block-1 > h2\").click(function(event) {\n // Fermer .tiroir fichiers\n $(\".layout-sidebar-second\").removeClass('close');\n $(\".layout-sidebar-second h2\").removeClass('__close');\n sessionStorage.setItem('asideOpened', 'false');\n });\n });\n\n});\n\n\n// slideshow home \n\n(function($, window) {\n console.log('hello slick')\n $(document).ready(function(){\n $('.view-id-sites.view-display-id-block_1').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n $(document).ready(function(){\n $('.view-id-actus.view-display-id-block_1 ').slick({\n slidesToShow: 1,\n slidesToScroll: 1,\n // dots: true,\n arrows: true,\n // centerMode: true,\n draggable: true,\n centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick actu');\n });\n\n // html.js body.node-type-site.node-id-58 div.dialog-off-canvas-main-canvas div.layout-container.page-node-site main div.layout-content.home-page-layout-content div.region.region-content div#block-reha-contenudelapageprincipale.block.block-system.block-system-main-block article.node-type-site div.entete_site div.image-site div.field.field--name-field-image.field--type-image.field--label-visually_hidden div.field__items\n $(document).ready(function(){\n $('.page-node-site .field--name-field-image .field__items').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: true,\n arrows: false,\n // adaptiveHeight: true,\n centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick site');\n });\n\n\n \n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n function adjustAnchor() {\n var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL\n var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element\n\n if ($anchor.length > 0) {\n $('html, body').stop().animate({\n scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height\n }, 0);\n }\n }\n\n // Call the function on page load if there's a hash\n if (window.location.hash) {\n adjustAnchor();\n }\n\n // Adjust the anchor on hash change\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n\n //////////////////////////////////////////\n // menu ancre paragraphe quand actif\n \n jQuery(function($) {\n // Function to set the active class based on the current path\n function setActiveLink() {\n var path = window.location.href;\n console.log(path);\n $(\".layout__region--first .block-region-first li a\").each(function() {\n if (this.href === path) {\n $(this).closest('a').addClass('active');\n }\n });\n }\n\n // Initially set the active link based on the current URL\n setActiveLink();\n\n // Update the active link on click\n $(\".layout__region--first .block-region-first li a\").on('click', function() {\n $(\".layout__region--first .block-region-first li a\").removeClass('active');\n $(this).addClass('active');\n });\n });\n\n\n})(jQuery, window);\n\n\n/////////////////// déplace synthèse de tous les sites (dans block config 3) dans node site pour faciliter css ///////////////////\n\n(function ($, Drupal) {\n Drupal.behaviors.moveFieldContent = {\n attach: function (context, settings) {\n // Vérifiez que les éléments existent avant de tenter de les manipuler\n if ($('#block-reha-config-pages-3 .field--name-field-fichier', context).length && $('.node-type-site .body-content-site .links-content', context).length) {\n // Déplacer le contenu de .field--name-field-fichier vers .links-content\n var fieldContent = $('#block-reha-config-pages-3 .field--name-field-fichier', context).detach();\n $('.node-type-site .body-content-site .links-content', context).append(fieldContent);\n }\n }\n };\n})(jQuery, Drupal);\n\n//# sourceURL=webpack://dev.reha.fr/./js/reha.js?"); +eval("/**\n * @file\n * reha behaviors.\n */\n(function (Drupal) {\n\n 'use strict';\n\n Drupal.behaviors.reha = {\n attach: function (context, settings) {\n\n console.log('It works!');\n\n }\n };\n\n \n} (Drupal));\n\njQuery(document).ready(function($){\n\n // menu déroulant\n\n ////////////// contacts ///////\n\n $(\".bouton-contact\").click(function(event) {\n // Fermer .connexion-full s'il est déroulé\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n // Ouvrir .contacts-full\n $(\".contacts-full\").slideToggle();\n\n });\n\n////////////// connexion ///////\n\n $(\".bouton-connexion\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connexion-full\n $(\".connexion-full\").slideToggle();\n });\n \n $(\".bouton-connected\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connected-full\n $(\".connected-full\").slideToggle();\n });\n \n $(\".titre\").click(function(event) {\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n // // Ouvrir .connexion-full\n // $(\".connected-full\").slideToggle();\n });\n \n $(\"#edit-field-dossier-de-candidature-0--label\").click(function(event) {\n event.preventDefault();\n // Ouvrir .connexion-full\n $(\"#edit-field-dossier-de-candidature-0--description>ul.main\").slideToggle();\n });\n\n\n ////////////// tiroir fichiers ///////\n\n $(document).ready(function() {\n // Vérifier l'état initial depuis sessionStorage\n if (sessionStorage.getItem('asideOpened') === 'true') {\n $(\".layout-sidebar-second\").addClass('close');\n $(\".layout-sidebar-second h2\").addClass('__close');\n }\n\n $(\".view-current-user-doc-profile\").click(function(event) {\n // Ouvrir .tiroir fichiers\n $(\".layout-sidebar-second\").addClass('close');\n $(\".layout-sidebar-second h2\").addClass('__close');\n sessionStorage.setItem('asideOpened', 'true');\n });\n\n $(\"#block-reha-views-block-current-user-doc-profile-block-1 > h2\").click(function(event) {\n // Fermer .tiroir fichiers\n $(\".layout-sidebar-second\").removeClass('close');\n $(\".layout-sidebar-second h2\").removeClass('__close');\n sessionStorage.setItem('asideOpened', 'false');\n });\n });\n\n});\n\n\n// slideshow home \n\n(function($, window) {\n console.log('hello slick')\n $(document).ready(function(){\n $('.view-id-sites.view-display-id-block_1').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n $(document).ready(function(){\n $('.view-id-actus.view-display-id-block_1 ').slick({\n slidesToShow: 1,\n slidesToScroll: 1,\n // dots: true,\n arrows: true,\n // centerMode: true,\n draggable: true,\n centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick actu');\n });\n\n // html.js body.node-type-site.node-id-58 div.dialog-off-canvas-main-canvas div.layout-container.page-node-site main div.layout-content.home-page-layout-content div.region.region-content div#block-reha-contenudelapageprincipale.block.block-system.block-system-main-block article.node-type-site div.entete_site div.image-site div.field.field--name-field-image.field--type-image.field--label-visually_hidden div.field__items\n $(document).ready(function(){\n $('.node-type-site .page-node-site .field--name-field-image .field__items').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: true,\n arrows: false,\n // adaptiveHeight: true,\n centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick site');\n });\n\n\n \n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n function adjustAnchor() {\n var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL\n var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element\n\n if ($anchor.length > 0) {\n $('html, body').stop().animate({\n scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height\n }, 0);\n }\n }\n\n // Call the function on page load if there's a hash\n if (window.location.hash) {\n adjustAnchor();\n }\n\n // Adjust the anchor on hash change\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n\n //////////////////////////////////////////\n // menu ancre paragraphe quand actif\n \n jQuery(function($) {\n // Function to set the active class based on the current path\n function setActiveLink() {\n var path = window.location.href;\n console.log(path);\n $(\".layout__region--first .block-region-first li a\").each(function() {\n if (this.href === path) {\n $(this).closest('a').addClass('active');\n }\n });\n }\n\n // Initially set the active link based on the current URL\n setActiveLink();\n\n // Update the active link on click\n $(\".layout__region--first .block-region-first li a\").on('click', function() {\n $(\".layout__region--first .block-region-first li a\").removeClass('active');\n $(this).addClass('active');\n });\n });\n\n\n})(jQuery, window);\n\n\n/////////////////// déplace synthèse de tous les sites (dans block config 3) dans node site pour faciliter css ///////////////////\n\n(function ($, Drupal) {\n Drupal.behaviors.moveFieldContent = {\n attach: function (context, settings) {\n // Vérifiez que les éléments existent avant de tenter de les manipuler\n if ($('#block-reha-config-pages-3 .field--name-field-fichier', context).length && $('.node-type-site .body-content-site .links-content', context).length) {\n // Déplacer le contenu de .field--name-field-fichier vers .links-content\n var fieldContent = $('#block-reha-config-pages-3 .field--name-field-fichier', context).detach();\n $('.node-type-site .body-content-site .links-content', context).append(fieldContent);\n }\n }\n };\n})(jQuery, Drupal);\n\n//# sourceURL=webpack://dev.reha.fr/./js/reha.js?"); /***/ }), diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index 493ccaf..43fcad9 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -3056,8 +3056,9 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div margin: 0; } .page-ressources .view-ressources .views-row .node-type-ressource { - width: 80%; + width: 100%; margin: auto; + background-color: rgb(255, 255, 255); } .page-ressources .view-ressources .views-row .node-type-ressource .image-ressource { order: 1; @@ -3066,13 +3067,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div } .page-ressources .view-ressources .views-row .node-type-ressource .image-ressource img { width: 100%; - height: auto; + max-height: 250px; + object-fit: contain; } .page-ressources .view-ressources .views-row .node-type-ressource .infos-content { display: flex; flex-direction: column; - border: solid #fdc300 1px; - background-color: rgb(255, 255, 255); padding: 1rem; } .page-ressources .view-ressources .views-row .node-type-ressource .infos-content h2 { @@ -3095,6 +3095,9 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div text-transform: uppercase; font-size: 1.2rem; } +.page-ressources .view-ressources .views-row .node-type-ressource .infos-content .field--name-field-type-de-ressource a { + pointer-events: none; +} .page-ressources .view-ressources .views-row .node-type-ressource .infos-content .field--name-field-site { order: 5; background-color: rgb(153, 147, 174); @@ -3123,13 +3126,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div .page-node-site .node-type-ressource { display: grid; - grid-template-columns: repeat(4, auto); + grid-template-columns: 1fr repeat(3, 1fr) 1fr; grid-template-rows: repeat(2, auto); padding-top: 3rem; } .page-node-site .node-type-ressource .image-ressource { grid-row: 1; - grid-column: 1/span 2; + grid-column: 2/span 2; margin-right: 2rem; } .page-node-site .node-type-ressource .image-ressource img { @@ -3139,27 +3142,46 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div .page-node-site .node-type-ressource .infos-content { grid-row: 1; grid-column: 3/span 4; + margin-left: 2rem; } .page-node-site .node-type-ressource .infos-content .field--name-field-type-de-ressource { text-transform: uppercase; - font-size: 1.5rem; + font-size: 1rem; } .page-node-site .node-type-ressource .infos-content .field--name-field-sous-titre { font-size: 2rem; } .page-node-site .node-type-ressource .infos-content .field--name-field-auteur { font-weight: 800; - font-size: 1.4rem; + font-size: 1.3rem; +} +.page-node-site .node-type-ressource .infos-content .field--name-field-site { + background-color: rgb(153, 147, 174); + border-radius: 50px; + width: fit-content; + padding: 0.2rem 0.9rem; + margin-top: 1rem; +} +.page-node-site .node-type-ressource .infos-content .field--name-field-site a { + color: white; + font-weight: 900; + font-size: 0.8rem; + vertical-align: top; } .page-node-site .node-type-ressource .body-content { grid-row: 2; - grid-column: 1/span 3; + grid-column: 2/span 4; width: 100%; margin-top: 2rem; } .page-node-site .node-type-ressource .body-content .field--name-field-fichiers { width: fit-content; } +.page-node-site .node-type-ressource .body-content .links-content { + margin-top: 2rem; + position: relative; + left: -10%; +} .page-actualites .view-actus { padding-top: 3rem; diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index 3d1ccd4..2ccc3ab 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -159,7 +159,7 @@ jQuery(document).ready(function($){ // html.js body.node-type-site.node-id-58 div.dialog-off-canvas-main-canvas div.layout-container.page-node-site main div.layout-content.home-page-layout-content div.region.region-content div#block-reha-contenudelapageprincipale.block.block-system.block-system-main-block article.node-type-site div.entete_site div.image-site div.field.field--name-field-image.field--type-image.field--label-visually_hidden div.field__items $(document).ready(function(){ - $('.page-node-site .field--name-field-image .field__items').slick({ + $('.node-type-site .page-node-site .field--name-field-image .field__items').slick({ slidesToShow: 1, // slidesToScroll: 1, dots: true, diff --git a/web/themes/custom/reha/scss/pages/node-ressource.scss b/web/themes/custom/reha/scss/pages/node-ressource.scss index 265812c..4095a6c 100644 --- a/web/themes/custom/reha/scss/pages/node-ressource.scss +++ b/web/themes/custom/reha/scss/pages/node-ressource.scss @@ -2,13 +2,13 @@ .node-type-ressource{ display: grid; - grid-template-columns: repeat(4, auto); + grid-template-columns: 1fr repeat(3, 1fr) 1fr; grid-template-rows: repeat(2, auto); padding-top: 3rem; .image-ressource{ grid-row: 1; - grid-column: 1 /span 2; + grid-column: 2 /span 2; margin-right: 2rem; img{ @@ -19,27 +19,49 @@ .infos-content{ grid-row: 1; grid-column: 3 /span 4; + margin-left: 2rem; .field--name-field-type-de-ressource{ text-transform: uppercase; - font-size: 1.5rem; + font-size: 1rem; } .field--name-field-sous-titre{ font-size: 2rem; } .field--name-field-auteur{ font-weight: 800; - font-size: 1.4rem; + font-size: 1.3rem; + } + .field--name-field-site{ + background-color: rgb(153, 147, 174); + border-radius: 50px; + width: fit-content; + padding: 0.2rem 0.9rem; + margin-top: 1rem; + a{ + color: white; + font-weight: 900; + font-size: 0.8rem; + vertical-align: top; + } } } .body-content { grid-row: 2; - grid-column: 1 /span 3; + grid-column: 2 /span 4; width: 100%; margin-top: 2rem; .field--name-field-fichiers{ width: fit-content; } + .summary-content{ + + } + .links-content{ + margin-top: 2rem; + position: relative; + left: -10%; + } } } diff --git a/web/themes/custom/reha/scss/pages/ressources.scss b/web/themes/custom/reha/scss/pages/ressources.scss index c4b6bb5..63ac854 100644 --- a/web/themes/custom/reha/scss/pages/ressources.scss +++ b/web/themes/custom/reha/scss/pages/ressources.scss @@ -57,8 +57,9 @@ .node-type-ressource{ - width: 80%; + width: 100%; margin: auto; + background-color: $white-button; .image-ressource{ order: 1; @@ -66,14 +67,16 @@ margin: auto; img{ width: 100%; - height: auto; + // height: auto; + max-height: 250px; + object-fit: contain; } } .infos-content{ display: flex; flex-direction: column; - border: solid $yellow-puca 1px; - background-color: $white-button; + // border: solid $yellow-puca 1px; + padding: 1rem; h2{ order: 2; @@ -96,6 +99,9 @@ order: 1; text-transform: uppercase; font-size: 1.2rem; + a{ + pointer-events: none; + } } .field--name-field-site{