YunoHost-Apps/ihatemoney_ynh
1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/ihatemoney_ynh.git synced 2024-09-03 19:26:15 +02:00
Code Issues Activity Actions

Merge pull request #172 from JocelynDelalande/jd-bootstrap-4

Browse source 
WIP: Upgrade to bootstrap 4
This commit is contained in:
Alexis Metaireau 2017-02-15 20:42:48 +01:00 committed by GitHub
commit 3dd7c67ecf
19 changed files with 2717 additions and 1529 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
budget/forms.py
View file

@ -19,14 +19,14 @@ def select_multi_checkbox(field, ul_class='', **kwargs):
choice_id = u'toggleField' choice_id = u'toggleField'
js_function = u'toggle();' js_function = u'toggle();'
options = dict(kwargs, id=choice_id, onclick=js_function) options = dict(kwargs, id=choice_id, onclick=js_function)
html.append(u'<p><a id="selectall" onclick="selectall()">%s</a> | <a id="selectnone" onclick="selectnone()">%s</a></p>'% (_("Select all"), _("Select none"))) html.append(u'<p><a href="#" id="selectall" onclick="selectall()">%s</a> | <a href="#" id="selectnone" onclick="selectnone()">%s</a></p>'% (_("Select all"), _("Select none")))
for value, label, checked in field.iter_choices(): for value, label, checked in field.iter_choices():
choice_id = u'%s-%s' % (field_id, value) choice_id = u'%s-%s' % (field_id, value)
options = dict(kwargs, name=field.name, value=value, id=choice_id) options = dict(kwargs, name=field.name, value=value, id=choice_id)
if checked: if checked:
options['checked'] = 'checked' options['checked'] = 'checked'
html.append(u'<p><label for="%s">%s<span>%s</span></label></p>' html.append(u'<p class="form-check"><label for="%s" class="form-check-label">%s<span>%s</span></label></p>'
% (choice_id, '<input %s /> ' % html_params(**options), label)) % (choice_id, '<input %s /> ' % html_params(**options), label))
html.append(u'</ul>') html.append(u'</ul>')
return u''.join(html) return u''.join(html)

707
budget/static/css/bootstrap-datepicker3.standalone.css vendored Normal file
View file

