Update to Boostrap v2.

Remove unused libs (QTip, JQueryUI) and add bootstrap-datepicker which is much lighter.

12 files changed, 138 insertions, 180 deletions

diff --git a/budget/templates/add_bill.html b/budget/templates/add_bill.html
index 34b89cc..71bb6f0 100644
--- a/budget/templates/add_bill.html
+++ b/budget/templates/add_bill.html
@@ -20,7 +20,7 @@
 
 {% block content %}
 
-<form method="post">
+<form class="form-horizontal" method="post">
     {{ forms.add_bill(form, edit) }}
 </form>
 {% endblock %}
diff --git a/budget/templates/add_member.html b/budget/templates/add_member.html
index 91ca226..8ddfd52 100644
--- a/budget/templates/add_member.html
+++ b/budget/templates/add_member.html
@@ -3,7 +3,7 @@
     auto_hide_default_text('#name');
 {% endblock %}
 {% block content %}
-    <form action="{{ url_for(".add_member") }}" method="post">
+    <form class="form-horizontal" action="{{ url_for(".add_member") }}" method="post">
         {{ forms.add_member(form) }}
     </form>
 {% endblock %}
diff --git a/budget/templates/authenticate.html b/budget/templates/authenticate.html
index 7af2440..dc62a70 100644
--- a/budget/templates/authenticate.html
+++ b/budget/templates/authenticate.html
@@ -7,7 +7,7 @@
 to") }} <a href="{{ url_for(".create_project", project_id=create_project) }}">{{ _("create it") }}</a>{{ _("?") }}
 </p>
 {% endif %}
-<form action="" method="POST" accept-charset="utf-8">
+<form class="form-horizontal" method="POST" accept-charset="utf-8">
     {{ forms.authenticate(form) }}
 </form>
 {% endblock %}
diff --git a/budget/templates/create_archive.html b/budget/templates/create_archive.html
index ae96a30..dd7ab86 100644
--- a/budget/templates/create_archive.html
+++ b/budget/templates/create_archive.html
@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<form method="post" accept-charset="utf-8">
+<form class="form-horizontal" method="post" accept-charset="utf-8">
 {{ forms.create_archive(form) }}
 </form>
 {% endblock %}
diff --git a/budget/templates/create_project.html b/budget/templates/create_project.html
index cbf1622..9d4fde9 100644
--- a/budget/templates/create_project.html
+++ b/budget/templates/create_project.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <h2>{{ _("Create a new project") }}</h2>
-<form method="post">
+<form class="form-horizontal" method="post">
     {{ forms.create_project(form) }}
 </form>
 {% endblock %}
diff --git a/budget/templates/edit_project.html b/budget/templates/edit_project.html
index e84ad97..585d231 100644
--- a/budget/templates/edit_project.html
+++ b/budget/templates/edit_project.html
@@ -9,7 +9,7 @@
 
 {% block content %}
 <h2>{{ _("Edit this project") }}</h2>
-<form method="post">
+<form class="form-horizontal" method="post">
 {{ forms.edit_project(form) }}
 </form>
 {% endblock %}
diff --git a/budget/templates/forms.html b/budget/templates/forms.html
index 10b6e0c..8d15cb8 100644
--- a/budget/templates/forms.html
+++ b/budget/templates/forms.html
@@ -1,30 +1,29 @@
 {% macro input(field, multiple=False, class=None) -%}
-      <div class="clearfix">
-
-        {% if field.type != "SubmitField" %}
-            {{ field.label }}
+    <div class="control-group">
+    {% if field.type != "SubmitField" %}
+        {{ field.label(class="control-label") }}
+    {% endif %}
+        <div class="controls">
+        {% if multiple == True %}
+            {{ field(multiple=True, class=class) }}
+        {% else %}
+            {{ field(class=class) | safe }}
+        {% endif %}
+        {% if field.description %}
+            <p class="help-inline">{{ field.description }}</p>
         {% endif %}
-        <div class="input">
-            {% if multiple == True %}
-                {{ field(multiple=True, class=class) }}
-            {% else %}
-                {{ field(class=class) | safe }}
-            {% endif %}
-            {% if field.description %}
-                <span class="help-inline">{{ field.description }}</span>
-            {% endif %}
         </div>
-      </div> <!-- /clearfix -->
+    </div>
 {% endmacro %}
 
 {% macro submit(field, cancel=False, home=False) -%}
     <div class="actions">
-        <button type="submit" class="btn primary">{{ field.name }}</button>
+        <button type="submit" class="btn btn-primary">{{ field.name }}</button>
         {% if home %}
         <a href="{{ url_for(".remind_password") }}">{{ _("Can't remember the password?") }}</a>
         {% endif %}
         {% if cancel %}
