Rework invite people to project

5 files changed, 89 insertions, 54 deletions

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index 574baa3..8667f23 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -87,6 +87,16 @@ body {
   height: 100%;
   color: black;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar_content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+.identifier {
+  margin-bottom: 15px;
 }
 
 @media (min-width: 768px) {
@@ -94,6 +104,11 @@ body {
     position: fixed;
     padding-bottom: 4.5rem;
   }
+
+  .identifier {
+    margin-bottom: 0;
+  }
+
 }
 
 #add-member-form {
@@ -241,14 +256,9 @@ footer .footer-left {
   }
 }
 
-.identifier {
-  float: right;
-}
-
-#new-bill,
-.identifier {
-  margin-top: 16px;
-  margin-bottom: 16px;
+#new-bill {
+  margin-top: 30px;
+  margin-bottom: 30px;
 }
 
 /* Avoid text color flickering when it loose focus as the modal appears */
@@ -441,6 +451,7 @@ tr:hover .extra-info {
   display: inline-block;
   border-bottom: 0.2em solid transparent;
   height: 1.2em;
+  width: 1.2em; /* protection for IE11 */
 }
 
 .download-project .icon svg {
@@ -453,3 +464,6 @@ tr:hover .extra-info {
 footer .icon svg {
   fill: white;
 }
+.icon.icon-white {
+  fill: white;
+}
\ No newline at end of file
diff --git a/ihatemoney/static/images/paper-plane.svg b/ihatemoney/static/images/paper-plane.svg
new file mode 100644
index 0000000..cecb40f
--- /dev/null
+++ b/ihatemoney/static/images/paper-plane.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"/></svg>
\ No newline at end of file
diff --git a/ihatemoney/templates/forms.html b/ihatemoney/templates/forms.html
index 57f9440..a64e205 100644
--- a/ihatemoney/templates/forms.html
+++ b/ihatemoney/templates/forms.html
@@ -1,4 +1,4 @@
-{% macro input(field, multiple=False, class='form-control', inline=False) -%}
+{% macro input(field, multiple=False, class='form-control', inline=False, placeholder='') -%}
     <div class="form-group{% if inline %} row{% endif %}">
     {% if field.type != "SubmitField" %}
         {% if inline %}
@@ -9,9 +9,9 @@
     {% endif %}
         <div class="controls{% if inline %} col-9{% endif %}">
         {% if multiple == True %}
-            {{ field(multiple=True, class=class) }}
+            {{ field(multiple=True, class=class, placeholder=placeholder) }}
         {% else %}
-            {{ field(class=class) | safe }}
+            {{ field(class=class, placeholder=placeholder) | safe }}
         {% endif %}
         {% if field.description %}
             <p class="help-inline">{{ field.description }}</p>
@@ -119,8 +119,8 @@
 {{ form.hidden_tag() }}
     {% include "display_errors.html" %}
     <div class="input-group">
-        <label class="sr-only" for="name">_("Type user name here")</label>
-        {{ form.name(placeholder=_("Type user name here"), class="form-control") }}
+        <label class="sr-only" for="name">_("Add participant")</label>
+        {{ form.name(placeholder=_("Add participant"), class="form-control") }}
         <div class="input-group-append">
             <button class="btn btn-outline-secondary input-group-addon" type="submit">{{ _("Add") }}</button>
         </div>
@@ -143,10 +143,9 @@
 
 {% macro invites(form) %}
     {{ form.hidden_tag() }}
-    {{ input(form.emails) }}
+    {{ input(form.emails, placeholder=_('john.doe@example.com, mary.moe@site.com')) }}
     <div class="actions">
         <button class="btn btn-primary">{{ _("Send the invitations") }}</button>
-        <a href="{{ url_for(".list_bills") }}">{{ _("No, thanks") }}</a>
     </div>
 {% endmacro %}
 
diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html
index 6ccf0a0..367d2ee 100644
--- a/ihatemoney/templates/list_bills.html
+++ b/ihatemoney/templates/list_bills.html
@@ -45,43 +45,52 @@
 {% endblock %}
 
 {% block sidebar %}
-    <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline">
-        {{ forms.add_member(member_form) }}
-    </form>
+    <div class="sidebar_content">
+        <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post">
+            {{ forms.add_member(member_form) }}
+        </form>
 
-    <div id="table_overflow">
-    <table class="balance table">
-    {% set balance = g.project.balance %}
-    {% for member in g.project.members | sort(attribute='name') if member.activated or balance[member.id]|round(2) != 0 %}
-    <tr id="bal-member-{{ member.id }}" action={% if member.activated %}delete{% else %}reactivate{% endif %}>
-        <td class="balance-name">{{ member.name }}
-            <span class="light{% if not g.project.uses_weights %} extra-info{% endif %}">(x{{ member.weight|minimal_round(1) }})</span>
-        </td>
-        {% if member.activated %}
-        <td>
-            <form class="action delete" action="{{ url_for(".remove_member", member_id=member.id) }}" method="POST">
-                <button type="submit">{{ _("deactivate") }}</button></form>
-            <form class="action edit" action="{{ url_for(".edit_member", member_id=member.id) }}" method="GET">
-                <button type="submit">{{ _("edit") }}</button></form>
-        </td>
-        {% else %}
-        <td>
-            <form class="action reactivate" action="{{ url_for(".reactivate", member_id=member.id) }}" method="POST">
-                <button type="submit">{{ _("reactivate") }}</button></form></td>
-        {% endif %}
-        <td class="balance-value {% if balance[member.id]|round(2) > 0 %}positive{% elif balance[member.id]|round(2) < 0 %}negative{% endif %}">
-            {% if balance[member.id]|round(2) > 0 %}+{% endif %}{{ "%.2f" | format(balance[member.id]) }}
-        </td>
-    </tr>
-    {% endfor %}
-    </table>
+        <div id="table_overflow">
+        <table class="balance table">
+        {% set balance = g.project.balance %}
+        {% for member in g.project.members | sort(attribute='name') if member.activated or balance[member.id]|round(2) != 0 %}
+        <tr id="bal-member-{{ member.id }}" action={% if member.activated %}delete{% else %}reactivate{% endif %}>
+            <td class="balance-name">{{ member.name }}
+                <span class="light{% if not g.project.uses_weights %} extra-info{% endif %}">(x{{ member.weight|minimal_round(1) }})</span>
+            </td>
+            {% if member.activated %}
+            <td>
+                <form class="action delete" action="{{ url_for(".remove_member", member_id=member.id) }}" method="POST">
+                    <button type="submit">{{ _("deactivate") }}</button></form>
+                <form class="action edit" action="{{ url_for(".edit_member", member_id=member.id) }}" method="GET">
+                    <button type="submit">{{ _("edit") }}</button></form>
+            </td>
+            {% else %}
+            <td>
+                <form class="action reactivate" action="{{ url_for(".reactivate", member_id=member.id) }}" method="POST">
+                    <button type="submit">{{ _("reactivate") }}</button></form></td>
+            {% endif %}
+            <td class="balance-value {% if balance[member.id]|round(2) > 0 %}positive{% elif balance[member.id]|round(2) < 0 %}negative{% endif %}">
+                {% if balance[member.id]|round(2) > 0 %}+{% endif %}{{ "%.2f" | format(balance[member.id]) }}
+            </td>
+        </tr>
+        {% endfor %}
+        </table>
+        </div>
+    </div>
+    <div class="identifier">
+        <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>
+            {{ _("Invite people") }}
+        </a>
     </div>
 {% endblock %}
 
 {% block content %}
-<div class="identifier"><a class="btn btn-link" href="{{ url_for(".invite") }}">{{ _("Invite people to join this project!") }}</a></div>
-<a id="new-bill" href="{{ url_for(".add_bill") }}" class="btn btn-primary" data-toggle="modal" data-target="#bill-form">{{ _("Add a new bill") }}</a>
-
+    <a id="new-bill" href="{{ url_for('.add_bill') }}" class="btn btn-primary float-right" data-toggle="modal" data-target="#bill-form">
+        <i class="icon icon-white plus">{{ static_include("images/plus.svg") | safe }}</i>
+        {{ _("Add a new bill") }}
+    </a>
     <div id="bill-form" class="modal fade show" role="dialog">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
diff --git a/ihatemoney/templates/send_invites.html b/ihatemoney/templates/send_invites.html
index cd96380..d64021b 100644
--- a/ihatemoney/templates/send_invites.html
+++ b/ihatemoney/templates/send_invites.html
@@ -1,15 +1,27 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<h2>{{ _("Invite people to join this project") }}</h2>
+<h1>{{ _("Invite people to join this project") }}</h1>
+
+<h3>{{ _('Share Identifier & code') }}</h3>
+<p>
+    {{ _("You can share the project identifier and the private code by any communication means.") }}
+    <br />
+    <strong>{{ _('Identifier:') }}</strong> <a href="{{ url_for("main.list_bills", project_id=g.project.id) }}">{{ g.project.id }}</a>
+</p>
+
+<h3>{{ _('Share the Link') }}</h3>
+<p>{{ _("You can directly share the following link via your prefered medium") }}</br>
+    <a href="{{ url_for(".authenticate", _external=True, token=g.project.generate_token()) }}">
+        {{ url_for(".authenticate", _external=True, token=g.project.generate_token()) }}
+    </a>
+</p>
+
+<h3>{{ _('Send via Emails') }}</h3>
 <p>{{ _("Specify a (comma separated) list of email adresses you want to notify about the
 creation of this budget management project and we will send them an email for you.") }}</p>
-<p>{{ _("If you prefer, you can share the project identifier and the shared
-password by other communication means. Or even directly share the following link:") }}</br>
-<a href="{{ url_for(".authenticate", _external=True, token=g.project.generate_token()) }}">
-    {{ url_for(".authenticate", _external=True, token=g.project.generate_token()) }}
-</a>
-</p>
+
+
 
 {% include "display_errors.html" %}
 <form class="invites form-horizontal" method="post" accept-charset="utf-8">