@ -0,0 +1,707 @@
/*!
* Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
border-radius: 4px;
direction: ltr;
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
padding: 4px;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(0, 0, 0, 0.15);
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid rgba(0, 0, 0, 0.15);
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.datepicker table tr td,
.datepicker table tr th {
text-align: center;
width: 30px;
height: 30px;
border-radius: 4px;
border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #777777;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
background: #eeeeee;
cursor: pointer;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #777777;
cursor: default;
}
.datepicker table tr td.highlighted {
color: #000;
background-color: #d9edf7;
border-color: #85c5e5;
border-radius: 0;
}
.datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.focus {
color: #000;
background-color: #afd9ee;
border-color: #298fc2;
}
.datepicker table tr td.highlighted:hover {
color: #000;
background-color: #afd9ee;
border-color: #52addb;
}
.datepicker table tr td.highlighted:active,
.datepicker table tr td.highlighted.active {
color: #000;
background-color: #afd9ee;
border-color: #52addb;
}
.datepicker table tr td.highlighted:active:hover,
.datepicker table tr td.highlighted.active:hover,
.datepicker table tr td.highlighted:active:focus,
.datepicker table tr td.highlighted.active:focus,
.datepicker table tr td.highlighted:active.focus,
.datepicker table tr td.highlighted.active.focus {
color: #000;
background-color: #91cbe8;
border-color: #298fc2;
}
.datepicker table tr td.highlighted.disabled:hover,
.datepicker table tr td.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted.disabled:focus,
.datepicker table tr td.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.disabled.focus,
.datepicker table tr td.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.highlighted.focus {
background-color: #d9edf7;
border-color: #85c5e5;
}
.datepicker table tr td.highlighted.focused {
background: #afd9ee;
}
.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
background: #d9edf7;
color: #777777;
}
.datepicker table tr td.today {
color: #000;
background-color: #ffdb99;
border-color: #ffb733;
}
.datepicker table tr td.today:focus,
.datepicker table tr td.today.focus {
color: #000;
background-color: #ffc966;
border-color: #b37400;
}
.datepicker table tr td.today:hover {
color: #000;
background-color: #ffc966;
border-color: #f59e00;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today.active {
color: #000;
background-color: #ffc966;
border-color: #f59e00;
}
.datepicker table tr td.today:active:hover,
.datepicker table tr td.today.active:hover,
.datepicker table tr td.today:active:focus,
.datepicker table tr td.today.active:focus,
.datepicker table tr td.today:active.focus,
.datepicker table tr td.today.active.focus {
color: #000;
background-color: #ffbc42;
border-color: #b37400;
}
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.today:focus,
.datepicker table tr td.today.disabled.focus,
.datepicker table tr td.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.today.focus {
background-color: #ffdb99;
border-color: #ffb733;
}
.datepicker table tr td.today.focused {
background: #ffc966;
}
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:active {
background: #ffdb99;
color: #777777;
}
.datepicker table tr td.range {
color: #000;
background-color: #eeeeee;
border-color: #bbbbbb;
border-radius: 0;
}
.datepicker table tr td.range:focus,
.datepicker table tr td.range.focus {
color: #000;
background-color: #d5d5d5;
border-color: #7c7c7c;
}
.datepicker table tr td.range:hover {
color: #000;
background-color: #d5d5d5;
border-color: #9d9d9d;
}
.datepicker table tr td.range:active,
.datepicker table tr td.range.active {
color: #000;
background-color: #d5d5d5;
border-color: #9d9d9d;
}
.datepicker table tr td.range:active:hover,
.datepicker table tr td.range.active:hover,
.datepicker table tr td.range:active:focus,
.datepicker table tr td.range.active:focus,
.datepicker table tr td.range:active.focus,
.datepicker table tr td.range.active.focus {
color: #000;
background-color: #c3c3c3;
border-color: #7c7c7c;
}
.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled:focus,
.datepicker table tr td.range[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range:focus,
.datepicker table tr td.range.disabled.focus,
.datepicker table tr td.range[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.focus {
background-color: #eeeeee;
border-color: #bbbbbb;
}
.datepicker table tr td.range.focused {
background: #d5d5d5;
}
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:active {
background: #eeeeee;
color: #777777;
}
.datepicker table tr td.range.highlighted {
color: #000;
background-color: #e4eef3;
border-color: #9dc1d3;
}
.datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.focus {
color: #000;
background-color: #c1d7e3;
border-color: #4b88a6;
}
.datepicker table tr td.range.highlighted:hover {
color: #000;
background-color: #c1d7e3;
border-color: #73a6c0;
}
.datepicker table tr td.range.highlighted:active,
.datepicker table tr td.range.highlighted.active {
color: #000;
background-color: #c1d7e3;
border-color: #73a6c0;
}
.datepicker table tr td.range.highlighted:active:hover,
.datepicker table tr td.range.highlighted.active:hover,
.datepicker table tr td.range.highlighted:active:focus,
.datepicker table tr td.range.highlighted.active:focus,
.datepicker table tr td.range.highlighted:active.focus,
.datepicker table tr td.range.highlighted.active.focus {
color: #000;
background-color: #a8c8d8;
border-color: #4b88a6;
}
.datepicker table tr td.range.highlighted.disabled:hover,
.datepicker table tr td.range.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.highlighted:hover,
.datepicker table tr td.range.highlighted.disabled:focus,
.datepicker table tr td.range.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.disabled.focus,
.datepicker table tr td.range.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
background-color: #e4eef3;
border-color: #9dc1d3;
}
.datepicker table tr td.range.highlighted.focused {
background: #c1d7e3;
}
.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.highlighted.disabled:active {
background: #e4eef3;
color: #777777;
}
.datepicker table tr td.range.today {
color: #000;
background-color: #f7ca77;
border-color: #f1a417;
}
.datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.focus {
color: #000;
background-color: #f4b747;
border-color: #815608;
}
.datepicker table tr td.range.today:hover {
color: #000;
background-color: #f4b747;
border-color: #bf800c;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today.active {
color: #000;
background-color: #f4b747;
border-color: #bf800c;
}
.datepicker table tr td.range.today:active:hover,
.datepicker table tr td.range.today.active:hover,
.datepicker table tr td.range.today:active:focus,
.datepicker table tr td.range.today.active:focus,
.datepicker table tr td.range.today:active.focus,
.datepicker table tr td.range.today.active.focus {
color: #000;
background-color: #f2aa25;
border-color: #815608;
}
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled:focus,
.datepicker table tr td.range.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.disabled.focus,
.datepicker table tr td.range.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.today.focus {
background-color: #f7ca77;
border-color: #f1a417;
}
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:active {
background: #f7ca77;
color: #777777;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
color: #fff;
background-color: #777777;
border-color: #555555;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:focus,
.datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.focus,
.datepicker table tr td.selected.highlighted.focus {
color: #fff;
background-color: #5e5e5e;
border-color: #161616;
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.highlighted:hover {
color: #fff;
background-color: #5e5e5e;
border-color: #373737;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected.highlighted:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected.highlighted.active {
color: #fff;
background-color: #5e5e5e;
border-color: #373737;
}
.datepicker table tr td.selected:active:hover,
.datepicker table tr td.selected.highlighted:active:hover,
.datepicker table tr td.selected.active:hover,
.datepicker table tr td.selected.highlighted.active:hover,
.datepicker table tr td.selected:active:focus,
.datepicker table tr td.selected.highlighted:active:focus,
.datepicker table tr td.selected.active:focus,
.datepicker table tr td.selected.highlighted.active:focus,
.datepicker table tr td.selected:active.focus,
.datepicker table tr td.selected.highlighted:active.focus,
.datepicker table tr td.selected.active.focus,
.datepicker table tr td.selected.highlighted.active.focus {
color: #fff;
background-color: #4c4c4c;
border-color: #161616;
}
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.highlighted.disabled:hover,
.datepicker table tr td.selected[disabled]:hover,
.datepicker table tr td.selected.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected.highlighted:hover,
.datepicker table tr td.selected.disabled:focus,
.datepicker table tr td.selected.highlighted.disabled:focus,
.datepicker table tr td.selected[disabled]:focus,
.datepicker table tr td.selected.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.selected:focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.disabled.focus,
.datepicker table tr td.selected.highlighted.disabled.focus,
.datepicker table tr td.selected[disabled].focus,
.datepicker table tr td.selected.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.selected.focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
background-color: #777777;
border-color: #555555;
}
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.focus,
.datepicker table tr td.active.highlighted.focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.highlighted.disabled:hover,
.datepicker table tr td.active[disabled]:hover,
.datepicker table tr td.active.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.highlighted.disabled:focus,
.datepicker table tr td.active[disabled]:focus,
.datepicker table tr td.active.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.disabled.focus,
.datepicker table tr td.active.highlighted.disabled.focus,
.datepicker table tr td.active[disabled].focus,
.datepicker table tr td.active.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.active.focus,
fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
background-color: #337ab7;
border-color: #2e6da4;
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
border-radius: 4px;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #777777;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active:hover:focus,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.focus,
.datepicker table tr td span.active:hover.focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active.disabled:hover.focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover:active:hover,
.datepicker table tr td span.active.disabled:active:hover,
.datepicker table tr td span.active.disabled:hover:active:hover,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover,
.datepicker table tr td span.active.disabled.active:hover,
.datepicker table tr td span.active.disabled:hover.active:hover,
.datepicker table tr td span.active:active:focus,
.datepicker table tr td span.active:hover:active:focus,
.datepicker table tr td span.active.disabled:active:focus,
.datepicker table tr td span.active.disabled:hover:active:focus,
.datepicker table tr td span.active.active:focus,
.datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active.disabled.active:focus,
.datepicker table tr td span.active.disabled:hover.active:focus,
.datepicker table tr td span.active:active.focus,
.datepicker table tr td span.active:hover:active.focus,
.datepicker table tr td span.active.disabled:active.focus,
.datepicker table tr td span.active.disabled:hover:active.focus,
.datepicker table tr td span.active.active.focus,
.datepicker table tr td span.active:hover.active.focus,
.datepicker table tr td span.active.disabled.active.focus,
.datepicker table tr td span.active.disabled:hover.active.focus {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover.disabled:hover,
.datepicker table tr td span.active.disabled.disabled:hover,
.datepicker table tr td span.active.disabled:hover.disabled:hover,
.datepicker table tr td span.active[disabled]:hover,
.datepicker table tr td span.active:hover[disabled]:hover,
.datepicker table tr td span.active.disabled[disabled]:hover,
.datepicker table tr td span.active.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active:hover.disabled:focus,
.datepicker table tr td span.active.disabled.disabled:focus,
.datepicker table tr td span.active.disabled:hover.disabled:focus,
.datepicker table tr td span.active[disabled]:focus,
.datepicker table tr td span.active:hover[disabled]:focus,
.datepicker table tr td span.active.disabled[disabled]:focus,
.datepicker table tr td span.active.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active:hover.disabled.focus,
.datepicker table tr td span.active.disabled.disabled.focus,
.datepicker table tr td span.active.disabled:hover.disabled.focus,
.datepicker table tr td span.active[disabled].focus,
.datepicker table tr td span.active:hover[disabled].focus,
.datepicker table tr td span.active.disabled[disabled].focus,
.datepicker table tr td span.active.disabled:hover[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active.focus,
fieldset[disabled] .datepicker table tr td span.active:hover.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
background-color: #337ab7;
border-color: #2e6da4;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #777777;
}
.datepicker .datepicker-switch {
width: 145px;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eeeeee;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.input-group.date .input-group-addon {
cursor: pointer;
}
.input-daterange {
width: 100%;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
border-radius: 0 3px 3px 0;
}
.input-daterange .input-group-addon {
width: auto;
min-width: 16px;
padding: 4px 5px;
line-height: 1.42857143;
text-shadow: 0 1px 0 #fff;
border-width: 1px 0;
margin-left: -5px;
margin-right: -5px;
}
.datepicker.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
color: #333333;
font-size: 13px;
line-height: 1.42857143;
}
.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
padding: 0px 5px;
}
/*# sourceMappingURL=bootstrap-datepicker3.standalone.css.map */