-        <button id="cancel-form" type="reset" class="btn">{{ _("Cancel") }}</button>
+        <button type="reset" class="btn">{{ _("Cancel") }}</button>
         {% endif %}
       </div>
 {% endmacro %}
@@ -66,7 +65,7 @@
     {{ input(form.password) }}
     {{ input(form.contact_email) }}
     <div class="actions">
-        <button class="btn primary">{{ _("Edit the project") }}</button>
+        <button class="btn btn-primary">{{ _("Edit the project") }}</button>
         <a id="delete-project" style="color:red; margin-left:10px; cursor:pointer; ">{{ _("delete") }}</a>
     </div>
 
@@ -85,24 +84,22 @@
     {{ input(form.payed_for) }} 
     </fieldset>
     <div class="actions">
-        {{ form.submit(class="btn primary") }}
+        {{ form.submit(class="btn btn-primary") }}
         {% if not edit %} {{ form.submit2(class="btn") }}{% endif %}
     </div>
 
 {% endmacro %}
 
 {% macro add_member(form) %}
-    {{ form.hidden_tag() }}
-    {{ form.name(class="menu-input") }}
-    <button class="btn">{{ _("Add") }}</button>
-
+{{ form.hidden_tag() }}
+{{ form.name(placeholder=_("Type user name here")) }}<button class="btn">{{ _("Add") }}</button>
 {% endmacro %}
 
 {% macro invites(form) %}
     {{ form.hidden_tag() }}
     {{ input(form.emails) }}
     <div class="actions">
-        <button class="btn primary">{{ _("Send the invitations") }}</button>
+        <button class="btn btn-primary">{{ _("Send the invitations") }}</button>
         <a href="{{ url_for(".list_bills") }}">{{ _("No, thanks") }}</a>
     </div>
 {% endmacro %}
diff --git a/budget/templates/home.html b/budget/templates/home.html
index d21d0ec..b9a2b46 100644
--- a/budget/templates/home.html
+++ b/budget/templates/home.html
@@ -1,63 +1,56 @@
 {% extends "layout.html" %}
 
 
-{% block sidebar_wrapper %}{% endblock %}
-
 {% block header %}
-<div id="header">
-    <div class="slide">
-        <h1><span>{{ _("Manage your shared <br>expenses, easily") }}</span></h1>
-        <a href="{{ url_for(".demo") }}" class="about_link">{{ _("Try out the demo")  }}</a>
-    </div>
-    <div class="additional-content">
-        <p>{{ _("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 id="header" class="container-fluid">
+    <div class="row-fluid">
+        <div class="span5 offset2">
+            <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>
+        </div>
+        <div class="span4">
+            <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 %}
 
-{% block container %}
+{% block body %}
 <div class="container-fluid">
-    <div class="content home">
-
-      <div class="row">
-        <div class="span8 columns">
-            <form action="{{ url_for(".authenticate") }}" method="post">
-                <h3>{{ _("Log to an existing project") }}...</h3>
-                {{ forms.authenticate(auth_form, home=True) }}
-                <button class="btn">{{ _("log in") }}</button>
-                <a class="password-reminder" href="{{ url_for(".remind_password") }}">{{ _("can't remember your password?") }}</a>
+    <div class="row-fluid home">
+        <div class="span4 offset2">
+            <form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post">
+                <fieldset>
+                    <legend>{{ _("Log to an existing project") }}...</legend>
+                    {{ forms.authenticate(auth_form, home=True) }}
+                </fieldset>
+                <div class="controls">
+                    <button class="btn" type="submit">{{ _("log in") }}</button>
+                    <a class="password-reminder" href="{{ url_for(".remind_password") }}">{{ _("can't remember your password?") }}</a>
+                </div>
             </form>
         </div>
-        <div class="span8 columns">
-            <form class="create" action="{{ url_for(".create_project") }}" method="post">
-                <h3>...{{ _("or create a new one") }}</h3>
-                {{ forms.create_project(project_form, home=True) }}
-                <button class="btn">{{ _("let's get started") }}</button>
+        <div class="span4">
+            <form id="creation-form" class="form-horizontal" action="{{ url_for(".create_project") }}" method="post">
+                <fieldset>
+                    <legend>...{{ _("or create a new one") }}</legend>
+                    {{ forms.create_project(project_form, home=True) }}
+                </fieldset>
+                <div class="controls">
+                    <button class="btn" type="submit">{{ _("let's get started") }}</button>
+                </div>
             </form>
         </div>
     </div>
-    </div>
 </div>
-<script>
-    $(document).ready(function(){
-        $('form.create #password').qtip({
-            content: '{{ _("This access code will be sent to your friends. It is stored as-is by the server, so don\\'t reuse a personal password here!") }}',
-            show: {
-                event: 'focus'
-            },
-            hide: {
-                event: 'focusout'
-            },
-            position: {
-                my: "bottom center",
-                at: "top center",
-                adjust: {
-                    method: 'shift'
-                }
-               
-            }
-        });
-    });
-</script>
+{% endblock %}
+
+{% block js %}
+
+$('#creation-form #password').tooltip({
+    title: '{{ _("This access code will be sent to your friends. It is stored as-is by the server, so don\\'t reuse a personal password!") }}',
+    trigger: 'focus',
+    placement: 'right'
+});
+
 {% endblock %}
diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index 293ce75..71ad5e8 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -5,9 +5,9 @@
     <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.6.2.min.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/jquery-1.7.2.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/ihatemoney.js") }}"></script>
-    <script src="{{ url_for("static", filename="js/jquery.qtip.min.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/bootstrap.min.js") }}"></script>
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
@@ -18,82 +18,64 @@
                     $(".flash").remove();
                 });
             }, 4000);
