Change the way the showcase JS works.

- Put the images in a language folder ("en", "fr"), which will make it
  easier to add orther languages later on.
- Resize the images to fit the already existing ones.
- Add a `display_showcase` parameter to the
  `list_bills` and `home` views.

ihatemoney/default_settings.py

@@ -48,3 +48,4 @@
     "uk",
     "zh_Hans",
 ]
+SHOWCASE_LANGUAGES = ["en", "fr"]

ihatemoney/templates/home.html

@@ -1,106 +1,91 @@
 {% extends "layout.html" %}
-
 {% block body %}
-<header id="header" class="row">
-  <div class="col-xs-12 col-sm-5 offset-md-2">
-    <h2>{{ _("Manage your shared <br />expenses, easily") }}</h2>
-    {% if is_demo_project_activated %}
-        <a href="{{ url_for('.demo') }}" class="tryout btn">
-            {{ _("Try out the demo") }}
-        </a>
-    {% endif %}
-    {% if g.lang == 'fr' %}
-        ou
+  <header id="header" class="row">
+    <div class="col-xs-12 col-sm-5 offset-md-2">
+      <h2>
+        {{ _("Manage your shared <br />expenses, easily") }}
+      </h2>
+      {% if is_demo_project_activated %}
+        <a href="{{ url_for(".demo") }}" class="tryout btn">{{ _("Try out the demo") }}</a>
+      {% endif %}
+      {% if g.lang == 'fr' or g.lang == 'en' %}
+        {{ _("or") }}
         <span class="side-to-side">
-          <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') }}" />
+          <a class="showcase btn"
+             onclick="javascript:showGallery(); return false;">{{ _("See the explanatory comics") }}</a>
+          <img class="showcaseimg"
+               src="{{ url_for("static", filename='images/indicate.svg') }}" />
         </span>
-    {% else %}
-        --
-        <span class="side-to-side">
-          <a class="showcase btn" onclick="javascript:showGallery_en(); return false;">See the explicative comics</a>
-          <img class="showcaseimg" src="{{ url_for("static", filename='images/indicate.svg') }}" />
-        </span>
-    {% endif %}
-  </div>
-  <div class="col-xs-12 col-sm-4">
-    <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">
-  <div class="card-deck ml-auto mr-auto">
-    <div class="card">
-      <div class="card-header">
-        {{ _("Log in to an existing project") }}
-      </div>
-      <div class="card-body">
-        <form
-          id="authentication-form"
-          class="form-horizontal"
-          action="{{ url_for('.authenticate') }}"
-          method="post">
-          <fieldset class="form-group">
-            <legend></legend>
-            {{ forms.authenticate(auth_form, home=True) }}
-          </fieldset>
-          <div class="controls">
-            <button class="btn btn-primary btn-block" type="submit">
-              {{ _("Log in") }}
-            </button>
-            <a
-              class="password-reminder btn btn-link"
-              href="{{ url_for('.remind_password') }}"
-              >{{ _("can't remember your password?") }}</a
-            >
-          </div>
-        </form>
-      </div>
+      {% endif %}
     </div>
-    <div class="card">
-      <div class="card-header">
-        {{ _("Create a new project") }}
-      </div>
-      <div class="card-body">
-        {% if is_public_project_creation_allowed %}
-            <form
-            id="creation-form"
-            class="form-horizontal"
-            action="{{ url_for('.create_project') }}"
-            method="post"
-            >
+    <div class="col-xs-12 col-sm-4">
+      <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">
+    <div class="card-deck ml-auto mr-auto">
+      <div class="card">
+        <div class="card-header">{{ _("Log in to an existing project") }}</div>
+        <div class="card-body">
+          <form id="authentication-form"
+                class="form-horizontal"
+                action="{{ url_for(".authenticate") }}"
+                method="post">
             <fieldset class="form-group">
-                {{ forms.create_project(project_form, home=True) }}
+              <legend></legend>
+              {{ forms.authenticate(auth_form, home=True) }}
             </fieldset>
             <div class="controls">
-                <button class="btn btn-primary btn-block" type="submit">
-                {{ _("Create") }}
-                </button>
+              <button class="btn btn-primary btn-block" type="submit">{{ _("Log in") }}</button>
+              <a class="password-reminder btn btn-link"
+                 href="{{ url_for(".remind_password") }}">{{ _("can't remember your password?") }}</a>
             </div>
+          </form>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header">{{ _("Create a new project") }}</div>
+        <div class="card-body">
+          {% if is_public_project_creation_allowed %}
+            <form id="creation-form"
+                  class="form-horizontal"
+                  action="{{ url_for(".create_project") }}"
+                  method="post">
+              <fieldset class="form-group">
+                {{ forms.create_project(project_form, home=True) }}
+              </fieldset>
+              <div class="controls">
+                <button class="btn btn-primary btn-block" type="submit">{{ _("Create") }}</button>
+              </div>
             </form>