694
budget/static/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

224
budget/static/css/datepicker.css
View file

@ -1,224 +0,0 @@
/*!
* Datepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.datepicker {
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*.dow {
border-top: 1px solid #ddd !important;
}*/
}
.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.datepicker > div {
display: none;
}
.datepicker.days div.datepicker-days {
display: block;
}
.datepicker.months div.datepicker-months {
display: block;
}
.datepicker.years div.datepicker-years {
display: block;
}
.datepicker table {
width: 100%;
margin: 0;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker td.day:hover {
background: #eeeeee;
cursor: pointer;
}
.datepicker td.old,
.datepicker td.new {
color: #999999;
}
.datepicker td.disabled,
.datepicker td.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker td.active,
.datepicker td.active:hover,
.datepicker td.active.disabled,
.datepicker td.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker td.active:hover,
.datepicker td.active:hover:hover,
.datepicker td.active.disabled:hover,
.datepicker td.active.disabled:hover:hover,
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.disabled:active,
.datepicker td.active.disabled:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled.active,
.datepicker td.active.disabled:hover.active,
.datepicker td.active.disabled,
.datepicker td.active:hover.disabled,
.datepicker td.active.disabled.disabled,
.datepicker td.active.disabled:hover.disabled,
.datepicker td.active[disabled],
.datepicker td.active:hover[disabled],
.datepicker td.active.disabled[disabled],
.datepicker td.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.disabled:active,
.datepicker td.active.disabled:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled.active,
.datepicker td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker td span {
display: block;
width: 47px;
height: 54px;
line-height: 54px;
float: left;
margin: 2px;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker td span:hover {
background: #eeeeee;
}
.datepicker td span.disabled,
.datepicker td span.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker td span.active,
.datepicker td span.active:hover,
.datepicker td span.active.disabled,
.datepicker td span.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker td span.active:hover,
.datepicker td span.active:hover:hover,
.datepicker td span.active.disabled:hover,
.datepicker td span.active.disabled:hover:hover,
.datepicker td span.active:active,
.datepicker td span.active:hover:active,
.datepicker td span.active.disabled:active,
.datepicker td span.active.disabled:hover:active,
.datepicker td span.active.active,
.datepicker td span.active:hover.active,
.datepicker td span.active.disabled.active,
.datepicker td span.active.disabled:hover.active,
.datepicker td span.active.disabled,
.datepicker td span.active:hover.disabled,
.datepicker td span.active.disabled.disabled,
.datepicker td span.active.disabled:hover.disabled,
.datepicker td span.active[disabled],
.datepicker td span.active:hover[disabled],
.datepicker td span.active.disabled[disabled],
.datepicker td span.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker td span.active:active,
.datepicker td span.active:hover:active,
.datepicker td span.active.disabled:active,
.datepicker td span.active.disabled:hover:active,
.datepicker td span.active.active,
.datepicker td span.active:hover.active,
.datepicker td span.active.disabled.active,
.datepicker td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker td span.old {
color: #999999;
}
.datepicker th.switch {
width: 145px;
}
.datepicker thead tr:first-child th {
cursor: pointer;
}
.datepicker thead tr:first-child th:hover {
background: #eeeeee;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}

64
budget/static/css/main.css
View file

@ -1,19 +1,29 @@
@import "bootstrap.min.css"; @import "bootstrap.min.css";
@import "datepicker.css"; @import "bootstrap-datepicker3.standalone.css";
@import "../fonts/fontfaces.css"; @import "../fonts/fontfaces.css";
/* General */ /* General */
body { body {
margin-top: 40px; /* For fixed navbar */
padding-top: 3.5rem;
padding-bottom: 2rem;
} }
/* Navbar */ /* Navbar */
.navbar h1{ margin-left: 75px; } .navbar h1 {
font-size: 1rem;
margin: 0;
padding: 0;
}
.navbar .primary-nav { padding-left: 75px; } .navbar .primary-nav { padding-left: 75px; }
.navbar .secondary-nav { padding-right: 75px; } .navbar .secondary-nav {
.brand{ font-family: 'Lobster', arial, serif; } text-align: right;
flex-direction: row-reverse;
}
.navbar-brand{ font-family: 'Lobster', arial, serif; }
/* Header */ /* Header */
@ -36,6 +46,14 @@ body {
#header .tryout { #header .tryout {
margin-right: 10em; margin-right: 10em;
color: #fff;
background-color: #414141;
border-color: #414141;
}
#header .tryout:hover {
background-color: #606060;
border-color: #606060;
} }
#header .additional-content { #header .additional-content {
@ -55,28 +73,20 @@ body {
background-position: center bottom; background-position: center bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 100%; height: 100%;
width: 230px;
padding-left: 10px;
padding-right: 20px;
padding-top: 10px;
margin-left: -20px;
margin-top: -10px;
margin-right: 15px;
color: black; color: black;
position: fixed; position: fixed;
} }
#add-member-form { padding-top: 1em; padding-bottom: 1em; } #add-member-form { padding-top: 1em; padding-bottom: 1em; }
#add-member-form input[type="text"] { width: 60%; } #add-member-form input[type="text"] { width: 60%; }
#add-member-form button { width: 35%; }
#table_overflow { overflow-y: auto; overflow-x: hidden; width: 235px; } #table_overflow { overflow-y: auto; overflow-x: hidden;}
/* Content */ /* Content */
.content { .content {
padding-top: 1em; margin-top: 1rem;
padding-left: 250px;
} }
/* Home */ /* Home */
@ -94,7 +104,9 @@ body {
height: 100px; height: 100px;
} }
#footer{ footer{
margin-left: -15px;
margin-right: -15px;
margin-top: 30px; margin-top: 30px;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
@ -109,6 +121,16 @@ body {
float: right; float: right;
} }
#new-bill, .identifier {
margin-top: 16px;
margin-bottom: 16px;
}
/* Avoid text color flickering when it loose focus as the modal appears */
.btn-primary[data-toggle="modal"] {
color: #fff;
}
.password-reminder{ .password-reminder{
float: right; float: right;
margin-right: 20px; margin-right: 20px;
@ -186,6 +208,10 @@ tr.payer_line .balance-name{
color: white; color: white;
} }
.balance.table {
table-layout: fixed;
}
#bill-form > fieldset { #bill-form > fieldset {
margin-top: 10px; margin-top: 10px;
} }
@ -206,10 +232,6 @@ tr:hover .extra-info {
display: inline; display: inline;
} }
.modal-body {
max-height:455px;
}
/* Fluid Offsets for Boostrap */ /* Fluid Offsets for Boostrap */
.row-fluid > [class*="span"]:not([class*="offset"]):first-child{margin-left:0;} .row-fluid > [class*="span"]:not([class*="offset"]):first-child{margin-left:0;}