-            $("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;
-            });
+            $('.dropdown-toggle').dropdown()
 
             {% block js %}{% endblock %}
         });
     </script>
 </head>
 <body>
-{% macro translations() %}
-<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>
-{% endmacro %}
-<div class="topbar">
-    <div class="fill"><div class="container-fluid">
-    <h3><a class="logo" href="{{ url_for(".home") }}">#! money?</a></h3>
-    {% if g.project %}
-    <ul class="menu">
-        <li class="active"><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li>
-    </ul>
-    <ul class="nav secondary-nav">
-      <li class="menu">
-      <a href="#" class="menu"><strong>{{ g.project.name }}</strong> {{ _("options") }}</a>
-        <ul class="menu-dropdown" style="display: none; ">
-            <li><a href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li>
-          <li class="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>
+
+<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>
+            {% if g.project %}
+            <ul class="nav primary-nav">
+                <li class="active"><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li>
+            </ul>
+            {% endif %}
+            <ul class="nav pull-right secondary-nav">
+            {% 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>
+                        {% 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>
+                        {% 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>
+                    </ul>
+                </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>
-        </ul>
-      </li>
-    {{ translations() }}
-    </ul>
-    {% else %}
-    <ul class="nav secondary-nav">
-    {{ translations() }}
-    </ul>
-    {% endif %}
-    </div></div>
+                <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>
+            </ul>
+        </div>
+    </div>
 </div>
+
 {% block header %}{% endblock %}
-{% block container %}
+
+{% block body %}
 <div class="container-fluid">
     {% block sidebar %}{% endblock %}
     <div class="content">
-    {% block content %}
-    {% endblock %}
+    {% block content %}{% endblock %}
     </div>
 </div>
-    {% for message in get_flashed_messages() %}
-        <div class="flash alert-message success"><p>{{ message }}</p></div>
-    {% endfor %}
 {% endblock %}
+
+{% for message in get_flashed_messages() %}
+<div class="flash alert alert-success"><p>{{ message }}</p></div>
+{% endfor %}
+
 {% block footer %}
 <div id="footer">
     <p><a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a>, {{ _("you can contribute and improve it!") }}</p>
diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html
index 7d3ff11..b247fcc 100644
--- a/budget/templates/list_bills.html
+++ b/budget/templates/list_bills.html
@@ -1,27 +1,16 @@
 {% extends "layout.html" %}
 
-{% block title %}- {{ g.project.name }}{% endblock %}
+{% block title %} - {{ g.project.name }}{% endblock %}
 {% block head %}
-    <script src="{{ url_for("static", filename="js/jquery-ui.js") }}"></script>
-    <script src="{{ url_for("static", filename="js/bootstrap-modal.js") }}"></script>
-    {% if g.lang != "en" %}
-    <script src="{{ url_for("static", filename="js/i18n/jquery.ui.datepicker-%s.js" % g.lang ) }}"></script>
-    {% endif %}
+    <script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script>
 {% endblock %}
 {% block js %}
 
-    // specifies that the text in #name text field has to be hidden on user typing
-    auto_hide_default_text('#name');
-
     $(window).resize(function() {
         $("#sidebar").height( window.innerHeight-50 );
         $("#table_overflow").height( $("#sidebar").height()-120 );
     });
 
-    $('#cancel-form').click(function(){
-        $('#bill-form').modal('hide');
-    });
-
     {% if add_bill %} $('#new-bill').click(); {% endif %}
 
     // ask for confirmation before removing an user
@@ -45,10 +34,13 @@
         $(this).find('.action').hide();
     });
 
-    $.datepicker.setDefaults({'dateFormat': 'yy-mm-dd'});
-    $(".datepicker").datepicker($.datepicker.regional['{{ g.lang }}']);
-    
-    
+    $('.datepicker').datepicker({
+        format: 'yyyy-mm-dd',
+        weekStart: 1,
+        autoclose: true,
+        language: '{{ g.lang }}'
+    });
+
     var highlight_owers = function(){
         var ower_ids = $(this).attr("owers").split(',');
         var payer_id = $(this).attr("payer");
@@ -69,28 +61,28 @@
 {% block sidebar %}
 <div id="sidebar" class="sidebar">
 
-    <form action="{{ url_for(".add_member") }}" method="post">
+    <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline input-append">
         {{ forms.add_member(member_form) }}
     </form>
 
     <div id="table_overflow">
-    <table class="balance">
+    <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] != 0 %}
     <tr id="bal-member-{{ member.id }}" action={% if member.activated %}delete{% else %}reactivate{% endif %}>
         <td class="balance-name">{{ member.name }}</td>
