add questions and yellow borders

contenu à relire, et front à amélirer

.gitignore

@@ -3,11 +3,8 @@ coverage.xml
 .coverage
 la_chariotte.egg-info/
 node_modules
-/static/*
-/media/*
 local_settings.py
 .venv
 *venv*
 mails.sqlite
 package-lock.json
-static

la_chariotte/settings.py

@@ -9,6 +9,8 @@ BASE_URL = os.getenv("BASE_URL", "http://127.0.0.1:8000")
 PROJECT_NAME = os.getenv("PROJECT_NAME", "La Chariotte")
 GITLAB_LINK = "https://gitlab.com/hashbangfr/la_chariotte"
 CONTACT_MAIL = "contact@chariotte.fr"
+HELLOASSO_LINK = "https://www.helloasso.com/associations/la-chariotte/"
+FEEDBACK_LINK = "https://framaforms.org/votre-avis-sur-la-chariotte-1709742328"
 
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = os.getenv(

la_chariotte/static/sass/base/_accordion.sass

@@ -0,0 +1,14 @@
+.accordion
+    transition: max-height 0.2s ease-out
+    border: none
+    outline: none
+    transition: 0.4s
+    .message-header
+        cursor: pointer
+        background: $white-ter
+        border: 1px solid $primary
+        color: $primary
+        p
+            margin: 0
+    .message-body
+        display: none

la_chariotte/static/sass/base/_content.sass

@@ -9,4 +9,7 @@
 		padding-top: $navbar-height
 
 .formatted-text
-	white-space: pre-wrap
+	white-space: pre-wrap
+
+img.notice-img
+	border: $info 3px solid

la_chariotte/static/sass/style.sass

@@ -17,3 +17,4 @@
 @import "./base/titles"
 @import "./base/tabs"
 @import "./base/footer"
+@import "./base/accordion"

la_chariotte/templates/base.html

@@ -93,6 +93,9 @@
             <a class="navbar-item" href="{% url 'notice' %}">
               <i class="fa fa-cog mr-3" aria-hidden="true"></i>Comment ça marche&nbsp;?
             </a>
+            <a class="navbar-item" href="{% url 'faq' %}">
+              <i class="fa fa-question mr-3" aria-hidden="true"></i>FAQ
+            </a>
             <a class="navbar-item" href="https://blog.chariotte.fr/last">
               <i class="fa fa-newspaper-o mr-3" aria-hidden="true"></i>Actualités</a>
           </div>
@@ -166,9 +169,9 @@
           <h4 class="mb-4">Soutenez-nous</h4>
           <ul class="list-unstyled">
             <li>
-              <a href="https://framaforms.org/votre-avis-sur-la-chariotte-1709742328"><i class="fa fa-comments mr-2 text-muted"></i>Que pensez-vous de la Chariotte ?</a>
+              <a href="{% settings_value "FEEDBACK_LINK" %}"><i class="fa fa-comments mr-2 text-muted"></i>Que pensez-vous de la Chariotte ?</a>
             </li>
-            <li><a href="https://www.helloasso.com/associations/la-chariotte/"><i class="fa fa-heart mr-2 text-muted"></i>Faire un (petit) don</a></li>
+            <li><a href="{% settings_value "HELLOASSO_LINK" %}"><i class="fa fa-heart mr-2 text-muted"></i>Faire un (petit) don</a></li>
           </ul>
         </div>
     </div>

la_chariotte/templates/help/faq.html

@@ -0,0 +1,241 @@
+{% extends 'base.html' %}
+
+{% block title %}FAQ{% endblock %}
+
+{% block content %}
+{% load static %}
+{% load settings %}
+
+<p class="desktop-hidden mobile-content-title">
+    {% block content_title %}La Chariotte - Facile A Qomprendre{% endblock %}
+  </p>
+<div class="box">
+	<div class="accordion">
+    <article class="message">
+			<div class="message-header">
+				<p>C'est quoi l'outil la Chariotte ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				La Chariotte c'est une application web qui permet de simplifier la gestion et l'organisation de commandes groupées. 
+				Voyez ça comme un excel amélioré spécifique aux besoins de l'organisation d'une commande groupée.
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>C'est quoi la Chariotte plus largement ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				C'est avant tout un logiciel libre dont vous pouvez utiliser l'instance officielle sur chariotte.fr. 
+				C'est aussi le nom de l'association responsable de la maintenance de ce logiciel. Tous bénévoles, 
+				les membres de la Chariotte font vivre et améliorent continuellement l'outil pour répondre à vos besoins.
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Est-ce que je peux rejoindre une commande commande créée par une personne que je ne connais pas ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				C'est prévu a long terme mais pour l'instant non ! Aujourd'hui la Chariotte n'a pas pour visée de 
+				mettre en relation des organisateurs/producteurs et des participants. Il n'est donc pas 
+				possible de trouver une liste de commandes groupées existantes que vous pourriez rejoindre à volonté.
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Faut-il faire partie de l'asso pour utiliser la chariotte ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				Non !
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Puis-je rejoindre l'association ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				Bien sûr et avec grand plaisir ! 
+				Si vous êtes intéressés pour rejoindre cette aventure, 
+				contactez-nous sur <a href="mailto:{% settings_value "CONTACT_MAIL" %}">contact@chariotte.fr</a>.
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>C'est quoi un logiciel libre ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				La Chariotte est développée sous licence libre Affero GPL.
+				 Cela signifie que vous pouvez <a href="{% settings_value "GITLAB_LINK" %}">aller voir le code</a> 
+				 si vous êtes curieux, y contribuer si vous êtes motivé·e, ou même créer votre propre instance si vous le souhaitez !
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>C'est quoi une commande groupée ? Ça s'organise comment ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				C'est la mise en relation ponctuelle d'un producteur, ou plutôt ses produits, 
+				avec des particuliers, pour permettre une consommation en circuit court et hors 
+				des modes de consommation de masse conventionnels.
+				<br><br>
+				Pour faire simple, imaginons que vous connaissiez l'apicultrice du coin et que plusieurs de 
+				vos voisins vous aient dit être prêts à acheter du miel. 
+				Vous pouvez alors commander 40 pots de miel à votre amie et les redistribuer à tout le quartier, 
+				tout ça en un seul voyage !
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Quelle est la différence avec une AMAP ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				Dans les faits, la plupart des AMAPs fonctionnent sur la base de commandes 
+				groupées régulières et à destination d'un public d'adhérents fixe.<br>
+				La Chariotte n'a pas vocation à remplacer le système des AMAPs, qui apporte un revenu régulier aux producteur.ice.s ! 
+				L'idée est d'apporter une solution complémentaire pour les endroits où les AMAPs ne sont pas établies, ou pour un produit en particulier qui n'est pas distribué régulièrement dans votre AMAP. 
+				Il arrive aussi parfois que la Chariotte soit choisie comme outil de gestion pour l'AMAP si elle n'en avait pas encore.
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Quel est l'avantage de la Chariotte par rapport au logiciel de mon AMAP ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				Nous avons conçu la Chariotte spécifiquement pour répondre aux besoins des 
+				organisateur.ice.s et des participant.e.s à une commande groupée, en particulier des commandes groupées ponctuelles.
+				Il s'agit d'un outil spécialisé dont la seule ambition est de simplifier la vie de ses utilisateurs. 
+				Libre à vous d'évaluer vos options et de choisir l'outil qui convient le mieux à votre organisation !
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Je veux organiser une commande groupée, où est-ce que je trouve des producteurs ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				La Chariotte ne fournit pour l'instant pas de liste de producteurs ; 
+				c'est une bonne occasion de faire connaissance avec ceux près de chez vous !
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Suis-je obligé de créer un compte pour commander ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				Même pas ! La création d'un compte n'est obligatoire que pour les utilisateurs souhaitant organiser 
+				leurs propres commandes groupées. La participation à une commande existante 
+				se veut à destination du plus grand nombre et ne nécessite donc pas de compte sur le site.
+			</div>
+		</article>
+		<article class="message">
+			<div class="message-header">
+				<p>Comment puis-je soutenir la Chariotte ?</p>
+				<a>
+					<span class="icon">
+					<i class="fa fa-angle-down" aria-hidden="true"></i>
+					</span>
+				</a>
+			</div>
+			<div class="message-body">
+				<p>Nous sommes une jeune association, et nous avons besoin de trois choses : de la visibilité, 
+					des retours d'utilisateurs et un peu d'argent !</li>
+				<ul><li>Vous pouvez nous rejoindre sur les réseaux (Facebook, Mastodon, LinkedIn) pour aimer 
+					et partager nos posts, ou encore parler de la Chariotte à vos amis !</li>
+				<li>Si vous saisissez une occasion d'utiliser la Chariotte, nous avons besoin de vous ! 
+					N'hésitez pas à nous faire un rapport de votre expérience de la Chariotte en pointant 
+					les bons et les mauvais côtés de l'application. Par exemple en remplissant 
+					<a href="{% settings_value "FEEDBACK_LINK" %}">ce formulaire</a> !</li>
+				<li>Si le projet vous parle et que vous avez envie de nous soutenir de manière plus significative, 
+					nous avons besoin d'un peu d'argent de poche pour soutenir les frais de l'association ; 
+					<a href ="{% settings_value "HELLOASSO_LINK" %}">par ici</a> pour en savoir plus !</li>
+				</ul>
+				<p>Et enfin, si vous souhaitez en savoir plus sur l'association en elle-même et que vous 
+					souhaitez faire partie intégrante du projet, la Chariotte est à la recherche de bénévoles motivé·e·s !
+					 N'hésitez pas à nous écrire un mot sur contact@chariotte.fr pour en savoir plus et rentrer en contact directement avec nous.</p>
+				
+			</div>
+		</article>
+	</div>
+</div>
+{% endblock %}
+
+
+<script>
+{% block extra_js %}
+	document.addEventListener('DOMContentLoaded', () => {
+		var acc = document.getElementsByClassName("message-header");
+		var i;
+		
+		for (i = 0; i < acc.length; i++) {
+			acc[i].addEventListener("click", function() {
+				/* Toggle between adding and removing the "active" class,
+				to highlight the button that controls the panel */
+				this.classList.toggle("active");
+		
+				/* Toggle between hiding and showing the active panel */
+				var panel = this.nextElementSibling;
+				if (panel.style.display === "block") {
+					panel.style.display = "none";
+				} else {
+					panel.style.display = "block";
+				}
+			});
+		} 
+		
+	});
+
+{% endblock %}
+</script> 