2276
budget/static/js/bootstrap-datepicker.js vendored
View file

File diff suppressed because it is too large Load diff

13
budget/static/js/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
budget/static/js/jquery-1.7.2.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
budget/static/js/jquery-3.1.1.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
budget/static/js/locales/bootstrap-datepicker.fr.min.js vendored Normal file
View file

@ -0,0 +1,2 @@
!function(a){a.fn.datepicker.dates.fr={days:["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"],daysShort:["dim.","lun.","mar.","mer.","jeu.","ven.","sam."],daysMin:["d","l","ma","me","j","v","s"],months:["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"],monthsShort:["janv.","févr.","mars","avril","mai","juin","juil.","août","sept.","oct.","nov.","déc."],today:"Aujourd'hui",monthsTitle:"Mois",clear:"Effacer",weekStart:1,format:"dd/mm/yyyy"}}(jQuery);
console.log("foo", jQuery.fn.datepicker.dates);

1
budget/static/js/tether.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
budget/templates/display_errors.html
View file

@ -1,5 +1,5 @@
{% for field_name, field_errors in form.errors.items() if field_errors %} {% for field_name, field_errors in form.errors.items() if field_errors %}
{% for error in 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 %}
{% endfor %} {% endfor %}

28
budget/templates/forms.html
View file

