From bd1122cc0e3c5524bea6f4dc97422eaeb52ed8d2 Mon Sep 17 00:00:00 2001
From: Jojo144 <Jojo144@users.noreply.github.com>
Date: Thu, 7 May 2020 22:34:31 +0200
Subject: Integrate illustrations as a showcase (#544)

Integrate some custom graphics, and a whole comics explanation, only in French for now.
Fix #363
---
 ihatemoney/templates/edit_project.html |  8 ++--
 ihatemoney/templates/history.html      |  2 +-
 ihatemoney/templates/home.html         | 21 ++++++++---
 ihatemoney/templates/layout.html       |  4 +-
 ihatemoney/templates/list_bills.html   | 12 ++++--
 ihatemoney/templates/showcase.html     | 67 ++++++++++++++++++++++++++++++++++
 6 files changed, 99 insertions(+), 15 deletions(-)
 create mode 100644 ihatemoney/templates/showcase.html

(limited to 'ihatemoney/templates')

diff --git a/ihatemoney/templates/edit_project.html b/ihatemoney/templates/edit_project.html
index b7861c5..478b7b4 100644
--- a/ihatemoney/templates/edit_project.html
+++ b/ihatemoney/templates/edit_project.html
@@ -48,11 +48,11 @@
                 <span class="mb-1">{{ _('Bill items') }}</span>
                 <span>
                     <a href="{{ url_for('.export_project', file='bills', format='json') }}" download class="badge badge-secondary">
-                        <i class="icon plus">{{ static_include("images/file-alt.svg") | safe }}</i>
+                        <i class="icon before-text">{{ static_include("images/file-alt.svg") | safe }}</i>
                         JSON
                     </a>
                     <a href="{{ url_for('.export_project', file='bills', format='csv') }}" download class="badge badge-secondary">
-                        <i class="icon plus">{{ static_include("images/file-csv-solid.svg") | safe }}</i>
+                        <i class="icon before-text">{{ static_include("images/file-csv-solid.svg") | safe }}</i>
                         CSV
                     </a>
                 </span>
@@ -64,11 +64,11 @@
                 <span class="mb-1">{{ _('Settle plans') }}</span>
                 <span>
                     <a href="{{ url_for('.export_project', file='transactions', format='json') }}" download class="badge badge-secondary">
-                        <i class="icon plus">{{ static_include("images/file-alt.svg") | safe }}</i>
+                        <i class="icon before-text">{{ static_include("images/file-alt.svg") | safe }}</i>
                         JSON
                     </a>
                     <a href="{{ url_for('.export_project', file='transactions', format='csv') }}" download class="badge badge-secondary">
-                        <i class="icon plus">{{ static_include("images/file-csv-solid.svg") | safe }}</i>
+                        <i class="icon before-text">{{ static_include("images/file-csv-solid.svg") | safe }}</i>
                         CSV
                     </a>
                 </span>
diff --git a/ihatemoney/templates/history.html b/ihatemoney/templates/history.html
index a9a9a4d..9cf66a7 100644
--- a/ihatemoney/templates/history.html
+++ b/ihatemoney/templates/history.html
@@ -249,7 +249,7 @@
         <div class="py-3 d-flex justify-content-center empty-bill">
         <div class="card d-inline-flex p-2">
             <div class="card-body text-center text-muted">
-                <i class="icon icon-white hand-holding-heart">{{ static_include("images/hand-holding-heart.svg") | safe }}</i>
+                <i class="icon icon-white billimg">{{ static_include("images/bill.svg") | safe }}</i>
                 <h3>{{ _('Nothing to list')}}</h3>
                 <p>
                     {{ _("Someone probably cleared the project history.") }}
diff --git a/ihatemoney/templates/home.html b/ihatemoney/templates/home.html
index bac8abe..4af6a80 100644
--- a/ihatemoney/templates/home.html
+++ b/ihatemoney/templates/home.html
@@ -9,14 +9,23 @@
             {{ _("Try out the demo") }}
         </a>
     {% endif %}
+    {% if g.lang == 'fr' %}
+        ou <a class="showcase btn" onclick="javascript:showGallery(); return false;">Voir la BD explicative</a>
+        <img class="showcaseimg" src="{{ url_for("static", filename='images/indicate.svg') }}" />
+    {% endif %}
   </div>
   <div class="col-xs-12 col-sm-4">
-    <p class="additional-content">
-      {{ _("You're sharing a house?") }}<br />
-      {{ _("Going on holidays with friends?") }}<br />
-      {{ _("Simply sharing money with others?") }} <br />
-      <strong>{{ _("We can help!") }}</strong>
-    </p>
+    <table class="additional-content"><tr>
+      <td>
+        {{ _("You're sharing a house?") }}<br />
+        {{ _("Going on holidays with friends?") }}<br />
+        {{ _("Simply sharing money with others?") }} <br />
+        <strong>{{ _("We can help!") }}</strong>
+      </td>
+      <td>
+        <img class="shareimg" src="{{ url_for("static", filename='images/share.svg') }}" />
+      </td>
+    </tr></table>
   </div>
 </header>
 <main class="row home">
diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index 35d2797..6204ad5 100644
--- a/ihatemoney/templates/layout.html
+++ b/ihatemoney/templates/layout.html
@@ -16,6 +16,7 @@
     <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/datatables.min.css') }}">
     <script src="{{ url_for("static", filename="js/datatables.min.js") }}"></script>
     {%- endif %}
+
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
@@ -32,6 +33,7 @@
     </script>
 </head>
 <body class="d-flex flex-column h-100">
+  {% if g.lang == 'fr' %}{% include "showcase.html" %}{% endif %}
   <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -85,7 +87,7 @@
           <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarProjectsLinks">
             <li>
               <a class="dropdown-item" href="{{ url_for("main.create_project") }}">
-                <i class="icon plus">{{ static_include("images/plus.svg") | safe }}</i>
+                <i class="icon before-text">{{ static_include("images/plus.svg") | safe }}</i>
                 {{ _("Start a new project") }}
               </a>
             </li>
diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html
index 95088eb..be55c19 100644
--- a/ihatemoney/templates/list_bills.html
+++ b/ihatemoney/templates/list_bills.html
@@ -69,8 +69,14 @@
         </div>
     </div>
     <div class="identifier">
+	{% if g.lang == 'fr' %}
+        <a class="btn btn-secondary btn-block" href=""  onclick="javascript:showGallery(); return false;">
+            <i class="icon icon-white high before-text">{{ static_include("images/read.svg") | safe }}</i>
+	    Voir la BD explicative
+        </a>
+	{% endif %}
         <a class="btn btn-secondary btn-block" href="{{ url_for('.invite') }}">
-            <i class="icon icon-white paper-plane">{{ static_include("images/paper-plane.svg") | safe }}</i>
+            <i class="icon icon-white high before-text">{{ static_include("images/paper-plane.svg") | safe }}</i>
             {{ _("Invite people") }}
         </a>
     </div>
@@ -79,7 +85,7 @@
 {% block content %}
     <span id="new-bill" class="float-right"  {% if not g.project.members %} data-toggle="tooltip" title="{{_('You should start by adding participants')}}" {% endif %}>
         <a href="{{ url_for('.add_bill') }}" class="btn btn-primary float-right {% if not g.project.members %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#bill-form">
-            <i class="icon icon-white plus">{{ static_include("images/plus.svg") | safe }}</i>
+            <i class="icon icon-white before-text">{{ static_include("images/plus.svg") | safe }}</i>
             {{ _("Add a new bill") }}
         </a>
     </span>
@@ -180,7 +186,7 @@
         <div class="py-3 d-flex justify-content-center empty-bill">
         <div class="card d-inline-flex p-2">
             <div class="card-body text-center text-muted">
-                <i class="icon icon-white hand-holding-heart">{{ static_include("images/hand-holding-heart.svg") | safe }}</i>
+                <i class="icon icon-white billimg">{{ static_include("images/bill.svg") | safe }}</i>
                 <h3>{{ _('No bills')}}</h3>
                 <p>
                     {{ _("Nothing to list yet.")}}<br />
diff --git a/ihatemoney/templates/showcase.html b/ihatemoney/templates/showcase.html
new file mode 100644
index 0000000..cd9a371
--- /dev/null
+++ b/ihatemoney/templates/showcase.html
@@ -0,0 +1,67 @@
+<div id="pswp" class="hiddenpswp" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="pswp__bg"></div>
+    <div class="pswp__scroll-wrap">
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+        <div class="pswp__ui pswp__ui--hidden">
+            <div class="pswp__top-bar">
+                <div class="pswp__counter"></div>
+                <button class="pswp__button pswp__button--close" title="Fermer (Esc)"></button>
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Suivant (flèche droite)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Précédent (flèche gauche)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+var pswpElement = document.getElementById('pswp');
+var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.jpg", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.jpg", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.jpg", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.jpg", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.jpg", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.jpg", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.jpg", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.jpg", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.jpg", "w": 2602}]');
+var options = {
+  index: 0,
+  loop: false,
+};
+
+function showGallery(){
+
+   /* the CSS and JS for photoswipe is loaded dynamically
+    * so that they are not loaded if the gallery is not open */
+
+   $('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/default-skin/default-skin.css") }}">');
+   $('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/photoswipe.css") }}">');
+
+   var script = document.createElement("script");
+   script.type = "text/javascript";
+   script.src = "{{ url_for('static', filename='photoswipe/photoswipe.min.js')}}";
+   script.onload = function(){
+     var script2 = document.createElement("script");
+     script2.type = "text/javascript";
+     script2.src = "{{ url_for('static', filename='photoswipe/photoswipe-ui-default.min.js')}}";
+     script2.onload = function(){
+       pswpElement.className="pswp";
+       var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+       gallery.init();
+     };
+     document.body.appendChild(script2);
+   };
+   document.body.appendChild(script);
+}
+
+</script>
-- 
cgit v1.1