diff options
Diffstat (limited to 'ihatemoney')
| -rw-r--r-- | ihatemoney/static/css/main.css | 30 | ||||
| -rw-r--r-- | ihatemoney/static/images/paper-plane.svg | 1 | ||||
| -rw-r--r-- | ihatemoney/templates/forms.html | 13 | ||||
| -rw-r--r-- | ihatemoney/templates/list_bills.html | 73 | ||||
| -rw-r--r-- | ihatemoney/templates/send_invites.html | 26 |
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"> |