-        {% else %}
-            <a href="{{ url_for('.create_project') }}">
-                {{ _("Create a new project") }}
-            </a>
-        {% endif %}
+          {% else %}
+            <a href="{{ url_for(".create_project") }}">{{ _("Create a new project") }}</a>
+          {% endif %}
+        </div>
       </div>
     </div>
-  </div>
-</main>
+  </main>
 {% endblock %}
 {% block js %}
-$('#creation-form #password').tooltip({
-    title: "{{ _("Don\\'t reuse a personal password. Choose a private code and send it to your friends") }}",
-    trigger: 'focus',
-    placement: 'right'
-});
-{% endblock %}
+  $('#creation-form #password').tooltip({
+  title: "{{ _("Don\\'t reuse a personal password. Choose a private code and send it to your friends") }}",
+  trigger: 'focus',
+  placement: 'right'
+  });
+{% endblock %}

ihatemoney/templates/layout.html

@@ -46,7 +46,7 @@
     </script>
 </head>
 <body class="d-flex flex-column h-100">
-  {% if g.lang == 'fr' %}{% include "showcase.html" %}{% endif %}
+  {% if display_showcase %}{% 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>

ihatemoney/templates/list_bills.html

@@ -64,10 +64,10 @@
         </div>
     </div>
     <div class="identifier">
-	{% if g.lang == 'fr' %}
+	{% if display_showcase %}
         <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
+            {{ _("See the explanatory comics") }}
         </a>
 	{% endif %}
         <a class="btn btn-secondary btn-block" href="{{ url_for('.invite') }}">

ihatemoney/templates/showcase.html

@@ -1,93 +1,75 @@
-<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 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="{{ _("Close (Esc)") }}">
+        <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="{{ _("Next (right arrow)") }}"></button>
+      <button class="pswp__button pswp__button--arrow--right"
+              title="{{ _("Previous (left arrow)") }}"></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": "{{ url_for("static", filename="showcase/1.webp") }}", "w": 2450}, {"h": 2509, "src": "{{ url_for("static", filename="showcase/2.webp") }}", "w": 2221}, {"h": 2536, "src": "{{ url_for("static", filename="showcase/3.webp") }}", "w": 2101}, {"h": 2722, "src": "{{ url_for("static", filename="showcase/4.webp") }}", "w": 2348}, {"h": 2745, "src": "{{ url_for("static", filename="showcase/5.webp") }}", "w": 1804}, {"h": 3307, "src": "{{ url_for("static", filename="showcase/6.webp") }}", "w": 2897}, {"h": 2321, "src": "{{ url_for("static", filename="showcase/7.webp") }}", "w": 2239}, {"h": 2470, "src": "{{ url_for("static", filename="showcase/8.webp") }}", "w": 2419}, {"h": 3307, "src": "{{ url_for("static", filename="showcase/9.webp") }}", "w": 2602}]');
-var items_en = JSON.parse('[{"h": 2450, "src": "{{ url_for("static", filename="showcase_en/1.webp") }}", "w": 2450}, {"h": 2509, "src": "{{ url_for("static", filename="showcase_en/2.webp") }}", "w": 2221}, {"h": 2536, "src": "{{ url_for("static", filename="showcase_en/3.webp") }}", "w": 2101}, {"h": 2722, "src": "{{ url_for("static", filename="showcase_en/4.webp") }}", "w": 2348}, {"h": 2745, "src": "{{ url_for("static", filename="showcase_en/5.webp") }}", "w": 1804}, {"h": 3307, "src": "{{ url_for("static", filename="showcase_en/6.webp") }}", "w": 2897}, {"h": 2321, "src": "{{ url_for("static", filename="showcase_en/7.webp") }}", "w": 2239}, {"h": 2470, "src": "{{ url_for("static", filename="showcase_en/8.webp") }}", "w": 2419}, {"h": 3307, "src": "{{ url_for("static", filename="showcase_en/9.webp") }}", "w": 2602}]');
+var pswpElement = document.getElementById("pswp");
 var options = {
   index: 0,
   loop: false,
 };
 
 function showGallery(){
+  let items = [
+    {"h": 2450, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/1.webp') }}", "w": 2450},
+    {"h": 2509, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/2.webp') }}", "w": 2221},
+    {"h": 2536, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/3.webp') }}", "w": 2101},
+    {"h": 2722, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/4.webp') }}", "w": 2348},
+    {"h": 2745, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/5.webp') }}", "w": 1804},
+    {"h": 3307, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/6.webp') }}", "w": 2897},
+    {"h": 2321, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/7.webp') }}", "w": 2239},
+    {"h": 2470, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/8.webp') }}", "w": 2419},
+    {"h": 3307, "src": "{{ url_for('static', filename='showcase/' + g.lang + '/9.webp') }}", "w": 2602}
+  ];
 
-   /* 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") }}">');
+  // CSS and JS are loaded dynamically when the gallery opens
+  $('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_en, options);
-       gallery.init();
-     };
-     document.body.appendChild(script2);
-   };
-   document.body.appendChild(script);
-}
-
-function showGallery_en(){
-
-/* 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();
+  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(script2);
-};
-document.body.appendChild(script);
+  document.body.appendChild(script);
 }
-
 </script>