Rework invite people to project

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 {
+#new-bill {
-  float: right;
+  margin-top: 30px;
-}
+  margin-bottom: 30px;
-
-#new-bill,
-.identifier {
-  margin-top: 16px;
-  margin-bottom: 16px;
 }
 
 /* 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;
+}

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>

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>
+        <label class="sr-only" for="name">_("Add participant")</label>
-        {{ form.name(placeholder=_("Type user name here"), class="form-control") }}
+        {{ 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 %}
 

ihatemoney/templates/list_bills.html

@@ -45,7 +45,8 @@
 {% endblock %}
 
 {% block sidebar %}
-    <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline">
+    <div class="sidebar_content">
+        <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post">
             {{ forms.add_member(member_form) }}
         </form>
 
@@ -76,12 +77,20 @@
         {% 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 float-right" data-toggle="modal" data-target="#bill-form">
-<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>
+        <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">

ihatemoney/templates/send_invites.html

@@ -1,16 +1,28 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<h2>{{ _("Invite people to join this project") }}</h2>
+<h1>{{ _("Invite people to join this project") }}</h1>
-<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>
+<h3>{{ _('Share Identifier & code') }}</h3>
-<p>{{ _("If you prefer, you can share the project identifier and the shared
+<p>
-password by other communication means. Or even directly share the following link:") }}</br>
+    {{ _("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>
+
+
+
 {% include "display_errors.html" %}
 <form class="invites form-horizontal" method="post" accept-charset="utf-8">
     {{ forms.invites(form) }}