From 438a3e543001e05d7937d315d97ad7defb7492ed Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 29 Nov 2021 23:10:31 +0100 Subject: [PATCH] faq design --- web/themes/custom/eql/css-compiled/styles.css | 77 ++++++++++++++----- web/themes/custom/eql/scripts/main.js | 19 +++++ web/themes/custom/eql/scss/pages/_faq.scss | 76 +++++++++++++++--- web/themes/custom/eql/scss/pages/_home.scss | 2 +- .../custom/eql/scss/partials/_footer.scss | 13 +--- .../custom/eql/scss/partials/_header.scss | 7 +- 6 files changed, 149 insertions(+), 45 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 6171176..620638d 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -298,8 +298,6 @@ a { .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images img { width: 100vw; height: auto; } - .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche { - display: none; } .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title { grid-column: 2; grid-row: 1; } @@ -700,18 +698,59 @@ a { .block-views-blockfaq-block-1 div:first-child { grid-column: 2 / span 3; } .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse { - border-bottom: 1px solid #009ee3; } - .block-views-blockfaq-block-1 div:first-child .field--name-title { - display: none; } - .block-views-blockfaq-block-1 div:first-child .field--name-field-question p { - font-family: 'Source Code Pro'; - font-weight: 500; - color: #09398b; - font-size: 1.5rem; } - .block-views-blockfaq-block-1 div:first-child .field--name-field-question p:after { + border-bottom: 1px solid #009ee3; + padding-bottom: 2rem; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-title { + display: none; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-question p { + font-family: 'Source Code Pro'; + font-weight: 500; + color: #09398b; + font-size: 1.5rem; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-question p:after { + display: inline-flex; + content: url('data:image/svg+xml,'); + justify-self: flex-end; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-reponse .panel-heading { + display: none; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .opened { + display: block; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers span:nth-of-type(2) { + display: none; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf span:nth-of-type(2) { + display: none; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf ::before { + display: inline-block; + content: url("../images/pictos/noun_Download_file_307900.svg"); + width: 30px; + height: 30px; + padding-right: 0.8rem; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf a { display: inline-flex; - content: url('data:image/svg+xml,'); - justify-self: flex-end; } + align-items: center; + color: black; + font-weight: 800; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens a { + display: flex; + flex-direction: row; + justify-content: left; + align-items: center; + color: black; + font-weight: 800; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens a:before { + display: inline-block; + content: url("../images/pictos/noun_External Link_674151.svg"); + width: 30px; + height: 30px; + padding-right: 0.8rem; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens svg { + display: none; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-ress { + margin-top: 0.5rem; } + .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-ress a { + color: black; + text-decoration: underline; + font-weight: 800; } /*partials*/ .layout-container { @@ -772,10 +811,12 @@ header { display: none; } #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) { display: block; - background-color: #009ee3; + background-color: white; padding: 1rem; } #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) a { - color: white; } + color: black; } + #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) a:hover { + color: #009ee3; } #header-top #block-burger { z-index: 1; background-color: #009ee3; @@ -837,9 +878,6 @@ header { margin-top: 0; color: #09398b; font-size: 1.2rem; } - #fotter-bottom .region img { - max-width: 5rem; - max-height: 5rem; } #fotter-bottom .region-footer-bottom-left { width: 35%; border: none; } @@ -862,6 +900,3 @@ header { #fotter-bottom .view-id-partenaires .view-content .node-type-partenaires_logo_footer_ { padding-right: 1rem; padding-bottom: 1rem; } - #fotter-bottom .block-views-blockpartenaires-block-2 img { - filter: grayscale(100%); - -webkit-filter: grayscale(100%); } diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index f4df655..8a89b6f 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -11,3 +11,22 @@ function toggleMenu(event) { console.log(event); burger.classList.toggle('opened'); } + + +// faq reponse open + +var answer = document.getElementsByClassName("panel-body"); +var questions = document.getElementsByClassName(".field--name-field-question"); + +for (let i = 0; i < questions.length; i++) { + const question = questions[i] + question.addEventListener("click", toggleMenu); +} + + +function toggleMenu(event) { + console.log(event); + for (let i = 0; i < answers.length; i++) { + const answer = answers[i] + answer.classList.toggle('opened');} +} diff --git a/web/themes/custom/eql/scss/pages/_faq.scss b/web/themes/custom/eql/scss/pages/_faq.scss index 20f7abc..fd4308c 100644 --- a/web/themes/custom/eql/scss/pages/_faq.scss +++ b/web/themes/custom/eql/scss/pages/_faq.scss @@ -8,15 +8,11 @@ // margin: auto; .node-type-question_reponse{ border-bottom: 1px solid $blue-light; - } + padding-bottom: 2rem; .field--name-title{ - display: none; - // font-family: 'Source Code Pro' !important; - // font-weight: 500 !important; - // color: $blue-dark !important; - - + display: none; } + .field--name-field-question{ p{ font-family: 'Source Code Pro' ; @@ -28,9 +24,71 @@ content: url('data:image/svg+xml,'); justify-self: flex-end; } - } + } + } - + .field--name-field-reponse{ + .panel-heading{ + display: none; + } + } + .opened{ + display: block; + } + .field--name-field-fichiers{ + span:nth-of-type(2){ + display: none; + } + + .file--mime-application-pdf{ + span:nth-of-type(2){ + display: none; + } + ::before{ + display: inline-block; + content: url("../images/pictos/noun_Download_file_307900.svg"); + width: 30px; + height: 30px; + padding-right: 0.8rem; + } + a{ + display: inline-flex; + align-items: center; + color: $black; + font-weight: 800; + } + } + } + .field--name-field-liens{ + + a{ + &:before{ + display: inline-block; + content: url("../images/pictos/noun_External Link_674151.svg"); + width: 30px; + height: 30px; + padding-right: 0.8rem; + } + display:flex; + flex-direction: row; + justify-content: left; + align-items: center; + color: $black; + font-weight: 800; + } + svg{ + display: none; + } + } + .field--name-field-ress{ + margin-top: 0.5rem; + + a{ + color: $black; + text-decoration: underline; + font-weight: 800; + } + } } } } diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 0c1d467..83c826d 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -44,7 +44,7 @@ } } .field--name-field-accroche{ - display: none; + // display: none; } .field--name-title{ grid-column: 2; diff --git a/web/themes/custom/eql/scss/partials/_footer.scss b/web/themes/custom/eql/scss/partials/_footer.scss index d3ed771..1bc9692 100644 --- a/web/themes/custom/eql/scss/partials/_footer.scss +++ b/web/themes/custom/eql/scss/partials/_footer.scss @@ -19,11 +19,7 @@ color: $blue-dark; font-size: 1.2rem; } - img{ - - max-width: 5rem; - max-height: 5rem; - } + } @@ -58,12 +54,5 @@ } } } - - .block-views-blockpartenaires-block-2{ - img{ - filter: grayscale(100%); - -webkit-filter: grayscale(100%); - } - } } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/partials/_header.scss b/web/themes/custom/eql/scss/partials/_header.scss index 7929549..287ef51 100644 --- a/web/themes/custom/eql/scss/partials/_header.scss +++ b/web/themes/custom/eql/scss/partials/_header.scss @@ -82,10 +82,13 @@ header{ :hover { ul:is(.ul1 .sous-liste .ul2){ display: block; - background-color: $blue-light; + background-color: $white; padding: 1rem; a{ - color: $white; + color: $black; + &:hover{ + color: $blue-light; + } } } }