Re-design (Fixes #19)

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 %}