la_chariotte/templates/help/notice.html

@@ -9,11 +9,125 @@
     {% block content_title %}La Chariotte - mode d'emploi{% endblock %}
   </p>
 <div class="box">
-    <p>Voilà un petit dessin pour vous expliquer le déroulé d'une commande groupée avec la Chariotte.</p>
-    <figure class="image">
-        <img src="{% static 'img/notice_1.jpg' %}"/>
-        <img src="{% static 'img/notice_2.jpg' %}"/>
-        <img src="{% static 'img/notice_3.jpg' %}"/>
-    </figure>
+    <p>Comment marche la Chariotte et qu'est-ce qu'on peut y faire ? Voilà commment vous pouvez :</p>
+    <ul>
+        <li><a href="#join_grouped_order">Rejoindre une commande et commander des produits</a></li>
+        <li><a href="#pay">Payer (pas encore !)</a></li>
+        <li><a href="#create_account">Créer un compte</a></li>
+        <li><a href="#create_grouped_order">Créer une commande groupée</a></li>
+        <li><a href="#add_item">Ajouter des produits à une commande groupée</a></li>
+        <li><a href="#go_to_overview">Accéder à la page de gestion de ma commande groupée</a></li>
+        <li><a href="#delete_item">Modifier des produits d'une commande après sa création</a></li>
+        <li><a href="#edit_grouped_order">Modifier des informations de la commande</a></li>
+        <li><a href="#share_grouped_order">Partager une commande à des participants</a></li>
+        <li><a href="#print_orders_list">Imprimer ma liste de commandes</a></li>
+        <li><a href="#get_spreadsheet">Voir les commandes sous forme de tableur</a></li>
+    </ul>
+</div>
+
+<div class="box" id="join_grouped_order">
+    <p class="title">Rejoindre une commande et commander des produits</p>
+    <p>Pour rejoindre une commande groupée, il faut y avoir été invité.e par son organisateur.ice.
+        Si vous avez un code à 6 caractères, vous pouvez l'entrer dans l'encadré "Rejoindre une commande groupée"
+        sur la page d'accueil de la Chariotte.</p>
+    <img class="notice-img" src="{% static 'img/notice/join_grouped_order.png' %}"/>
+    <p>Sinon, cliquez sur le lien que l'organisateur.ice vous a envoyé. Vous arriverez sur la page de commande.</p>
+    <img class="notice-img" src="{% static 'img/notice/order_form.png' %}"/>
+</div>
+
+<div class="box" id="pay">
+    <p class="title">Payer (pas encore !)</p>
+    <p>Pour l’instant, le paiement n’est pas pris en compte par le site de La Chariotte, 
+        c’est l’organisateur.ice qui doit vous indiquer les modalités de paiement.</p>
+</div>
+
+<div class="box" id="create_account">
+    <p class="title">Créer un compte</p>
+    <p>1. Cliquez sur “Créer un compte”.</p>
+    <img class="notice-img" src="{% static 'img/notice/create_account.jpg' %}"/>
+    <p>2. Remplissez toutes les informations du formulaire, puis cliquez sur valider.</p>
+    <img class="notice-img" src="{% static 'img/notice/create_account_form.jpg' %}"/>
+    <p>3. Vous pouvez maintenant vous connecter.</p>
+</div>
+
+<div class="box" id="create_grouped_order">
+    <p class="title">Créer une commande groupée</p>
+    <p>1. En ayant un compte (nécessaire seulement pour les organisateurs!), vous aurez accès à une page de gestion des commandes groupées en cliquant sur le menu “Mes commandes groupées”.</p>
+    <img class="notice-img" src="{% static 'img/notice/my_grouped_orders.jpg' %}"/>
+    <p>2. C’est depuis cette page que vous pourrez créer une nouvelle commande en cliquant sur le bouton “Créer une nouvelle commande groupée” : </p>
+    <img class="notice-img" src="{% static 'img/notice/create_grouped_order.jpg' %}"/>
+    <p>3. Quelques informations vous seront alors demandées  :</p>
+    <img class="notice-img" src="{% static 'img/notice/create_grouped_order_form.jpg' %}"/>
+    <p>4. En cliquant sur "Suivant", votre commande groupée sera validée.</p>
+</div>
+
+<div class="box" id="add_item">
+    <p class="title">Ajouter des produits à une commande groupée</p>
+    <p>Directement après avoir validé la commande groupée, vous accédez à la page de gestion des produits.</p>
+    <img class="notice-img" src="{% static 'img/notice/add_item.png' %}"/>
+    <p>Ici, vous pouvez renseigner les produits qui constitueront votre commande groupée. 
+        Indiquez le nom du produit, son prix et la quantité disponible. 
+        Cliquez sur “Ajouter” pour  valider l’ajout.</p>
+        <img class="notice-img" src="{% static 'img/notice/add_item_2.png' %}"/>
+</div>
+
+<div class="box" id="go_to_overview">
+    <p class="title">Accéder à la page de gestion de ma commande groupée</p>
+    <p>Depuis le menu “Mes commandes groupées”, puis en cliquant sur le nom de la commande groupée
+         que vous voulez gérer, vous pourrez cliquer ensuite sur “Gestion de la commande groupee”.
+        </p>
+    <img class="notice-img" src="{% static 'img/notice/go_to_overview.png' %}"/>
+    <p>Sinon depuis la page “Mes commandes groupées” il est aussi possible de cliquer directement sur 
+        l’icone de la ligne "liste" de la commande groupée que vous voulez gérer.</p>
+</div>
+
+<div class="box" id="delete_item">
+    <p class="title">Modifier des produits d'une commande après sa création</p>
+    <p>1. Si vous souhaitez modifier une information concernant la commande (titre, date, description, lieu de livraison, …), 
+        il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
+    <p>2. Ensuite, dans "Résumé de la commande”, cliquez sur “Gérer les produits”.</p>
+    <img class="notice-img" src="{% static 'img/notice/grouped_order_sum_up.png' %}"/>
+    <img class="notice-img" src="{% static 'img/notice/items_overview.png' %}"/>
+    <p>3. Vous êtes maintenant sur la page de gestion des produits depuis laquelle vous pouvez ajouter ou supprimer des produits.
+        Cliquez sur “Valider” pour sauvegarder les modifications.</p>
+    <p>Attention : actuellement, il n'est pas possible de supprimer un produit une fois qu'il a été commandé par un.e participant.e. 
+        Si vous voulez vraiment le supprimer, il faudra d'abord supprimer les commandes des participant.e.s concerné.e.s.</p>
+</div>
+
+<div class="box" id="edit_grouped_order">
+    <p class="title">Modifier des informations de la commande</p>
+    <p>1. Si vous souhaitez modifier une information concernant la commande (titre, date, description, lieu de livraison, …), 
+        il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
+    <p>2. Vous pouvez ensuite cliquer sur le bouton “Modifier la commande” 
+    qui vous amenera vers le formulaire pre-rempli des informations de la commande. </p>
+    <img class="notice-img" src="{% static 'img/notice/edit_grouped_order.png' %}"/>
+    <p>3. Modifiez les informations que vous voulez, puis cliquez sur “Suivant” pour valider.</p>
+</div>
+
+<div class="box" id="share_grouped_order">
+    <p class="title">Partager une commande à des participants</p>
+    <p>Une fois votre commande bien préparée (quantité et prix des produits corrects, informations de la commande justes, …),
+         il faut maintenant la partager à des participants pour qu’il puissent commander.</p>
+    <p>1. Depuis la page de <a href="#go_to_overview">gestion de la commande</a>, 
+        allez dans l’onglet “partager et exporter”.</p>
+    <img class="notice-img" src="{% static 'img/notice/share_grouped_order.png' %}"/>
+    <p>2. Vous pouvez copier le lien, et l’envoyer à vos connaissances.</p>
+    <img class="notice-img" src="{% static 'img/notice/copy_link.png' %}"/>
+</div>
+
+<div class="box" id="print_orders_list">
+    <p class="title">Imprimer ma liste de commandes</p>
+    <p>1. Pour cela, il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
+    <p>2. Ensuite, dans "Partager et exporter”, cliquez sur “Commandes en PDF”.</p>
+    <img class="notice-img" src="{% static 'img/notice/print_orders_list.png' %}"/>
+    <p>3. Cela lance le téléchargement de votre liste de commandes en PDF.</p>
+</div>
+
+<div class="box" id="get_spreadsheet">
+    <p class="title">Voir les commandes sous forme de tableur</p>
+    <p>1. Pour cela, il faut d’abord <a href="#go_to_overview">accéder à la page de gestion de la commande groupée</a>.</p>
+    <p>2. Ensuite, dans "Partager et exporter”, cliquez sur “Commandes en CSV”.</p>
+    <img class="notice-img" src="{% static 'img/notice/get_spreadsheet.png' %}"/>
+    <p>3. Le format CSV vous permet d'ouvrir le fichier avec le tableur de votre choix (libreoffice, excel, ...).</p>
 </div>
 {% endblock %}

la_chariotte/urls.py

@@ -62,6 +62,11 @@ urlpatterns = [
         TemplateView.as_view(template_name="help/notice.html"),
         name="notice",
     ),
+    path(
+        "faq",
+        TemplateView.as_view(template_name="help/faq.html"),
+        name="faq",
+    ),
     path(
         "mentions-legales",
         TemplateView.as_view(