Skip to content

U
ulakbus-ui
Commit 2f909655 authored by Evren Kutar's avatar Evren Kutar
Browse files
Options

Merge branch 'Feature/#143/Formsets'

parents e2453bc9 f096780e
Show whitespace changes
Inline Side-by-side
Showing with 3054 additions and 70 deletions
Gruntfile.js
View file @ 2f909655
...@@ -62,6 +62,10 @@ module.exports = function (grunt) { ...@@ -62,6 +62,10 @@ module.exports = function (grunt) {
prod_branch: { prod_branch: {
src: ['app/components/**/*.html'], src: ['app/components/**/*.html'],
dest: 'dist/<%= grunt.branchname %>/templates.js' dest: 'dist/<%= grunt.branchname %>/templates.js'
},
dev: {
src: ['app/components/**/*.html', 'app/shared/templates/**/*.html'],
dest: 'tmp/templates.js'
} }
}, },
copy: { copy: {
...@@ -175,7 +179,7 @@ module.exports = function (grunt) { ...@@ -175,7 +179,7 @@ module.exports = function (grunt) {
watch: { watch: {
dev: { dev: {
files: ['app/**/*.js', 'app/components/**/*.html', 'index.html'], files: ['app/**/*.js', 'app/components/**/*.html', 'index.html'],
tasks: ['env:dev', 'preprocess:dev', 'karma:unit'], tasks: ['env:dev', 'preprocess:dev', 'html2js:dev'],
options: { options: {
atBegin: false atBegin: false
} }
...@@ -275,7 +279,8 @@ module.exports = function (grunt) { ...@@ -275,7 +279,8 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-preprocess'); grunt.loadNpmTasks('grunt-preprocess');
grunt.loadNpmTasks('grunt-env'); grunt.loadNpmTasks('grunt-env');
grunt.registerTask('dev', ['env:dev', 'preprocess:dev', 'connect:server', 'watch:dev']); //grunt.registerTask('dev', ['env:dev', 'preprocess:dev', 'html2js:dev', 'connect:server', 'watch:dev']);
grunt.registerTask('dev', ['env:dev', 'preprocess:dev', 'html2js:dev', 'watch:dev']);
grunt.registerTask('test', ['bower', 'karma:continuous']); grunt.registerTask('test', ['bower', 'karma:continuous']);
grunt.registerTask('i18n', ['nggettext_extract', 'nggettext_compile']); grunt.registerTask('i18n', ['nggettext_extract', 'nggettext_compile']);
grunt.registerTask('default', [ grunt.registerTask('default', [
......
app/app.js
View file @ 2f909655
...@@ -20,9 +20,11 @@ var app = angular.module( ...@@ -20,9 +20,11 @@ var app = angular.module(
'ulakbus.auth', 'ulakbus.auth',
'ulakbus.staff', 'ulakbus.staff',
'ulakbus.student', 'ulakbus.student',
'ulakbus.crud',
//'ulakbus.version',
'schemaForm', 'schemaForm',
'gettext', 'gettext',
'templates-prod' //'templates-prod'
]). ]).
/** /**
* RESTURL is the url of rest api to talk * RESTURL is the url of rest api to talk
......
app/app_routes.js
View file @ 2f909655
...@@ -10,21 +10,21 @@ app.config(['$routeProvider', function ($routeProvider) { ...@@ -10,21 +10,21 @@ app.config(['$routeProvider', function ($routeProvider) {
templateUrl: 'components/dashboard/dashboard.html', templateUrl: 'components/dashboard/dashboard.html',
controller: 'DashCtrl' controller: 'DashCtrl'
}) })
.when('/student/add', { .when('/crud/:model/add', {
templateUrl: 'components/student/student_add_template.html', templateUrl: 'components/crud/templates/add.html',
controller: 'StudentAddEditCtrl' controller: 'CRUDAddEditCtrl'
}) })
.when('/student/edit/:id', { .when('/crud/:model/edit/:id', {
templateUrl: 'components/student/student_add_template.html', templateUrl: 'components/crud/templates/edit.html',
controller: 'StudentAddEditCtrl' controller: 'CRUDAddEditCtrl'
}) })
.when('/students', { .when('/crud/:model', {
templateUrl: 'components/student/student_list_template.html', templateUrl: 'components/crud/templates/list.html',
controller: 'StudentListCtrl' controller: 'CRUDListCtrl'
}) })
.when('/student/:id', { .when('/crud/:model/:id', {
templateUrl: 'components/student/student_list_template.html', templateUrl: 'components/crud/templates/show.html',
controller: 'StudentShowCtrl' controller: 'CRUDShowCtrl'
}) })
.when('/staff/add', { .when('/staff/add', {
templateUrl: 'components/staff/templates/add.html', templateUrl: 'components/staff/templates/add.html',
......
app/components/auth/auth_controller.js
View file @ 2f909655
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
var auth = angular.module('ulakbus.auth', ['ngRoute', 'schemaForm', 'ngCookies', 'general']); var auth = angular.module('ulakbus.auth', ['ngRoute', 'schemaForm', 'ngCookies', 'general']);
auth.controller('LoginCtrl', function ($scope, $q, $timeout, $routeParams, Generator, LoginService) { auth.controller('LoginCtrl', function ($scope, $q, $timeout, $routeParams, Generator, LoginService) {
$scope.url = 'simple_login'; $scope.url = 'login';
$scope.form_params = {}; $scope.form_params = {};
$scope.form_params['clear_wf'] = 1; $scope.form_params['clear_wf'] = 1;
// todo: change simple login when api ready // todo: change simple login when api ready
......
app/components/auth/auth_service.js
View file @ 2f909655
...@@ -13,7 +13,7 @@ auth.factory('LoginService', function ($http, $rootScope, $location, $log, $cook ...@@ -13,7 +13,7 @@ auth.factory('LoginService', function ($http, $rootScope, $location, $log, $cook
var loginService = {}; var loginService = {};
loginService.login = function (url, credentials) { loginService.login = function (url, credentials) {
credentials = {login_crd: credentials, cmd: "do"}; credentials['cmd'] = "do";
return $http return $http
.post(RESTURL.url + url, credentials) .post(RESTURL.url + url, credentials)
.success(function (data, status, headers, config) { .success(function (data, status, headers, config) {
......
app/components/crud/crud_controller.js 0 → 100644
View file @ 2f909655
/**
* Copyright (C) 2015 ZetaOps Inc.
*
* This file is licensed under the GNU General Public License v3
* (GPLv3). See LICENSE.txt for details.
*/
'use strict';
var crud = angular.module('ulakbus.crud', ['ngRoute', 'schemaForm', 'formService', 'ui.bootstrap']);
/**
* CRUDAddEditCtrl is a controller
* which provide a form with form generator.
*/
crud.controller('CRUDAddEditCtrl', function ($scope, $rootScope, $location, $http, $log, $modal, Generator, $routeParams) {
$scope.url = 'crud';
$scope.form_params = {'model': $routeParams.model};
if ($routeParams.id) {
$scope.form_params['object_id'] = $routeParams.id;
$scope.form_params['cmd'] = 'edit';
}
else {
$scope.form_params['cmd'] = 'add';
}
// to start in certain part of the workflow use clear_wf=1
//$scope.form_params['clear_wf'] = 1;
// get form with generator
Generator.get_form($scope);
$scope.onSubmit = function (form) {
$scope.$broadcast('schemaFormValidate');
if (form.$valid) {
Generator.submit($scope)
.success(function(data){
$location.path("/crud");
})
.error(function(data){
$scope.message = data.title;
});
}
};
});
// todo: for single point of failure code a "get item" service and use it to
// retrieve list and single item
/**
* CRUD List Controller
*/
crud.controller('CRUDListCtrl', function ($scope, $rootScope, Generator, $routeParams) {
$scope.url = 'crud';
$scope.form_params = {"model": $routeParams.model};
// call generator's get_list func
Generator.get_list($scope)
.then(function (res) {
debugger;
var data = res.data.objects;
for (var item in data){
delete data[item].data['deleted'];
delete data[item].data['timestamp'];
}
$scope.objects = data;
$scope.model = $routeParams.model;
});
});
/**
* CRUD Show Controller
*/
crud.controller('CRUDShowCtrl', function ($scope, $rootScope, Generator, $routeParams) {
$scope.url = 'crud';
$scope.form_params = {"object_id": $routeParams.id, "cmd": "show", "model": $routeParams.model};
// call generator's get_single_itemfunc
Generator.get_single_item($scope).then(function (res) {
$scope.object = res.data.object;
})
});
\ No newline at end of file
app/components/crud/crud_controller_test.js 0 → 100644
View file @ 2f909655
/**
* Copyright (C) 2015 ZetaOps Inc.
*
* This file is licensed under the GNU General Public License v3
* (GPLv3). See LICENSE.txt for details.
*/
'use strict';
describe('crud controller module', function () {
beforeEach(module('ulakbus'));
beforeEach(module('ulakbus.crud'));
var $controller;
beforeEach(inject(function (_$controller_) {
$controller = _$controller_;
}));
describe('crud add controller', function() {
it('should get form', function() {
var $scope = {};
var controller = $controller('CRUDAddEditCtrl', { $scope: $scope });
expect($scope).not.toEqual(null);
});
});
describe('crud add controller', function () {
it('should have CRUDAddEditCtrl', inject(function ($controller) {
expect($controller).toBeDefined();
}));
});
});
\ No newline at end of file
app/components/crud/templates/add.html 0 → 100644
View file @ 2f909655
<div ng-app="ulakbus.crud">
<ng-include src="'shared/templates/add.html'"></ng-include>
</div>
\ No newline at end of file
app/components/crud/templates/edit.html 0 → 100644
View file @ 2f909655
<div ng-app="ulakbus.crud">
<div class="col-md-6">
<h1>{{ schema.title }}</h1>
<form name="formgenerated" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(formgenerated)"></form>
</div>
</div>
\ No newline at end of file
app/components/crud/templates/list.html 0 → 100644
View file @ 2f909655
<table class="table table-bordered table-responsive">
<thead>
<tr>
<!--<th>{{ objects[0].key }}</th>-->
<th ng-repeat="(key,value) in objects[0].data">{{ key }}</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="object in objects">
<!--<td><a ng-href="#/object/{{object.id}}">{{object.name}}</a></td>-->
<td ng-repeat="(key,value) in object.data">{{value}}</td>
<td>
<a ng-href="#/crud/{{model}}/edit/{{object.key}}">Edit</a><br>
<a ng-href="#/crud/{{model}}/{{object.key}}">Show</a>
</td>
</tr>
</tbody>
</table>
\ No newline at end of file
app/components/crud/templates/show.html 0 → 100644
View file @ 2f909655
<p ng-repeat="(key, value) in object"><span class="col-md-3">{{ key }}:</span>{{value}}</p>
\ No newline at end of file
app/components/version/version.js
View file @ 2f909655
...@@ -5,4 +5,4 @@ angular.module('ulakbus.version', [ ...@@ -5,4 +5,4 @@ angular.module('ulakbus.version', [
'ulakbus.version.version-directive' 'ulakbus.version.version-directive'
]) ])
.value('version', '0.1'); .value('version', '0.3');
app/index.html
View file @ 2f909655
...@@ -97,8 +97,10 @@ ...@@ -97,8 +97,10 @@
<script src="components/auth/auth_controller.js"></script> <script src="components/auth/auth_controller.js"></script>
<script src="components/auth/auth_service.js"></script> <script src="components/auth/auth_service.js"></script>
<script src="components/dashboard/dashboard_controller.js"></script> <script src="components/dashboard/dashboard_controller.js"></script>
<script src="components/crud/crud_controller.js"></script>
<script src="components/staff/staff_controller.js"></script> <script src="components/staff/staff_controller.js"></script>
<script src="components/student/student_controller.js"></script> <script src="components/student/student_controller.js"></script>
<script src="components/version/version.js"></script>
<!--<script src="bower_components/quantumui/dist/js/quantumui-nojq.js"></script>--> <!--<script src="bower_components/quantumui/dist/js/quantumui-nojq.js"></script>-->
</body> </body>
......
app/shared/directives.js
View file @ 2f909655
...@@ -20,7 +20,14 @@ app.directive('sidebar',['$location',function() { ...@@ -20,7 +20,14 @@ app.directive('sidebar',['$location',function() {
replace: true, replace: true,
scope: { scope: {
}, },
controller:function($scope){ controller:function($scope, $http, RESTURL){
$http.post(RESTURL.url+'crud/').success(function(data){
//debugger;
$scope.menuItems = data.models;
});
$scope.menuItems = 'dsadkal';
$scope.selectedMenu = 'dashboard'; $scope.selectedMenu = 'dashboard';
$scope.collapseVar = 0; $scope.collapseVar = 0;
$scope.multiCollapseVar = 0; $scope.multiCollapseVar = 0;
......
app/shared/templates/directives/sidebar.html
View file @ 2f909655
...@@ -5,44 +5,24 @@ ...@@ -5,44 +5,24 @@
<li ui-sref-active="active"> <li ui-sref-active="active">
<a ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a> <a ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li> </li>
<li ui-sref-active="active"><a href="#/staffs" translate>Staffs</a></li> <!--<li ui-sref-active="active"><a href="#/staffs" translate>Staffs</a></li>-->
<li ui-sref-active="active"><a href="#/staff/add" translate>New Staff</a></li> <!--<li ui-sref-active="active"><a href="#/staff/add" translate>New Staff</a></li>-->
<!--<li ui-sref-active="active">--> <!--<li ui-sref-active="active"-->
<!--ng-repeat="item in menuItems"><a href="#">{{ item }}</a></li>-->
<!--<a ui-sref="dashboard.chart"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span></span></a>--> <li ng-repeat="(key, item) in menuItems" ng-class="{active: collapseVar == key}">{{dropDown}}
<a href="" ng-click="check(key)"><i class="fa fa-wrench fa-fw"></i> {{ item }}<span
<!--</li>--> class="fa arrow"></span></a>
<!--<li ui-sref-active="active">--> <ul class="nav nav-second-level" collapse="collapseVar!={{key}}">
<!--<a ui-sref="dashboard.table"><i class="fa fa-table fa-fw"></i> Tables</a>--> <li ui-sref-active="active">
<!--</li>--> <a href="#/crud/{{item}}">List</a>
<!--<li ui-sref-active="active">--> </li>
<!--<a ui-sref="dashboard.form"><i class="fa fa-edit fa-fw"></i> Forms</a>--> <li ui-sref-active="active">
<!--</li>--> <a href="#/crud/{{item}}/add">Add</a>
<!--<li ng-class="{active: collapseVar==1}">{{dropDown}}--> </li>
<!--<a href="" ng-click="check(1)"><i class="fa fa-wrench fa-fw"></i> UI Elements<span--> </ul>
<!--class="fa arrow"></span></a>--> <!-- /.nav-second-level -->
<!--<ul class="nav nav-second-level" collapse="collapseVar!=1">--> </li>
<!--<li ui-sref-active="active">-->
<!--<a ui-sref="dashboard.panels-wells">Panels and Wells</a>-->
<!--</li>-->
<!--<li ui-sref-active="active">-->
<!--<a ui-sref="dashboard.buttons">Buttons</a>-->
<!--</li>-->
<!--<li ui-sref-active="active">-->
<!--<a ui-sref="dashboard.notifications">Notifications</a>-->
<!--</li>-->
<!--<li ui-sref-active="active">-->
<!--<a ui-sref="dashboard.typography">Typography</a>-->
<!--</li>-->
<!--<li ui-sref-active="active">-->
<!--<a ui-sref="dashboard.icons"> Icons</a>-->
<!--</li>-->
<!--<li ui-sref-active="active">-->
<!--<a ui-sref="dashboard.grid">Grid</a>-->
<!--</li>-->
<!--</ul>-->
<!--&lt;!&ndash; /.nav-second-level &ndash;&gt;-->
<!--</li>-->
<!--<li ng-class="{active: collapseVar==2}">--> <!--<li ng-class="{active: collapseVar==2}">-->
<!--<a href="" ng-click="check(2)"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span--> <!--<a href="" ng-click="check(2)"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span-->
<!--class="fa arrow"></span></a>--> <!--class="fa arrow"></span></a>-->
...@@ -92,6 +72,3 @@ ...@@ -92,6 +72,3 @@
</div> </div>
<!-- /.sidebar-collapse --> <!-- /.sidebar-collapse -->
</div> </div>
app/shared/views/chart.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Charts</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<div class="row">
<div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
<div class="panel-body">
<canvas id="line" class="chart chart-line chart-xl" data="line.data" labels="line.labels" legend="true"
click="line.onClick" series="line.series"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Bar Chart</div>
<div class="panel-body">
<canvas id="bar" class="chart chart-bar" data="bar.data" labels="bar.labels" series="bar.series"
options="bar.options"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Doughnut Chart</div>
<div class="panel-body">
<canvas id="doughnut" class="chart chart-doughnut chart-xs" data="donut.data" labels="donut.labels" legend="false"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Radar Chart</div>
<div class="panel-body">
<canvas id="area" class="chart chart-radar" data="radar.data" labels="radar.labels" click="onClick"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Pie Chart</div>
<div class="panel-body">
<canvas id="pie" class="chart chart-pie chart-xs" data="pie.data" labels="pie.labels"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Polar Area Chart</div>
<div class="panel-body">
<canvas id="polar" class="chart chart-polar-area" data="polar.data" labels="polar.labels"></canvas>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Dynamic Chart</div>
<div class="panel-body">
<canvas id="base" class="chart chart-base" chart-type="dynamic.type" data="dynamic.data" labels="dynamic.labels" legend="true"></canvas>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="dynamic.toggle()">Toggle</button>
</div>
</div>
\ No newline at end of file
app/shared/views/dashboard/home.html 0 → 100644
View file @ 2f909655
<div>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<stats number="6" comments="New comments!" colour="primary" type="comments"></stats>
<stats number="12" comments="New tasks!" colour="primary" type="user"></stats>
<stats number="18" comments="New orders!" colour="yellow" type="shopping-cart"></stats>
<stats number="24" comments="Support tickets!" colour="red" type="support"></stats>
</div>
<!-- /.panel -->
<div class="row">
<div class="col-lg-8">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-clock-o fa-fw"></i> Responsive Timeline
</div>
<!-- /.panel-heading -->
<timeline></timeline>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bell fa-fw"></i> Notifications Panel
</div>
<!-- /.panel-heading -->
<notifications></notifications>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<chat></chat>
<!-- /.panel .chat-panel -->
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
</div>
app/shared/views/dashboard/main.html 0 → 100644
View file @ 2f909655
<div id="wrapper">
<!-- Navigation -->
<header></header>
<!-- /.navbar-top-links -->
<!-- /.navbar-static-side -->
<div id="page-wrapper" style="min-height: 561px;">
<div ui-view></div>
</div>
<!-- /#page-wrapper -->
</div>
app/shared/views/form.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Forms</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Form Elements
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<label>Text Input with Placeholder</label>
<input class="form-control" placeholder="Enter text">
</div>
<div class="form-group">
<label>Static Control</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label>File input</label>
<input type="file">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label>Checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" value="">Checkbox 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Checkbox 2
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Checkbox 3
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes</label>
<label class="checkbox-inline">
<input type="checkbox">1
</label>
<label class="checkbox-inline">
<input type="checkbox">2
</label>
<label class="checkbox-inline">
<input type="checkbox">3
</label>
</div>
<div class="form-group">
<label>Radio Buttons</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Radio 2
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">Radio 3
</label>
</div>
</div>
<div class="form-group">
<label>Inline Radio Buttons</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline" id="optionsRadiosInline1" value="option1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline" id="optionsRadiosInline3" value="option3">3
</label>
</div>
<div class="form-group">
<label>Selects</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Multiple Selects</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit Button</button>
<button type="reset" class="btn btn-default">Reset Button</button>
</form>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<h1>Disabled Form States</h1>
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledSelect">Disabled input</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input" disabled>
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Disabled Checkbox
</label>
</div>
<button type="submit" class="btn btn-primary">Disabled Button</button>
</fieldset>
</form>
<h1>Form Validation States</h1>
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>
</form>
<h1>Input Groups</h1>
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-eur"></i>
</span>
<input type="text" class="form-control" placeholder="Font Awesome Icon">
</div>
<div class="form-group input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
<!-- /.col-lg-6 (nested) -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
\ No newline at end of file
app/shared/views/pages/blank.html 0 → 100644
View file @ 2f909655
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blank</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
\ No newline at end of file
app/shared/views/pages/login.html 0 → 100644
View file @ 2f909655
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<a ui-sref="dashboard.home" class="btn btn-lg btn-success btn-block">Login</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
app/shared/views/table.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup>
</td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
<div class="well">
<h4>DataTables Usage Information</h4>
<p>DataTables is a very flexible, advanced tables plugin for jQuery. In SB Admin, we are using a specialized version of DataTables built for Bootstrap 3. We have also customized the table headings to use Font Awesome icons in place of images. For complete documentation on DataTables, visit their website at <a target="_blank" href="https://datatables.net/">https://datatables.net/</a>.</p>
<a class="btn btn-default btn-lg btn-block" target="_blank" href="https://datatables.net/">View DataTables Documentation</a>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Kitchen Sink
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Basic Table
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Striped Rows
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Bordered Table
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive table-bordered">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Hover Rows
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Context Classes
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="info">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr class="danger">
<td>4</td>
<td>John</td>
<td>Smith</td>
<td>@jsmith</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
\ No newline at end of file
app/shared/views/ui-elements/buttons.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Buttons</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Default Buttons
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<h4>Normal Buttons</h4>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<br>
<h4>Disabled Buttons</h4>
<p>
<button type="button" class="btn btn-default disabled">Default</button>
<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-link disabled">Link</button>
</p>
<br>
<h4>Button Sizes</h4>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Mini button</button>
<br>
<br>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</p>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
Circle Icon Buttons with Font Awesome Icons
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<h4>Normal Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
</button>
<button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-info btn-circle"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-warning btn-circle"><i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-danger btn-circle"><i class="fa fa-heart"></i>
</button>
<br>
<br>
<h4>Large Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle btn-lg"><i class="fa fa-list"></i>
</button>
<button type="button" class="btn btn-success btn-circle btn-lg"><i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-info btn-circle btn-lg"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-warning btn-circle btn-lg"><i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-danger btn-circle btn-lg"><i class="fa fa-heart"></i>
</button>
<br>
<br>
<h4>Extra Large Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle btn-xl"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-list"></i>
</button>
<button type="button" class="btn btn-success btn-circle btn-xl"><i class="fa fa-link"></i>
</button>
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-warning btn-circle btn-xl"><i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-danger btn-circle btn-xl"><i class="fa fa-heart"></i>
</button>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Outline Buttons with Smooth Transition
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<h4>Outline Buttons</h4>
<p>
<button type="button" class="btn btn-outline btn-default">Default</button>
<button type="button" class="btn btn-outline btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-success">Success</button>
<button type="button" class="btn btn-outline btn-info">Info</button>
<button type="button" class="btn btn-outline btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-link">Link</button>
</p>
<br>
<h4>Outline Button Sizes</h4>
<p>
<button type="button" class="btn btn-outline btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-outline btn-primary">Default button</button>
<button type="button" class="btn btn-outline btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline btn-primary btn-xs">Mini button</button>
<br>
<br>
<button type="button" class="btn btn-outline btn-primary btn-lg btn-block">Block level button</button>
</p>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
Social Buttons with Font Awesome Icons
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<h4>Social Buttons</h4>
<a class="btn btn-block btn-social btn-bitbucket">
<i class="fa fa-bitbucket"></i> Sign in with Bitbucket
</a>
<a class="btn btn-block btn-social btn-dropbox">
<i class="fa fa-dropbox"></i> Sign in with Dropbox
</a>
<a class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<a class="btn btn-block btn-social btn-flickr">
<i class="fa fa-flickr"></i> Sign in with Flickr
</a>
<a class="btn btn-block btn-social btn-github">
<i class="fa fa-github"></i> Sign in with GitHub
</a>
<a class="btn btn-block btn-social btn-google-plus">
<i class="fa fa-google-plus"></i> Sign in with Google
</a>
<a class="btn btn-block btn-social btn-instagram">
<i class="fa fa-instagram"></i> Sign in with Instagram
</a>
<a class="btn btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin"></i> Sign in with LinkedIn
</a>
<a class="btn btn-block btn-social btn-pinterest">
<i class="fa fa-pinterest"></i> Sign in with Pinterest
</a>
<a class="btn btn-block btn-social btn-tumblr">
<i class="fa fa-tumblr"></i> Sign in with Tumblr
</a>
<a class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Sign in with Twitter
</a>
<a class="btn btn-block btn-social btn-vk">
<i class="fa fa-vk"></i> Sign in with VK
</a>
<hr>
<div class="text-center">
<a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
<a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
<a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
<a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
<a class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
<a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-pinterest"><i class="fa fa-pinterest"></i></a>
<a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
<a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
app/shared/views/ui-elements/grid.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Grid</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3>Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (&lt;768px)</small>
</th>
<th>
Small devices
<small>Tablets (&ge;768px)</small>
</th>
<th>
Medium devices
<small>Desktops (&ge;992px)</small>
</th>
<th>
Large devices
<small>Desktops (&ge;1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Max container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th>Class prefix</th>
<td>
<code>.col-xs-</code>
</td>
<td>
<code>.col-sm-</code>
</td>
<td>
<code>.col-md-</code>
</td>
<td>
<code>.col-lg-</code>
</td>
</tr>
<tr>
<th># of columns</th>
<td colspan="4">12</td>
</tr>
<tr>
<th>Max column width</th>
<td class="text-muted">Auto</td>
<td>60px</td>
<td>78px</td>
<td>95px</td>
</tr>
<tr>
<th>Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr>
<tr>
<th>Nestable</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th>Offsets</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th>Column ordering</th>
<td colspan="4">Yes</td>
</tr>
</tbody>
</table>
</div>
<p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
<code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a
<code>.col-lg-</code> class is not present.</p>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3>Example: Stacked-to-horizontal</h3>
<p>Using a single set of
<code>.col-md-*</code> grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any
<code>.row</code>.</p>
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3>Example: Mobile and desktop</h3>
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding
<code>.col-xs-*</code>
<code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="row show-grid">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3>Example: Mobile, tablet, desktops</h3>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet
<code>.col-sm-*</code> classes.</p>
<div class="row show-grid">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3 id="grid-responsive-resets">Responsive column resets</h3>
<p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a
<code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p>
<div class="row show-grid">
<div class="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
<br>Resize your viewport or check it out on your phone for an example.
</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using
<code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by
<code>*</code> columns. For example,
<code>.col-md-offset-4</code> moves
<code>.col-md-4</code> over four columns.</p>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row show-grid">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row show-grid">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3 id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new
<code>.row</code> and set of
<code>.col-md-*</code> columns within an existing
<code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row show-grid">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with
<code>.col-md-push-*</code> and
<code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
app/shared/views/ui-elements/icons.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Icons</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
All available icons
</div>
<div class="panel-body">
<div class="row">
<div class="fa col-lg-3">
<p class="fa fa-glass"> fa-glass </p><br/>
<p class="fa fa-music"> fa-music </p><br/>
<p class="fa fa-search"> fa-search </p><br/>
<p class="fa fa-envelope-o"> fa-envelope-o </p><br/>
<p class="fa fa-heart"> fa-heart </p><br/>
<p class="fa fa-star"> fa-star </p><br/>
<p class="fa fa-star-o"> fa-star-o </p><br/>
<p class="fa fa-user"> fa-user </p><br/>
<p class="fa fa-film"> fa-film </p><br/>
<p class="fa fa-th-large"> fa-th-large </p><br/>
<p class="fa fa-th"> fa-th </p><br/>
<p class="fa fa-th-list"> fa-th-list </p><br/>
<p class="fa fa-check"> fa-check </p><br/>
<p class="fa fa-times"> fa-times </p><br/>
<p class="fa fa-search-plus"> fa-search-plus </p><br/>
<p class="fa fa-search-minus"> fa-search-minus </p><br/>
<p class="fa fa-power-off"> fa-power-off </p><br/>
<p class="fa fa-signal"> fa-signal </p><br/>
<p class="fa fa-gear"> fa-gear </p><br/>
<p class="fa fa-cog"> fa-cog </p><br/>
<p class="fa fa-trash-o"> fa-trash-o </p><br/>
<p class="fa fa-home"> fa-home </p><br/>
<p class="fa fa-file-o"> fa-file-o </p><br/>
<p class="fa fa-clock-o"> fa-clock-o </p><br/>
<p class="fa fa-road"> fa-road </p><br/>
<p class="fa fa-download"> fa-download </p><br/>
<p class="fa fa-arrow-circle-o-down"> fa-arrow-circle-o-down </p><br/>
<p class="fa fa-arrow-circle-o-up"> fa-arrow-circle-o-up </p><br/>
<p class="fa fa-inbox"> fa-inbox </p><br/>
<p class="fa fa-play-circle-o"> fa-play-circle-o </p><br/>
<p class="fa fa-rotate-right"> fa-rotate-right </p><br/>
<p class="fa fa-repeat"> fa-repeat </p><br/>
<p class="fa fa-refresh"> fa-refresh </p><br/>
<p class="fa fa-list-alt"> fa-list-alt </p><br/>
<p class="fa fa-lock"> fa-lock </p><br/>
<p class="fa fa-flag"> fa-flag </p><br/>
<p class="fa fa-headphones"> fa-headphones </p><br/>
<p class="fa fa-volume-off"> fa-volume-off </p><br/>
<p class="fa fa-volume-down"> fa-volume-down </p><br/>
<p class="fa fa-volume-up"> fa-volume-up </p><br/>
<p class="fa fa-qrcode"> fa-qrcode </p><br/>
<p class="fa fa-barcode"> fa-barcode </p><br/>
<p class="fa fa-tag"> fa-tag </p><br/>
<p class="fa fa-tags"> fa-tags </p><br/>
<p class="fa fa-book"> fa-book </p><br/>
<p class="fa fa-bookmark"> fa-bookmark </p><br/>
<p class="fa fa-print"> fa-print </p><br/>
<p class="fa fa-camera"> fa-camera </p><br/>
<p class="fa fa-font"> fa-font </p><br/>
<p class="fa fa-bold"> fa-bold </p><br/>
<p class="fa fa-italic"> fa-italic </p><br/>
<p class="fa fa-text-height"> fa-text-height </p><br/>
<p class="fa fa-text-width"> fa-text-width </p><br/>
<p class="fa fa-align-left"> fa-align-left </p><br/>
<p class="fa fa-align-center"> fa-align-center </p><br/>
<p class="fa fa-align-right"> fa-align-right </p><br/>
<p class="fa fa-align-justify"> fa-align-justify </p><br/>
<p class="fa fa-list"> fa-list </p><br/>
<p class="fa fa-dedent"> fa-dedent </p><br/>
<p class="fa fa-outdent"> fa-outdent </p><br/>
<p class="fa fa-indent"> fa-indent </p><br/>
<p class="fa fa-video-camera"> fa-video-camera </p><br/>
<p class="fa fa-photo"> fa-photo </p><br/>
<p class="fa fa-image"> fa-image </p><br/>
<p class="fa fa-picture-o"> fa-picture-o </p><br/>
<p class="fa fa-pencil"> fa-pencil </p><br/>
<p class="fa fa-map-marker"> fa-map-marker </p><br/>
<p class="fa fa-adjust"> fa-adjust </p><br/>
<p class="fa fa-tint"> fa-tint </p><br/>
<p class="fa fa-edit"> fa-edit </p><br/>
<p class="fa fa-pencil-square-o"> fa-pencil-square-o </p><br/>
<p class="fa fa-share-square-o"> fa-share-square-o </p><br/>
<p class="fa fa-check-square-o"> fa-check-square-o </p><br/>
<p class="fa fa-arrows"> fa-arrows </p><br/>
<p class="fa fa-step-backward"> fa-step-backward </p><br/>
<p class="fa fa-fast-backward"> fa-fast-backward </p><br/>
<p class="fa fa-backward"> fa-backward </p><br/>
<p class="fa fa-play"> fa-play </p><br/>
<p class="fa fa-pause"> fa-pause </p><br/>
<p class="fa fa-stop"> fa-stop </p><br/>
<p class="fa fa-forward"> fa-forward </p><br/>
<p class="fa fa-fast-forward"> fa-fast-forward </p><br/>
<p class="fa fa-step-forward"> fa-step-forward </p><br/>
<p class="fa fa-eject"> fa-eject </p><br/>
<p class="fa fa-chevron-left"> fa-chevron-left </p><br/>
<p class="fa fa-chevron-right"> fa-chevron-right </p><br/>
<p class="fa fa-plus-circle"> fa-plus-circle </p><br/>
<p class="fa fa-minus-circle"> fa-minus-circle </p><br/>
<p class="fa fa-times-circle"> fa-times-circle </p><br/>
<p class="fa fa-check-circle"> fa-check-circle </p><br/>
<p class="fa fa-question-circle"> fa-question-circle </p><br/>
<p class="fa fa-info-circle"> fa-info-circle </p><br/>
<p class="fa fa-crosshairs"> fa-crosshairs </p><br/>
<p class="fa fa-times-circle-o"> fa-times-circle-o </p><br/>
<p class="fa fa-check-circle-o"> fa-check-circle-o </p><br/>
<p class="fa fa-ban"> fa-ban </p><br/>
<p class="fa fa-arrow-left"> fa-arrow-left </p><br/>
<p class="fa fa-arrow-right"> fa-arrow-right </p><br/>
<p class="fa fa-arrow-up"> fa-arrow-up </p><br/>
<p class="fa fa-arrow-down"> fa-arrow-down </p><br/>
<p class="fa fa-mail-forward"> fa-mail-forward </p><br/>
<p class="fa fa-share"> fa-share </p><br/>
<p class="fa fa-expand"> fa-expand </p><br/>
<p class="fa fa-compress"> fa-compress </p><br/>
<p class="fa fa-plus"> fa-plus </p><br/>
<p class="fa fa-minus"> fa-minus </p><br/>
<p class="fa fa-asterisk"> fa-asterisk </p><br/>
<p class="fa fa-exclamation-circle"> fa-exclamation-circle </p><br/>
<p class="fa fa-gift"> fa-gift </p><br/>
<p class="fa fa-leaf"> fa-leaf </p><br/>
<p class="fa fa-fire"> fa-fire </p><br/>
<p class="fa fa-eye"> fa-eye </p><br/>
<p class="fa fa-eye-slash"> fa-eye-slash </p><br/>
<p class="fa fa-warning"> fa-warning </p><br/>
<p class="fa fa-exclamation-triangle"> fa-exclamation-triangle </p><br/>
<p class="fa fa-plane"> fa-plane </p><br/>
<p class="fa fa-calendar"> fa-calendar </p><br/>
<p class="fa fa-random"> fa-random </p><br/>
<p class="fa fa-comment"> fa-comment </p><br/>
<p class="fa fa-magnet"> fa-magnet </p><br/>
<p class="fa fa-chevron-up"> fa-chevron-up </p><br/>
<p class="fa fa-chevron-down"> fa-chevron-down </p><br/>
<p class="fa fa-retweet"> fa-retweet </p><br/>
<p class="fa fa-shopping-cart"> fa-shopping-cart </p><br/>
<p class="fa fa-folder"> fa-folder </p><br/>
<p class="fa fa-folder-open"> fa-folder-open </p><br/>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="fa col-lg-3">
<p class="fa fa-arrows-v"> fa-arrows-v </p><br/>
<p class="fa fa-arrows-h"> fa-arrows-h </p><br/>
<p class="fa fa-bar-chart-o"> fa-bar-chart-o </p><br/>
<p class="fa fa-twitter-square"> fa-twitter-square </p><br/>
<p class="fa fa-facebook-square"> fa-facebook-square </p><br/>
<p class="fa fa-camera-retro"> fa-camera-retro </p><br/>
<p class="fa fa-key"> fa-key </p><br/>
<p class="fa fa-gears"> fa-gears </p><br/>
<p class="fa fa-cogs"> fa-cogs </p><br/>
<p class="fa fa-comments"> fa-comments </p><br/>
<p class="fa fa-thumbs-o-up"> fa-thumbs-o-up </p><br/>
<p class="fa fa-thumbs-o-down"> fa-thumbs-o-down </p><br/>
<p class="fa fa-star-half"> fa-star-half </p><br/>
<p class="fa fa-heart-o"> fa-heart-o </p><br/>
<p class="fa fa-sign-out"> fa-sign-out </p><br/>
<p class="fa fa-linkedin-square"> fa-linkedin-square </p><br/>
<p class="fa fa-thumb-tack"> fa-thumb-tack </p><br/>
<p class="fa fa-external-link"> fa-external-link </p><br/>
<p class="fa fa-sign-in"> fa-sign-in </p><br/>
<p class="fa fa-trophy"> fa-trophy </p><br/>
<p class="fa fa-github-square"> fa-github-square </p><br/>
<p class="fa fa-upload"> fa-upload </p><br/>
<p class="fa fa-lemon-o"> fa-lemon-o </p><br/>
<p class="fa fa-phone"> fa-phone </p><br/>
<p class="fa fa-square-o"> fa-square-o </p><br/>
<p class="fa fa-bookmark-o"> fa-bookmark-o </p><br/>
<p class="fa fa-phone-square"> fa-phone-square </p><br/>
<p class="fa fa-twitter"> fa-twitter </p><br/>
<p class="fa fa-facebook"> fa-facebook </p><br/>
<p class="fa fa-github"> fa-github </p><br/>
<p class="fa fa-unlock"> fa-unlock </p><br/>
<p class="fa fa-credit-card"> fa-credit-card </p><br/>
<p class="fa fa-rss"> fa-rss </p><br/>
<p class="fa fa-hdd-o"> fa-hdd-o </p><br/>
<p class="fa fa-bullhorn"> fa-bullhorn </p><br/>
<p class="fa fa-bell"> fa-bell </p><br/>
<p class="fa fa-certificate"> fa-certificate </p><br/>
<p class="fa fa-hand-o-right"> fa-hand-o-right </p><br/>
<p class="fa fa-hand-o-left"> fa-hand-o-left </p><br/>
<p class="fa fa-hand-o-up"> fa-hand-o-up </p><br/>
<p class="fa fa-hand-o-down"> fa-hand-o-down </p><br/>
<p class="fa fa-arrow-circle-left"> fa-arrow-circle-left </p><br/>
<p class="fa fa-arrow-circle-right"> fa-arrow-circle-right </p><br/>
<p class="fa fa-arrow-circle-up"> fa-arrow-circle-up </p><br/>
<p class="fa fa-arrow-circle-down"> fa-arrow-circle-down </p><br/>
<p class="fa fa-globe"> fa-globe </p><br/>
<p class="fa fa-wrench"> fa-wrench </p><br/>
<p class="fa fa-tasks"> fa-tasks </p><br/>
<p class="fa fa-filter"> fa-filter </p><br/>
<p class="fa fa-briefcase"> fa-briefcase </p><br/>
<p class="fa fa-arrows-alt"> fa-arrows-alt </p><br/>
<p class="fa fa-group"> fa-group </p><br/>
<p class="fa fa-users"> fa-users </p><br/>
<p class="fa fa-chain"> fa-chain </p><br/>
<p class="fa fa-link"> fa-link </p><br/>
<p class="fa fa-cloud"> fa-cloud </p><br/>
<p class="fa fa-flask"> fa-flask </p><br/>
<p class="fa fa-cut"> fa-cut </p><br/>
<p class="fa fa-scissors"> fa-scissors </p><br/>
<p class="fa fa-copy"> fa-copy </p><br/>
<p class="fa fa-files-o"> fa-files-o </p><br/>
<p class="fa fa-paperclip"> fa-paperclip </p><br/>
<p class="fa fa-save"> fa-save </p><br/>
<p class="fa fa-floppy-o"> fa-floppy-o </p><br/>
<p class="fa fa-square"> fa-square </p><br/>
<p class="fa fa-navicon"> fa-navicon </p><br/>
<p class="fa fa-reorder"> fa-reorder </p><br/>
<p class="fa fa-bars"> fa-bars </p><br/>
<p class="fa fa-list-ul"> fa-list-ul </p><br/>
<p class="fa fa-list-ol"> fa-list-ol </p><br/>
<p class="fa fa-strikethrough"> fa-strikethrough </p><br/>
<p class="fa fa-underline"> fa-underline </p><br/>
<p class="fa fa-table"> fa-table </p><br/>
<p class="fa fa-magic"> fa-magic </p><br/>
<p class="fa fa-truck"> fa-truck </p><br/>
<p class="fa fa-pinterest"> fa-pinterest </p><br/>
<p class="fa fa-pinterest-square"> fa-pinterest-square </p><br/>
<p class="fa fa-google-plus-square"> fa-google-plus-square </p><br/>
<p class="fa fa-google-plus"> fa-google-plus </p><br/>
<p class="fa fa-money"> fa-money </p><br/>
<p class="fa fa-caret-down"> fa-caret-down </p><br/>
<p class="fa fa-caret-up"> fa-caret-up </p><br/>
<p class="fa fa-caret-left"> fa-caret-left </p><br/>
<p class="fa fa-caret-right"> fa-caret-right </p><br/>
<p class="fa fa-columns"> fa-columns </p><br/>
<p class="fa fa-unsorted"> fa-unsorted </p><br/>
<p class="fa fa-sort"> fa-sort </p><br/>
<p class="fa fa-sort-down"> fa-sort-down </p><br/>
<p class="fa fa-sort-desc"> fa-sort-desc </p><br/>
<p class="fa fa-sort-up"> fa-sort-up </p><br/>
<p class="fa fa-sort-asc"> fa-sort-asc </p><br/>
<p class="fa fa-envelope"> fa-envelope </p><br/>
<p class="fa fa-linkedin"> fa-linkedin </p><br/>
<p class="fa fa-rotate-left"> fa-rotate-left </p><br/>
<p class="fa fa-undo"> fa-undo </p><br/>
<p class="fa fa-legal"> fa-legal </p><br/>
<p class="fa fa-gavel"> fa-gavel </p><br/>
<p class="fa fa-dashboard"> fa-dashboard </p><br/>
<p class="fa fa-tachometer"> fa-tachometer </p><br/>
<p class="fa fa-comment-o"> fa-comment-o </p><br/>
<p class="fa fa-comments-o"> fa-comments-o </p><br/>
<p class="fa fa-flash"> fa-flash </p><br/>
<p class="fa fa-bolt"> fa-bolt </p><br/>
<p class="fa fa-sitemap"> fa-sitemap </p><br/>
<p class="fa fa-umbrella"> fa-umbrella </p><br/>
<p class="fa fa-paste"> fa-paste </p><br/>
<p class="fa fa-clipboard"> fa-clipboard </p><br/>
<p class="fa fa-lightbulb-o"> fa-lightbulb-o </p><br/>
<p class="fa fa-exchange"> fa-exchange </p><br/>
<p class="fa fa-cloud-download"> fa-cloud-download </p><br/>
<p class="fa fa-cloud-upload"> fa-cloud-upload </p><br/>
<p class="fa fa-user-md"> fa-user-md </p><br/>
<p class="fa fa-stethoscope"> fa-stethoscope </p><br/>
<p class="fa fa-suitcase"> fa-suitcase </p><br/>
<p class="fa fa-bell-o"> fa-bell-o </p><br/>
<p class="fa fa-coffee"> fa-coffee </p><br/>
<p class="fa fa-cutlery"> fa-cutlery </p><br/>
<p class="fa fa-file-text-o"> fa-file-text-o </p><br/>
<p class="fa fa-building-o"> fa-building-o </p><br/>
<p class="fa fa-hospital-o"> fa-hospital-o </p><br/>
<p class="fa fa-ambulance"> fa-ambulance </p><br/>
<p class="fa fa-medkit"> fa-medkit </p><br/>
<p class="fa fa-fighter-jet"> fa-fighter-jet </p><br/>
<p class="fa fa-beer"> fa-beer </p><br/>
<p class="fa fa-h-square"> fa-h-square </p><br/>
<p class="fa fa-plus-square"> fa-plus-square </p><br/>
</div>
<div class="fa col-lg-3">
<p class="fa fa-angle-double-left"> fa-angle-double-left </p><br/>
<p class="fa fa-angle-double-right"> fa-angle-double-right </p><br/>
<p class="fa fa-angle-double-up"> fa-angle-double-up </p><br/>
<p class="fa fa-angle-double-down"> fa-angle-double-down </p><br/>
<p class="fa fa-angle-left"> fa-angle-left </p><br/>
<p class="fa fa-angle-right"> fa-angle-right </p><br/>
<p class="fa fa-angle-up"> fa-angle-up </p><br/>
<p class="fa fa-angle-down"> fa-angle-down </p><br/>
<p class="fa fa-desktop"> fa-desktop </p><br/>
<p class="fa fa-laptop"> fa-laptop </p><br/>
<p class="fa fa-tablet"> fa-tablet </p><br/>
<p class="fa fa-mobile-phone"> fa-mobile-phone </p><br/>
<p class="fa fa-mobile"> fa-mobile </p><br/>
<p class="fa fa-circle-o"> fa-circle-o </p><br/>
<p class="fa fa-quote-left"> fa-quote-left </p><br/>
<p class="fa fa-quote-right"> fa-quote-right </p><br/>
<p class="fa fa-spinner"> fa-spinner </p><br/>
<p class="fa fa-circle"> fa-circle </p><br/>
<p class="fa fa-mail-reply"> fa-mail-reply </p><br/>
<p class="fa fa-reply"> fa-reply </p><br/>
<p class="fa fa-github-alt"> fa-github-alt </p><br/>
<p class="fa fa-folder-o"> fa-folder-o </p><br/>
<p class="fa fa-folder-open-o"> fa-folder-open-o </p><br/>
<p class="fa fa-smile-o"> fa-smile-o </p><br/>
<p class="fa fa-frown-o"> fa-frown-o </p><br/>
<p class="fa fa-meh-o"> fa-meh-o </p><br/>
<p class="fa fa-gamepad"> fa-gamepad </p><br/>
<p class="fa fa-keyboard-o"> fa-keyboard-o </p><br/>
<p class="fa fa-flag-o"> fa-flag-o </p><br/>
<p class="fa fa-flag-checkered"> fa-flag-checkered </p><br/>
<p class="fa fa-terminal"> fa-terminal </p><br/>
<p class="fa fa-code"> fa-code </p><br/>
<p class="fa fa-mail-reply-all"> fa-mail-reply-all </p><br/>
<p class="fa fa-reply-all"> fa-reply-all </p><br/>
<p class="fa fa-star-half-empty"> fa-star-half-empty </p><br/>
<p class="fa fa-star-half-full"> fa-star-half-full </p><br/>
<p class="fa fa-star-half-o"> fa-star-half-o </p><br/>
<p class="fa fa-location-arrow"> fa-location-arrow </p><br/>
<p class="fa fa-crop"> fa-crop </p><br/>
<p class="fa fa-code-fork"> fa-code-fork </p><br/>
<p class="fa fa-unlink"> fa-unlink </p><br/>
<p class="fa fa-chain-broken"> fa-chain-broken </p><br/>
<p class="fa fa-question"> fa-question </p><br/>
<p class="fa fa-info"> fa-info </p><br/>
<p class="fa fa-exclamation"> fa-exclamation </p><br/>
<p class="fa fa-superscript"> fa-superscript </p><br/>
<p class="fa fa-subscript"> fa-subscript </p><br/>
<p class="fa fa-eraser"> fa-eraser </p><br/>
<p class="fa fa-puzzle-piece"> fa-puzzle-piece </p><br/>
<p class="fa fa-microphone"> fa-microphone </p><br/>
<p class="fa fa-microphone-slash"> fa-microphone-slash </p><br/>
<p class="fa fa-shield"> fa-shield </p><br/>
<p class="fa fa-calendar-o"> fa-calendar-o </p><br/>
<p class="fa fa-fire-extinguisher"> fa-fire-extinguisher </p><br/>
<p class="fa fa-rocket"> fa-rocket </p><br/>
<p class="fa fa-maxcdn"> fa-maxcdn </p><br/>
<p class="fa fa-chevron-circle-left"> fa-chevron-circle-left </p><br/>
<p class="fa fa-chevron-circle-right"> fa-chevron-circle-right </p><br/>
<p class="fa fa-chevron-circle-up"> fa-chevron-circle-up </p><br/>
<p class="fa fa-chevron-circle-down"> fa-chevron-circle-down </p><br/>
<p class="fa fa-html5"> fa-html5 </p><br/>
<p class="fa fa-css3"> fa-css3 </p><br/>
<p class="fa fa-anchor"> fa-anchor </p><br/>
<p class="fa fa-unlock-alt"> fa-unlock-alt </p><br/>
<p class="fa fa-bullseye"> fa-bullseye </p><br/>
<p class="fa fa-ellipsis-h"> fa-ellipsis-h </p><br/>
<p class="fa fa-ellipsis-v"> fa-ellipsis-v </p><br/>
<p class="fa fa-rss-square"> fa-rss-square </p><br/>
<p class="fa fa-play-circle"> fa-play-circle </p><br/>
<p class="fa fa-ticket"> fa-ticket </p><br/>
<p class="fa fa-minus-square"> fa-minus-square </p><br/>
<p class="fa fa-minus-square-o"> fa-minus-square-o </p><br/>
<p class="fa fa-level-up"> fa-level-up </p><br/>
<p class="fa fa-level-down"> fa-level-down </p><br/>
<p class="fa fa-check-square"> fa-check-square </p><br/>
<p class="fa fa-pencil-square"> fa-pencil-square </p><br/>
<p class="fa fa-external-link-square"> fa-external-link-square </p><br/>
<p class="fa fa-share-square"> fa-share-square </p><br/>
<p class="fa fa-compass"> fa-compass </p><br/>
<p class="fa fa-toggle-down"> fa-toggle-down </p><br/>
<p class="fa fa-caret-square-o-down"> fa-caret-square-o-down </p><br/>
<p class="fa fa-toggle-up"> fa-toggle-up </p><br/>
<p class="fa fa-caret-square-o-up"> fa-caret-square-o-up </p><br/>
<p class="fa fa-toggle-right"> fa-toggle-right </p><br/>
<p class="fa fa-caret-square-o-right"> fa-caret-square-o-right </p><br/>
<p class="fa fa-euro"> fa-euro </p><br/>
<p class="fa fa-eur"> fa-eur </p><br/>
<p class="fa fa-gbp"> fa-gbp </p><br/>
<p class="fa fa-dollar"> fa-dollar </p><br/>
<p class="fa fa-usd"> fa-usd </p><br/>
<p class="fa fa-rupee"> fa-rupee </p><br/>
<p class="fa fa-inr"> fa-inr </p><br/>
<p class="fa fa-cny"> fa-cny </p><br/>
<p class="fa fa-rmb"> fa-rmb </p><br/>
<p class="fa fa-yen"> fa-yen </p><br/>
<p class="fa fa-jpy"> fa-jpy </p><br/>
<p class="fa fa-ruble"> fa-ruble </p><br/>
<p class="fa fa-rouble"> fa-rouble </p><br/>
<p class="fa fa-rub"> fa-rub </p><br/>
<p class="fa fa-won"> fa-won </p><br/>
<p class="fa fa-krw"> fa-krw </p><br/>
<p class="fa fa-bitcoin"> fa-bitcoin </p><br/>
<p class="fa fa-btc"> fa-btc </p><br/>
<p class="fa fa-file"> fa-file </p><br/>
<p class="fa fa-file-text"> fa-file-text </p><br/>
<p class="fa fa-sort-alpha-asc"> fa-sort-alpha-asc </p><br/>
<p class="fa fa-sort-alpha-desc"> fa-sort-alpha-desc </p><br/>
<p class="fa fa-sort-amount-asc"> fa-sort-amount-asc </p><br/>
<p class="fa fa-sort-amount-desc"> fa-sort-amount-desc </p><br/>
<p class="fa fa-sort-numeric-asc"> fa-sort-numeric-asc </p><br/>
<p class="fa fa-sort-numeric-desc"> fa-sort-numeric-desc </p><br/>
<p class="fa fa-thumbs-up"> fa-thumbs-up </p><br/>
<p class="fa fa-thumbs-down"> fa-thumbs-down </p><br/>
<p class="fa fa-youtube-square"> fa-youtube-square </p><br/>
<p class="fa fa-youtube"> fa-youtube </p><br/>
<p class="fa fa-xing"> fa-xing </p><br/>
<p class="fa fa-xing-square"> fa-xing-square </p><br/>
<p class="fa fa-youtube-play"> fa-youtube-play </p><br/>
<p class="fa fa-dropbox"> fa-dropbox </p><br/>
<p class="fa fa-stack-overflow"> fa-stack-overflow </p><br/>
<p class="fa fa-instagram"> fa-instagram </p><br/>
<p class="fa fa-flickr"> fa-flickr </p><br/>
<p class="fa fa-adn"> fa-adn </p><br/>
<p class="fa fa-bitbucket"> fa-bitbucket </p><br/>
<p class="fa fa-bitbucket-square"> fa-bitbucket-square </p><br/>
<p class="fa fa-tumblr"> fa-tumblr </p><br/>
</div>
<div class="fa col-lg-3">
<p class="fa fa-tumblr-square"> fa-tumblr-square </p><br/>
<p class="fa fa-long-arrow-down"> fa-long-arrow-down </p><br/>
<p class="fa fa-long-arrow-up"> fa-long-arrow-up </p><br/>
<p class="fa fa-long-arrow-left"> fa-long-arrow-left </p><br/>
<p class="fa fa-long-arrow-right"> fa-long-arrow-right </p><br/>
<p class="fa fa-apple"> fa-apple </p><br/>
<p class="fa fa-windows"> fa-windows </p><br/>
<p class="fa fa-android"> fa-android </p><br/>
<p class="fa fa-linux"> fa-linux </p><br/>
<p class="fa fa-dribbble"> fa-dribbble </p><br/>
<p class="fa fa-skype"> fa-skype </p><br/>
<p class="fa fa-foursquare"> fa-foursquare </p><br/>
<p class="fa fa-trello"> fa-trello </p><br/>
<p class="fa fa-female"> fa-female </p><br/>
<p class="fa fa-male"> fa-male </p><br/>
<p class="fa fa-gittip"> fa-gittip </p><br/>
<p class="fa fa-sun-o"> fa-sun-o </p><br/>
<p class="fa fa-moon-o"> fa-moon-o </p><br/>
<p class="fa fa-archive"> fa-archive </p><br/>
<p class="fa fa-bug"> fa-bug </p><br/>
<p class="fa fa-vk"> fa-vk </p><br/>
<p class="fa fa-weibo"> fa-weibo </p><br/>
<p class="fa fa-renren"> fa-renren </p><br/>
<p class="fa fa-pagelines"> fa-pagelines </p><br/>
<p class="fa fa-stack-exchange"> fa-stack-exchange </p><br/>
<p class="fa fa-arrow-circle-o-right"> fa-arrow-circle-o-right </p><br/>
<p class="fa fa-arrow-circle-o-left"> fa-arrow-circle-o-left </p><br/>
<p class="fa fa-toggle-left"> fa-toggle-left </p><br/>
<p class="fa fa-caret-square-o-left"> fa-caret-square-o-left </p><br/>
<p class="fa fa-dot-circle-o"> fa-dot-circle-o </p><br/>
<p class="fa fa-wheelchair"> fa-wheelchair </p><br/>
<p class="fa fa-vimeo-square"> fa-vimeo-square </p><br/>
<p class="fa fa-turkish-lira"> fa-turkish-lira </p><br/>
<p class="fa fa-try"> fa-try </p><br/>
<p class="fa fa-plus-square-o"> fa-plus-square-o </p><br/>
<p class="fa fa-space-shuttle"> fa-space-shuttle </p><br/>
<p class="fa fa-slack"> fa-slack </p><br/>
<p class="fa fa-envelope-square"> fa-envelope-square </p><br/>
<p class="fa fa-wordpress"> fa-wordpress </p><br/>
<p class="fa fa-openid"> fa-openid </p><br/>
<p class="fa fa-institution"> fa-institution </p><br/>
<p class="fa fa-bank"> fa-bank </p><br/>
<p class="fa fa-university"> fa-university </p><br/>
<p class="fa fa-mortar-board"> fa-mortar-board </p><br/>
<p class="fa fa-graduation-cap"> fa-graduation-cap </p><br/>
<p class="fa fa-yahoo"> fa-yahoo </p><br/>
<p class="fa fa-google"> fa-google </p><br/>
<p class="fa fa-reddit"> fa-reddit </p><br/>
<p class="fa fa-reddit-square"> fa-reddit-square </p><br/>
<p class="fa fa-stumbleupon-circle"> fa-stumbleupon-circle </p><br/>
<p class="fa fa-stumbleupon"> fa-stumbleupon </p><br/>
<p class="fa fa-delicious"> fa-delicious </p><br/>
<p class="fa fa-digg"> fa-digg </p><br/>
<p class="fa fa-pied-piper-square"> fa-pied-piper-square </p><br/>
<p class="fa fa-pied-piper"> fa-pied-piper </p><br/>
<p class="fa fa-pied-piper-alt"> fa-pied-piper-alt </p><br/>
<p class="fa fa-drupal"> fa-drupal </p><br/>
<p class="fa fa-joomla"> fa-joomla </p><br/>
<p class="fa fa-language"> fa-language </p><br/>
<p class="fa fa-fax"> fa-fax </p><br/>
<p class="fa fa-building"> fa-building </p><br/>
<p class="fa fa-child"> fa-child </p><br/>
<p class="fa fa-paw"> fa-paw </p><br/>
<p class="fa fa-spoon"> fa-spoon </p><br/>
<p class="fa fa-cube"> fa-cube </p><br/>
<p class="fa fa-cubes"> fa-cubes </p><br/>
<p class="fa fa-behance"> fa-behance </p><br/>
<p class="fa fa-behance-square"> fa-behance-square </p><br/>
<p class="fa fa-steam"> fa-steam </p><br/>
<p class="fa fa-steam-square"> fa-steam-square </p><br/>
<p class="fa fa-recycle"> fa-recycle </p><br/>
<p class="fa fa-automobile"> fa-automobile </p><br/>
<p class="fa fa-car"> fa-car </p><br/>
<p class="fa fa-cab"> fa-cab </p><br/>
<p class="fa fa-taxi"> fa-taxi </p><br/>
<p class="fa fa-tree"> fa-tree </p><br/>
<p class="fa fa-spotify"> fa-spotify </p><br/>
<p class="fa fa-deviantart"> fa-deviantart </p><br/>
<p class="fa fa-soundcloud"> fa-soundcloud </p><br/>
<p class="fa fa-database"> fa-database </p><br/>
<p class="fa fa-file-pdf-o"> fa-file-pdf-o </p><br/>
<p class="fa fa-file-word-o"> fa-file-word-o </p><br/>
<p class="fa fa-file-excel-o"> fa-file-excel-o </p><br/>
<p class="fa fa-file-powerpoint-o"> fa-file-powerpoint-o </p><br/>
<p class="fa fa-file-photo-o"> fa-file-photo-o </p><br/>
<p class="fa fa-file-picture-o"> fa-file-picture-o </p><br/>
<p class="fa fa-file-image-o"> fa-file-image-o </p><br/>
<p class="fa fa-file-zip-o"> fa-file-zip-o </p><br/>
<p class="fa fa-file-archive-o"> fa-file-archive-o </p><br/>
<p class="fa fa-file-sound-o"> fa-file-sound-o </p><br/>
<p class="fa fa-file-audio-o"> fa-file-audio-o </p><br/>
<p class="fa fa-file-movie-o"> fa-file-movie-o </p><br/>
<p class="fa fa-file-video-o"> fa-file-video-o </p><br/>
<p class="fa fa-file-code-o"> fa-file-code-o </p><br/>
<p class="fa fa-vine"> fa-vine </p><br/>
<p class="fa fa-codepen"> fa-codepen </p><br/>
<p class="fa fa-jsfiddle"> fa-jsfiddle </p><br/>
<p class="fa fa-life-bouy"> fa-life-bouy </p><br/>
<p class="fa fa-life-saver"> fa-life-saver </p><br/>
<p class="fa fa-support"> fa-support </p><br/>
<p class="fa fa-life-ring"> fa-life-ring </p><br/>
<p class="fa fa-circle-o-notch"> fa-circle-o-notch </p><br/>
<p class="fa fa-ra"> fa-ra </p><br/>
<p class="fa fa-rebel"> fa-rebel </p><br/>
<p class="fa fa-ge"> fa-ge </p><br/>
<p class="fa fa-empire"> fa-empire </p><br/>
<p class="fa fa-git-square"> fa-git-square </p><br/>
<p class="fa fa-git"> fa-git </p><br/>
<p class="fa fa-hacker-news"> fa-hacker-news </p><br/>
<p class="fa fa-tencent-weibo"> fa-tencent-weibo </p><br/>
<p class="fa fa-qq"> fa-qq </p><br/>
<p class="fa fa-wechat"> fa-wechat </p><br/>
<p class="fa fa-weixin"> fa-weixin </p><br/>
<p class="fa fa-send"> fa-send </p><br/>
<p class="fa fa-paper-plane"> fa-paper-plane </p><br/>
<p class="fa fa-send-o"> fa-send-o </p><br/>
<p class="fa fa-paper-plane-o"> fa-paper-plane-o </p><br/>
<p class="fa fa-history"> fa-history </p><br/>
<p class="fa fa-circle-thin"> fa-circle-thin </p><br/>
<p class="fa fa-header"> fa-header </p><br/>
<p class="fa fa-paragraph"> fa-paragraph </p><br/>
<p class="fa fa-sliders"> fa-sliders </p><br/>
<p class="fa fa-share-alt"> fa-share-alt </p><br/>
<p class="fa fa-share-alt-square"> fa-share-alt-square </p><br/>
<p class="fa fa-bomb"> fa-bomb </p><br/>
</div>
<!-- /.col-lg-6 (nested) -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
app/shared/views/ui-elements/notifications.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Notifications</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Alert Styles
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="alert alert-success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-warning">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
</div>
<!-- .panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Dismissable Alerts
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
</div>
</div>
<!-- .panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- .panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Tooltips and Popovers
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<h4>Tooltip Demo</h4>
<div class="tooltip-demo">
<button type="button" tooltip="Tooltip on left" tooltip-placement="left" class="btn btn-default" title="Tooltip on left">Tooltip on left</button>
<button type="button" tooltip="Tooltip on top" tooltip-placement="top" class="btn btn-default" title="Tooltip on top">Tooltip on top</button>
<button type="button" tooltip="Tooltip on bottom" tooltip-placement="bottom" class="btn btn-default" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" tooltip="Tooltip on right" tooltip-placement="right" class="btn btn-default" title="Tooltip on right">Tooltip on right</button>
</div>
<br>
<br>
<h4>Clickable Popover Demo</h4>
<div class="tooltip-demo">
<button type="button" class="btn btn-default" popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popover-placement="left" popover-trigger="click">
Popover on left
</button>
<button type="button" class="btn btn-default" popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popover-placement="top" popover-trigger="click">
Popover on top
</button>
<button type="button" class="btn btn-default" popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popover-placement="bottom" popover-trigger="click">
Popover on bottom
</button>
<button type="button" class="btn btn-default" popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popover-placement="right" popover-trigger="click">
Popover on right
</button>
</div>
</div>
<!-- .panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
app/shared/views/ui-elements/panels-wells.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Panels and Wells</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Default Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
Primary Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-success">
<div class="panel-heading">
Success Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">
Info Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-warning">
<div class="panel-heading">
Warning Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-danger">
<div class="panel-heading">
Danger Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-green">
<div class="panel-heading">
Green Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<div class="col-lg-4">
<div class="panel panel-yellow">
<div class="panel-heading">
Yellow Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<div class="col-lg-4">
<div class="panel panel-red">
<div class="panel-heading">
Red Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
<!-- /.col-lg-4 -->
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Collapsible Accordion Panel Group
</div>
<!-- .panel-heading -->
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<!-- .panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Basic Tabs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a>
</li>
<li><a href="#profile" data-toggle="tab">Profile</a>
</li>
<li><a href="#messages" data-toggle="tab">Messages</a>
</li>
<li><a href="#settings" data-toggle="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h4>Home Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="profile">
<h4>Profile Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="messages">
<h4>Messages Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="settings">
<h4>Settings Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Pill Tabs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-pills">
<li class="active"><a href="#home-pills" data-toggle="tab">Home</a>
</li>
<li><a href="#profile-pills" data-toggle="tab">Profile</a>
</li>
<li><a href="#messages-pills" data-toggle="tab">Messages</a>
</li>
<li><a href="#settings-pills" data-toggle="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="home-pills">
<h4>Home Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="profile-pills">
<h4>Profile Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="messages-pills">
<h4>Messages Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="settings-pills">
<h4>Settings Tab</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="well">
<h4>Normal Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="well well-lg">
<h4>Large Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="well well-sm">
<h4>Small Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a>
</p>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
\ No newline at end of file
app/shared/views/ui-elements/typography.html 0 → 100644
View file @ 2f909655
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Typography</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Headings
</div>
<div class="panel-body">
<h1>Heading 1
<small>Sub-heading</small>
</h1>
<h2>Heading 2
<small>Sub-heading</small>
</h2>
<h3>Heading 3
<small>Sub-heading</small>
</h3>
<h4>Heading 4
<small>Sub-heading</small>
</h4>
<h5>Heading 5
<small>Sub-heading</small>
</h5>
<h6>Heading 6
<small>Sub-heading</small>
</h6>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Paragraphs
</div>
<div class="panel-body">
<p class="lead">This is an example of lead body copy.</p>
<p>This is an example of standard paragraph text. This is an example of <a href="#">link anchor text</a> within body copy.</p>
<p>
<small>This is an example of small, fine print text.</small>
</p>
<p>
<strong>This is an example of strong, bold text.</strong>
</p>
<p>
<em>This is an example of emphasized, italic text.</em>
</p>
<br>
<h4>Alignment Helpers</h4>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Emphasis Classes
</div>
<div class="panel-body">
<p class="text-muted">This is an example of muted text.</p>
<p class="text-primary">This is an example of primary text.</p>
<p class="text-success">This is an example of success text.</p>
<p class="text-info">This is an example of info text.</p>
<p class="text-warning">This is an example of warning text.</p>
<p class="text-danger">This is an example of danger text.</p>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Abbreviations
</div>
<div class="panel-body">
<p>The abbreviation of the word attribute is
<abbr title="attribute">attr</abbr>.</p>
<p>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>is an abbreviation for a programming language.</p>
<br>
<h4>Addresses</h4>
<address>
<strong>Twitter, Inc.</strong>
<br>795 Folsom Ave, Suite 600
<br>San Francisco, CA 94107
<br>
<abbr title="Phone">P:</abbr>(123) 456-7890
</address>
<address>
<strong>Full Name</strong>
<br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Blockquotes
</div>
<div class="panel-body">
<h4>Default Blockquote</h4>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<h4>Blockquote with Citation</h4>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</blockquote>
<h4>Right Aligned Blockquote</h4>
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Lists
</div>
<div class="panel-body">
<h4>Unordered List</h4>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
<li>List Item</li>
</ul>
<h4>Ordered List</h4>
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
<h4>Unstyled List</h4>
<ul class="list-unstyled">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<h4>Inline List</h4>
<ul class="list-inline">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Description Lists
</div>
<div class="panel-body">
<dl>
<dt>Standard Description List</dt>
<dd>Description Text</dd>
<dt>Description List Title</dt>
<dd>Description List Text</dd>
</dl>
<dl class="dl-horizontal">
<dt>Horizontal Description List</dt>
<dd>Description Text</dd>
<dt>Description List Title</dt>
<dd>Description List Text</dd>
</dl>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Code
</div>
<div class="panel-body">
<p>This is an example of an inline code element within body copy. Wrap inline code within a
<code>&lt;code&gt;...&lt;/code&gt;</code>tag.</p>
<pre>This is an example of preformatted text.</pre>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-4 -->
</div>
app/zetalib/forms/form_service.js
View file @ 2f909655
...@@ -13,10 +13,10 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -13,10 +13,10 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
return RESTURL.url + url; return RESTURL.url + url;
}; };
generator.generate = function (scope, forms) { generator.generate = function (scope, forms) {
if (!forms){return scope;}
for (var key in forms) for (var key in forms)
scope[key] = forms[key]; scope[key] = forms[key];
scope.initialModel = angular.copy(scope.model); scope.initialModel = angular.copy(scope.model);
//debugger;
scope.form.push( scope.form.push(
{ {
type: "submit", type: "submit",
...@@ -25,6 +25,11 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -25,6 +25,11 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
); );
// if fieldset in form, make it collapsable with template // if fieldset in form, make it collapsable with template
scope.listnodeform = {}; scope.listnodeform = {};
angular.forEach(scope.schema.properties, function(k, v){
// check if type date and if type date found change it to string
// and give it 'format':'date' property
if (k.type == 'date') {k.type='string'; k.format='date'}
});
if ((scope.listnode && scope.listnodes[0]) || (scope.nodes && scope.nodes[0])) { if ((scope.listnode && scope.listnodes[0]) || (scope.nodes && scope.nodes[0])) {
angular.forEach(scope.form, function (key, val) { angular.forEach(scope.form, function (key, val) {
if (typeof key == "object" && key.type == "fieldset") { if (typeof key == "object" && key.type == "fieldset") {
...@@ -51,7 +56,6 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -51,7 +56,6 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
scope.listnodeform[key.title]["form"] = [angular.copy(key)]; scope.listnodeform[key.title]["form"] = [angular.copy(key)];
scope.listnodeform[key.title]["model"] = {}; scope.listnodeform[key.title]["model"] = {};
key.type = "list"; key.type = "list";
debugger;
delete key.templateUrl; delete key.templateUrl;
delete key.items; delete key.items;
} }
...@@ -80,7 +84,6 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -80,7 +84,6 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
modalInstance.result.then(function (childmodel, key) { modalInstance.result.then(function (childmodel, key) {
angular.forEach(childmodel, function(v, k){ angular.forEach(childmodel, function(v, k){
debugger;
if (scope.model[k]){ if (scope.model[k]){
scope.model[k][v.idx] = v; scope.model[k][v.idx] = v;
} else { } else {
...@@ -89,7 +92,6 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -89,7 +92,6 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
} }
scope.$broadcast('schemaFormRedraw'); scope.$broadcast('schemaFormRedraw');
}); });
debugger;
}); });
}; };
return generator.group(scope); return generator.group(scope);
...@@ -139,19 +141,16 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -139,19 +141,16 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
} }
}; };
generator.submit = function ($scope) { generator.submit = function ($scope) {
data = {"form": $scope.model, "cmd": $scope.form_params.cmd, "subcmd": "do_list", "model": $scope.form_params.model};
if ($scope.object_id) { if ($scope.object_id) {
var get_diff = FormDiff.get_diff($scope.model, $scope.initialModel); var get_diff = FormDiff.get_diff($scope.model, $scope.initialModel);
var data = { var data = {
"object_id": $scope.object_id, "object_id": $scope.object_id,
"form": get_diff, "form": get_diff
"cmd": "do"
}; };
} }
else {
data = {"form": $scope.model, "cmd": "do"};
}
return $http return $http
.post(generator.makeUrl($scope.url), data) .post(generator.makeUrl($scope.url), data);
//.then(function (res) { //.then(function (res) {
// // todo: for now fake rest api returns 'ok' no data to // // todo: for now fake rest api returns 'ok' no data to
// // manipulate on ui. therefor used just a log // // manipulate on ui. therefor used just a log
......
index.html
View file @ 2f909655
...@@ -103,8 +103,10 @@ ...@@ -103,8 +103,10 @@
<script src="components/auth/auth_controller.js"></script> <script src="components/auth/auth_controller.js"></script>
<script src="components/auth/auth_service.js"></script> <script src="components/auth/auth_service.js"></script>
<script src="components/dashboard/dashboard_controller.js"></script> <script src="components/dashboard/dashboard_controller.js"></script>
<script src="components/crud/crud_controller.js"></script>
<script src="components/staff/staff_controller.js"></script> <script src="components/staff/staff_controller.js"></script>
<script src="components/student/student_controller.js"></script> <script src="components/student/student_controller.js"></script>
<script src="components/version/version.js"></script>
<!--<script src="bower_components/quantumui/dist/js/quantumui-nojq.js"></script>--> <!--<script src="bower_components/quantumui/dist/js/quantumui-nojq.js"></script>-->
<!-- @endif --> <!-- @endif -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment