From 548101d8bbd5adff4887cfad8fc70d1a4cf82370 Mon Sep 17 00:00:00 2001 From: Alexis Metaireau Date: Sun, 31 Jul 2011 23:55:02 +0200 Subject: [PATCH] Some more theming and fixes. --- budget/static/awesome-buttons.css | 106 ------------------------ budget/static/awesome.css | 29 ------- budget/static/uniform/blue.uni-form.css | 4 +- budget/templates/add_bill.html | 25 ++---- budget/templates/add_member.html | 4 +- budget/templates/bill_form.html | 11 --- budget/templates/create_project.html | 16 +--- budget/templates/forms.html | 43 ++++++++++ budget/templates/home.html | 38 +++------ budget/templates/layout.html | 1 + budget/templates/member_form.html | 6 -- budget/utils.py | 4 +- 12 files changed, 71 insertions(+), 216 deletions(-) delete mode 100644 budget/static/awesome-buttons.css delete mode 100644 budget/static/awesome.css delete mode 100644 budget/templates/bill_form.html delete mode 100644 budget/templates/member_form.html diff --git a/budget/static/awesome-buttons.css b/budget/static/awesome-buttons.css deleted file mode 100644 index 7b38e13..0000000 --- a/budget/static/awesome-buttons.css +++ /dev/null @@ -1,106 +0,0 @@ -/* - awesome buttons are based on a blog post by ZERB - Read there blog post for more information: - "Super awesome Buttons with CSS3 and RGBA":http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba - - this buttons are even more awesome, as the need only one color for all three states, - and have an super awesome onclick state -*/ - -/* set an awesome color for the buttons, feel free to add new colors like an .awesome.green or .awesome.secondary */ -.awesome { - background-color: #111 !important; - color: #fff !important; -} - -/* the awesome size gets set here. Feel Free to add new sizes, like .awesome.small or .small.large */ -.awesome { padding: 5px 10px 6px !important; font-size: 13px !important; } -.awesome:active { padding: 6px 10px 5px !important; } - -/* Touch the rest at your onw risk. */ -.awesome { - border: 0 !important; - cursor: pointer !important; - font-style: normal !important; - font-weight: bold !important; - font: inherit !important; - line-height: 1 !important; - position: relative !important; - text-align: cente !important; - text-decoration: none !important; - - /* vertical margin is the oposite of button's awesomeness */ - margin-top: 0 !important; - margin-bottom: 0 !important; - - /* not all browser support these, but who cares? */ - text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25) !important; - - border-radius: 5px !important; - -moz-border-radius: 5px !important; - -webkit-border-radius: 5px !important; - box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; - -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; - - /* who needs images these days? */ - background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(150,150,150,.2), rgba(0,0,0,.0)) !important; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.2)), color-stop(0.5, rgba(150,150,150,.2)), to(rgba(0,0,0,.0))) !important; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#10000000) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2); - - /* cross browser inline block hack - see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ - display: -moz-inline-stack; - display: inline-block; - vertical-align: middle !important; - *display: inline !important; - position: relative; - - /* IE luv */ - zoom: 1; - - /*disable text selection (Firefox only)*/ - -moz-user-select: none; -} - -/* OPERA only - if there is no border set, Opera shows a transparent background-color if border-radius is set. */ -@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { - input.awesome { - border: 1px solid RGBa(0,0,0,0) !important; - } -} - -/* hide selection background color */ -.awesome::selection { - background: transparent; -} - -.awesome { - outline: 0; /*remove dotted line, works for links only*/ -} -.awesome::-moz-focus-inner { - border: none; /* remove dotted lines for buttons */ -} -.awesome:focus, -.awesome:hover { - background-image: -moz-linear-gradient(top, rgba(255,255,255,.4), rgba(150,150,150,.3), rgba(0,0,0,.0)) !important; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)), color-stop(0.5, rgba(150,150,150,.3)), to(rgba(0,0,0,.0))) !important; - #filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50ffffff,endColorstr=#20000000) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2); -} -.awesome:active { - background-image: -moz-linear-gradient(top, rgba(0,0,0,.2), rgba(150,150,150,.2), rgba(255,255,255,.2)) !important; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.2)), color-stop(0.5, rgba(150,150,150,.2)), to(rgba(255,255,255,.2))) !important; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20000000,endColorstr=#50ffffff) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=315,strength=1); - - box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important; - -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important; -} - -/* Safari doesn't support inset box shadow, so we better remove it */ -@media screen and (-webkit-min-device-pixel-ratio:0){ - .awesome:active { - -webkit-box-shadow: none; - } -} \ No newline at end of file diff --git a/budget/static/awesome.css b/budget/static/awesome.css deleted file mode 100644 index 47c624a..0000000 --- a/budget/static/awesome.css +++ /dev/null @@ -1,29 +0,0 @@ -@import url('awesome-buttons.css'); - -/* awesome buttons extensions */ -.awesome.blue { - background-color: #0A50FF !important; -} -.awesome.red { - background-color: #e33100 !important; -} -.awesome.green { - background-color: #3ACC00 !important; -} -.awesome.orange { - background-color: #ff8f0b !important; -} -.awesome.small { - padding: 4px 7px 5px !important; - font-size: 10px !important; -} -.awesome.small:active { - padding: 5px 7px 4px !important; -} -.awesome.large { - padding: 8px 14px 9px !important; - font-size: 14px !important; -} -.awesome.large:active { - padding: 9px 14px 8px !important; -} diff --git a/budget/static/uniform/blue.uni-form.css b/budget/static/uniform/blue.uni-form.css index adb5ff6..c1f70ec 100644 --- a/budget/static/uniform/blue.uni-form.css +++ b/budget/static/uniform/blue.uni-form.css @@ -35,8 +35,10 @@ .uniForm legend{ font-weight: bold; font-size: 100%; margin: 0; padding: 1.5em 0; } - .uniForm .ctrlHolder{ padding: 1em; } .uniForm .ctrlHolder.focused{ background: #e1f0f6; } + + .uniForm label { float: left; line-height: 300%;} + .uniForm input, .uniForm select { float: right } .uniForm .buttonHolder{ background: #c4ced1; text-align: right; margin: 1.5em 0 0 0; padding: 1.5em; /* CSS3 */ diff --git a/budget/templates/add_bill.html b/budget/templates/add_bill.html index f959a64..d844b6a 100644 --- a/budget/templates/add_bill.html +++ b/budget/templates/add_bill.html @@ -5,26 +5,11 @@ {% endblock %} {% block content %} -

Let's add a bill

+

Add a new bill

-{% if form.errors %} -

Your form contains errors.

- -{% endif %} - -
- {{ form.hidden_tag() }} - -

{{ form.payer.label }}
{{ form.payer }}

-

{{ form.what.label }}
{{ form.what }}

-

{{ form.amount.label }}
{{ form.amount }}

-

{{ form.payed_for.label }}
{{ form.payed_for(multiple=True) }}

-

{{ form.submit }}

+
+ + {{ forms.add_bill(form) }} +
{% endblock %} diff --git a/budget/templates/add_member.html b/budget/templates/add_member.html index eabbc4f..8d24aee 100644 --- a/budget/templates/add_member.html +++ b/budget/templates/add_member.html @@ -1,4 +1,6 @@ {% extends "layout.html" %} {% block content %} -{% include "member_form.html" %} +
+ {{ forms.add_member(form) }} +
{% endblock %} diff --git a/budget/templates/bill_form.html b/budget/templates/bill_form.html deleted file mode 100644 index 61b4004..0000000 --- a/budget/templates/bill_form.html +++ /dev/null @@ -1,11 +0,0 @@ -{% import "forms.html" as forms %} -
-
- {{ form.hidden_tag() }} - {{ forms.input(form.what) }} - {{ forms.input(form.payer) }} - {{ forms.input(form.amount) }} - {{ forms.input(form.payed_for, multiple=True) }} -

{{ form.submit }}

-
-
diff --git a/budget/templates/create_project.html b/budget/templates/create_project.html index b26da2d..6593822 100644 --- a/budget/templates/create_project.html +++ b/budget/templates/create_project.html @@ -2,20 +2,10 @@ {% block content %}

Create a new project

- -{% if form.errors %} -

Your form contains errors.

- -{% endif %} - +
- {{ form.hidden_tag() }} - -

{{ form.name.label }}
{{ form.name }}

-

{{ form.id.label }}
{{ form.id }}

-

{{ form.password.label }}
{{ form.password }}

-

{{ form.contact_email.label }}
{{ form.contact_email }}

-

{{ form.submit }}

+ {{ forms.create_project(form) }}
+
{% endblock %} diff --git a/budget/templates/forms.html b/budget/templates/forms.html index 234143b..3c0e011 100644 --- a/budget/templates/forms.html +++ b/budget/templates/forms.html @@ -11,3 +11,46 @@ {% endif %} {% endmacro %} + +{% macro authenticate(form) %} + + {% include "display_errors.html" %} + {{ form.hidden_tag() }} + {{ input(form.id) }} + {{ input(form.password) }} + {{ input(form.submit) }} + +{% endmacro %} + +{% macro create_project(form) %} + + {% include "display_errors.html" %} + {{ form.hidden_tag() }} + {{ input(form.name) }} + {{ input(form.id) }} + {{ input(form.password) }} + {{ input(form.contact_email) }} + {{ input(form.submit) }} + +{% endmacro %} + +{% macro add_bill(form) %} + + {% include "display_errors.html" %} + {{ form.hidden_tag() }} + {{ input(form.what) }} + {{ input(form.payer) }} + {{ input(form.amount) }} + {{ input(form.payed_for, multiple=True) }} + {{ input(form.submit) }} + +{% endmacro %} + +{% macro add_member(form) %} + + {% include "display_errors.html" %} + {{ form.hidden_tag() }} + {{ input(form.name) }} + {{ input(form.submit) }} + +{% endmacro %} diff --git a/budget/templates/home.html b/budget/templates/home.html index ae36d4a..21de4f1 100644 --- a/budget/templates/home.html +++ b/budget/templates/home.html @@ -1,37 +1,21 @@ {% extends "layout.html" %} {% block content %} +

Welcome on the budget manager

-
-
+
+

Log to an existing project...

- - {{ auth_form.hidden_tag() }} - -

{{ auth_form.id.label }}
{{ auth_form.id }}

-

{{ auth_form.password.label }}
{{ auth_form.password }}

-

{{ auth_form.submit }}

+ {{ forms.authenticate(auth_form) }} - {% if 'projects' in session %} -

Recently visisted projects

-
    - {% for id, name in session['projects'] %} -
  • {{ name }}
    • - {% endfor %} -
- {% endif %} + {% include "recent_projects.html" %}
-
-

...or create a new one

- - {{ project_form.hidden_tag() }} - -

{{ project_form.name.label }}
{{ project_form.name }}

-

{{ project_form.id.label }}
{{ project_form.id }}

-

{{ project_form.password.label }}
{{ project_form.password }}

-

{{ project_form.contact_email.label }}
{{ project_form.contact_email }}

-

{{ project_form.submit }}

-
+
+
+

...or create a new one

+ {{ forms.create_project(project_form) }}
+ +
{% endblock %} diff --git a/budget/templates/layout.html b/budget/templates/layout.html index cd0fca4..34e7f8b 100644 --- a/budget/templates/layout.html +++ b/budget/templates/layout.html @@ -1,3 +1,4 @@ +{% import "forms.html" as forms %} diff --git a/budget/templates/member_form.html b/budget/templates/member_form.html deleted file mode 100644 index 6eb4575..0000000 --- a/budget/templates/member_form.html +++ /dev/null @@ -1,6 +0,0 @@ -{% include "display_errors.html" %} -
- {{ form.hidden_tag() }} -

{{ form.name.label }}
{{ form.name }}

-

{{ form.submit }}

-
diff --git a/budget/utils.py b/budget/utils.py index 20989e9..c97b3ad 100644 --- a/budget/utils.py +++ b/budget/utils.py @@ -4,10 +4,10 @@ from flask import redirect, url_for, session, request from models import Bill, Project from forms import BillForm -def get_billform_for(project_id): +def get_billform_for(project): """Return an instance of BillForm configured for a particular project.""" form = BillForm() - payers = [(str(m.id), m.name) for m in Project.query.get(project_id).members] + payers = [(str(m.id), m.name) for m in project.active_members] form.payed_for.choices = form.payer.choices = payers return form