FAQ section in Contact page
This commit is contained in:
Yves Gatesoupe
parent
c437734701
commit
c2b69bb41a
|
|
@ -127,3 +127,7 @@ Fill in the meta information :
|
|||
1. `name:` the brand name of the partner
|
||||
2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
}]
|
||||
}
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
"external": false
|
||||
},
|
||||
{
|
||||
"text": "Nous contacter",
|
||||
"url": "#contact-form",
|
||||
"text": "FAQ / Nous contacter",
|
||||
"url": "/faq+contact/",
|
||||
"external": false
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
{% extends 'layouts/base.njk' %}
|
||||
|
||||
{# Intro content #}
|
||||
{% set introHeading = title %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" tabindex="-1">
|
||||
<article class="[ post ] [ h-entry ]">
|
||||
{% 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" %}
|
||||
</div>
|
||||
</article>
|
||||
{% include "partials/components/faq.njk" %}
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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`.
|
||||
|
|
@ -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 ?
|
||||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
@ -151,13 +151,13 @@
|
|||
|
||||
&::after {
|
||||
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;
|
||||
width: 1rem;
|
||||
height: .625rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(50% - .3125rem);
|
||||
top: calc(50% - .625rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ img {
|
|||
|
||||
// Components
|
||||
@import 'components/button';
|
||||
@import 'components/faq';
|
||||
@import 'components/form';
|
||||
@import 'components/heading-permalink';
|
||||
@import 'components/intro';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user