FAQ section in Contact page

This commit is contained in:
Yves Gatesoupe 2022-04-26 20:01:00 +02:00
parent c437734701
commit c2b69bb41a
10 changed files with 90 additions and 26 deletions

View File

@ -127,3 +127,7 @@ Fill in the meta information :
1. `name:` the brand name of the partner 1. `name:` the brand name of the partner
2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder 2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder
3. `url:` the partner website 3. `url:` the partner website
### FAQ section
Edit `_data/faq.json` file to add a new Q/A couple object. Plain html e.g. `<br>` or `<a href="">link</a>` is supported

14
src/_data/faq.json Normal file
View File

@ -0,0 +1,14 @@
{
"items": [{
"q": "Question 1 ?",
"a": "Réponse 1. <br> Avec retour à la ligne"
},
{
"q": "Question 2 ?",
"a": "Réponse 2 avec une url : https://www.astrolabe.coop/nous-rejoindre/"
},
{
"q": "Question 3 ?",
"a": "Réponse 3 avec un <a href=\"/comprendre-la-cae/\">lien</a>"
}]
}

View File

@ -26,8 +26,8 @@
"external": false "external": false
}, },
{ {
"text": "Nous contacter", "text": "FAQ / Nous contacter",
"url": "#contact-form", "url": "/faq+contact/",
"external": false "external": false
} }
] ]

View File

@ -1,17 +1,9 @@
{% extends 'layouts/base.njk' %} {% extends 'layouts/base.njk' %}
{# Intro content #}
{% set introHeading = title %}
{% block content %} {% block content %}
<main id="main-content" tabindex="-1"> <main id="main-content" tabindex="-1">
<article class="[ post ] [ h-entry ]"> {% include "partials/components/faq.njk" %}
{% include "partials/components/intro.njk" %}
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 pad-bottom-900 text-500 ] [ sf-flow ] [ e-content ]">
{{ content | safe }}
{% include "partials/components/contact-form.njk" %} {% include "partials/components/contact-form.njk" %}
</div>
</article>
</main> </main>
{% endblock %} {% endblock %}

View File

@ -0,0 +1,24 @@
<section class="[ faq ]">
{% if faq.items %}
<div class="[ inner-wrapper ]">
<h1 class="faq__heading">{{ faqHeading }}</h1>
{{ content | safe }}
<div class="accordion accordion-flush" id="accordionFlushExample">
{% for item in faq.items %}
<div class="accordion-item">
<h3 class="accordion-header" id="flush-heading{{ loop.index }}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{ loop.index }}" aria-expanded="false" aria-controls="flush-collapse{{ loop.index }}">
{{ item.q }}
</button>
</h3>
<div id="flush-collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ loop.index }}" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
{{ item.a | urlize | safe }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</section>

View File

@ -1,10 +0,0 @@
---
title: 'Contact'
permalink: '/contact/index.html'
layout: 'layouts/contact.njk'
eleventyExcludeFromCollections: true
---
You can have a contact page which uses a basic form. The [code with the form fields lives here](https://github.com/hankchizljaw/hylia/blob/master/src/_includes/layouts/contact.njk).
To delete the contact form for this site, delete this page in the CMS or at `src/pages/contact.md`. You probably will also want to delete `src/pages/thank-you.md`.

9
src/pages/faq-contact.md Normal file
View File

@ -0,0 +1,9 @@
---
title: 'FAQ / Contact'
permalink: '/faq+contact/index.html'
layout: 'layouts/contact.njk'
eleventyExcludeFromCollections: true
faqHeading: 'Foire Aux Questions'
---
[A REFORMULER ?] Avant de nous contacter, peut-être avons déjà réponse à certaines de vos questions ?

View File

@ -0,0 +1,30 @@
.faq {
&__heading {
margin: 8rem 0 4rem;
}
.accordion {
margin-top: 2rem;
}
.accordion-button {
font-size: 1.25rem;
font-weight: 600;
padding: 1rem 0;
}
.accordion-button:not(.collapsed) {
color: var(--color-text);
background-color: var(--color-white);
box-shadow: none;
}
.accordion-button:focus {
border: 0;
box-shadow: 0 0 0 1px var(--color-text);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
}

View File

@ -151,13 +151,13 @@
&::after { &::after {
content: ''; content: '';
background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
width: 1rem; width: 1.25rem;
height: .625rem; height: 1.25rem;
position: absolute; position: absolute;
right: 0; right: 0;
top: calc(50% - .3125rem); top: calc(50% - .625rem);
} }
} }

View File

@ -60,6 +60,7 @@ img {
// Components // Components
@import 'components/button'; @import 'components/button';
@import 'components/faq';
@import 'components/form'; @import 'components/form';
@import 'components/heading-permalink'; @import 'components/heading-permalink';
@import 'components/intro'; @import 'components/intro';