@ -1,9 +1,13 @@
{% macro input(field, multiple=False, class=None) -%} {% macro input(field, multiple=False, class='form-control', inline=False) -%}
<div class="control-group"> <div class="form-group{% if inline %} row{% endif %}">
{% if field.type != "SubmitField" %} {% if field.type != "SubmitField" %}
{{ field.label(class="control-label") }} {% if inline %}
{{ field.label(class="col-3") }}
{% else %}
{{ field.label() }}
{% endif %} {% endif %}
<div class="controls"> {% endif %}
<div class="controls{% if inline %} col-9{% endif %}">
{% if multiple == True %} {% if multiple == True %}
{{ field(multiple=True, class=class) }} {{ field(multiple=True, class=class) }}
{% else %} {% else %}
@ -77,11 +81,11 @@
{% if title %}<legend>{% if edit %}{{ _("Edit this bill") }} {% else %}{{ _("Add a bill") }} {% endif %}</legend>{% endif %} {% if title %}<legend>{% if edit %}{{ _("Edit this bill") }} {% else %}{{ _("Add a bill") }} {% endif %}</legend>{% endif %}
{% include "display_errors.html" %} {% include "display_errors.html" %}
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
{{ input(form.date, class="datepicker") }} {{ input(form.date, class="form-control datepicker", inline=True) }}
{{ input(form.what) }} {{ input(form.what, inline=True) }}
{{ input(form.payer) }} {{ input(form.payer, inline=True, class="form-control custom-select") }}
{{ input(form.amount) }} {{ input(form.amount, inline=True) }}
{{ input(form.payed_for) }} {{ input(form.payed_for, inline=True, class="form-check-input") }}
</fieldset> </fieldset>
<div class="actions"> <div class="actions">
{{ form.submit(class="btn btn-primary") }} {{ form.submit(class="btn btn-primary") }}
@ -92,7 +96,11 @@
{% macro add_member(form) %} {% macro add_member(form) %}
{{ form.hidden_tag() }} {{ 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 %} {% endmacro %}
{% macro edit_member(form, title=True) %} {% macro edit_member(form, title=True) %}

30
budget/templates/home.html
View file

@ -1,26 +1,21 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block header %} {% block body %}
<div id="header" class="container-fluid"> <header id="header" class="row">
<div class="row-fluid"> <div class="col-5 offset-md-2">
<div class="span5 offset2">
<h2>{{ _("Manage your shared <br>expenses, easily") }}</h2> <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>
<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> <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> </header>
</div>
{% endblock %}
{% block body %} <main class="row home">
<div class="container-fluid"> <div class="col-4 offset-md-2">
<div class="row-fluid home">
<div class="span4 offset2">
<form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post"> <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> <legend>{{ _("Log to an existing project") }}...</legend>
{{ forms.authenticate(auth_form, home=True) }} {{ forms.authenticate(auth_form, home=True) }}
</fieldset> </fieldset>
@ -30,9 +25,9 @@
</div> </div>
</form> </form>
</div> </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"> <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> <legend>...{{ _("or create a new one") }}</legend>
{{ forms.create_project(project_form, home=True) }} {{ forms.create_project(project_form, home=True) }}
</fieldset> </fieldset>
@ -40,9 +35,8 @@
<button class="btn" type="submit">{{ _("let's get started") }}</button> <button class="btn" type="submit">{{ _("let's get started") }}</button>
</div> </div>
</form> </form>
</main>
</div> </div>
</div>
</div>
{% endblock %} {% endblock %}
{% block js %} {% block js %}

