diff options
Diffstat (limited to 'budget/templates')
| -rw-r--r-- | budget/templates/add_bill.html | 10 | ||||
| -rw-r--r-- | budget/templates/authenticate.html | 6 | ||||
| -rw-r--r-- | budget/templates/edit_bill.html | 2 | ||||
| -rw-r--r-- | budget/templates/forms.html | 52 | ||||
| -rw-r--r-- | budget/templates/layout.html | 82 | ||||
| -rw-r--r-- | budget/templates/list_bills.html | 97 |
6 files changed, 152 insertions, 97 deletions
diff --git a/budget/templates/add_bill.html b/budget/templates/add_bill.html index 5b3a768..ec60f43 100644 --- a/budget/templates/add_bill.html +++ b/budget/templates/add_bill.html @@ -5,11 +5,9 @@ {% endblock %} {% block content %} -<h2>Add a new bill</h2> +<h2>{% if edit %}Edit a{% else %}Add a new{% endif %} bill</h2> -<div class="container span-24 add-bill uniForm" style="width: 400px"> - <form action="{{ url_for('add_bill') }}" method="post" class=uniForm"> - {{ forms.add_bill(form) }} - </form> -</div> +<form method="post"> + {{ forms.add_bill(form) }} +</form> {% endblock %} diff --git a/budget/templates/authenticate.html b/budget/templates/authenticate.html index d4f7df6..0ad8815 100644 --- a/budget/templates/authenticate.html +++ b/budget/templates/authenticate.html @@ -12,10 +12,6 @@ to <a href="{{ url_for("create_project", project_id=create_project) }}">create i </p> {% endif %} <form action="" method="POST" accept-charset="utf-8"> - {{ form.hidden_tag() }} - - <p>{{ form.id.label }}<br /> {{ form.id }}</p> - <p>{{ form.password.label }}<br /> {{ form.password }}</p> - <p>{{ form.submit }}</p> + {{ forms.authenticate(form) }} </form> {% endblock %} diff --git a/budget/templates/edit_bill.html b/budget/templates/edit_bill.html index 03a1a26..f069193 100644 --- a/budget/templates/edit_bill.html +++ b/budget/templates/edit_bill.html @@ -8,7 +8,7 @@ <h2>Edit a bill</h2> <div class="container span-24 add-bill uniForm" style="width: 400px"> - <form action="{{ url_for('edit_bill', bill_id=bill_id) }}" method="post" class=uniForm"> + <form action="" method="post" class=uniForm"> {{ forms.add_bill(form) }} </form> </div> diff --git a/budget/templates/forms.html b/budget/templates/forms.html index 62ad4b8..4e62f58 100644 --- a/budget/templates/forms.html +++ b/budget/templates/forms.html @@ -1,17 +1,29 @@ {% macro input(field, multiple=False) -%} - <div class="ctrlHolder"> + <div class="clearfix"> + {% if field.type != "SubmitField" %} {{ field.label }} {% endif %} - {% if multiple == True %} - {{ field(multiple=True) }} - {% else %} - {{ field }} - {% endif %} - {% if field.description %} - <p class="formHint">{{ field.description }}</p> + <div class="input"> + {% if multiple == True %} + {{ field(multiple=True) }} + {% else %} + {{ field }} + {% endif %} + {% if field.description %} + <span class="help-inline">{{ field.description }}</span> + {% endif %} + </div> + </div> <!-- /clearfix --> +{% endmacro %} + +{% macro submit(field, cancel=False) -%} + <div class="actions"> + <button type="submit" class="btn primary">{{ field.name }}</button> + {% if cancel %} + <button id="cancel-form" type="reset" class="btn">Cancel</button> {% endif %} - </div> + </div> {% endmacro %} {% macro authenticate(form) %} @@ -20,7 +32,7 @@ {{ form.hidden_tag() }} {{ input(form.id) }} {{ input(form.password) }} - {{ input(form.submit) }} + {{ submit(form.submit) }} {% endmacro %} @@ -32,12 +44,14 @@ {{ input(form.id) }} {{ input(form.password) }} {{ input(form.contact_email) }} - {{ input(form.submit) }} + {{ submit(form.submit) }} {% endmacro %} {% macro add_bill(form) %} + <fieldset> + <legend>Add a bill</legend> {% include "display_errors.html" %} {{ form.hidden_tag() }} {{ input(form.date) }} @@ -45,15 +59,21 @@ {{ input(form.payer) }} {{ input(form.amount) }} {{ input(form.payed_for) }} - {{ input(form.submit) }} + </fieldset> + {{ submit(form.submit, cancel=True) }} {% endmacro %} {% macro add_member(form) %} - - {% include "display_errors.html" %} {{ form.hidden_tag() }} - {{ input(form.name) }} - {{ input(form.submit) }} + {{ form.name }} + <button class="btn">Add a new user</button> {% endmacro %} + +{% macro authenticate(form) %} + {{ form.hidden_tag() }} + {{ input(form.id) }} + {{ input(form.password) }} + {{ submit(form.submit) }} +{% endmacro %} diff --git a/budget/templates/layout.html b/budget/templates/layout.html index 3ab6f1f..988ee58 100644 --- a/budget/templates/layout.html +++ b/budget/templates/layout.html @@ -2,36 +2,74 @@ <!DOCTYPE html> <html> <head> -<title>Account manager</title> -<link rel=stylesheet type=text/css href="{{ url_for('static', filename='main.css') }}"> -<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -<script type="text/javascript" charset="utf-8"> -$(document).ready(function(){ - setTimeout(function(){ - $(".flash").fadeOut("slow", function () { - $(".flash").remove(); - }); - }, 2000); + <title>Account manager</title> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <link rel=stylesheet type=text/css href="{{ url_for('static', filename='main.css') }}"> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> + <script type="text/javascript" charset="utf-8"> + $(document).ready(function(){ + setTimeout(function(){ + $(".flash").fadeOut("slow", function () { + $(".flash").remove(); + }); + }, 2000); + $("body").bind("click", function(e) { + $("ul.menu-dropdown").hide(); + $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide(); + }); + + $("a.menu").click(function(e) { + var $target = $(this); + var $parent = $target.parent("li"); + var $siblings = $target.siblings("ul.menu-dropdown"); + var $parentSiblings = $parent.siblings("li"); + if ($parent.hasClass("open")) { + $parent.removeClass("open"); + $siblings.hide(); + } else { + $parent.addClass("open"); + $siblings.show(); + } + $parentSiblings.children("ul.menu-dropdown").hide(); + $parentSiblings.removeClass("open"); + return false; + }); - {% block js %}{% endblock %} -}); -</script> + {% block js %}{% endblock %} + }); + </script> </head> <body> -<div class="container" class="span-24"> - <div id="title" class="span-20"> - <a href="/"><h1>Account manager ! <span class="small">Manage your shared expenses.</span></h1></a></div> - <div class="span-4 last" id="topmenu"> - {% block top_menu %}{% endblock %} - </div> - <hr> +<div class="topbar"> + <h3><a class="logo" href="{% if g.project %}{{ url_for("list_bills") }}{% endif %}">#! money?</a></h3> + {% if g.project %} + <ul> + <li class="active"><a href="">Bills</a></li> + <li><a href="">Archives</a></li> + </ul> + <ul class="nav secondary-nav"> + <li class="menu"> + <a href="#" class="menu">Options</a> + <ul class="menu-dropdown" style="display: none; "> + <li><a href="">Project settings</a></li> + <li class="divider"></li> + <li><a href="{{ url_for("exit") }}">Logout</a></li> + </ul> + </li> + </ul> + {% endif %} +</div> +<div class="container-fluid" style="margin-top: 40px"> + <div class="sidebar">{% block sidebar %}{% endblock %}</div> + <div class="content"> {% for message in get_flashed_messages() %} - <div class="flash">{{ message }}</div> + <div class="flash alert-message info"><p>{{ message }}</p></div> {% endfor %} {% block content %} {% endblock %} - <div id="footer"></div> + </div> </div> + </body> </html> diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html index 94b0f8f..d73a95f 100644 --- a/budget/templates/list_bills.html +++ b/budget/templates/list_bills.html @@ -1,68 +1,71 @@ {% extends "layout.html" %} {% block js %} -// display the form when clicking on the "add bill" button -$('#add_bill_button').click(function(){ - $('#add_bill').show(200); - $(this).hide(); - $('#hide_bill_form').show(); - return false; -}); + // display the form when clicking on the "add bill" button + var show_form = function(){ + $('#bill-form').show(70); + $("#new-bill").hide(); + return false; + } + + // and provide a mechanism to hide it back + var hide_form = function(){ + $("#bill-form").hide(70); + $("#new-bill").show(); + return false; + } -// and provide a mechanism to hide it back -$('#hide_bill_form').click(function(){ - $('#add_bill').hide(200); - $(this).hide(); - $('#add_bill_button').show(); - return false; -}); + $('#new-bill').click(show_form); + $('#empty-new-bill').click(show_form); + $('#hide-bill-form').click(hide_form); + $('#cancel-form').click(hide_form); -// ask for confirmation before removing an user -$('a.remove').each(function(){ - $(this).hide(); - $(this).click(function(){ - return confirm("are you sure?"); + // ask for confirmation before removing an user + $('a.remove').each(function(){ + $(this).hide(); + $(this).click(function(){ + return confirm("are you sure?"); + }); }); -}); -// display the remove button on mouse over (and hide them per default) -$('.members li').hover(function(){ - $(this).children('a.remove').show(); -}, function(){ - $(this).children('a.remove').hide(); -}); + // display the remove button on mouse over (and hide them per default) + $('.balance tr').hover(function(){ + $(this).find('.remove').show(); + }, function(){ + $(this).find('.remove').hide(); + }); {% endblock %} -{% block top_menu %} -<ul> - <li><a href="{{ url_for("exit") }}">logout</a></li> -</ul> -{% endblock %} +{% block sidebar %} + <h2>Balance</h2> -{% block content %} -<div id="leftmenu" class="span-6"> - <ul class="members"> + <table class="balance"> {% set balance = g.project.get_balance() %} {% for member in g.project.active_members %} - <li class="{{ loop.cycle("even", "odd") }}"> - <span class="balance {% if balance[member] > 0 %}positive{% elif balance[member] < 0 %}negative{% endif %}">{{ balance[member] }}</span> - {{ member.name }} - <a class="remove" href="{{ url_for("remove_member", member_id=member.id) }}">delete</a></li> + <tr> + <td>{{ member.name }}</td> + <td class="{% if balance[member] > 0 %}positive{% elif balance[member] < 0 %}negative{% endif %}"> + {% if balance[member] > 0 %}+{% endif %}{{ balance[member] }} + </td> + <td> <a class="remove" href="{{ url_for("remove_member", member_id=member.id) }}">delete</a></td> + </tr> {% endfor %} - </ul> + </table> + <form action="{{ url_for("add_member") }}" method="post"> {{ forms.add_member(member_form) }} </form> -</div> -<div id="content" class="uniForm span-18 last"> - <a id="add_bill_button" class="awesome large green button fright" href="{{ url_for('add_bill') }}">Add a bill</a> - - <a id="hide_bill_form" class="awesome button fright" style="display: none;" href="#">Hide form</a> +{% endblock %} -<form id="add_bill" action="{{ url_for('add_bill') }}" method="post" style="width: 400px; display: none">{{ forms.add_bill(bill_form) }}</form> +{% block content %} + <a id="new-bill" href="" class="primary">Add a new bill</a> + <form id="bill-form" action="{{ url_for('add_bill') }}" method="post" style="display: none"> + <a id="hide-bill-form" href="#">hide this form</a> + {{ forms.add_bill(bill_form) }} +</form> {% if bills.count() > 0 %} - <table class="list_bills"> + <table class="list_bills common-table zebra-striped"> <thead><tr><th>When?</th><th>Who paid?</th><th>For what?</th><th>Owers</th><th>How much?</th><th>Actions</th></tr></thead> <tbody> {% for bill in bills %} @@ -80,7 +83,7 @@ $('.members li').hover(function(){ </table> {% else %} - <p>Nothing to list yet. You probably want to <a href="{{ url_for("add_bill") }}">add a bill</a> ?</p> + <p>Nothing to list yet. You probably want to <a id="empty-new-bill" href="{{ url_for("add_bill") }}">add a bill</a> ?</p> {% endif %} </div> {% endblock %} |