UI Improvements

This commit is contained in:
nikolark committed 2015-07-24 14:58:18 +02:00
1 parent 619d7d5a59
commit a0b9d444df
7 files changed
+121 -87

No files matched your search

+20 -7
View File
@@ -47,7 +47,7 @@ function render_selected_user(user_data) {
context = {placeholder: true}; // dummy card
} else {
user_data = update_user_with_card_details(user_data);
context = {res: user_data, checked: true};
context = {res: user_data, checked: true, no_user_actions: true};
}
var selected_user_html = nunjucksEnv.render('search_result.html', context);
_dom.selectedUserWrap.html(selected_user_html);
@@ -132,6 +132,14 @@ function resetCardForm(reset_native) {
/* Disable submit button */
_dom.registerSubmitButton.prop('disabled', true);
}
function resetSearchForm(reset_native) {
if(reset_native) {
_dom.searchResetButton.get(0).reset();
}
/* Clear search results */
users = null;
_dom.results.html('');
}
function cardFormIsValid() {
return _.all(_.values(cardForm.fields));
@@ -217,7 +225,8 @@ $(document).ready(function(){
userIdField: $('#id_user_id'),
selectedUserWrap: $('.register-card-form--selected-user-wrap'),
toastWrap: $('.toast-wrap'),
registerResetButton: $('.register-reset-btn')
registerResetButton: $('.register-reset-btn'),
searchResetButton: $('.search-reset-btn')
};
var urls = {
insideUserApi: '/inside/user/',
@@ -251,7 +260,7 @@ $(document).ready(function(){
set_selected_user(data.results[0], true);
} else {
set_field_state(_dom.phoneNumberField, '');
set_selected_user('', true);
set_selected_user(null, true);
}
cardForm.fields.phoneNumber = true;
update_submit_button();
@@ -295,9 +304,10 @@ $(document).ready(function(){
});
/* User search as you type */
_dom.query.on('keyup', function() {
_dom.query.on('input', function() {
var val = _dom.query.val().trim();
if(val.length <= 2) {
_dom.results.html('');
return;
}
$.getJSON(urls.insideUserApi, {q: val}, function(data) {
@@ -321,7 +331,7 @@ $(document).ready(function(){
/* On search result click */
_dom.results.on('click', '.search-result input', function(e){
var label = $(this).parent().parent();
var label = $(this).parent();
var number = label.attr('data-phone-number');
var user_id = label.attr('data-user-id');
@@ -382,10 +392,13 @@ $(document).ready(function(){
}
render_selected_user();
});
/* Reset buttons */
_dom.registerResetButton.on('click', function() {
console.log('reset!');
resetCardForm();
});
_dom.searchResetButton.on('click', function() {
resetSearchForm();
});
/* Ninja add some icons to bootstrap form */
var iconMobile = '<span class="input-group-addon"><span class="glyphicon glyphicon-phone glyphicon-phone-large"></span></span>';
@@ -393,7 +406,7 @@ $(document).ready(function(){
_dom.phoneNumberField.before(iconMobile);
/* Render initial placeholder user */
var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true, res: {number: '+4748105885'}});
var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true});
_dom.selectedUserWrap.html(selected_user_html);
/* Initial focus */
+26 -7
View File
@@ -57,12 +57,13 @@ input[type=number] {
}
.register-card-form--selected-user-wrap {
min-height: 78px;
margin: 10px 0;
margin-bottom: 10px;
}
.query-form {
margin-bottom: 20px;
}
/* Search result / User */
.search-result {
font-weight: normal;
line-height: 2;
@@ -88,7 +89,10 @@ input[type=number] {
background-color: $active-color;
}
[type=radio] {
margin-right: 4px;
position: absolute;
top: 42px;
transform: scale(1.5);
left: 10px;
&:focus {
outline: none;
@@ -100,7 +104,21 @@ input[type=number] {
visibility: visible;
}
}
.name {
margin-left: 21px;
}
}
.user-actions {
position: absolute;
right: 16px;
top: 40px;
visibility: hidden;
}
.selected .user-actions {
visibility: visible;
}
/* Search form */
.selected-icon {
visibility: hidden;
@@ -119,11 +137,12 @@ input[type=number] {
display: inline-block;
}
.results-wrap {
overflow-y: auto;
max-height: 550px;
}
/*@media (min-width: $screen-sm-min) {
.results-wrap {
overflow-y: auto;
max-height: 550px;
}
}*/
/* Footer */
.credits {
+21 -16
View File
@@ -1,15 +1,7 @@
{% 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 %}">
{% else %}
<!-- Has card -->
<div class="list-group-item search-result has-card{% if res.is_member %} member{% else %}not-member{% endif %}">
{% endif %}
<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 %}>
<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 -->
@@ -34,17 +26,30 @@
<span class="label label-is-active">Active</span>
{% endif %}
</div>
{% if not res.card_number_active %}
<div class="selected-icon"><span class="glyphicon glyphicon-ok"></span></div>
</label>
{% else %}
{% if not no_user_actions %}
<div class="user-actions">
<div class="btn-group">
<a href="#" class="btn btn-default{% if res.is_member == "1" %} disabled{% endif %}">Membership</a>
<a href="#" class="btn btn-default">Reg. card</a>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical"></span>
</button>
<ul class="dropdown-menu">
<li><a href="https://inside.studentersamfundet.no/index.php?page=display-user&userid={{ res.id }}" target="_blank">Edit in Inside</a></li>
</ul>
</div>
</div>
</div>
{% endif %}
</label>
{% else %}
<!-- Placeholder -->
<div class="list-group-item search-result placeholder">
<input type="radio" name="user" checked>
<span class="glyphicon glyphicon-user"></span> <em>New member</em>
<div class="name">
<input type="radio" name="user" checked>
<span class="glyphicon glyphicon-user"></span> <em>New member</em>
</div>
<div class="phone-number"><span class="glyphicon glyphicon-phone"></span> {{ number|phoneNumber }}</div>
<div class="labels">
<span class="label label-card">New card</span>
+20 -7
View File
@@ -47,7 +47,7 @@ function render_selected_user(user_data) {
context = {placeholder: true}; // dummy card
} else {
user_data = update_user_with_card_details(user_data);
context = {res: user_data, checked: true};
context = {res: user_data, checked: true, no_user_actions: true};
}
var selected_user_html = nunjucksEnv.render('search_result.html', context);
_dom.selectedUserWrap.html(selected_user_html);
@@ -132,6 +132,14 @@ function resetCardForm(reset_native) {
/* Disable submit button */
_dom.registerSubmitButton.prop('disabled', true);
}
function resetSearchForm(reset_native) {
if(reset_native) {
_dom.searchResetButton.get(0).reset();
}
/* Clear search results */
users = null;
_dom.results.html('');
}
function cardFormIsValid() {
return _.all(_.values(cardForm.fields));
@@ -217,7 +225,8 @@ $(document).ready(function(){
userIdField: $('#id_user_id'),
selectedUserWrap: $('.register-card-form--selected-user-wrap'),
toastWrap: $('.toast-wrap'),
registerResetButton: $('.register-reset-btn')
registerResetButton: $('.register-reset-btn'),
searchResetButton: $('.search-reset-btn')
};
var urls = {
insideUserApi: '/inside/user/',
@@ -251,7 +260,7 @@ $(document).ready(function(){
set_selected_user(data.results[0], true);
} else {
set_field_state(_dom.phoneNumberField, '');
set_selected_user('', true);
set_selected_user(null, true);
}
cardForm.fields.phoneNumber = true;
update_submit_button();
@@ -295,9 +304,10 @@ $(document).ready(function(){
});
/* User search as you type */
_dom.query.on('keyup', function() {
_dom.query.on('input', function() {
var val = _dom.query.val().trim();
if(val.length <= 2) {
_dom.results.html('');
return;
}
$.getJSON(urls.insideUserApi, {q: val}, function(data) {
@@ -321,7 +331,7 @@ $(document).ready(function(){
/* On search result click */
_dom.results.on('click', '.search-result input', function(e){
var label = $(this).parent().parent();
var label = $(this).parent();
var number = label.attr('data-phone-number');
var user_id = label.attr('data-user-id');
@@ -382,10 +392,13 @@ $(document).ready(function(){
}
render_selected_user();
});
/* Reset buttons */
_dom.registerResetButton.on('click', function() {
console.log('reset!');
resetCardForm();
});
_dom.searchResetButton.on('click', function() {
resetSearchForm();
});
/* Ninja add some icons to bootstrap form */
var iconMobile = '<span class="input-group-addon"><span class="glyphicon glyphicon-phone glyphicon-phone-large"></span></span>';
@@ -393,7 +406,7 @@ $(document).ready(function(){
_dom.phoneNumberField.before(iconMobile);
/* Render initial placeholder user */
var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true, res: {number: '+4748105885'}});
var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true});
_dom.selectedUserWrap.html(selected_user_html);
/* Initial focus */
+16 -36
View File
@@ -4,9 +4,7 @@ var colno = null;
var output = "";
try {
if(!runtime.contextOrFrameLookup(context, frame, "placeholder")) {
output += "\n ";
if(!runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"card_number_active", env.opts.autoescape)) {
output += "\n <label for=\"";
output += "\n <label for=\"";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"id", env.opts.autoescape), env.opts.autoescape);
output += "\" data-phone-number=\"";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"number", env.opts.autoescape), env.opts.autoescape);
@@ -21,35 +19,14 @@ else {
output += " not-member";
;
}
output += "\">\n ";
;
}
else {
output += "\n <!-- Has card -->\n <div class=\"list-group-item search-result has-card";
if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"is_member", env.opts.autoescape)) {
output += " member";
;
}
else {
output += "not-member";
;
}
output += "\">\n ";
;
}
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 += "\">\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 += ">\n <div class=\"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);
@@ -92,19 +69,22 @@ output += "\n <span class=\"label label-is-active\">Active</span>\n
;
}
output += "\n </div>\n ";
if(!runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"card_number_active", env.opts.autoescape)) {
output += "\n <div class=\"selected-icon\"><span class=\"glyphicon glyphicon-ok\"></span></div>\n </label>\n ";
if(!runtime.contextOrFrameLookup(context, frame, "no_user_actions")) {
output += "\n <div class=\"user-actions\">\n <div class=\"btn-group\">\n <a href=\"#\" class=\"btn btn-default";
if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"is_member", env.opts.autoescape) == "1") {
output += " disabled";
;
}
output += "\">Membership</a>\n <a href=\"#\" class=\"btn btn-default\">Reg. card</a>\n <div class=\"btn-group\" role=\"group\">\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"glyphicon glyphicon-option-vertical\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li><a href=\"https://inside.studentersamfundet.no/index.php?page=display-user&userid=";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"id", env.opts.autoescape), env.opts.autoescape);
output += "\" target=\"_blank\">Edit in Inside</a></li>\n </ul>\n </div>\n </div>\n </div>\n ";
;
}
output += "\n </label>\n";
;
}
else {
output += "\n </div>\n ";
;
}
output += "\n";
;
}
else {
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 += "\n <!-- Placeholder -->\n <div class=\"list-group-item search-result placeholder\">\n <div class=\"name\">\n <input type=\"radio\" name=\"user\" checked>\n <span class=\"glyphicon glyphicon-user\"></span> <em>New member</em>\n </div>\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";
;
+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