62
budget/templates/layout.html
View file

@ -5,15 +5,15 @@
<title>{{ _("Account manager") }}{% block title %}{% endblock %}</title> <title>{{ _("Account manager") }}{% block title %}{% endblock %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <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') }}"> <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/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.min.js") }}"></script>
<script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script>
{% block head %}{% endblock %} {% block head %}{% endblock %}
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready(function(){ $(document).ready(function(){
var left = window.innerWidth/2-$('.flash').width()/2; 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(){ setTimeout(function(){
$(".flash").fadeOut("slow", function () { $(".flash").fadeOut("slow", function () {
$(".flash").remove(); $(".flash").remove();
@ -35,62 +35,58 @@
</head> </head>
<body> <body>
<div class="navbar navbar-fixed-top"> <nav class="navbar navbar-toggleable-md navbar fixed-top navbar-inverse bg-inverse">
<div class="navbar-inner"> <h1 class="col-2"><a class="navbar-brand" href="{{ url_for(".home") }}">#! money?</a></h1>
<div class="container-fluid"> <ul class="navbar-nav col-5 offset-md-1">
<h1><a class="brand" href="{{ url_for(".home") }}">#! money?</a></h1>
{% if g.project %} {% if g.project %}
<ul class="nav primary-nav">
{% block navbar %} {% block navbar %}
<li class="active"><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</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><a href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</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 %} {% endblock %}
</ul>
{% endif %} {% endif %}
<ul class="nav pull-right secondary-nav"> </ul>
<ul class="navbar-nav secondary-nav col-4">
{% if g.project %} {% if g.project %}
<li class="dropdown"> <li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a> <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"> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li>
<li class="divider"></li> <li class="dropdown-divider"></li>
{% for id, name in session['projects'] %} {% for id, name in session['projects'] %}
{% if id != g.project.id %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
<li><a href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li>
<li class="divider"></li> <li class="dropdown-divider"></li>
<li><a href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li>
</ul> </ul>
</li> </li>
{% endif %} {% endif %}
<li{% if g.lang == "fr" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="fr") }}">fr</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{% 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 == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="en") }}">en</a></li>
</ul> </ul>
</div>
</div>
</div>
{% block header %}{% endblock %}
{% block body %} </nav>
<div class="container-fluid"> <div class="container-fluid">
{% block body %}
{% block sidebar %}{% endblock %} {% block sidebar %}{% endblock %}
<div class="content"> <main class="content offset-1 col-10">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </main>
</div> </div>
{% endblock %} {% endblock %}
{% for message in get_flashed_messages() %} {% 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 %} {% endfor %}
{% block footer %} {% 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> <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 %} {% endblock %}
</body> </body>

29
budget/templates/list_bills.html
View file

@ -1,16 +1,11 @@
{% extends "layout.html" %} {% extends "sidebar_table_layout.html" %}
{% block title %} - {{ g.project.name }}{% endblock %} {% block title %} - {{ g.project.name }}{% endblock %}
{% block head %} {% block head %}
<script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script> <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 %} {% endblock %}
{% block js %} {% block js %}
$(window).resize(function() {
$("#sidebar").height( window.innerHeight-50 );
$("#table_overflow").height( $("#sidebar").height()-120 );
});
{% if add_bill %} $('#new-bill').click(); {% endif %} {% if add_bill %} $('#new-bill').click(); {% endif %}
// Hide all members actions // Hide all members actions
@ -56,9 +51,7 @@
{% endblock %} {% endblock %}
{% block sidebar %} {% block sidebar %}
<div id="sidebar" class="sidebar"> <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline">
<form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline input-append">
{{ forms.add_member(member_form) }} {{ forms.add_member(member_form) }}
</form> </form>
@ -89,30 +82,32 @@
{% endfor %} {% endfor %}
</table> </table>
</div> </div>
</div>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="identifier">{{ _("The project identifier is") }} <a href="{{ url_for(".list_bills") }}">{{ g.project.id }}</a>, {{ _("remember it!") }}</div> <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> <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 id="bill-form" class="modal fade show" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">{{ _('Add a bill') }}</h3>
<a href="#" class="close" data-dismiss="modal">&times;</a> <a href="#" class="close" data-dismiss="modal">&times;</a>
<h3>{{ _('Add a bill') }}</h3>
</div> </div>
<form action="{{ url_for(".add_bill") }}" method="post" class="modal-body form-horizontal"> <form action="{{ url_for(".add_bill") }}" method="post" class="modal-body container">
{{ forms.add_bill(bill_form, title=False) }} {{ forms.add_bill(bill_form, title=False) }}
</form> </form>
</div> </div>
</div>
</div>
{% if bills.count() > 0 %} {% 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> <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> <tbody>
{% for bill in bills %} {% 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.date }}</td>
<td>{{ bill.payer }}</td> <td>{{ bill.payer }}</td>
<td>{{ bill.what }}</td> <td>{{ bill.what }}</td>

11
budget/templates/settle_bills.html
View file

@ -1,13 +1,6 @@
{% extends "layout.html" %} {% extends "sidebar_table_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 %}
{% block sidebar %} {% block sidebar %}
<div id="sidebar" class="sidebar">
<div id="table_overflow"> <div id="table_overflow">
<table class="balance table"> <table class="balance table">
{% set balance = g.project.balance %} {% set balance = g.project.balance %}
@ -21,8 +14,6 @@
{% endfor %} {% endfor %}
</table> </table>
</div> </div>
</div>
{% endblock %} {% endblock %}

14
budget/templates/sidebar_table_layout.html Normal file
View file

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

9
budget/web.py
View file

@ -284,7 +284,8 @@ def list_bills():
return render_template("list_bills.html", return render_template("list_bills.html",
bills=bills, member_form=MemberForm(g.project), bills=bills, member_form=MemberForm(g.project),
bill_form=bill_form, bill_form=bill_form,
add_bill=request.values.get('add_bill', False) add_bill=request.values.get('add_bill', False),
current_view="list_bills",
) )
@ -414,7 +415,11 @@ def change_lang(lang):
def settle_bill(): def settle_bill():
"""Compute the sum each one have to pay to each other and display it""" """Compute the sum each one have to pay to each other and display it"""
bills = g.project.get_transactions_to_settle_bill() bills = g.project.get_transactions_to_settle_bill()
return render_template("settle_bills.html", bills=bills) return render_template(
"settle_bills.html",
bills=bills,
current_view='settle_bill',
)
@main.route("/<project_id>/archives/create", methods=["GET", "POST"]) @main.route("/<project_id>/archives/create", methods=["GET", "POST"])