enhancement: improve general UI

* Slightly reduces content width
* Limits paragraphs width for better readability
* Sets a max height for the editor field
* Sets navbar to full width
* Updates translations

Co-Authored-by: Pascal Repond <[email protected]>

examples/data/next.md

@@ -0,0 +1,118 @@
+title: Recherche
+tags: 
+
+## Rechercher
+
+### Recherche simple
+
+Un champ de recherche unique combine tous les termes de recherches et fournit une liste de résultats triée par pertinence. Ceux-ci peuvent ensuite être filtrés au moyen [des facettes](#filtrer-sa-recherche).
+
+### Astuces de recherche
+
+| Symbole | Description| Exemple | Effet |
+|:---:|---|---|---|
+| `*` | Troncature | `culture*` | Recherche les ressources commençant par "culture", comme "culture", "culturel", "culturelle", etc. |
+| `+` | Opérateur booléen ET | `chien + chat` | Recherche les ressources contenant "chien" et aussi "chat". Si rien est spécifié, l'opérateur ET s'appliquera de toute façon. |
+| `|` | Opérateur booléen OU | `vélo | bicyclette` | Recherche les ressources contenant soit "vélo", soit "bicyclette" |
+| `-` | Opérateur booléen SAUF | `tintin -tibet` | Recherche les ressources contenant "tintin" mais pas "tibet". Le mot à exclure doit être collé au signe `-`. |
+| `()` | Parenthèses, pour combiner les opérateurs | `mobilité + (vélo | bicyclette)` | Recherche les ressources contenant "mobilité" et soit "vélo", soit "bicyclette" |
+| `""` | Expression exacte | `"revue littéraire"` | Recherche les ressources contenant l'expression exacte "revue littéraire" |
+
+### Onglets de résultats
+
+Le formulaire de recherche permet de trouver non seulement des documents, mais également des personnes ou collectivités afin, par exemple, d'obtenir des informations sur un auteur et de lister les documents qui lui sont liés.
+
+### Filtrer sa recherche
+
+Les facettes permettent de filtrer les résultats selon différents critères tels que: type de document, auteur, bibliothèque, etc. En un clic, les facettes restreignent la recherche de plusieurs milliers de résultats.
+
+Comme les poupées russes, les facettes peuvent se combiner, l'ensemble des résultats se restreignant toujours plus. Les sélections initiales restant actives tant qu'elles ne sont pas enlevées (dans le cadre de la même recherche). 
+
+### Vue détaillée d'un document
+
+Pour afficher des informations détaillées sur un document, cliquer sur son titre dans les résultats de recherche. La vue détaillée contient des informations sous différents onglets :
+
+* __Obtenir :__ Affiche les exemplaires des bibliothèques, leur statut et leur disponibilité, et permet d'effectuer une demande ou une réservation. 
+* __Description :__ Contient les informations bibliographiques détaillées concernant le document. 
+
+## S'inscrire
+
+Pour vous inscrire, veuillez vous rendre dans la bibliothèque de votre choix.
+
+Si vous le souhaitez, vous pouvez déjà vous créer un compte en ligne et saisir vos données personnelles, ce qui accélérera votre inscription sur place:
+
+1. Cliquer sur  **<i aria-hidden="true" class="fa fa-user"></i> Mon compte** > **<i aria-hidden="true" class="fa fa-user-plus"></i> S'inscrire**
+1. Introduire e-mail et mot de passe
+1. Cliquer sur  **<i aria-hidden="true" class="fa fa-user"></i> Mon compte** > **<i aria-hidden="true" class="fa fa-user"></i> Éditer mon profil**
+1. Saisir vos données personnelles
+1. Sauvegarder et vous rendre dans la bibliothèque de votre choix
+
+## Gérer son compte
+
+### Se connecter
+
+La connexion vous permet de consulter l'état de votre compte lecteur (documents empruntés, réservés, en retard…). Elle vous permet aussi de prolonger vous-même le délai de prêt des documents que vous avez empruntés.
+
+* Cliquer sur  **<i aria-hidden="true" class="fa fa-user"></i> Mon compte** > **<i aria-hidden="true" class="fa fa-sign-in"></i> Se connecter**
+* Entrer votre nom d'utilisateur ou e-mail, ainsi que votre mot de passe
+
+La présence de votre nom en haut à droite de l'écran signifie que votre compte est ouvert.
+
+### Compte lecteur et lectrice
+
+Une fois que vous êtes connecté·e, votre compte est accessible depuis le menu en haut à droite **<i aria-hidden="true" class="fa fa-book"></i> Mon compte**. Les rubriques suivantes y sont proposées :
+
+* __Emprunts :__ Liste de vos documents empruntés. Une bouton permet la prolongation de la date d'échéance des documents.
+* __Demandes :__ Liste des documents demandés et des documents à retirer. Cette vue affiche également le statut des demandes en cours. Un bouton vous permet d'annuler une demande. 
+* __Frais :__ Les différents frais que vous devez à votre bibliothèque (amendes, prêts entre bibliothèques, photocopies…).
+* __Prêt entre bibliothèques :__ Liste des demandes et des prêts entre bibliothèques, ainsi que leurs statuts.
+* __Historique :__ Les documents que vous avez empruntés et rendus. Cette liste est conservée pour une durée limitée.
+* __Données personnelles :__ Les données personnelles de votre compte. 
+
+### Modifier son mot de passe
+
+1. Se connecter
+1. Depuis le menu de votre compte, cliquer sur **<i aria-hidden="true" class="fa fa-lock"></i> Modifier le mot de passe**
+1. Saisir l'ancien et le nouveau mot de passe, et valider
+
+Si vous avez oublié votre mot de passe, vous pouvez utiliser la fonction "Mot de passe oublié" sur la page de connexion.
+
+### Modifier ses données personnelles
+
+1. Se connecter
+1. Depuis le menu de votre compte, cliquer sur **<i aria-hidden="true" class="fa fa-user"></i> Éditer mon profil**
+1. Vous pouvez modifier toutes les données excepté vos noms et date de naissance. Pour un changement de nom, adressez-vous à votre bibliothèque.
+
+### Prolonger un document
+
+1. Se connecter
+1. Ouvrir son compte lecteur ou lectrice (en haut à droite)
+1. Dans __Emprunts__, cliquer sur __Prolonger__
+
+## Demander/réserver un document
+
+Vous avez la possibilité de demander ou de réserver un document en ligne:
+
+1. Se connecter
+1. Rechercher le document souhaité
+1. Dans l'onglet __Obtenir__, cliquer sur __Demander__
+    * Si l'option __Demander__ ne s'affiche pas: soit la bibliothèque n'autorise pas les demandes sur cet exemplaire, soit vous n'êtes pas inscrit·e dans le réseau dans cette bibliothèque/réseau.
+1. Sélectionner le lieu de retrait et valider
+
+La demande/réservation peut concerner :
+
+* Un exemplaire disponible
+* Un exemplaire disponible hors du libre accès
+* Un exemplaire hors du libre accès à consulter sur place uniquement
+* Une réservation sur un exemplaire déjà emprunté par une autre personne.
+
+## Prêt entre bibliothèques
+
+Pour soumettre une demande:
+
+1. Se connecter
+1. Cliquer sur  **<i aria-hidden="true" class="fa fa-wrench"></i> Outils** > **<i aria-hidden="true" class="fa fa-shopping-basket"></i> Demande de prêt entre bibliothèques**
+1. Remplir le formulaire en indiquant autant d'informations que possible
+1. Sauvegarder
+
+Les demandes s'affichent ensuite dans votre compte, onglet **Prêt entre bibliothèques**. 

flask_wiki/forms.py

@@ -11,11 +11,17 @@
 
 from flask_babelex import gettext as _
 from flask_wtf import FlaskForm
-from wtforms import TextAreaField, StringField
+from wtforms import TextAreaField, StringField, Form
 from wtforms.validators import InputRequired
 
 
 class EditorForm(FlaskForm):
-    title = StringField(_('title'), [InputRequired()])
-    body = TextAreaField(_('body'), [InputRequired()])
-    tags = StringField(_('tags'))
+    class Meta:
+        locales = ['en', 'fr', 'de', 'it']
+
+    def get_translations(self, form):
+            return super(FlaskForm.Meta, self).get_translations(form)
+
+    title = StringField(_('Title'), [InputRequired()])
+    body = TextAreaField(_('Body'), [InputRequired()])
+    tags = StringField(_('Tags'))

flask_wiki/static/css/wiki.css

@@ -11,24 +11,28 @@ h1 {
   font-weight: 700;
 }
 
-article article h1 {
+.content h1 {
   font-weight: 700;
 }
 
-article article h2 {
+.content  h2 {
   font-weight: 600;
 }
 
-article article h1, article article h2 {
+.content h1, .content h2 {
   border-bottom: solid 2px;
   margin-top: 2rem;
 }
 
-h3, h4, h5, h6 {
+.content h3, .content h4, .content h5, .content h6 {
   border-bottom: solid 1px lightgray;
   margin-top: 1rem;
 }
 
+.content p, .content ul, .content ol {
+  max-width: 55rem;
+}
+
 .wiki-page .toc ul {
   padding-left: 1em;
 }

flask_wiki/static/js/wiki.js

@@ -99,4 +99,5 @@ const easyMDE = new EasyMDE({
   sideBySideFullscreen: false, // Allow side by side preview
   showIcons: ["code", "table", "heading-1", "heading-2", "heading-3"],
   forceSync: true, // So that textArea doesn't appear as empty to flask
+  maxHeight: "500px",
 });

flask_wiki/templates/wiki/editor.html

@@ -13,10 +13,21 @@
 {% set active_page = "editor" %}
 
 {% block content %}
-<main class="wiki-editor col-md-10 offset-md-1 mt-4">
+<main class="wiki-editor col-md-7 offset-md-2 mt-4">
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item">
+      <a class="nav-link active" data-toggle="tab" id="edit-tab" href="#edit" role="tab" aria-controls="home"
+        aria-selected="true">{{ _('Edit') }}</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" id="preview-tab" href="#preview" role="tab"
+        data-preview-url="{{ url_for('wiki.preview') }}" aria-controls="profile"
+        aria-selected="false">{{ _('Preview') }}</a>
+    </li>
+  </ul>
   <div class="tab-content">
     <div class="tab-pane fade show active" id="edit" role="tabpanel" aria-labelledby="home-tab">
-      <form class="editor" method="post">
+      <form class="editor content" method="post">
         {{ form.csrf_token }}
         {{ render_form_row([form.title, form.tags]) }}
         {{ render_form_row([form.body]) }}
@@ -40,6 +51,7 @@
         </button>
       </form>
     </div>
+    <div class="tab-pane fade content" id="preview" role="tabpanel" aria-labelledby="profile-tab"></div>
   </div>
 </div>
 

flask_wiki/templates/wiki/files.html

@@ -11,7 +11,7 @@
 {% set active_page = "files" %}
 
 {% block content %}
-<div data-delay="1500" class="toast">
+<div data-delay="1500" class="toast hide">
     <div class="toast-header text-primary font-weight-bold">
         Markdown
     </div>

flask_wiki/templates/wiki/navigation.html

@@ -8,7 +8,7 @@
 -->
 
 <header class="row">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light col-lg-10 offset-lg-1 justify-content-end">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light col-lg-12 justify-content-end">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
@@ -31,7 +31,7 @@
                    aria-label="{{ _('Search') }}" />
             <div class="input-group-append">
             <button class="btn btn-outline-primary" type="submit">
-                {{ _('Search') }}
+                <i class="fa fa-search"></i>
             </button>
             </div>
             </div>

flask_wiki/templates/wiki/page.html

@@ -11,7 +11,7 @@
 {% set active_page = "page" %}
 
 {% block content %}
-<div data-delay="1500" class="toast">
+<div data-delay="1500" class="toast hide">
     <div class="toast-header text-primary font-weight-bold">
         Markdown
     </div>
@@ -20,7 +20,7 @@
     </div>
 </div>
 <main class="row mt-4 wiki-page">
-    <article class="col-md-8 offset-md-1">
+    <div class="col-md-7 offset-md-2">
         <header class="d-flex flex-column justify-content-lg-between mb-4 pb-2 border-bottom">
             <header class="wiki-page-header d-flex flex-column flex-lg-row justify-content-lg-between mb-2 mb-lg-0">
             <h1 class="wiki-page-title mb-0">{{page.title}}</h1>
@@ -51,10 +51,10 @@ <h1 class="wiki-page-title mb-0">{{page.title}}</h1>
             </div>
             </footer>
         </header>
-        <article>
+        <article class="content">
         {{ page }}
         </article>
-    </article>
+    </div>
     <aside class="col-md-3">
         <div class="sticky-top pt-3">
             {% if page.toc %}

flask_wiki/templates/wiki/search.html

@@ -13,7 +13,7 @@
 {% set active_page = "search" %}
 
 {% block content %}
-<div data-delay="1500" class="toast">
+<div data-delay="1500" class="toast hide">
     <div class="toast-header text-primary font-weight-bold">
         Markdown
     </div>
@@ -22,18 +22,18 @@
     </div>
 </div>
 <main class="row mt-4 wiki-page">
-    <article class="col-md-10 offset-md-1">
+    <div class="col-md-7 offset-md-2">
         <header>
             <div class="pb-3">
                 {{ results | length }} {{ ngettext('result', 'results', results | length) }}
                 <a href="{{ url_for('wiki.search', q='*') }}" class="btn btn-sm btn-outline-primary ml-2">{{ _("All languages") }}</a>
                 </div>
         </header>
-        <article>
+        <div>
             <ul class="list-group list-group-flush">
                 {%- for result in results -%}
                 <li class="list-group-item">
-                    <article class="d-lg-flex justify-content-lg-between">
+                    <div class="d-lg-flex justify-content-lg-between">
                         <article class="mb-2">
                             <h5 class="m-0">
                                 <a class="mr-2" href="{{ url_for('wiki.page', url=result.url) }}">
@@ -64,12 +64,12 @@ <h5 class="m-0">
                             </a>
                         </footer>
                         {% endif %}
-                    </article>
+                    </div>
                 </li>
                 {%- endfor -%}
             </ul>
-        </article>
-    </article>
+        </div>
+    </div>
 </main>
 
 {% endblock %}