Merge 4db6ef807b into 6582e2c0c3

- 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.

.isort.cfg

@@ -5,6 +5,7 @@ include_trailing_comma=True
 force_grid_wrap=0
 line_length=88
 combine_as_imports=True
+profile = "black"
 
 # If set, imports will be sorted within their section independent to the import_type.
 force_sort_within_sections=True

ihatemoney/default_settings.py

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

ihatemoney/templates/home.html

@@ -1,100 +1,91 @@
 {% extends "layout.html" %}
-
 {% block body %}
-<header id="header" class="row">
+  <header id="header" class="row">
     <div class="col-xs-12 col-sm-5 offset-md-2">
-    <h2>{{ _("Manage your shared <br />expenses, easily") }}</h2>
+      <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>
+        <a href="{{ url_for(".demo") }}" class="tryout btn">{{ _("Try out the demo") }}</a>
       {% endif %}
-    {% if g.lang == 'fr' %}
-        ou
+      {% 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 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>
+      <table class="additional-content">
+        <tr>
           <td>
-        {{ _("You're sharing a house?") }}<br />
-        {{ _("Going on holidays with friends?") }}<br />
-        {{ _("Simply sharing money with others?") }} <br />
+            {{ _("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') }}" />
+            <img class="shareimg"
+                 src="{{ url_for("static", filename='images/share.svg') }}" />
           </td>
-    </tr></table>
+        </tr>
+      </table>
     </div>
-</header>
-<main class="row home">
+  </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-header">{{ _("Log in to an existing project") }}</div>
         <div class="card-body">
-        <form
-          id="authentication-form"
+          <form id="authentication-form"
                 class="form-horizontal"
-          action="{{ url_for('.authenticate') }}"
+                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
-            >
+              <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-header">{{ _("Create a new project") }}</div>
         <div class="card-body">
           {% if is_public_project_creation_allowed %}
-            <form
-            id="creation-form"
+            <form id="creation-form"
                   class="form-horizontal"
-            action="{{ url_for('.create_project') }}"
-            method="post"
-            >
+                  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>
+                <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>
+            <a href="{{ url_for(".create_project") }}">{{ _("Create a new project") }}</a>
           {% endif %}
         </div>
       </div>
     </div>
-</main>
+  </main>
 {% endblock %}
 {% block js %}
-$('#creation-form #password').tooltip({
+  $('#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/showcase.html

@@ -1,4 +1,8 @@
-<div id="pswp" class="hiddenpswp" tabindex="-1" role="dialog" aria-hidden="true">
+<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">
@@ -18,13 +22,10 @@
           </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>
-
+      <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>
@@ -32,18 +33,26 @@
   </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 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 */
-
+  // 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") }}">');
 
@@ -63,5 +72,4 @@ function showGallery(){
   };
   document.body.appendChild(script);
 }
-
 </script>

ihatemoney/tests/budget_test.py

@@ -1030,9 +1030,7 @@ class TestBudget(IhatemoneyTestCase):
         assert """<thead>
         <tr>
             <th>Project</th>
-            <th>Number of participants</th>""" in resp.data.decode(
-            "utf-8"
-        )
+            <th>Number of participants</th>""" in resp.data.decode("utf-8")
 
     def test_dashboard_project_deletion(self):
         self.post_project("raclette")

ihatemoney/web.py

@@ -296,12 +296,14 @@ def home():
     is_public_project_creation_allowed = current_app.config[
         "ALLOW_PUBLIC_PROJECT_CREATION"
     ]
+    display_showcase = g.lang in current_app.config["SHOWCASE_LANGUAGES"]
 
     return render_template(
         "home.html",
         project_form=project_form,
         is_demo_project_activated=is_demo_project_activated,
         is_public_project_creation_allowed=is_public_project_creation_allowed,
+        display_showcase=display_showcase,
         auth_form=auth_form,
         session=session,
     )
@@ -678,6 +680,7 @@ def list_bills():
         csrf_form=csrf_form,
         add_bill=request.values.get("add_bill", False),
         current_view="list_bills",
+        display_showcase=g.lang in current_app.config["SHOWCASE_LANGUAGES"],
     )