diff options
Diffstat (limited to 'budget/templates')
| -rw-r--r-- | budget/templates/display_errors.html | 2 | ||||
| -rw-r--r-- | budget/templates/forms.html | 28 | ||||
| -rw-r--r-- | budget/templates/home.html | 30 | ||||
| -rw-r--r-- | budget/templates/layout.html | 62 | ||||
| -rw-r--r-- | budget/templates/list_bills.html | 37 | ||||
| -rw-r--r-- | budget/templates/settle_bills.html | 11 | ||||
| -rw-r--r-- | budget/templates/sidebar_table_layout.html | 14 |
7 files changed, 91 insertions, 93 deletions
diff --git a/budget/templates/display_errors.html b/budget/templates/display_errors.html index bc65a3a..9e19605 100644 --- a/budget/templates/display_errors.html +++ b/budget/templates/display_errors.html @@ -1,5 +1,5 @@ {% for field_name, field_errors in form.errors.items() if field_errors %} {% for error in field_errors %} - <p class="error">{{ form[field_name].label.text }}: {{ error }}</p> + <p class="alert alert-danger"><strong>{{ form[field_name].label.text }}:</strong> {{ error }}</p> {% endfor %} {% endfor %} diff --git a/budget/templates/forms.html b/budget/templates/forms.html index 07e5b3d..af24fe2 100644 --- a/budget/templates/forms.html +++ b/budget/templates/forms.html @@ -1,9 +1,13 @@ -{% macro input(field, multiple=False, class=None) -%} - <div class="control-group"> +{% macro input(field, multiple=False, class='form-control', inline=False) -%} + <div class="form-group{% if inline %} row{% endif %}"> {% if field.type != "SubmitField" %} - {{ field.label(class="control-label") }} + {% if inline %} + {{ field.label(class="col-3") }} + {% else %} + {{ field.label() }} + {% endif %} {% endif %} - <div class="controls"> + <div class="controls{% if inline %} col-9{% endif %}"> {% if multiple == True %} {{ field(multiple=True, class=class) }} {% else %} @@ -77,11 +81,11 @@ {% if title %}<legend>{% if edit %}{{ _("Edit this bill") }} {% else %}{{ _("Add a bill") }} {% endif %}</legend>{% endif %} {% include "display_errors.html" %} {{ form.hidden_tag() }} - {{ input(form.date, class="datepicker") }} - {{ input(form.what) }} - {{ input(form.payer) }} - {{ input(form.amount) }} - {{ input(form.payed_for) }} + {{ input(form.date, class="form-control datepicker", inline=True) }} + {{ input(form.what, inline=True) }} + {{ input(form.payer, inline=True, class="form-control custom-select") }} + {{ input(form.amount, inline=True) }} + {{ input(form.payed_for, inline=True, class="form-check-input") }} </fieldset> <div class="actions"> {{ form.submit(class="btn btn-primary") }} @@ -92,7 +96,11 @@ {% macro add_member(form) %} {{ form.hidden_tag() }} -{{ form.name(placeholder=_("Type user name here")) }}<button class="btn">{{ _("Add") }}</button> + <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") }} + <button class=" input-group-addon btn">{{ _("Add") }}</button> + </div> {% endmacro %} {% macro edit_member(form, title=True) %} diff --git a/budget/templates/home.html b/budget/templates/home.html index b9a2b46..399343a 100644 --- a/budget/templates/home.html +++ b/budget/templates/home.html @@ -1,26 +1,21 @@ {% extends "layout.html" %} -{% block header %} -<div id="header" class="container-fluid"> - <div class="row-fluid"> - <div class="span5 offset2"> +{% block body %} + <header id="header" class="row"> + <div class="col-5 offset-md-2"> <h2>{{ _("Manage your shared <br>expenses, easily") }}</h2> - <a href="{{ url_for(".demo") }}" class="tryout btn btn-inverse pull-right">{{ _("Try out the demo") }}</a> + <a href="{{ url_for(".demo") }}" class="tryout btn">{{ _("Try out the demo") }}</a> </div> - <div class="span4"> + <div class="col-4"> <p class="additional-content">{{ _("You're sharing a house?") }}<br /> {{ _("Going on holidays with friends?") }}<br /> {{ _("Simply sharing money with others?") }} <br /><strong>{{ _("We can help!") }}</strong></p> </div> - </div> -</div> -{% endblock %} + </header> -{% block body %} -<div class="container-fluid"> - <div class="row-fluid home"> - <div class="span4 offset2"> + <main class="row home"> + <div class="col-4 offset-md-2"> <form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post"> - <fieldset> + <fieldset class="form-group"> <legend>{{ _("Log to an existing project") }}...</legend> {{ forms.authenticate(auth_form, home=True) }} </fieldset> @@ -30,9 +25,9 @@ </div> </form> </div> - <div class="span4"> + <div class="col-3 offset-md-1"> <form id="creation-form" class="form-horizontal" action="{{ url_for(".create_project") }}" method="post"> - <fieldset> + <fieldset class="form-group"> <legend>...{{ _("or create a new one") }}</legend> {{ forms.create_project(project_form, home=True) }} </fieldset> @@ -40,9 +35,8 @@ <button class="btn" type="submit">{{ _("let's get started") }}</button> </div> </form> - </div> + </main> </div> -</div> {% endblock %} {% block js %} diff --git a/budget/templates/layout.html b/budget/templates/layout.html index 543bcb3..979f994 100644 --- a/budget/templates/layout.html +++ b/budget/templates/layout.html @@ -5,15 +5,15 @@ <title>{{ _("Account manager") }}{% block title %}{% endblock %}</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/main.css') }}"> - <script src="{{ url_for("static", filename="js/jquery-1.7.2.min.js") }}"></script> + <script src="{{ url_for("static", filename="js/jquery-3.1.1.min.js") }}"></script> <script src="{{ url_for("static", filename="js/ihatemoney.js") }}"></script> + <script src="{{ url_for("static", filename="js/tether.min.js") }}"></script> <script src="{{ url_for("static", filename="js/bootstrap.min.js") }}"></script> - <script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script> {% block head %}{% endblock %} <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var left = window.innerWidth/2-$('.flash').width()/2; - $(".flash").css({ "left": left+"px", "top":"45px" }); + $(".flash").css({ "left": left+"px", "top":"0.6rem" }); setTimeout(function(){ $(".flash").fadeOut("slow", function () { $(".flash").remove(); @@ -35,62 +35,58 @@ </head> <body> -<div class="navbar navbar-fixed-top"> - <div class="navbar-inner"> - <div class="container-fluid"> - <h1><a class="brand" href="{{ url_for(".home") }}">#! money?</a></h1> + <nav class="navbar navbar-toggleable-md navbar fixed-top navbar-inverse bg-inverse"> + <h1 class="col-2"><a class="navbar-brand" href="{{ url_for(".home") }}">#! money?</a></h1> + <ul class="navbar-nav col-5 offset-md-1"> {% if g.project %} - <ul class="nav primary-nav"> {% block navbar %} - <li class="active"><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li> - <li><a href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li> + <li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li> + <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li> {% endblock %} - </ul> {% endif %} - <ul class="nav pull-right secondary-nav"> + </ul> + <ul class="navbar-nav secondary-nav col-4"> {% if g.project %} - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li> - <li class="divider"></li> + <li class="nav-item dropdown"> + <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a> + <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> + <li><a class="dropdown-item" href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li> + <li class="dropdown-divider"></li> {% for id, name in session['projects'] %} {% if id != g.project.id %} - <li><a href="{{ url_for(".list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li> + <li><a class="dropdown-item" href="{{ url_for(".list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li> {% endif %} {% endfor %} - <li><a href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li> - <li class="divider"></li> - <li><a href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li> + <li><a class="dropdown-item" href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li> + <li class="dropdown-divider"></li> + <li><a class="dropdown-item" href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li> </ul> </li> {% endif %} - <li{% if g.lang == "fr" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li> - <li{% if g.lang == "en" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="en") }}">en</a></li> + <li class="nav-item{% if g.lang == "fr" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li> + <li class="nav-item{% if g.lang == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="en") }}">en</a></li> </ul> - </div> - </div> -</div> -{% block header %}{% endblock %} -{% block body %} +</nav> + <div class="container-fluid"> +{% block body %} {% block sidebar %}{% endblock %} - <div class="content"> + <main class="content offset-1 col-10"> {% block content %}{% endblock %} - </div> + </main> </div> {% endblock %} {% for message in get_flashed_messages() %} -<div class="flash alert alert-success"><p>{{ message }}</p></div> +<div class="flash alert alert-success">{{ message }}</div> {% endfor %} {% block footer %} -<div id="footer"> +<footer> <p><a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a>, {{ _("you can contribute and improve it!") }}</p> -</div> +</footer> {% endblock %} </body> diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html index 72b9032..9421650 100644 --- a/budget/templates/list_bills.html +++ b/budget/templates/list_bills.html @@ -1,16 +1,11 @@ -{% extends "layout.html" %} +{% extends "sidebar_table_layout.html" %} {% block title %} - {{ g.project.name }}{% endblock %} {% block head %} <script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script> + <script src="{{ url_for("static", filename="js/locales/bootstrap-datepicker.fr.min.js") }}" charset="utf-8"></script> {% endblock %} {% block js %} - - $(window).resize(function() { - $("#sidebar").height( window.innerHeight-50 ); - $("#table_overflow").height( $("#sidebar").height()-120 ); - }); - {% if add_bill %} $('#new-bill').click(); {% endif %} // Hide all members actions @@ -56,9 +51,7 @@ {% endblock %} {% block sidebar %} -<div id="sidebar" class="sidebar"> - - <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline input-append"> + <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline"> {{ forms.add_member(member_form) }} </form> @@ -89,30 +82,32 @@ {% endfor %} </table> </div> - -</div> {% endblock %} {% block content %} <div class="identifier">{{ _("The project identifier is") }} <a href="{{ url_for(".list_bills") }}">{{ g.project.id }}</a>, {{ _("remember it!") }}</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> - <div id="bill-form" class="modal hide"> - <div class="modal-header"> - <a href="#" class="close" data-dismiss="modal">×</a> - <h3>{{ _('Add a bill') }}</h3> + <div id="bill-form" class="modal fade show" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h3 class="modal-title">{{ _('Add a bill') }}</h3> + <a href="#" class="close" data-dismiss="modal">×</a> + </div> + <form action="{{ url_for(".add_bill") }}" method="post" class="modal-body container"> + {{ forms.add_bill(bill_form, title=False) }} + </form> + </div> </div> - <form action="{{ url_for(".add_bill") }}" method="post" class="modal-body form-horizontal"> - {{ forms.add_bill(bill_form, title=False) }} - </form> </div> {% if bills.count() > 0 %} - <table id="bill_table" class="table table-striped"> + <table id="bill_table" class="col table table-striped table-hover"> <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead> <tbody> {% for bill in bills %} - <tr class="{{ loop.cycle("odd", "even") }}" owers={{bill.owers|join(',','id')}} payer={{bill.payer.id}}> + <tr owers={{bill.owers|join(',','id')}} payer={{bill.payer.id}}> <td>{{ bill.date }}</td> <td>{{ bill.payer }}</td> <td>{{ bill.what }}</td> diff --git a/budget/templates/settle_bills.html b/budget/templates/settle_bills.html index 16c60b3..b67a9b8 100644 --- a/budget/templates/settle_bills.html +++ b/budget/templates/settle_bills.html @@ -1,13 +1,6 @@ -{% extends "layout.html" %} - -{% block navbar %} -<li><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li> -<li class="active"><a href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li> -{% endblock %} +{% extends "sidebar_table_layout.html" %} {% block sidebar %} -<div id="sidebar" class="sidebar"> - <div id="table_overflow"> <table class="balance table"> {% set balance = g.project.balance %} @@ -21,8 +14,6 @@ {% endfor %} </table> </div> - -</div> {% endblock %} diff --git a/budget/templates/sidebar_table_layout.html b/budget/templates/sidebar_table_layout.html new file mode 100644 index 0000000..7c831f4 --- /dev/null +++ b/budget/templates/sidebar_table_layout.html @@ -0,0 +1,14 @@ +{% extends "layout.html" %} + +{% block body %} +<div class="row" style="height: 100%"> +<aside id="sidebar" class="sidebar col-3 " style="height: 100%"> + {% block sidebar %}{% endblock %} +</aside> + +<main class="offset-md-3 col-9"> + {% block content %}{% endblock %} +</main> + +</div> +{% endblock %} |