Improve that UI!

This commit is contained in:
nikolark committed 2015-07-22 22:14:29 +02:00
1 parent 41061d6875
commit 619d7d5a59
10 files changed
+207 -110

No files matched your search

+15 -25
View File
@@ -1,38 +1,28 @@
# Installation
apt install libldap2-dev # reqs
virtualenv venv
. venv/bin/activate
pip install -r requirements.txt
python manage.py migrate
## LDAP
sudo docker run -e LDAP_DOMAIN=neuf.no -e LDAP_ORGANISATION="Neuf" -e LDAP_ADMIN_PASSWORD="toor" -p 389:389 -d nikolaik/openldap
ldapadd -D "cn=admin,dc=neuf,dc=no" -w "toor" -f test/testdata.ldif # Testdata
# Verify import
ldapsearch -x -b dc=neuf,dc=no
# Login with test@example.com:test
## TODO
* Existing members adds membercard to user
* support tablet (1280x800) resolution
* Selected user in form: on select, display user details in register form.
* lookup sms-tables in inside
* register membership in inside-table din_phonenumber, din_usedmembercard, din_user
* Inside auth
### Form
* tlf field
* validates in javascript with phonenumber-package
* onkeyup could shows matching user data from inside (name, expires)
* verify form consistency
* submit button
* change text to "... and renew" if existing member
* grey if form invalid
* blue if form valid
* grey out on submit
### Other
* Inside auth
### Backend
* store in inside-table din_phonenumber, din_usedmembercard, din_user
* lookup sms-tables in inside
## Installation
apt install libldap2-dev # reqs
virtualenv venv
. venv/bin/activate
pip install -r requirements.txt
python manage.py migrate
### LDAP
sudo docker run -e LDAP_DOMAIN=neuf.no -e LDAP_ORGANISATION="Neuf" -e LDAP_ADMIN_PASSWORD="toor" -p 389:389 -d nikolaik/openldap
ldapadd -D "cn=admin,dc=neuf,dc=no" -w "toor" -f test/testdata.ldif # Testdata
# Verify import
ldapsearch -x -b dc=neuf,dc=no
# Login with test@example.com:test
+1 -1
View File
@@ -6,7 +6,7 @@ from django.utils.translation import ugettext_lazy as _
class SearchUserForm(forms.Form):
query = forms.CharField(
required=False,
widget=forms.TextInput(attrs={'placeholder': _('Search')})
widget=forms.TextInput(attrs={'placeholder': _('Firstname, lastname, card number or email')})
)
+10 -19
View File
@@ -2,40 +2,31 @@
{% load i18n bootstrap %}
{% block content %}
<div class="row">
<div class="col-sm-5">
<div class="col-sm-5 section-card-form">
<form class="register-card-form" autocomplete="off">
{% csrf_token %}
<h3>{% trans "Register card" %}</h3>
<ul>
<li>Add membership for new user</li>
<li>Add membership for existing user</li>
<li>Renew membership for existing user</li>
</ul>
<ul>
<li>Register card to existing user [DONE]</li>
<li>Replace card for existing user [DONE]</li>
</ul>
<ul>
<li>Renew membership for existing user</li>
<li>Register membership for existing user</li>
<li>Register membership for new user</li>
</ul>
<div class="register-card-form--selected-user-wrap">
<!-- Placeholder -->
<div class="list-group-item search-result placeholder">
<input type="radio" name="user" checked>
<em>New member</em>
<div class="labels">
<span class="label label-card "><span class="glyphicon glyphicon-user"></span> New card</span>
</div>
</div>
</div>
<div class="register-card-form--selected-user-wrap"></div>
{{ add_card_form|bootstrap }}
<p><em>Registering a card number with a phone number already tied to an existing user, will add the card to that user.</em></p>
<button id="register-submit-btn" type="submit" class="btn btn-primary btn-lg">{% trans "Register card" %}</button>
<button id="register-submit-btn" type="submit" class="btn btn-primary btn-lg" disabled>{% trans "Register card" %}</button>
<button type="reset" class="register-reset-btn btn btn-default">{% trans "Reset" %}</button>
</form>
</div>
<div class="col-sm-7">
<div class="col-sm-7 section-search">
<h3>{% trans "Search existing users" %}</h3>
<em>{% trans "Firstname, lastname, card number, email" %}</em>
<form class="form-inline query-form" autocomplete="off">
{{ search_user_form|bootstrap_inline }}
<button type="reset" class="btn btn-default">Reset</button>
</form>
<div class="results-wrap"></div>
</div>
+41 -19
View File
@@ -39,7 +39,7 @@ function update_user_with_card_details(user) {
}
function format_results(results) {
results = _.map(results, update_user_with_card_details);
return nunjucks.render('search_results.html', {'results': results});
return nunjucksEnv.render('search_results.html', {'results': results});
}
function render_selected_user(user_data) {
var context;
@@ -49,12 +49,17 @@ function render_selected_user(user_data) {
user_data = update_user_with_card_details(user_data);
context = {res: user_data, checked: true};
}
var selected_user_html = nunjucks.render('search_result.html', context);
var selected_user_html = nunjucksEnv.render('search_result.html', context);
_dom.selectedUserWrap.html(selected_user_html);
}
function set_toast(message) {
//var html = nunjucks.render('toast.html', {'message': message});
_dom.toastWrap.html(message);
function set_toast(message, message_type) {
var context = {
message: message,
message_type: message_type,
icon: state_to_icon[message_type]
};
var html = nunjucksEnv.render('toast.html', context);
_dom.toastWrap.html(html);
_dom.toastWrap.addClass('visible');
setTimeout(function() {
_dom.toastWrap.removeClass('visible');
@@ -83,11 +88,6 @@ function set_field_state(field_element, state, help_text) {
help_text = '';
}
var help_span = '<span class="help-block ">'+ help_text +'</span>';
var state_to_icon = {
success: 'ok',
warning: 'warning-sign',
error: 'remove'
};
var feedback_span = '<span class="glyphicon glyphicon-'+ state_to_icon[state] +' form-control-feedback" aria-hidden="true"></span>';
var css_class = 'has-'+state;
var form_group = field_element.parent().parent();
@@ -128,6 +128,9 @@ function resetCardForm(reset_native) {
cardForm.fields.cardNumber = false;
selectedUser = null;
_dom.userIdField.val('').trigger('change');
/* Disable submit button */
_dom.registerSubmitButton.prop('disabled', true);
}
function cardFormIsValid() {
@@ -182,7 +185,7 @@ function getFormData(formElement) {
return formData;
}
/* Init and global vars */
var _dom;
var users;
var selectedUser;
@@ -192,6 +195,13 @@ var cardForm = {
phoneNumber: false
}
};
var state_to_icon = {
success: 'ok',
warning: 'warning-sign',
error: 'remove'
};
var nunjucksEnv = new nunjucks.Environment();
$(document).ready(function(){
@@ -215,6 +225,17 @@ $(document).ready(function(){
insideCardNumber: '/inside/cardnumber/',
insideRegister: '/inside/register/'
};
/* Add filter |phoneNumber */
nunjucksEnv.addFilter('phoneNumber', function(str) {
if(!str || str.length <= 1) {
return 'No phone number';
}
if(str.length == 11) {
return str.slice(0, 3) + " " + str.slice(3, 6) + " " + str.slice(6, 8) + " " + str.slice(8);
}
return str;
});
/* Phone number as you type */
_dom.phoneNumberField.on('input', function() {
@@ -300,7 +321,7 @@ $(document).ready(function(){
/* On search result click */
_dom.results.on('click', '.search-result input', function(e){
var label = $(this).parent();
var label = $(this).parent().parent();
var number = label.attr('data-phone-number');
var user_id = label.attr('data-user-id');
@@ -343,17 +364,16 @@ $(document).ready(function(){
type: 'post',
headers: {'X-CSRFToken': getCookie('csrftoken')}
}).success(function(data){
console.log("success", data);
set_toast('Success :-)');
set_toast('Success :-)', 'success');
resetCardForm(true);
}).fail(function(data) {
console.log("failed", data);
set_toast('Failed!');
set_toast('Failed!'+ data.error, 'error');
});
});
/* On user id change */
/* On user id change */
_dom.userIdField.on('change', function() {
/* Render selected user in search form */
if(selectedUser) {
@@ -368,10 +388,14 @@ $(document).ready(function(){
});
/* Ninja add some icons to bootstrap form */
var iconMobile = '<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>';
var iconMobile = '<span class="input-group-addon"><span class="glyphicon glyphicon-phone glyphicon-phone-large"></span></span>';
_dom.phoneNumberField.parent().addClass('input-group');
_dom.phoneNumberField.before(iconMobile);
/* Render initial placeholder user */
var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true, res: {number: '+4748105885'}});
_dom.selectedUserWrap.html(selected_user_html);
/* Initial focus */
if(_dom.usernameField) {
_dom.usernameField.focus();
@@ -379,8 +403,6 @@ $(document).ready(function(){
if(_dom.phoneNumberField) {
_dom.phoneNumberField.focus();
}
/* Initial submit button state disabled */
_dom.registerSubmitButton.attr('disabled','disabled');
/* Load query params */
/* FIXME: does not trigger validation and selected user preview */
+41 -8
View File
@@ -1,5 +1,8 @@
$icon-font-path: '../fonts/';
$green: #5cb85c;
$green-color: #5cb85c;
$red-color: #ff433d;
$yellow-color: #f8ff5b;
$active-color: darkred;
/* Vendor styles */
@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@@ -49,7 +52,7 @@ input[type=number] {
line-height: 46px;
}
}
.glyphicon-phone {
.glyphicon-phone-large {
font-size: 26px;
}
.register-card-form--selected-user-wrap {
@@ -67,7 +70,10 @@ input[type=number] {
&.can-register-card:hover {
cursor: pointer;
}
.phone-number,
.labels {
margin-left: 21px;
}
.label {
font-size: 1em;
}
@@ -76,10 +82,10 @@ input[type=number] {
color: #555;
}
.label-card-yes {
color: $green;
color: $green-color;
}
.label-is-active {
background-color: darkred;
background-color: $active-color;
}
[type=radio] {
margin-right: 4px;
@@ -95,13 +101,28 @@ input[type=number] {
}
}
}
/* Search form */
.selected-icon {
visibility: hidden;
float: right;
bottom: 48px;
bottom: 66px;
right: 10px;
position: relative;
font-size: 1.5em;
color: $green;
font-size: 2em;
color: $green-color;
}
#id_query {
width: 100%;
}
.query-form .form-group {
width: 80%;
display: inline-block;
}
.results-wrap {
overflow-y: auto;
max-height: 550px;
}
/* Footer */
@@ -133,6 +154,18 @@ input[type=number] {
visibility: visible;
transform: translateY(0);
}
.glyphicon {
padding-right: 10px;
}
}
.toast-success {
color: $green-color;
}
.toast-error {
color: $red-color;
}
.toast-warning {
color: $yellow-color;
}
/* Header */
+12 -5
View File
@@ -1,13 +1,19 @@
{% if not placeholder %}
{% if not res.card_number_active %}
<label for="{{ res.id }}" data-phone-number="{{ res.number }}" data-user-id="{{ res.id }}" class="list-group-item search-result can-register-card{% if res.is_member == "1" %} member{% else %} not-member{% endif %}">
<input type="radio" name="user" id="{{ res.id }}"{% if checked %} checked{% endif %}>
{% else %}
<!-- Has card -->
<div class="list-group-item search-result has-card{% if res.is_member %} member{% else %}not-member{% endif %}">
{% endif %}
<!-- Name -->
<span class="glyphicon glyphicon-user"></span> {{ res.firstname }} {{ res.lastname }}
<div class="name">
{% if not res.card_number_active %}
<input type="radio" name="user" id="{{ res.id }}"{% if checked %} checked{% endif %}>
{% endif %}
<!-- Name -->
<span class="glyphicon glyphicon-user"></span> {{ res.firstname }} {{ res.lastname }}
</div>
<!-- Phone number -->
<div class="phone-number"><span class="glyphicon glyphicon-phone"></span> {{ res.number|phoneNumber }}</div>
<div class="labels">
<!-- Membership -->
{% if res.is_member == "1" %}
@@ -38,9 +44,10 @@
<!-- Placeholder -->
<div class="list-group-item search-result placeholder">
<input type="radio" name="user" checked>
<em>New member</em>
<span class="glyphicon glyphicon-user"></span> <em>New member</em>
<div class="phone-number"><span class="glyphicon glyphicon-phone"></span> {{ number|phoneNumber }}</div>
<div class="labels">
<span class="label label-card "><span class="glyphicon glyphicon-user"></span> {{ res.card_number_active|default('New card') }}</span>
<span class="label label-card">New card</span>
</div>
</div>
{% endif %}
+1
View File
@@ -0,0 +1 @@
<span class="toast-{{message_type}}"><span class="glyphicon glyphicon-{{icon}}"></span> {{message}}</span>
+41 -19
View File
@@ -39,7 +39,7 @@ function update_user_with_card_details(user) {
}
function format_results(results) {
results = _.map(results, update_user_with_card_details);
return nunjucks.render('search_results.html', {'results': results});
return nunjucksEnv.render('search_results.html', {'results': results});
}
function render_selected_user(user_data) {
var context;
@@ -49,12 +49,17 @@ function render_selected_user(user_data) {
user_data = update_user_with_card_details(user_data);
context = {res: user_data, checked: true};
}
var selected_user_html = nunjucks.render('search_result.html', context);
var selected_user_html = nunjucksEnv.render('search_result.html', context);
_dom.selectedUserWrap.html(selected_user_html);
}
function set_toast(message) {
//var html = nunjucks.render('toast.html', {'message': message});
_dom.toastWrap.html(message);
function set_toast(message, message_type) {
var context = {
message: message,
message_type: message_type,
icon: state_to_icon[message_type]
};
var html = nunjucksEnv.render('toast.html', context);
_dom.toastWrap.html(html);
_dom.toastWrap.addClass('visible');
setTimeout(function() {
_dom.toastWrap.removeClass('visible');
@@ -83,11 +88,6 @@ function set_field_state(field_element, state, help_text) {
help_text = '';
}
var help_span = '<span class="help-block ">'+ help_text +'</span>';
var state_to_icon = {
success: 'ok',
warning: 'warning-sign',
error: 'remove'
};
var feedback_span = '<span class="glyphicon glyphicon-'+ state_to_icon[state] +' form-control-feedback" aria-hidden="true"></span>';
var css_class = 'has-'+state;
var form_group = field_element.parent().parent();
@@ -128,6 +128,9 @@ function resetCardForm(reset_native) {
cardForm.fields.cardNumber = false;
selectedUser = null;
_dom.userIdField.val('').trigger('change');
/* Disable submit button */
_dom.registerSubmitButton.prop('disabled', true);
}
function cardFormIsValid() {
@@ -182,7 +185,7 @@ function getFormData(formElement) {
return formData;
}
/* Init and global vars */
var _dom;
var users;
var selectedUser;
@@ -192,6 +195,13 @@ var cardForm = {
phoneNumber: false
}
};
var state_to_icon = {
success: 'ok',
warning: 'warning-sign',
error: 'remove'
};
var nunjucksEnv = new nunjucks.Environment();
$(document).ready(function(){
@@ -215,6 +225,17 @@ $(document).ready(function(){
insideCardNumber: '/inside/cardnumber/',
insideRegister: '/inside/register/'
};
/* Add filter |phoneNumber */
nunjucksEnv.addFilter('phoneNumber', function(str) {
if(!str || str.length <= 1) {
return 'No phone number';
}
if(str.length == 11) {
return str.slice(0, 3) + " " + str.slice(3, 6) + " " + str.slice(6, 8) + " " + str.slice(8);
}
return str;
});
/* Phone number as you type */
_dom.phoneNumberField.on('input', function() {
@@ -300,7 +321,7 @@ $(document).ready(function(){
/* On search result click */
_dom.results.on('click', '.search-result input', function(e){
var label = $(this).parent();
var label = $(this).parent().parent();
var number = label.attr('data-phone-number');
var user_id = label.attr('data-user-id');
@@ -343,17 +364,16 @@ $(document).ready(function(){
type: 'post',
headers: {'X-CSRFToken': getCookie('csrftoken')}
}).success(function(data){
console.log("success", data);
set_toast('Success :-)');
set_toast('Success :-)', 'success');
resetCardForm(true);
}).fail(function(data) {
console.log("failed", data);
set_toast('Failed!');
set_toast('Failed!'+ data.error, 'error');
});
});
/* On user id change */
/* On user id change */
_dom.userIdField.on('change', function() {
/* Render selected user in search form */
if(selectedUser) {
@@ -368,10 +388,14 @@ $(document).ready(function(){
});
/* Ninja add some icons to bootstrap form */
var iconMobile = '<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>';
var iconMobile = '<span class="input-group-addon"><span class="glyphicon glyphicon-phone glyphicon-phone-large"></span></span>';
_dom.phoneNumberField.parent().addClass('input-group');
_dom.phoneNumberField.before(iconMobile);
/* Render initial placeholder user */
var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true, res: {number: '+4748105885'}});
_dom.selectedUserWrap.html(selected_user_html);
/* Initial focus */
if(_dom.usernameField) {
_dom.usernameField.focus();
@@ -379,8 +403,6 @@ $(document).ready(function(){
if(_dom.phoneNumberField) {
_dom.phoneNumberField.focus();
}
/* Initial submit button state disabled */
_dom.registerSubmitButton.attr('disabled','disabled');
/* Load query params */
/* FIXME: does not trigger validation and selected user preview */
+44 -13
View File
@@ -21,14 +21,7 @@ else {
output += " not-member";
;
}
output += "\">\n <input type=\"radio\" name=\"user\" id=\"";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"id", env.opts.autoescape), env.opts.autoescape);
output += "\"";
if(runtime.contextOrFrameLookup(context, frame, "checked")) {
output += " checked";
;
}
output += ">\n ";
output += "\">\n ";
;
}
else {
@@ -44,11 +37,25 @@ output += "not-member";
output += "\">\n ";
;
}
output += "\n <!-- Name -->\n <span class=\"glyphicon glyphicon-user\"></span> ";
output += "\n <div class=\"name\">\n ";
if(!runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"card_number_active", env.opts.autoescape)) {
output += "\n <input type=\"radio\" name=\"user\" id=\"";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"id", env.opts.autoescape), env.opts.autoescape);
output += "\"";
if(runtime.contextOrFrameLookup(context, frame, "checked")) {
output += " checked";
;
}
output += ">\n ";
;
}
output += "\n <!-- Name -->\n <span class=\"glyphicon glyphicon-user\"></span> ";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"firstname", env.opts.autoescape), env.opts.autoescape);
output += " ";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"lastname", env.opts.autoescape), env.opts.autoescape);
output += "\n <div class=\"labels\">\n <!-- Membership -->\n ";
output += "\n </div>\n <!-- Phone number -->\n <div class=\"phone-number\"><span class=\"glyphicon glyphicon-phone\"></span> ";
output += runtime.suppressValue(env.getFilter("phoneNumber").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"number", env.opts.autoescape)), env.opts.autoescape);
output += "</div>\n <div class=\"labels\">\n <!-- Membership -->\n ";
if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"is_member", env.opts.autoescape) == "1") {
output += "\n <span class=\"label label-success\">Member: ";
output += runtime.suppressValue(env.getFilter("default").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"expires", env.opts.autoescape),"Lifelong"), env.opts.autoescape);
@@ -97,9 +104,9 @@ output += "\n";
;
}
else {
output += "\n <!-- Placeholder -->\n <div class=\"list-group-item search-result placeholder\">\n <input type=\"radio\" name=\"user\" checked>\n <em>New member</em>\n <div class=\"labels\">\n <span class=\"label label-card \"><span class=\"glyphicon glyphicon-user\"></span> ";
output += runtime.suppressValue(env.getFilter("default").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"card_number_active", env.opts.autoescape),"New card"), env.opts.autoescape);
output += "</span>\n </div>\n </div>\n";
output += "\n <!-- Placeholder -->\n <div class=\"list-group-item search-result placeholder\">\n <input type=\"radio\" name=\"user\" checked>\n <span class=\"glyphicon glyphicon-user\"></span> <em>New member</em>\n <div class=\"phone-number\"><span class=\"glyphicon glyphicon-phone\"></span> ";
output += runtime.suppressValue(env.getFilter("phoneNumber").call(context, runtime.contextOrFrameLookup(context, frame, "number")), env.opts.autoescape);
output += "</div>\n <div class=\"labels\">\n <span class=\"label label-card\">New card</span>\n </div>\n </div>\n";
;
}
cb(null, output);
@@ -156,3 +163,27 @@ root: root
};
})();
})();
(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["toast.html"] = (function() {function root(env, context, frame, runtime, cb) {
var lineno = null;
var colno = null;
var output = "";
try {
output += "<span class=\"toast-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "message_type"), env.opts.autoescape);
output += "\"><span class=\"glyphicon glyphicon-";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "icon"), env.opts.autoescape);
output += "\"></span> ";
output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "message"), env.opts.autoescape);
output += "</span>";
cb(null, output);
;
} catch (e) {
cb(runtime.handleError(e, lineno, colno));
}
}
return {
root: root
};
})();
})();
+1 -1
View File
@@ -1 +1 @@
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}samp{font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered th,.table-bordered td{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url("../fonts/glyphicons-halflings-regular.eot");src:url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),url("../fonts/glyphicons-halflings-regular.woff") format("woff"),url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"),url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\2a"}.glyphicon-plus:before{content:"\2b"}.glyphicon-euro:before,.glyphicon-eur:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.gLine truncated
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}samp{font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered th,.table-bordered td{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url("../fonts/glyphicons-halflings-regular.eot");src:url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),url("../fonts/glyphicons-halflings-regular.woff") format("woff"),url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"),url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\2a"}.glyphicon-plus:before{content:"\2b"}.glyphicon-euro:before,.glyphicon-eur:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.gLine truncated