-        <td class="balance-value {% if balance[member.id] > 0 %}positive{% elif balance[member.id] < 0 %}negative{% endif %}">
-            {% if balance[member.id] > 0 %}+{% endif %}{{ balance[member.id] }}
-        </td>
         {% if member.activated %}
-        <td class="action delete">
-            <form action="{{ url_for(".remove_member", member_id=member.id) }}" method="POST">
+        <td>
+            <form class="action delete" action="{{ url_for(".remove_member", member_id=member.id) }}" method="POST">
                 <button type="submit">{{ _("delete") }}</button></form></td>
         {% else %}
-        <td class="action reactivate">
-            <form action="{{ url_for(".reactivate", member_id=member.id) }}" method="POST">
+        <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] > 0 %}positive{% elif balance[member.id] < 0 %}negative{% endif %}">
+            {% if balance[member.id] > 0 %}+{% endif %}{{ balance[member.id] }}
+        </td>
     </tr>
     {% endfor %}
     </table>
@@ -101,20 +93,20 @@
 
 {% 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 primary" data-controls-modal="bill-form" data-backdrop="true" data-keyboard="true">{{ _("Add a new bill") }}</a>
+<a 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 fade">
+    <div id="bill-form" class="modal hide">
         <div class="modal-header">
-            <a href="#" class="close">&times;</a>
+            <a href="#" class="close" data-dismiss="modal">&times;</a>
             <h3>{{ _('Add a bill') }}</h3>
         </div>
-    <form action="{{ url_for(".add_bill") }}" method="post" >
-        {{ forms.add_bill(bill_form, title=False) }}
-    </form>
+        <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="list_bills common-table zebra-striped">
+    <table id="bill_table" class="table table-striped">
         <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 %}
@@ -134,12 +126,6 @@
     </table>
 
     {% else %}
-    <p>{{ _("Nothing to list yet. You probably want to") }} <a id="empty-new-bill" href="{{ url_for(".add_bill") }}">{{ _("add a bill") }}</a> ?</p>
+    <p>{{ _("Nothing to list yet. You probably want to") }} <a href="{{ url_for(".add_bill") }}" data-toggle="modal" data-target="#bill-form">{{ _("add a bill") }}</a> ?</p>
     {% endif %}
-</div>
-<script>
-        $("#sidebar").height( window.innerHeight-40 );
-        $("#table_overflow").height( $("#sidebar").height()-120 );
-        
-</script>
 {% endblock %}
diff --git a/budget/templates/password_reminder.html b/budget/templates/password_reminder.html
index 89e399e..8f46289 100644
--- a/budget/templates/password_reminder.html
+++ b/budget/templates/password_reminder.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <h2>{{ _("Password reminder") }}</h2>
-<form method="post">
+<form class="form-horizontal" method="post">
 {{ forms.remind_password(form) }}
 </form>
 {% endblock %}
diff --git a/budget/templates/send_invites.html b/budget/templates/send_invites.html
index 9883cba..746ff6a 100644
--- a/budget/templates/send_invites.html
+++ b/budget/templates/send_invites.html
@@ -14,7 +14,7 @@ creation of this budget management project and we will send them an email for yo
 <p>{{ _("If you prefer, you can") }} <a href="{{ url_for(".list_bills") }}">{{ _("skip this step") }}</a> {{ _("and notify them yourself") }}</p>
 
 {% include "display_errors.html" %}
-<form class="invites" method="post" accept-charset="utf-8">
+<form class="invites form-horizontal" method="post" accept-charset="utf-8">
     {{ forms.invites(form) }}
 </form>
 {% endblock %}