Initial CoreUI commit
The initial new codebase from a template
This commit is contained in:
piratefinn
parent
39f90b1897
commit
6f084171dd
511 changed files with 27578 additions and 1649 deletions
58
.angular-cli.json
Normal file
58
.angular-cli.json
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"version": "1.0.0-alpha.4",
|
||||
"name": "coreui-angular"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": ["assets"],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"scss/style.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"../node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"../node_modules/chart.js/dist/Chart.min.js"
|
||||
],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "scss",
|
||||
"prefixInterfaces": false
|
||||
}
|
||||
}
|
||||
14
.editorconfig
Normal file
14
.editorconfig
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = 0
|
||||
trim_trailing_whitespace = false
|
||||
24
.gitignore
vendored
24
.gitignore
vendored
|
|
@ -17,6 +17,30 @@ $RECYCLE.BIN/
|
|||
# Windows shortcuts
|
||||
*.lnk
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/bower_components
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
*.launch
|
||||
.settings/
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
# =========================
|
||||
# Operating System Files
|
||||
# =========================
|
||||
|
|
|
|||
27
README.md
Normal file
27
README.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
# Angular2DevelopmentCLI
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-beta.32.3.
|
||||
|
||||
## Development server
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
Before running the tests make sure you are serving the app via `ng serve`.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
149
app.js
149
app.js
|
|
@ -1,149 +0,0 @@
|
|||
var app = angular.module(
|
||||
"FoodLoop",
|
||||
[
|
||||
'ngRoute',
|
||||
'ui.router'
|
||||
]
|
||||
);
|
||||
|
||||
// calling order
|
||||
// 1-> app.config()
|
||||
// 2-> app.run()
|
||||
// 3-> directive's compile functions (if they are found in the dom)
|
||||
// 4-> app.controller()
|
||||
// 5-> directive's link functions (again, if found)
|
||||
|
||||
|
||||
app.config(function($stateProvider, $urlRouterProvider) {
|
||||
// use $urlRouterProvider to catch all the illeage cases
|
||||
// $urlRouterProvider.otherwise("/login");
|
||||
|
||||
$stateProvider
|
||||
// if loggin as user
|
||||
.state('user',{
|
||||
url:"/user",
|
||||
views:{
|
||||
'': {templateUrl:'pages/home/home.html',controller:'userCtrl'},
|
||||
'header@user': {templateUrl:'pages/user/header.user.html'}, // nested view
|
||||
'sidebar@user': {templateUrl:'pages/user/sidebar.user.html'},
|
||||
'main@user': {templateUrl:'pages/user/main.user.html'},
|
||||
},data:{
|
||||
requireLogin: false
|
||||
}
|
||||
})
|
||||
.state('user.receipt',{
|
||||
url:"",
|
||||
views:{
|
||||
'main@user': {templateUrl:'pages/receipt/receipt.html',controller:"receiptCtrl"},
|
||||
}
|
||||
})
|
||||
.state('user.leaderboard',{
|
||||
url:"",
|
||||
views:{
|
||||
'main@user': {templateUrl:'pages/user/main.leaderboard.html'},
|
||||
}
|
||||
})
|
||||
.state('user.settings',{
|
||||
url:"",
|
||||
views:{
|
||||
'main@user': {templateUrl:'pages/user/main.settings.html'},
|
||||
}
|
||||
})
|
||||
.state('user.help',{
|
||||
url:"",
|
||||
views:{
|
||||
'main@user': {templateUrl:'pages/user/main.settings.html'},
|
||||
}
|
||||
})
|
||||
.state('admin.view_receipt',{
|
||||
url:"",
|
||||
params: {
|
||||
receipt: null,
|
||||
},
|
||||
views:{
|
||||
'main@admin': {
|
||||
templateUrl:'pages/admin/main.receipt.html',
|
||||
controller: function($scope,$stateParams){
|
||||
$scope.receipt = $stateParams.receipt;
|
||||
console.log($scope.receipt);
|
||||
}},
|
||||
},data:{
|
||||
requireLogin: false
|
||||
}
|
||||
}
|
||||
)
|
||||
.state('admin',{
|
||||
url:"/admin",
|
||||
controller: 'adminCtrl',
|
||||
views:{
|
||||
'': { templateUrl: 'pages/home/home.html',controller:'adminCtrl'}, // default view}
|
||||
'header@admin': {templateUrl:'pages/admin/header.admin.html'}, // nested view
|
||||
'sidebar@admin': {templateUrl:'pages/admin/sidebar.admin.html'},
|
||||
'main@admin': {templateUrl:'pages/admin/main.admin.html'},
|
||||
},data:{
|
||||
requireLogin: false
|
||||
}
|
||||
})
|
||||
.state('trader',{
|
||||
url:"/trader",
|
||||
views:{
|
||||
'': { templateUrl: 'pages/home/home.html',controller:'traderCtrl'}, // default view}
|
||||
'header@trader': {templateUrl:'pages/trader/header.trader.html'}, // nested view
|
||||
'sidebar@trader': {templateUrl:'pages/trader/sidebar.trader.html'},
|
||||
'main@trader': {templateUrl:'pages/trader/main.trader.html'},
|
||||
},data:{
|
||||
requireLogin: false
|
||||
}
|
||||
})
|
||||
|
||||
.state('map',{
|
||||
url: '/map',
|
||||
templateUrl: 'pages/map/map.html',
|
||||
controller: 'mapCtrl',
|
||||
data: {
|
||||
requireLogin : false
|
||||
}
|
||||
})
|
||||
.state('login',{
|
||||
url: '',
|
||||
templateUrl: 'pages/login/login.html',
|
||||
controller: 'loginCtrl',
|
||||
data: {
|
||||
requireLogin : false
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* redirects to different page based on whether the user is login or not and */
|
||||
/* if log on, check user type and redirect/construct a custom dashboard page */
|
||||
/* to extend, users may have a custome dashboard with different layout, this */
|
||||
/* needs to be handled using HTML page which is specifically constucted by */
|
||||
/* page'controller and obtain variable setting from server */
|
||||
// /* if not, redirect to login in page */
|
||||
app.run(function ($rootScope,$state,authService) { // kickstart the application
|
||||
// listening to the when a state change start
|
||||
console.log("State changes");
|
||||
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
|
||||
console.log(toState);
|
||||
// var requireLogin = toState.data.requireLogin;
|
||||
// redirect to login page if satisfy the following conditions
|
||||
// 1. seesion expired and user tries to access a page
|
||||
// if ((requireLogin && typeof $rootScope.currentUser === 'undefined')) {
|
||||
// event.preventDefault();
|
||||
// $state.transitionTo('login');
|
||||
// }
|
||||
});
|
||||
// Testing, configuration to firebase
|
||||
var config = {
|
||||
apiKey: "AIzaSyDypwjmMD818GQTTfyhTpx76ChJpDsZGek",
|
||||
authDomain: "foodloop-666db.firebaseapp.com",
|
||||
databaseURL: "https://foodloop-666db.firebaseio.com",
|
||||
storageBucket: "foodloop-666db.appspot.com",
|
||||
messagingSenderId: "832579459759"
|
||||
};
|
||||
firebase.initializeApp(config);
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[0212/144844:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004
|
||||
[0212/144844:ERROR:node_debugger.cc(86)] Cannot start debugger server
|
||||
14
e2e/app.e2e-spec.ts
Normal file
14
e2e/app.e2e-spec.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { CoreUIPage } from './app.po';
|
||||
|
||||
describe('core-ui App', function() {
|
||||
let page: CoreUIPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new CoreUIPage();
|
||||
});
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('app works!');
|
||||
});
|
||||
});
|
||||
11
e2e/app.po.ts
Normal file
11
e2e/app.po.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { browser, element, by } from 'protractor/globals';
|
||||
|
||||
export class CoreUIPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
12
e2e/tsconfig.e2e.json
Normal file
12
e2e/tsconfig.e2e.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
75
index.html
75
index.html
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html ng-app="FoodLoop" >
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
|
||||
<head>
|
||||
<title>FoodLoop Login</title>
|
||||
|
||||
<!-- Bootstrap and jQuery js -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="app.js"></script>
|
||||
|
||||
<!-- Include the ui-router script -->
|
||||
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
|
||||
|
||||
<!-- D3 chart js -->
|
||||
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||||
|
||||
<!-- Map js dependecies -->
|
||||
<script src="https://d3js.org/topojson.v2.min.js"></script>
|
||||
|
||||
<!-- Chart js -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
|
||||
|
||||
|
||||
|
||||
<!-- MVC for FoodLoop app -->
|
||||
<script src="pages/login/loginCtrl.js"></script>
|
||||
<!--<link rel="stylesheet" href="pages/login/login.css">-->
|
||||
|
||||
<script src="pages/home/homeCtrl.js"></script>
|
||||
<link rel="stylesheet" href="pages/home/home.css">
|
||||
|
||||
<script src="pages/admin/adminCtrl.js"></script>
|
||||
<!--<link rel="stylesheet" href="pages/admin/admin.css">-->
|
||||
|
||||
<script src="pages/receipt/receiptCtrl.js"></script>
|
||||
<!--<link rel="stylesheet" href="pages/receipt/receipt.css">-->
|
||||
|
||||
<script src="pages/user/userCtrl.js"></script>
|
||||
<!--<link rel="stylesheet" href="pages/user/user.css">-->
|
||||
|
||||
<script src="pages/trader/traderCtrl.js"></script>
|
||||
<!--<link rel="stylesheet" href="pages/trader/trader.css">-->
|
||||
|
||||
<script src="pages/map/mapCtrl.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<!-- Import services-->
|
||||
<script src="services/authService.js"></script>
|
||||
<script src="services/chartService.js"></script>
|
||||
<script src="services/uploadReceiptservice.js"></script>
|
||||
|
||||
<!-- firebase for testing -->
|
||||
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body >
|
||||
|
||||
<!-- Dsiplay the main content -->
|
||||
<ui-view></ui-view>
|
||||
</body>
|
||||
</html>
|
||||
44
karma.conf.js
Normal file
44
karma.conf.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
files: [
|
||||
{ pattern: './src/test.ts', watched: false }
|
||||
],
|
||||
preprocessors: {
|
||||
'./src/test.ts': ['@angular/cli']
|
||||
},
|
||||
mime: {
|
||||
'text/x-typescript': ['ts','tsx']
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: config.angularCli && config.angularCli.codeCoverage
|
||||
? ['progress', 'coverage-istanbul']
|
||||
: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
57
package.json
Normal file
57
package.json
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"name": "coreui-angular",
|
||||
"version": "1.0.0-alpha.5",
|
||||
"description": "Open Source Bootstrap Admin Template",
|
||||
"author": "",
|
||||
"url": "http://coreui.io",
|
||||
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/common": "4.0.3",
|
||||
"@angular/compiler": "4.0.3",
|
||||
"@angular/core": "4.0.3",
|
||||
"@angular/forms": "4.0.3",
|
||||
"@angular/http": "4.0.3",
|
||||
"@angular/platform-browser": "4.0.3",
|
||||
"@angular/platform-browser-dynamic": "4.0.3",
|
||||
"@angular/router": "4.0.3",
|
||||
"@angular/upgrade": "4.0.3",
|
||||
"core-js": "2.4.1",
|
||||
"rxjs": "5.3.0",
|
||||
"ts-helpers": "1.1.2",
|
||||
"zone.js": "0.8.8",
|
||||
|
||||
"chart.js": "2.5.0",
|
||||
"ngx-bootstrap": "1.6.6",
|
||||
"ng2-charts": "1.5.0",
|
||||
"moment": "2.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.0.0",
|
||||
"@angular/compiler-cli": "4.0.3",
|
||||
"@types/jasmine": "2.5.47",
|
||||
"@types/node": "7.0.13",
|
||||
"codelyzer": "2.1.1",
|
||||
"jasmine-core": "2.5.2",
|
||||
"jasmine-spec-reporter": "3.2.0",
|
||||
"karma": "1.6.0",
|
||||
"karma-chrome-launcher": "2.0.0",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-jasmine": "1.1.0",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"karma-coverage-istanbul-reporter": "1.2.0",
|
||||
"protractor": "5.1.1",
|
||||
"ts-node": "3.0.2",
|
||||
"tslint": "4.5.1",
|
||||
"typescript": "2.2.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div ui-view="header"></div>
|
||||
<div ui-view="sidebar"></div>
|
||||
<div ui-view="main"></div>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
/* this controller specifies the logic layer of the admin page */
|
||||
/* including the content to be display, sidebar, header */
|
||||
/* functionailities involve for an admin */
|
||||
app.controller('adminCtrl', function($scope,$state) {
|
||||
$scope.users;
|
||||
$scope.controllby = "admin";
|
||||
// Initialize Firebase
|
||||
$scope.pending_receipt_sum = 2;
|
||||
$scope.pending_receipt = [
|
||||
{
|
||||
receipt_ref: "r1",
|
||||
submitted_by : "John Lemon",
|
||||
submitted_time: "31",
|
||||
submitted_amount: "8.66",
|
||||
details: "sjadsjoiadsj iasdn aisdn alsdi jadi jasdi ajsdoi ndi snd"
|
||||
}
|
||||
,
|
||||
{
|
||||
submitted_by : "User007",
|
||||
submitted_time: "21",
|
||||
submitted_amount: "22.22"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
/* section for receipt management start * /
|
||||
/* review a pending receipt */
|
||||
/* fetch a list of pending receipt from server */
|
||||
/* fetch a list of approve receipt from server */
|
||||
$scope.reviewReceipt = function(myReceipt){
|
||||
// testing
|
||||
console.log("[DEBUG]: reviewReceipt called");
|
||||
// show page for review this receipt
|
||||
$state.go('admin.view_receipt', {receipt: myReceipt})
|
||||
//
|
||||
|
||||
}
|
||||
|
||||
$scope.approve_receipt = function(receipt_ref){
|
||||
// call api to approve a pending receipt
|
||||
// notify user
|
||||
}
|
||||
|
||||
|
||||
$scope.fetch_pending_receipt = function(){
|
||||
|
||||
}
|
||||
|
||||
$scope.fetch_submitted_receipt = function(){
|
||||
|
||||
}
|
||||
/* section for receipt management end */
|
||||
|
||||
|
||||
// Get a reference to the database service
|
||||
var database = firebase.database();
|
||||
firebase.database().ref('/users/').once('value').then(function(snapshot) {
|
||||
$scope.users = snapshot.val();
|
||||
});
|
||||
|
||||
$scope.test = function(){
|
||||
|
||||
console.log("CLiced ");
|
||||
console.log($scope.users);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse" style="background-color:#0091EA;">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">FoodLoop</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
|
||||
<div class="row no-gutters">
|
||||
<div class="col-2">
|
||||
<div class="rankCard">
|
||||
<div class="receiptCardHeader"> Section toolbox </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="receiptCard">
|
||||
<div class="receiptCardHeader"> List/Table </div>
|
||||
<div class="tableCard">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action</th>
|
||||
<th>#</th>
|
||||
<th>From</th>
|
||||
<th>When</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat-start="receipt in pending_receipt">
|
||||
<td>
|
||||
<button type="button" class="btn btn-primary" ng-if="receipt.expanded" ng-click="receipt.expanded = false">review</button>
|
||||
<button type="button" class="btn btn-primary" ng-if="!receipt.expanded" ng-click="receipt.expanded = true">review</button>
|
||||
</td>
|
||||
<td>{{$index + 1}}</td>
|
||||
<td>{{receipt.submitted_by}}</td>
|
||||
<td>{{receipt.submitted_time}} minutes ago</td>
|
||||
<td>£{{receipt.submitted_amount}}</td>
|
||||
</tr>
|
||||
<tr ng-if="receipt.expanded" ng-repeat-end="">
|
||||
<td colspan="5">
|
||||
<div class="receiptDetailCard">
|
||||
{{receipt.details}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row first -->
|
||||
|
||||
</main>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
|
||||
<div class="row no-gutters">
|
||||
<div class="col-2">
|
||||
<div class="rankCard">
|
||||
<div class="receiptCardHeader"> Section toolbox </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="receiptCard">
|
||||
<div class="receiptCardHeader">{{receipt.receipt_ref}}</div>
|
||||
<div class="tableCard">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>From</th>
|
||||
<th>When</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{$index + 1}}</td>
|
||||
<td>{{receipt.submitted_by}}</td>
|
||||
<td>{{receipt.submitted_time}} minutes ago</td>
|
||||
<td>£{{receipt.submitted_amount}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- table card-->
|
||||
<div class="receiptImageCard">
|
||||
<div> </div>
|
||||
</div>
|
||||
<!-- receiptImageCard-->
|
||||
</div>
|
||||
<!-- receipt card -->
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row first -->
|
||||
</main>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!-- This page defines a side bar for admin -->
|
||||
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Admin Portal <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">User Management</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Trader Management</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills flex-column" id="meq">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Receipt Management</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pending receipt
|
||||
<span class="badge badge-danger">{{pending_receipt_sum}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Option 2</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Option 3</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item again</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">One more nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another nav item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -1,353 +0,0 @@
|
|||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
/* Move down content because we have a fixed navbar that is 50px tall */
|
||||
body {
|
||||
padding-top: 50px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
/*
|
||||
* Typography
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 9px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
main{
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
border-right: 1px solid #eee;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
.sidebar {
|
||||
margin-top: -16px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sidebar .nav {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar .nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar .nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
border-radius: 80%;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: dodgerblue;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.profilePic{
|
||||
padding: 16px;
|
||||
background-color: transparent;
|
||||
max-width: 100%;
|
||||
height: 130px;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
.profileInfo{
|
||||
color:white;
|
||||
padding: 16px;
|
||||
padding-top: 30px;
|
||||
height: 130px;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
.profileTitle{
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dashboard
|
||||
*/
|
||||
|
||||
/* Placeholders */
|
||||
.placeholders {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.placeholder img {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.title{
|
||||
color: black;
|
||||
}
|
||||
.flCard{
|
||||
color:black;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
/*width: 100%;*/
|
||||
height: 110px;;
|
||||
margin-top: 16px;
|
||||
background-color: white;
|
||||
border: green;
|
||||
padding:16px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.rankCard{
|
||||
color:black;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
height: 300px;;
|
||||
margin-top: 16px;
|
||||
background-color: white;
|
||||
border: green;
|
||||
|
||||
}
|
||||
|
||||
.rankCardHeader{
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 3px;
|
||||
color:white;
|
||||
height:30px;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
.chartCardHeader{
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 3px;
|
||||
color:white;
|
||||
height:30px;
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.rankCardContent{
|
||||
padding: 3px;
|
||||
/*color:white;*/
|
||||
/*background-color: dodgerblue;*/
|
||||
}
|
||||
|
||||
.flCardHeader{
|
||||
height: 25px;
|
||||
}
|
||||
.flCardMain{
|
||||
margin: -16px;
|
||||
font-size: 3.0em;
|
||||
color: dimgray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chartCard{
|
||||
color:black;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
height: 300px;;
|
||||
margin-top: 16px;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
.flCardNote{
|
||||
font-size: 0.8em;
|
||||
color: dodgerblue;
|
||||
text-align: right;
|
||||
}
|
||||
#receiptTable{
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* CSS FOR RECEIPT */
|
||||
|
||||
.receiptItem{
|
||||
color:black;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
padding: 16px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.receiptCard{
|
||||
color:black;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
margin-top: 16px;
|
||||
padding:16px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.receiptCardHeader{
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 3px;
|
||||
color:white;
|
||||
padding: 16px;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
|
||||
.receiptDetailCard{
|
||||
color:black;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
height: 300px;
|
||||
margin-top: 16px;
|
||||
background-color: lightcyan;
|
||||
}
|
||||
|
||||
.addButton{
|
||||
background-color: transparent;
|
||||
font-size: 1.0em;
|
||||
margin-left: 50%;
|
||||
|
||||
}
|
||||
|
||||
.dragImageBox:hover{
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.dragImageBox{
|
||||
border: 2px dashed dodgerblue;
|
||||
border-radius: 4px;
|
||||
background-color:white;
|
||||
height: 150px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.thumb{
|
||||
color:black;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
width: 50px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
/* TEMPALTE CSS FOR DISPLAY A CUSTOM CARD */
|
||||
|
||||
.pearCard{
|
||||
color:black;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a deeper shadow */
|
||||
.pearCard:hover {
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.pearCardFooter{
|
||||
width: 100%;
|
||||
margin-bottom: -16px;
|
||||
background-color: lightcyan;
|
||||
}
|
||||
.pearAutoHeight{
|
||||
height: auto;
|
||||
}
|
||||
.pearCardHeader{
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 9px;
|
||||
color:white;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
.pearOrange{
|
||||
background-color: orangered;
|
||||
}
|
||||
.pearBlue{
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
.pearGreen{
|
||||
background-color: lawngreen;
|
||||
}
|
||||
.pearYellow{
|
||||
background-color: yellow;
|
||||
}
|
||||
.pearPurple{
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.padding16{
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.margin16{
|
||||
margin-top:16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* LOGIN CSS */
|
||||
.mainSection{
|
||||
margin-top: 20%;
|
||||
padding:16px;
|
||||
color:black;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
/*height: 150px;*/
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.mainItem{
|
||||
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.mainItem input[type=text] {
|
||||
/*border: 2px solid ;*/
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mainItem input[type=password] {
|
||||
/*border: 2px solid ;*/
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!-- ideally, this page would be the tempalte for all user types, admin -->
|
||||
<!-- user, trader etc. this home page will defines the common html structure-->
|
||||
<!-- among differnet user page -->
|
||||
|
||||
|
||||
<!-- use ui-view to display header,sidebar and main content of differnet types -->
|
||||
<!-- this would the common layout, header, siderbar, main -->
|
||||
<!-- the actual content and logic within will be managed by -->
|
||||
<!-- seperate controller,css, html files -->
|
||||
|
||||
<div ui-view="header"></div>
|
||||
<div ui-view="sidebar"></div>
|
||||
<div ui-view="main"></div>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
app.controller('homeCtrl', function($scope) {
|
||||
|
||||
// $stateProvider.state('contacts', {
|
||||
// template: '<h1>My Contacts</h1>'
|
||||
// }) $scope.username = "user";
|
||||
$scope.controllby = "home";
|
||||
|
||||
// $rootScope.userType = "admin";
|
||||
// $scope.getViewByUserType = function(){
|
||||
// return {
|
||||
// '': {templateUrl: 'pages/home/home.html',controller:'adminCtrl'}, // default view
|
||||
// 'header@home-admin': {templateUrl:'pages/admin/header.admin.html'}, // nested view
|
||||
// 'sidebar@home-admin': {templateUrl:'pages/admin/sidebar.admin.html'},
|
||||
// 'main@home-admin': {templateUrl:'pages/admin/main.admin.html'},
|
||||
// }
|
||||
// }
|
||||
// $scope.header = "i m not a header";
|
||||
});
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<nav class="navbar fixed-top navbar-light bg-faded">
|
||||
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown link
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Fluid Gird, this login box stay in the middle of screen -->
|
||||
<div class="col-5">
|
||||
|
||||
<div class="mainSection" ng-controller="loginCtrl">
|
||||
<div class="row">
|
||||
<div class="col-3 mainItem">
|
||||
Username/Email
|
||||
</div>
|
||||
|
||||
<div class="col mainItem">
|
||||
<input type="text" ng-model="username" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-3 mainItem">
|
||||
Password
|
||||
</div>
|
||||
|
||||
<div class="col mainItem">
|
||||
<input type="password" ng-model="password" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainItem">
|
||||
<button type="button" class="btn btn-primary" ng-click="signin()"> S2ign I1n </button>
|
||||
|
||||
<button type="button" class="btn btn-danger" ng-click="createAccount()">Create an account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- Container fluid-->
|
||||
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
app.controller('loginCtrl', function($scope,$state,$http,$rootScope,authService) {
|
||||
/* login variables */
|
||||
$scope.username = "user";
|
||||
$scope.password = "Doe";
|
||||
$scope.fullName = function() {
|
||||
return $scope.firstName + " " + $scope.lastName;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 1. send request to server to authenticate login information
|
||||
// 2. on succeed, redirect to page
|
||||
// 2.1 on failed, display error message
|
||||
$scope.signin = function(){
|
||||
var foodloop_token_url_login = "http://192.168.2.172:3000/login";
|
||||
var loginData = JSON.stringify({
|
||||
email : this.username,
|
||||
password: this.password
|
||||
});
|
||||
console.log("Attempting to login in");
|
||||
|
||||
$http.post(foodloop_token_url_login,loginData).success(function(repsonse){
|
||||
console.log("Resolving response from server");
|
||||
console.log(repsonse.data);
|
||||
},function(repsonse){
|
||||
console.log("Ooops, Something went wrong");
|
||||
});
|
||||
authService.setUsername($scope.username);
|
||||
// $state.go("user");
|
||||
// if($scope.username === "admin"){
|
||||
// $state.go('admin');
|
||||
// }
|
||||
// else if($scope.username === "user"){
|
||||
// $state.go('user');
|
||||
// }
|
||||
// else{
|
||||
// $state.go('home');
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
$scope.createAccount = function(){
|
||||
|
||||
console.log("Create account button clicked");
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{"objects":[
|
||||
{"circle":{"coordinates":[54.0472, -2.8018]}},
|
||||
{"circle":{"coordinates":[-41.29,174.76]}},
|
||||
{"circle":{"coordinates":[-41.30,174.79]}},
|
||||
{"circle":{"coordinates":[-41.27,174.80]}},
|
||||
{"circle":{"coordinates":[-41.29,174.78]}}
|
||||
]}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#mapid { height: 180px; }
|
||||
|
||||
#map { width:600px; height: 600px }
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<div id="map" style="width: 100%; height: 400px"></div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<button class="btn btn-secondary btn-block" type="button">Track my spent</button>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
app.controller('mapCtrl',function($scope,$http,uploadReceiptService) {
|
||||
|
||||
|
||||
// data
|
||||
var traderGeoData = [
|
||||
{ Latitude:54.04,Longitude:2.80,trader:"sample_1" },
|
||||
{ Latitude:54.04,Longitude:2.80,trader:"sample_2" },
|
||||
{ Latitude:54.01,Longitude:2.78,trader:"sample_3" },
|
||||
];
|
||||
|
||||
var map = L.map('map').setView([54.0472, -2.8018], 13);
|
||||
mapLink =
|
||||
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
|
||||
L.tileLayer(
|
||||
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© ' + mapLink + ' Contributors',
|
||||
maxZoom: 18,
|
||||
}).addTo(map);
|
||||
|
||||
var svgLayer = L.svg();
|
||||
svgLayer.addTo(map);
|
||||
|
||||
var svg = d3.select("#map").select("svg");
|
||||
var g = d3.select("#map").select("svg").select('g');
|
||||
g.attr("class", "leaflet-zoom-hide");
|
||||
|
||||
|
||||
/* We simply pick up the SVG from the map object */
|
||||
var svg = d3.select("#map").select("svg"),
|
||||
g = svg.append("g");
|
||||
|
||||
d3.json("../pages/map/circles.json", function(collection) {
|
||||
/* Add a LatLng object to each item in the dataset */
|
||||
collection.objects.forEach(function(d) {
|
||||
d.LatLng = new L.LatLng(d.circle.coordinates[0],
|
||||
d.circle.coordinates[1])
|
||||
})
|
||||
|
||||
var feature = g.selectAll("circle")
|
||||
.data(collection.objects)
|
||||
.enter().append("circle")
|
||||
.style("stroke", "black")
|
||||
.style("opacity", .6)
|
||||
.style("fill", "red")
|
||||
.attr("r", 20);
|
||||
|
||||
map.on("viewreset", update);
|
||||
update();
|
||||
|
||||
function update() {
|
||||
console.log("update!");
|
||||
feature.attr("transform",
|
||||
function(d) {
|
||||
return "translate("+
|
||||
map.latLngToLayerPoint(d.LatLng).x +","+
|
||||
map.latLngToLayerPoint(d.LatLng).y +")";
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
<form>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="pearCard">
|
||||
<div class="pearCardHeader .pearGreen">Fill in to submit </div>
|
||||
<div class="padding16">
|
||||
<!-- from group start -->
|
||||
<div class="form-group row">
|
||||
<label for="example-text-input" class="col-2 col-form-label">Store name</label>
|
||||
<div class="col">
|
||||
<input class="form-control" type="text" ng-model="storename" placeholder="e.g. Three" id="example-text-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col">
|
||||
<div class="searchList">
|
||||
<ul class="list-group" ng-repeat="store in storeList">
|
||||
<li class="list-group-item ">{{store.store_id}}</li>
|
||||
<li class="list-group-item ">{{store.store_name}}</li>
|
||||
<li class="list-group-item ">{{store.store_address}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="example-search-input" class="col-2 col-form-label">amount</label>
|
||||
<div class="col">
|
||||
<input class="form-control" type="decimal" ng-model="amount" placeholder="e.g. 6.66" id="example-search-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row justify-content-center">
|
||||
<label for="example-email-input" class="col col-form-label">Image(Click 'Add' button or Drag an image into the box below)</label>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input type='file' ng-model ="receiptPhoto" accept="image/*"
|
||||
onchange="angular.element(this).scope().getImage(this)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="dragImageBox">
|
||||
<div class="row no-gutters">
|
||||
<img class="col-2 thumb" ng-src="{{receiptPhotoSrc}}"/>
|
||||
<!-- image details, progress bar etc. -->
|
||||
<div class="col-5 thumb">
|
||||
filename:{{receiptPhoto.filename}}<br> filesize:{{receiptPhoto.filesize}}<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="pearCardFooter">
|
||||
<button type="button" ng-click="uploadReceipt()" class="btn btn-primary"> Submit </button>
|
||||
<button type="button" class="btn btn-danger"> Reset </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- from group end -->
|
||||
</div>
|
||||
<!-- PADDING -->
|
||||
</div>
|
||||
<!-- pear card -->
|
||||
</div>
|
||||
<!-- first col-5 -->
|
||||
|
||||
<div class="col">
|
||||
<div class="pearCard">
|
||||
<div class="pearCardHeader pearOrange"> Pending receipt
|
||||
<span class="badge badge-info">5 </span> </div>
|
||||
<!-- content start here -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>When</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="receipt in pending_list">
|
||||
<td>{{$index + 1}}</td>
|
||||
<td>{{receipt.submitted_time}}</td>
|
||||
<td>{{receipt.submitted_amount}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- second col -->
|
||||
</div>
|
||||
<!-- first row-->
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
app.controller('receiptCtrl',function($scope,$http,uploadReceiptService) {
|
||||
|
||||
// display the list of all exsiting store, validated and not validated
|
||||
$scope.storelist;
|
||||
|
||||
// require param for upload api
|
||||
$scope.microCurrencyValue;
|
||||
$scope.transactionAdditionType;
|
||||
$scope.addValidatedId;
|
||||
|
||||
$scope.storename;
|
||||
|
||||
// photo and path to the photo
|
||||
$scope.receiptPhoto;
|
||||
$scope.receiptPhotoSrc;
|
||||
|
||||
// list of pending reciepts await for approval from admin
|
||||
$scope.pending_list = [
|
||||
{submitted_time: 30 },{submitted_time:20},{submitted_time:10},{submitted_time:5},{submitted_time:1}
|
||||
];
|
||||
|
||||
|
||||
var foodloop_token_url_search = "http://192.168.2.172:3000/search";
|
||||
|
||||
|
||||
// get the latest store list
|
||||
$scope.getStoreList = function(){
|
||||
var data = {
|
||||
"searchName": "",
|
||||
"searchLocation": ""
|
||||
};
|
||||
$http.post(foodloop_token_url_search,data).then(function(response){
|
||||
console.log(response);
|
||||
});
|
||||
|
||||
// API call to /search to fetch a list of store
|
||||
}
|
||||
|
||||
$scope.storelist = $scope.getStoreList();
|
||||
|
||||
// select the image
|
||||
$scope.getImage = function(element) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(event) {
|
||||
$scope.$apply(function($scope) {
|
||||
$scope.receiptPhoto = element.files[0];
|
||||
$scope.receiptPhotoSrc = event.target.result
|
||||
});
|
||||
}
|
||||
reader.readAsDataURL(element.files[0]);
|
||||
}
|
||||
|
||||
// upload the receipt to the server
|
||||
$scope.uploadReceipt = function(){
|
||||
uploadReceiptService.uploadReceipt();
|
||||
}
|
||||
|
||||
|
||||
// test
|
||||
// firebase api to upload an image
|
||||
|
||||
});
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse" style="background-color:#0091EA;">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">FoodLoop</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
<div id="layouter">
|
||||
i m the main content in trader page
|
||||
</div>
|
||||
<!-- Layouter -->
|
||||
</main>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!-- This page defines a side bar for admin -->
|
||||
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Admin Portal <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Add User</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Add Trader</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills flex-column" id="meq">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Receipt Management</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">View receipt</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Option 2</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Option 3</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item again</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">One more nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another nav item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
app.controller('traderCtrl', function($scope,$location) {
|
||||
|
||||
$scope.content = "I am not a header";
|
||||
$scope.headerContent = "FoodLoop Admin Portal";
|
||||
|
||||
|
||||
/* This block of code handles recepit management */
|
||||
$scope.receiptNumber = 0;
|
||||
|
||||
|
||||
/* This block of code handles user management */
|
||||
/* Including the management of registered user, trader */
|
||||
$scope.registeredUsers = 1;
|
||||
|
||||
});
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse" style="background-color:#0091EA;">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">FoodLoop</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" ui-sref="user">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ui-sref=".settings">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href=".help">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -1,28 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Position</th>
|
||||
<th>Name</th>
|
||||
<th>Pear points</th>
|
||||
<th>Retailers spent with</th>
|
||||
<th>Receipt submitted</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in leaderboard">
|
||||
<td>{{$index + 1}}</td>
|
||||
<td>{{user.name}}</td>
|
||||
<td>{{user.pear_points}}</td>
|
||||
<td>{{user.retailer_spent}}</td>
|
||||
<td>{{user.receipt_submitted}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row first -->
|
||||
</main>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="pearCard pearAutoHeight">
|
||||
<div class="pearCardHeader"> Personal details </div>
|
||||
<div class="pearCardContent">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-2">
|
||||
<label>Username</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" placeholder="{{username}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col -->
|
||||
</div>
|
||||
<!-- row first -->
|
||||
</main>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
<!--display my ranking -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-3">
|
||||
<div class="flCard">
|
||||
<div class="flCardHeader">
|
||||
<div class="title">Rank</div>
|
||||
</div>
|
||||
<div class="flCardMain"> 1 </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="flCard">
|
||||
<div class="flCardHeader">Points</div>
|
||||
<div class="flCardMain"> 888 </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="flCard">
|
||||
<div class="flCardHeader">Spend</div>
|
||||
<div class="flCardMain"> £100 </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-3">
|
||||
<div class="flCard">
|
||||
<div class="flCardHeader">Re-spend</div>
|
||||
<div class="flCardMain"> £5.00 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- first row end -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="col-3">
|
||||
<div class="pearCard margin16">
|
||||
<div class="pearCardHeader"> My receipt </div>
|
||||
<div class="receiptItem">
|
||||
Pending receipt <span class="badge badge-danger">5</span>
|
||||
</div>
|
||||
<div class="receiptItem">
|
||||
Submit a receipt
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-5">
|
||||
<div class="pearCard margin16">
|
||||
<div class="pearCardHeader"> Personal overview </div>
|
||||
<flChart> </flChart>
|
||||
<canvas id="myChart"></canvas>
|
||||
</div>
|
||||
<!-- flCard-->
|
||||
</div>
|
||||
<!-- col-5 receipt-->
|
||||
|
||||
<div class="col">
|
||||
<div class="pearCard margin16">
|
||||
<div class="pearCardHeader"> Top players of the month </div>
|
||||
<div class="rankCardContent">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Username</th>
|
||||
<th>Points</th>
|
||||
<th>Receipts submitted</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- col for pending receipt -->
|
||||
</div>
|
||||
<!-- row -->
|
||||
<!--<button ng-click="displayChart()"> Hit me </button>-->
|
||||
</main>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!-- This page defines a side bar for admin -->
|
||||
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
|
||||
|
||||
<!--<div class="row no-gutters">
|
||||
<div class="col-5">
|
||||
<div class="profilePic">
|
||||
<img src="../../pages/user/icon1.png" class="profile-pic">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="profileInfo">
|
||||
<h6>{{username}}</h6>
|
||||
<div class="profileTitle">{{email}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<ul class="nav nav-pills flex-column" id="meq">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Key features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ui-sref=".receipt">Submit a receipt</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ui-sref=".leaderboard">View Leaderboard</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<user-header> </user-header>
|
||||
<user-sidebar> </user-sidebar>
|
||||
<user-main> </user-main>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
app.controller('userCtrl', function($scope,$location) {
|
||||
$scope.user_rank = 1;
|
||||
$scope.controllby = "user";
|
||||
$scope.username = "John Smith";
|
||||
$scope.email = "test007@test.com";
|
||||
$scope.createChart = function(){
|
||||
var ctx = document.getElementById("myChart");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)',
|
||||
'rgba(255, 159, 64, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$scope.displayChart = function(){
|
||||
// chart sample
|
||||
var flData = [{x: 100, y: 100}, {x: 200, y: 200}, {x: 300, y: 300}];
|
||||
var svg = d3.select("flChart").append("svg")
|
||||
.attr("width","300px").attr("height","300px");
|
||||
svg
|
||||
.selectAll("circle").data(flData)
|
||||
.enter().append("circle")
|
||||
.attr("cx", function(d) { return d.x; })
|
||||
.attr("cy", function(d) { return d.y; })
|
||||
.attr("r", 2.5);
|
||||
|
||||
console.log(svg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
30
protractor.conf.js
Normal file
30
protractor.conf.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
beforeLaunch: function() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
},
|
||||
onPrepare() {
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
/* this service handles all the authentication between client and server */
|
||||
app.service('authService', function ($http) {
|
||||
// send a login information to server
|
||||
// upon success, set sessionToken and store data in dataService
|
||||
// upon failed, return error
|
||||
this.username = "";
|
||||
this.getUsername = function(){
|
||||
return this.username;
|
||||
}
|
||||
|
||||
this.setUsername = function(setTo){
|
||||
this.username = setTo;
|
||||
}
|
||||
});
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
/* this service handles all the authentication between client and server */
|
||||
app.service('chartService', function () {
|
||||
// send a login information to server
|
||||
// upon success, set sessionToken and store data in dataService
|
||||
// upon failed, return error
|
||||
this.username = "";
|
||||
this.getUsername = function(){
|
||||
return this.username;
|
||||
}
|
||||
|
||||
this.setUsername = function(setTo){
|
||||
this.username = setTo;
|
||||
}
|
||||
|
||||
|
||||
this.createChart = function(){
|
||||
var ctx = document.getElementById("myChart");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)',
|
||||
'rgba(255, 159, 64, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/* this service handles receipt upload process */
|
||||
app.service('uploadReceiptService', function () {
|
||||
this.uploadReceipt = function(){
|
||||
console.log("Upload successful");
|
||||
}
|
||||
});
|
||||
32
src/app/app.component.spec.ts
Normal file
32
src/app/app.component.spec.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
});
|
||||
TestBed.compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it(`should have as title 'app works!'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app works!');
|
||||
}));
|
||||
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('app works!');
|
||||
}));
|
||||
});
|
||||
8
src/app/app.component.ts
Normal file
8
src/app/app.component.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line
|
||||
selector: 'body',
|
||||
template: '<router-outlet></router-outlet>'
|
||||
})
|
||||
export class AppComponent { }
|
||||
45
src/app/app.module.ts
Normal file
45
src/app/app.module.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
|
||||
import { AsideToggleDirective } from './shared/aside.directive';
|
||||
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
|
||||
|
||||
// Routing Module
|
||||
import { AppRoutingModule } from './app.routing';
|
||||
|
||||
// Layouts
|
||||
import { FullLayoutComponent } from './layouts/full-layout.component';
|
||||
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
BsDropdownModule.forRoot(),
|
||||
TabsModule.forRoot(),
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
FullLayoutComponent,
|
||||
SimpleLayoutComponent,
|
||||
NAV_DROPDOWN_DIRECTIVES,
|
||||
BreadcrumbsComponent,
|
||||
SIDEBAR_TOGGLE_DIRECTIVES,
|
||||
AsideToggleDirective,
|
||||
],
|
||||
providers: [{
|
||||
provide: LocationStrategy,
|
||||
useClass: HashLocationStrategy
|
||||
}],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
62
src/app/app.routing.ts
Normal file
62
src/app/app.routing.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
// Layouts
|
||||
import { FullLayoutComponent } from './layouts/full-layout.component';
|
||||
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'dashboard',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: FullLayoutComponent,
|
||||
data: {
|
||||
title: 'Home'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
loadChildren: './dashboard/dashboard.module#DashboardModule'
|
||||
},
|
||||
{
|
||||
path: 'components',
|
||||
loadChildren: './components/components.module#ComponentsModule'
|
||||
},
|
||||
{
|
||||
path: 'icons',
|
||||
loadChildren: './icons/icons.module#IconsModule'
|
||||
},
|
||||
{
|
||||
path: 'widgets',
|
||||
loadChildren: './widgets/widgets.module#WidgetsModule'
|
||||
},
|
||||
{
|
||||
path: 'charts',
|
||||
loadChildren: './chartjs/chartjs.module#ChartJSModule'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'pages',
|
||||
component: SimpleLayoutComponent,
|
||||
data: {
|
||||
title: 'Pages'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
loadChildren: './pages/pages.module#PagesModule',
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forRoot(routes) ],
|
||||
exports: [ RouterModule ]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
20
src/app/chartjs/chartjs-routing.module.ts
Normal file
20
src/app/chartjs/chartjs-routing.module.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ChartJSComponent,
|
||||
data: {
|
||||
title: 'Charts'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ChartJSRoutingModule {}
|
||||
130
src/app/chartjs/chartjs.component.html
Normal file
130
src/app/chartjs/chartjs.component.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="card-columns cols-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Line Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[colors]="lineChartColours"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Bar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChartData"
|
||||
[labels]="barChartLabels"
|
||||
[options]="barChartOptions"
|
||||
[legend]="barChartLegend"
|
||||
[chartType]="barChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Doughnut Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartData"
|
||||
[labels]="doughnutChartLabels"
|
||||
[chartType]="doughnutChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Radar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="radarChartData"
|
||||
[labels]="radarChartLabels"
|
||||
[chartType]="radarChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Pie Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="pieChartData"
|
||||
[labels]="pieChartLabels"
|
||||
[chartType]="pieChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Polar Area Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="polarAreaChartData"
|
||||
[labels]="polarAreaChartLabels"
|
||||
[legend]="polarAreaLegend"
|
||||
[chartType]="polarAreaChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
97
src/app/chartjs/chartjs.component.ts
Normal file
97
src/app/chartjs/chartjs.component.ts
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'chartjs.component.html'
|
||||
})
|
||||
export class ChartJSComponent {
|
||||
|
||||
// lineChart
|
||||
public lineChartData: Array<any> = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
|
||||
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
|
||||
];
|
||||
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true
|
||||
};
|
||||
public lineChartColours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
},
|
||||
{ // dark grey
|
||||
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||
borderColor: 'rgba(77,83,96,1)',
|
||||
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||
},
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}
|
||||
];
|
||||
public lineChartLegend = true;
|
||||
public lineChartType = 'line';
|
||||
|
||||
// barChart
|
||||
public barChartOptions: any = {
|
||||
scaleShowVerticalLines: false,
|
||||
responsive: true
|
||||
};
|
||||
public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
public barChartType = 'bar';
|
||||
public barChartLegend = true;
|
||||
|
||||
public barChartData: any[] = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
|
||||
];
|
||||
|
||||
// Doughnut
|
||||
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
public doughnutChartData: number[] = [350, 450, 100];
|
||||
public doughnutChartType = 'doughnut';
|
||||
|
||||
// Radar
|
||||
public radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
|
||||
public radarChartData: any = [
|
||||
{data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B'}
|
||||
];
|
||||
public radarChartType = 'radar';
|
||||
|
||||
// Pie
|
||||
public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
public pieChartData: number[] = [300, 500, 100];
|
||||
public pieChartType = 'pie';
|
||||
|
||||
// PolarArea
|
||||
public polarAreaChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
public polarAreaChartData: number[] = [300, 500, 100, 40, 120];
|
||||
public polarAreaLegend = true;
|
||||
|
||||
public polarAreaChartType = 'polarArea';
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
14
src/app/chartjs/chartjs.module.ts
Normal file
14
src/app/chartjs/chartjs.module.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
import { ChartJSRoutingModule } from './chartjs-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ChartJSRoutingModule,
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [ ChartJSComponent ]
|
||||
})
|
||||
export class ChartJSModule { }
|
||||
231
src/app/components/buttons.component.html
Normal file
231
src/app/components/buttons.component.html
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
<button type="button" class="btn btn-link"><i class="fa fa-link"></i> Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-lg">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-sm">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-sm">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
|
||||
<button type="button" class="btn btn-link" disabled="disabled">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-success active">Success</button>
|
||||
<button type="button" class="btn btn-info active">Info</button>
|
||||
<button type="button" class="btn btn-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-danger active">Danger</button>
|
||||
<button type="button" class="btn btn-link active">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-link btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<!-- Secondary, outline button -->
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-outline-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger" disabled="disabled">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success active">Success</button>
|
||||
<button type="button" class="btn btn-outline-info active">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger active">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/buttons.component.ts
Normal file
10
src/app/components/buttons.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'buttons.component.html'
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
320
src/app/components/cards.component.html
Normal file
320
src/app/components/cards.component.html
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="card-footer">Card footer</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-check"></i>Card with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with switch
|
||||
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-success float-right">Success</span>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-pill badge-danger float-right">42</span>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-primary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-secondary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-success">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-info">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-warning">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-danger">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-primary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-secondary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-success">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-info">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-warning">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-danger">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-success text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-info text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-warning text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-danger text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-success">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/cards.component.ts
Normal file
10
src/app/components/cards.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'cards.component.html'
|
||||
})
|
||||
export class CardsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
84
src/app/components/components-routing.module.ts
Normal file
84
src/app/components/components-routing.module.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Components'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
data: {
|
||||
title: 'Buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'cards',
|
||||
component: CardsComponent,
|
||||
data: {
|
||||
title: 'Cards'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: FormsComponent,
|
||||
data: {
|
||||
title: 'Forms'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'modals',
|
||||
component: ModalsComponent,
|
||||
data: {
|
||||
title: 'Modals'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'social-buttons',
|
||||
component: SocialButtonsComponent,
|
||||
data: {
|
||||
title: 'Social buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'switches',
|
||||
component: SwitchesComponent,
|
||||
data: {
|
||||
title: 'Switches'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: TablesComponent,
|
||||
data: {
|
||||
title: 'Tables'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
component: TabsComponent,
|
||||
data: {
|
||||
title: 'Tabs'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ComponentsRoutingModule {}
|
||||
43
src/app/components/components.module.ts
Normal file
43
src/app/components/components.module.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
|
||||
// Forms Component
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
|
||||
// Modal Component
|
||||
import { ModalModule } from 'ngx-bootstrap/modal';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
|
||||
// Tabs Component
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
// Components Routing
|
||||
import { ComponentsRoutingModule } from './components-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ComponentsRoutingModule,
|
||||
BsDropdownModule.forRoot(),
|
||||
ModalModule.forRoot(),
|
||||
TabsModule
|
||||
],
|
||||
declarations: [
|
||||
ButtonsComponent,
|
||||
CardsComponent,
|
||||
FormsComponent,
|
||||
ModalsComponent,
|
||||
SocialButtonsComponent,
|
||||
SwitchesComponent,
|
||||
TablesComponent,
|
||||
TabsComponent
|
||||
]
|
||||
})
|
||||
export class ComponentsModule { }
|
||||
998
src/app/components/forms.component.html
Normal file
998
src/app/components/forms.component.html
Normal file
|
|
@ -0,0 +1,998 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Credit Card</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="ccnumber">Credit Card Number</label>
|
||||
<input type="text" class="form-control" id="ccnumber" placeholder="0000 0000 0000 0000">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccmonth">Month</label>
|
||||
<select class="form-control" id="ccmonth">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
<option>9</option>
|
||||
<option>10</option>
|
||||
<option>11</option>
|
||||
<option>12</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccyear">Year</label>
|
||||
<select class="form-control" id="ccyear">
|
||||
<option>2014</option>
|
||||
<option>2015</option>
|
||||
<option>2016</option>
|
||||
<option>2017</option>
|
||||
<option>2018</option>
|
||||
<option>2019</option>
|
||||
<option>2020</option>
|
||||
<option>2021</option>
|
||||
<option>2022</option>
|
||||
<option>2023</option>
|
||||
<option>2024</option>
|
||||
<option>2025</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="cvv">CVV/CVC</label>
|
||||
<input type="text" class="form-control" id="cvv" placeholder="123">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Company</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company" placeholder="Enter your company name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="vat">VAT</label>
|
||||
<input type="text" class="form-control" id="vat" placeholder="PL1234567890">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="street">Street</label>
|
||||
<input type="text" class="form-control" id="street" placeholder="Enter street name">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-8">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" placeholder="Enter your city">
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="postal-code">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal-code" placeholder="Postal Code">
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="form-group">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country" placeholder="Country name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Basic Form</strong> Elements
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Static</label>
|
||||
<div class="col-md-9">
|
||||
<p class="form-control-static">Username</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input">Text Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="email-input">Email Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="password-input">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password">
|
||||
<span class="help-block">Please enter a complex password</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="disabled-input">Disabled Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="textarea-input">Textarea</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Large</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-lg">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Small</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-sm">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Disabled Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="disabledSelect" class="form-control" disabled>
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="multiple-select">Multiple select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
<option value="4">Option #4</option>
|
||||
<option value="5">Option #5</option>
|
||||
<option value="6">Option #6</option>
|
||||
<option value="7">Option #7</option>
|
||||
<option value="8">Option #8</option>
|
||||
<option value="9">Option #9</option>
|
||||
<option value="10">Option #10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Radios</label>
|
||||
<div class="col-md-9">
|
||||
<div class="radio">
|
||||
<label for="radio1">
|
||||
<input type="radio" id="radio1" name="radios" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio2">
|
||||
<input type="radio" id="radio2" name="radios" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio3">
|
||||
<input type="radio" id="radio3" name="radios" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Radios</label>
|
||||
<div class="col-md-9">
|
||||
<label class="radio-inline" for="inline-radio1">
|
||||
<input type="radio" id="inline-radio1" name="inline-radios" value="option1"> One
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio2">
|
||||
<input type="radio" id="inline-radio2" name="inline-radios" value="option2"> Two
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio3">
|
||||
<input type="radio" id="inline-radio3" name="inline-radios" value="option3"> Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="checkbox">
|
||||
<label for="checkbox1">
|
||||
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox2">
|
||||
<input type="checkbox" id="checkbox2" name="checkbox2" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox3">
|
||||
<input type="checkbox" id="checkbox3" name="checkbox3" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<label class="checkbox-inline" for="inline-checkbox1">
|
||||
<input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1">One
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox2">
|
||||
<input type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2">Two
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox3">
|
||||
<input type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3">Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-input">File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-input" name="file-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-multiple-input">Multiple File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-multiple-input" name="file-multiple-input" multiple>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Inline</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-email">Email</label>
|
||||
<input type="email" id="if-email" name="if-email" class="form-control" placeholder="Enter Email..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-password">Password</label>
|
||||
<input type="password" id="if-password" name="if-password" class="form-control" placeholder="Enter Password..">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Horizontal</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-email">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="hf-email" name="hf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-password">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="hf-password" name="hf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Normal</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<label for="nf-email">Email</label>
|
||||
<input type="email" id="nf-email" name="nf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nf-password">Password</label>
|
||||
<input type="password" id="nf-password" name="nf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Grid</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-5">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-11">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-12">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-user"></i> Login</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Sizes</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-small">Small Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-small" name="input-small" class="form-control form-control-sm" placeholder=".form-control-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-normal">Normal Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-normal" name="input-normal" class="form-control" placeholder="Normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-large">Large Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-large" name="input-large" class="form-control form-control-lg" placeholder=".form-control-lg">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="form-form-control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> with optional icons
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess2">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning2">
|
||||
</div>
|
||||
<div class="form-group has-danger has-feedback">
|
||||
<label class="form-form-control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputError2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group1" name="input2-group1" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-euro"></i></span>
|
||||
<input type="text" id="input3-group1" name="input3-group1" class="form-control" placeholder="..">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Buttons</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
|
||||
</span>
|
||||
<input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
|
||||
</span>
|
||||
<input type="text" id="input3-group2" name="input3-group2" class="form-control" placeholder="Search">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input1-group3" name="input1-group3" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group3" name="input2-group3" class="form-control" placeholder="Email">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button type="button" dropdownToggle class="btn btn-primary dropdown-toggle dropdown-toggle-split">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Split button!</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input3-group3" name="input3-group3" class="form-control" placeholder="..">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Use the grid for big devices!
|
||||
<small>
|
||||
<code>.col-lg-*</code>
|
||||
<code>.col-md-*</code>
|
||||
<code>.col-sm-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input Grid for small devices!
|
||||
<small>
|
||||
<code>.col-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Username</span>
|
||||
<input type="text" id="username3" name="username3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Email</span>
|
||||
<input type="email" id="email3" name="email3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Password</span>
|
||||
<input type="password" id="password3" name="password3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="text" id="username2" name="username2" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="email" id="email2" name="email2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="password" id="password2" name="password2" class="form-control" placeholder="Password">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-default">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-success">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-edit"></i>Form Elements
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<a href="#" class="btn-minimize"><i class="icon-arrow-up"></i></a>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form class="form-2orizontal">
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text">
|
||||
</div>
|
||||
<p class="help-block">Here's some help text</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInput">Appended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<span class="help-block">Here's more help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedPrependedInput">Append and prepend</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input id="appendedPrependedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButton">Append with button</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButton" class="form-control" size="16" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButtons">Two-button append</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButtons" size="16" class="form-control" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Search</button>
|
||||
<button class="btn btn-default" type="button">Options</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn btn-default" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/forms.component.ts
Normal file
10
src/app/components/forms.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'forms.component.html'
|
||||
})
|
||||
export class FormsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
202
src/app/components/modals.component.html
Normal file
202
src/app/components/modals.component.html
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="myModal.show()">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="largeModal.show()">
|
||||
Launch large modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
|
||||
Launch small modal
|
||||
</button>
|
||||
<hr>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" (click)="primaryModal.show()">
|
||||
Primary modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" (click)="successModal.show()">
|
||||
Success modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" (click)="warningModal.show()">
|
||||
Warning modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" (click)="dangerModal.show()">
|
||||
Danger modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" (click)="infoModal.show()">
|
||||
Info modal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
||||
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #primaryModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-primary" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="primaryModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="primaryModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #successModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-success" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="successModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-warning" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="warningModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="warningModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-danger" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #infoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-info" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="infoModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="infoModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
16
src/app/components/modals.component.ts
Normal file
16
src/app/components/modals.component.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'modals.component.html'
|
||||
})
|
||||
export class ModalsComponent {
|
||||
public myModal;
|
||||
public largeModal;
|
||||
public smallModal;
|
||||
public primaryModal;
|
||||
public successModal;
|
||||
public warningModal;
|
||||
public dangerModal;
|
||||
public infoModal;
|
||||
}
|
||||
788
src/app/components/social-buttons.component.html
Normal file
788
src/app/components/social-buttons.component.html
Normal file
|
|
@ -0,0 +1,788 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only icons. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook icon" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only text. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook text" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/social-buttons.component.ts
Normal file
10
src/app/components/social-buttons.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'social-buttons.component.html'
|
||||
})
|
||||
export class SocialButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
942
src/app/components/switches.component.html
Normal file
942
src/app/components/switches.component.html
Normal file
|
|
@ -0,0 +1,942 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
3d Switch
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Sizes
|
||||
</div>
|
||||
<div class="card-block p-0">
|
||||
<table class="table table-hover table-striped table-align-middle mb-0">
|
||||
<thead>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-lg switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-lg</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-sm switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Extra small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-xs switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/switches.component.ts
Normal file
10
src/app/components/switches.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'switches.component.html'
|
||||
})
|
||||
export class SwitchesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
373
src/app/components/tables.component.html
Normal file
373
src/app/components/tables.component.html
Normal file
|
|
@ -0,0 +1,373 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Simple Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Samppa Nori</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estavan Lykos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chetan Mohamed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Derick Maximinus</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Friderik Dávid</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Striped Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Yiorgos Avraamu</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avram Tarasios</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quintin Ed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Enéas Kwadwo</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agapetus Tadeáš</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Condensed Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Carwyn Fachtna</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nehemiah Tatius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebbe Gemariah</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eustorgios Amulius</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Leopold Gáspár</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bordered Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Pompeius René</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paĉjo Jadon</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Micheal Mercurius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ganesha Dubhghall</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hiroto Šimun</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Combined All Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-bordered table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Vishnu Serghei</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zbyněk Phoibos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Einar Randall</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Félix Troels</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aulus Agmundr</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/tables.component.ts
Normal file
10
src/app/components/tables.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tables.component.html'
|
||||
})
|
||||
export class TablesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
69
src/app/components/tabs.component.html
Normal file
69
src/app/components/tabs.component.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab heading="Home">
|
||||
1. 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.
|
||||
</tab>
|
||||
<tab heading="Profile">
|
||||
2. 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.
|
||||
</tab>
|
||||
<tab heading="Messages">
|
||||
3. 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.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i></ng-template>
|
||||
2. 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.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i></ng-template>
|
||||
3. 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.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i></ng-template>
|
||||
4. 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.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator</ng-template>
|
||||
2. 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.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i> Shoping cart</ng-template>
|
||||
3. 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.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. 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.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i> Menu <span class="badge badge-success">New</span></ng-template>
|
||||
1. 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.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator <span class="badge badge-pill badge-danger">29</span></ng-template>
|
||||
2. 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.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. 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.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
10
src/app/components/tabs.component.ts
Normal file
10
src/app/components/tabs.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tabs.component.html'
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
21
src/app/dashboard/dashboard-routing.module.ts
Normal file
21
src/app/dashboard/dashboard-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes,
|
||||
RouterModule } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: DashboardComponent,
|
||||
data: {
|
||||
title: 'Dashboard'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DashboardRoutingModule {}
|
||||
940
src/app/dashboard/dashboard.component.html
Normal file
940
src/app/dashboard/dashboard.component.html
Normal file
|
|
@ -0,0 +1,940 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart1Data"
|
||||
[labels]="lineChart1Labels"
|
||||
[options]="lineChart1Options"
|
||||
[colors]="lineChart1Colours"
|
||||
[legend]="lineChart1Legend"
|
||||
[chartType]="lineChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-block pb-0">
|
||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
||||
<i class="icon-location-pin"></i>
|
||||
</button>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart2Data"
|
||||
[labels]="lineChart2Labels"
|
||||
[options]="lineChart2Options"
|
||||
[colors]="lineChart2Colours"
|
||||
[legend]="lineChart2Legend"
|
||||
[chartType]="lineChart2Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right">
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChart3Data"
|
||||
[labels]="lineChart3Labels"
|
||||
[options]="lineChart3Options"
|
||||
[colors]="lineChart3Colours"
|
||||
[legend]="lineChart3Legend"
|
||||
[chartType]="lineChart3Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChart1Data"
|
||||
[labels]="barChart1Labels"
|
||||
[options]="barChart1Options"
|
||||
[colors]="barChart1Colours"
|
||||
[legend]="barChart1Legend"
|
||||
[chartType]="barChart1Type"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<h4 class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2015</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-7 hidden-sm-down">
|
||||
<button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="options" id="option1"> Day
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary active">
|
||||
<input type="radio" name="options" id="option2" checked> Month
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary">
|
||||
<input type="radio" name="options" id="option3"> Year
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="mainChartData"
|
||||
[labels]="mainChartLabels"
|
||||
[options]="mainChartOptions"
|
||||
[colors]="mainChartColours"
|
||||
[legend]="mainChartLegend"
|
||||
[chartType]="mainChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>40.15%</strong>
|
||||
<div class="progress progress-xs mt-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.card-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData1"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData2"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData3"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="socialChartData4"
|
||||
[labels]="socialChartLabels"
|
||||
[options]="socialChartOptions"
|
||||
[colors]="socialChartColours"
|
||||
[legend]="socialChartLegend"
|
||||
[chartType]="socialChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Traffic & Sales
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-info">
|
||||
<small class="text-muted">New Clients</small>
|
||||
<br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartInfo"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-danger">
|
||||
<small class="text-muted">Recuring Clients</small>
|
||||
<br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartDanger"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars">
|
||||
<li>
|
||||
<div class="title">
|
||||
Monday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Friday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="legend">
|
||||
<span class="badge badge-pill badge-info"></span> <small>New clients</small> <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-warning">
|
||||
<small class="text-muted">Pageviews</small>
|
||||
<br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartWarning"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-success">
|
||||
<small class="text-muted">Organic</small>
|
||||
<br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartSuccess"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<i class="icon-user"></i>
|
||||
<span class="title">Male</span>
|
||||
<span class="value">43%</span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user-female"></i>
|
||||
<span class="title">Female</span>
|
||||
<span class="value">37%</span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<i class="icon-globe"></i>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-facebook"></i>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-twitter"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-linkedin"></i>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="show more"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="callout">
|
||||
<small class="text-muted">CTR</small>
|
||||
<br>
|
||||
<strong class="h4">23%</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData1"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartDefault"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="callout callout-primary">
|
||||
<small class="text-muted">Bounce Rate</small>
|
||||
<br>
|
||||
<strong class="h4">5%</strong>
|
||||
<div class="chart-wrapper" style="width:100px;height:30px;">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="sparklineChartData2"
|
||||
[labels]="sparklineChartLabels"
|
||||
[options]="sparklineChartOptions"
|
||||
[colors]="sparklineChartPrimary"
|
||||
[legend]="sparklineChartLegend"
|
||||
[chartType]="sparklineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="icons-list">
|
||||
<li>
|
||||
<i class="icon-screen-desktop bg-primary"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iMac 4k</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-info"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Samsung Galaxy Edge</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.224</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iPhone 6S</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.163</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Premium accounts</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>928</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-spotify bg-success"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Spotify Subscriptions</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>893</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cloud-download bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Ebook</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Downloads</div>
|
||||
<strong>121.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-camera bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Photos</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Uploaded</div>
|
||||
<strong>12.125</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<br>
|
||||
<div class="table-responsive"></div>
|
||||
<table class="table table-responsive table-hover table-outline mb-0">
|
||||
<thead class="thead-default">
|
||||
<tr>
|
||||
<th class="text-center"><i class="icon-people"></i></th>
|
||||
<th>User</th>
|
||||
<th class="text-center">Country</th>
|
||||
<th>Usage</th>
|
||||
<th class="text-center">Payment Method</th>
|
||||
<th>Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/1.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/1.jpg">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/USA.png" alt="USA" style="height:24px;" src="assets/img/flags/USA.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>50%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-mastercard" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>10 sec ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/2.jpg">
|
||||
<span class="avatar-status badge-danger"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Avram Tarasios</div>
|
||||
<div class="small text-muted">
|
||||
|
||||
<span>Recurring</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Brazil.png" alt="Brazil" style="height:24px;" src="assets/img/flags/Brazil.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>10%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-visa" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>5 minutes ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/3.jpg">
|
||||
<span class="avatar-status badge-warning"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Quintin Ed</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/India.png" alt="India" style="height:24px;" src="assets/img/flags/India.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>74%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-stripe" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>1 hour ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/4.jpg">
|
||||
<span class="avatar-status badge-default"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Enéas Kwadwo</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/France.png" alt="France" style="height:24px;" src="assets/img/flags/France.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>98%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-paypal" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Last month</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/5.jpg">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Spain.png" alt="Spain" style="height:24px;" src="assets/img/flags/Spain.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>22%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-google-wallet" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Last week</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="assets/img/avatars/6.jpg">
|
||||
<span class="avatar-status badge-danger"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>Friderik Dávid</div>
|
||||
<div class="small text-muted">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<img src="assets/img/flags/Poland.png" alt="Poland" style="height:24px;" src="assets/img/flags/Poland.png">
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>43%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<i class="fa fa-cc-amex" style="font-size:24px"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>Yesterday</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
473
src/app/dashboard/dashboard.component.ts
Normal file
473
src/app/dashboard/dashboard.component.ts
Normal file
|
|
@ -0,0 +1,473 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'dashboard.component.html'
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
// constructor( ) { }
|
||||
|
||||
public brandPrimary = '#20a8d8';
|
||||
public brandSuccess = '#4dbd74';
|
||||
public brandInfo = '#63c2de';
|
||||
public brandWarning = '#f8cb00';
|
||||
public brandDanger = '#f86c6b';
|
||||
|
||||
// dropdown buttons
|
||||
public status: { isopen } = { isopen: false };
|
||||
public toggleDropdown($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.status.isopen = !this.status.isopen;
|
||||
}
|
||||
|
||||
// convert Hex to RGBA
|
||||
public convertHex(hex: string, opacity: number) {
|
||||
hex = hex.replace('#', '');
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
|
||||
return rgba;
|
||||
}
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
// lineChart1
|
||||
public lineChart1Data: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart1Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 40 - 5,
|
||||
max: 84 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart1Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart1Legend = false;
|
||||
public lineChart1Type = 'line';
|
||||
|
||||
// lineChart2
|
||||
public lineChart2Data: Array<any> = [
|
||||
{
|
||||
data: [1, 18, 9, 17, 34, 22, 11],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart2Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart2Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: 1 - 5,
|
||||
max: 34 + 5,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.00001,
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart2Colours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: this.brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChart2Legend = false;
|
||||
public lineChart2Type = 'line';
|
||||
|
||||
|
||||
// lineChart3
|
||||
public lineChart3Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChart3Labels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChart3Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChart3Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
}
|
||||
];
|
||||
public lineChart3Legend = false;
|
||||
public lineChart3Type = 'line';
|
||||
|
||||
|
||||
// barChart1
|
||||
public barChart1Data: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 78, 81, 80, 45, 34, 12, 40, 12, 40],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public barChart1Labels: Array<any> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
|
||||
public barChart1Options: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public barChart1Colours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderWidth: 0
|
||||
}
|
||||
];
|
||||
public barChart1Legend = false;
|
||||
public barChart1Type = 'bar';
|
||||
|
||||
// mainChart
|
||||
|
||||
public random(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
public mainChartElements = 27;
|
||||
public mainChartData1: Array<number> = [];
|
||||
public mainChartData2: Array<number> = [];
|
||||
public mainChartData3: Array<number> = [];
|
||||
|
||||
public mainChartData: Array<any> = [
|
||||
{
|
||||
data: this.mainChartData1,
|
||||
label: 'Current'
|
||||
},
|
||||
{
|
||||
data: this.mainChartData2,
|
||||
label: 'Previous'
|
||||
},
|
||||
{
|
||||
data: this.mainChartData3,
|
||||
label: 'BEP'
|
||||
}
|
||||
];
|
||||
/* tslint:disable:max-line-length */
|
||||
public mainChartLabels: Array<any> = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
/* tslint:enable:max-line-length */
|
||||
public mainChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value: any) {
|
||||
return value.charAt(0);
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public mainChartColours: Array<any> = [
|
||||
{ // brandInfo
|
||||
backgroundColor: this.convertHex(this.brandInfo, 10),
|
||||
borderColor: this.brandInfo,
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
},
|
||||
{ // brandSuccess
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
},
|
||||
{ // brandDanger
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5]
|
||||
}
|
||||
];
|
||||
public mainChartLegend = false;
|
||||
public mainChartType = 'line';
|
||||
|
||||
// social box charts
|
||||
|
||||
public socialChartData1: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Facebook'
|
||||
}
|
||||
];
|
||||
public socialChartData2: Array<any> = [
|
||||
{
|
||||
data: [1, 13, 9, 17, 34, 41, 38],
|
||||
label: 'Twitter'
|
||||
}
|
||||
];
|
||||
public socialChartData3: Array<any> = [
|
||||
{
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
label: 'LinkedIn'
|
||||
}
|
||||
];
|
||||
public socialChartData4: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Google+'
|
||||
}
|
||||
];
|
||||
|
||||
public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public socialChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public socialChartColours: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
}
|
||||
];
|
||||
public socialChartLegend = false;
|
||||
public socialChartType = 'line';
|
||||
|
||||
// sparkline charts
|
||||
|
||||
public sparklineChartData1: Array<any> = [
|
||||
{
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
public sparklineChartData2: Array<any> = [
|
||||
{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
label: 'Clients'
|
||||
}
|
||||
];
|
||||
|
||||
public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public sparklineChartOptions: any = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public sparklineChartDefault: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#d1d4d7',
|
||||
}
|
||||
];
|
||||
public sparklineChartPrimary: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandPrimary,
|
||||
}
|
||||
];
|
||||
public sparklineChartInfo: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandInfo,
|
||||
}
|
||||
];
|
||||
public sparklineChartDanger: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandDanger,
|
||||
}
|
||||
];
|
||||
public sparklineChartWarning: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandWarning,
|
||||
}
|
||||
];
|
||||
public sparklineChartSuccess: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.brandSuccess,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
public sparklineChartLegend = false;
|
||||
public sparklineChartType = 'line';
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
// generate random values for mainChart
|
||||
for (let i = 0; i <= this.mainChartElements; i++) {
|
||||
this.mainChartData1.push(this.random(50, 200));
|
||||
this.mainChartData2.push(this.random(80, 100));
|
||||
this.mainChartData3.push(65);
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/app/dashboard/dashboard.module.ts
Normal file
16
src/app/dashboard/dashboard.module.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardRoutingModule } from './dashboard-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
DashboardRoutingModule,
|
||||
ChartsModule,
|
||||
BsDropdownModule
|
||||
],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
3547
src/app/icons/font-awesome.component.html
Normal file
3547
src/app/icons/font-awesome.component.html
Normal file
File diff suppressed because it is too large
Load diff
10
src/app/icons/font-awesome.component.ts
Normal file
10
src/app/icons/font-awesome.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'font-awesome.component.html'
|
||||
})
|
||||
export class FontAwesomeComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
36
src/app/icons/icons-routing.module.ts
Normal file
36
src/app/icons/icons-routing.module.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { FontAwesomeComponent } from './font-awesome.component';
|
||||
import { SimpleLineIconsComponent } from './simple-line-icons.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Icons'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'font-awesome',
|
||||
component: FontAwesomeComponent,
|
||||
data: {
|
||||
title: 'Font Awesome'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'simple-line-icons',
|
||||
component: SimpleLineIconsComponent,
|
||||
data: {
|
||||
title: 'Simple Line Icons'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class IconsRoutingModule {}
|
||||
15
src/app/icons/icons.module.ts
Normal file
15
src/app/icons/icons.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FontAwesomeComponent } from './font-awesome.component';
|
||||
import { SimpleLineIconsComponent } from './simple-line-icons.component';
|
||||
|
||||
import { IconsRoutingModule } from './icons-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [ IconsRoutingModule ],
|
||||
declarations: [
|
||||
FontAwesomeComponent,
|
||||
SimpleLineIconsComponent
|
||||
]
|
||||
})
|
||||
export class IconsModule { }
|
||||
561
src/app/icons/simple-line-icons.component.html
Normal file
561
src/app/icons/simple-line-icons.component.html
Normal file
|
|
@ -0,0 +1,561 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-picture-o"></i> Simple Line Icons
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row text-center">
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/icons/simple-line-icons.component.ts
Normal file
10
src/app/icons/simple-line-icons.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'simple-line-icons.component.html'
|
||||
})
|
||||
export class SimpleLineIconsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
420
src/app/layouts/full-layout.component.html
Normal file
420
src/app/layouts/full-layout.component.html
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
<header class="app-header navbar">
|
||||
<button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>☰</button>
|
||||
<a class="navbar-brand" href="#"></a>
|
||||
<ul class="nav navbar-nav d-md-down-none">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link navbar-toggler" href="#" appSidebarToggler>☰</a>
|
||||
</li>
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Users</a>
|
||||
</li>
|
||||
<li class="nav-item px-3">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
|
||||
</li>
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link" href="#"><i class="icon-list"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
|
||||
<a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="d-md-down-none">admin</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
|
||||
|
||||
<div class="dropdown-header text-center"><strong>Account</strong></div>
|
||||
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comment<span class="badge badge-warning">42</span></a>
|
||||
|
||||
<div class="dropdown-header text-center"><strong>Settings</strong></div>
|
||||
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Setting</a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-default">42</span></a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>
|
||||
<div class="divider"></div>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock account</a>
|
||||
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item d-md-down-none">
|
||||
<a class="nav-link navbar-toggler" href="#" appAsideMenuToggler>☰</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<div class="app-body">
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-title">
|
||||
UI Elements
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-puzzle"></i> Components</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/buttons']"><i class="icon-puzzle"></i> Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/social-buttons']"><i class="icon-puzzle"></i> Social Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/cards']"><i class="icon-puzzle"></i> Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/forms']"><i class="icon-puzzle"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/modals']"><i class="icon-puzzle"></i> Modals</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/switches']"><i class="icon-puzzle"></i> Switches</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tables']"><i class="icon-puzzle"></i> Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tabs']"><i class="icon-puzzle"></i> Tabs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Icons</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/font-awesome']"><i class="icon-star"></i> Font Awesome</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/simple-line-icons']"><i class="icon-star"></i> Simple Line Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/widgets']"><i class="icon-calculator"></i> Widgets <span class="badge badge-info">NEW</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/charts']"><i class="icon-pie-chart"></i> Charts</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-title">
|
||||
Extras
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" appNavDropdown>
|
||||
<a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Pages</a>
|
||||
<ul class="nav-dropdown-items">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/login']"><i class="icon-star"></i> Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/register']"><i class="icon-star"></i> Register</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/404']"><i class="icon-star"></i> Error 404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/500']"><i class="icon-star"></i> Error 500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="main">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<ol class="breadcrumb">
|
||||
<app-breadcrumbs></app-breadcrumbs>
|
||||
<!-- Breadcrumb Menu-->
|
||||
<li class="breadcrumb-menu d-md-down-none">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<a class="btn btn-secondary" href="#"><i class="icon-speech"></i></a>
|
||||
<a class="btn btn-secondary" [routerLink]="['/dashboard']"><i class="icon-graph"></i> Dashboard</a>
|
||||
<a class="btn btn-secondary" href="#"><i class="icon-settings"></i> Settings</a>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="container-fluid">
|
||||
<router-outlet></router-outlet>
|
||||
</div><!-- /.conainer-fluid -->
|
||||
</main>
|
||||
|
||||
<aside class="aside-menu">
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i></ng-template>
|
||||
<div class="callout m-0 py-2 text-muted text-center bg-faded text-uppercase">
|
||||
<small><b>Today</b></small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout callout-warning m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Meeting with <strong>Lucas</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-info m-0 py-3">
|
||||
<div class="avatar float-right">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div>Skype with <strong>Megan</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
|
||||
<small class="text-muted"><i class="icon-social-skype"></i> On-line </small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout m-0 py-2 text-muted text-center bg-faded text-uppercase">
|
||||
<small><b>Tomorrow</b></small>
|
||||
</div>
|
||||
<hr class="transparent mx-3 my-0">
|
||||
<div class="callout callout-danger m-0 py-3">
|
||||
<div>New UI Project - <strong>deadline</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-success m-0 py-3">
|
||||
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
<div class="callout callout-primary m-0 py-3">
|
||||
<div><strong>Team meeting</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
||||
<div class="avatars-stack mt-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
<div class="avatar avatar-xs">
|
||||
<img src="assets/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mx-3 my-0">
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-speech"></i></ng-template>
|
||||
<div class="p-3">
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="message">
|
||||
<div class="py-3 pb-5 mr-3 float-left">
|
||||
<div class="avatar">
|
||||
<img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||
<span class="avatar-status badge-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lukasz Holeczek</small>
|
||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-settings"></i></ng-template>
|
||||
<div class="p-3">
|
||||
<h6>Settings</h6>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-4">
|
||||
<small><b>Option 1</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 2</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 3</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 4</b></small>
|
||||
<label class="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h6>System Utilization</h6>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">11444GB/16384MB</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">243GB/256GB</small>
|
||||
|
||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<small class="text-muted">25GB/256GB</small>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
<a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.
|
||||
<span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||
</footer>
|
||||
23
src/app/layouts/full-layout.component.ts
Normal file
23
src/app/layouts/full-layout.component.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './full-layout.component.html'
|
||||
})
|
||||
export class FullLayoutComponent implements OnInit {
|
||||
|
||||
public disabled = false;
|
||||
public status: {isopen: boolean} = {isopen: false};
|
||||
|
||||
public toggled(open: boolean): void {
|
||||
console.log('Dropdown is now: ', open);
|
||||
}
|
||||
|
||||
public toggleDropdown($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
this.status.isopen = !this.status.isopen;
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
0
src/app/layouts/simple-layout.component.html
Normal file
0
src/app/layouts/simple-layout.component.html
Normal file
12
src/app/layouts/simple-layout.component.ts
Normal file
12
src/app/layouts/simple-layout.component.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
template: '<router-outlet></router-outlet>',
|
||||
})
|
||||
export class SimpleLayoutComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
}
|
||||
20
src/app/pages/404.component.html
Normal file
20
src/app/pages/404.component.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">404</h1>
|
||||
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||
<p class="text-muted">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-info" type="button">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/404.component.ts
Normal file
10
src/app/pages/404.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: '404.component.html'
|
||||
})
|
||||
export class P404Component {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
20
src/app/pages/500.component.html
Normal file
20
src/app/pages/500.component.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">500</h1>
|
||||
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||
</div>
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-info" type="button">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/500.component.ts
Normal file
10
src/app/pages/500.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: '500.component.html'
|
||||
})
|
||||
export class P500Component {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
41
src/app/pages/login.component.html
Normal file
41
src/app/pages/login.component.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card-group mb-0">
|
||||
<div class="card p-4">
|
||||
<div class="card-block">
|
||||
<h1>Login</h1>
|
||||
<p class="text-muted">Sign In to your account</p>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-primary px-4">Login</button>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<button type="button" class="btn btn-link px-0">Forgot password?</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
|
||||
<div class="card-block text-center">
|
||||
<div>
|
||||
<h2>Sign up</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/login.component.ts
Normal file
10
src/app/pages/login.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'login.component.html'
|
||||
})
|
||||
export class LoginComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
52
src/app/pages/pages-routing.module.ts
Normal file
52
src/app/pages/pages-routing.module.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { P404Component } from './404.component';
|
||||
import { P500Component } from './500.component';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { RegisterComponent } from './register.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'Example Pages'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '404',
|
||||
component: P404Component,
|
||||
data: {
|
||||
title: 'Page 404'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '500',
|
||||
component: P500Component,
|
||||
data: {
|
||||
title: 'Page 500'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
component: LoginComponent,
|
||||
data: {
|
||||
title: 'Login Page'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
component: RegisterComponent,
|
||||
data: {
|
||||
title: 'Register Page'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PagesRoutingModule {}
|
||||
19
src/app/pages/pages.module.ts
Normal file
19
src/app/pages/pages.module.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { P404Component } from './404.component';
|
||||
import { P500Component } from './500.component';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { RegisterComponent } from './register.component';
|
||||
|
||||
import { PagesRoutingModule } from './pages-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [ PagesRoutingModule ],
|
||||
declarations: [
|
||||
P404Component,
|
||||
P500Component,
|
||||
LoginComponent,
|
||||
RegisterComponent
|
||||
]
|
||||
})
|
||||
export class PagesModule { }
|
||||
45
src/app/pages/register.component.html
Normal file
45
src/app/pages/register.component.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card mx-4">
|
||||
<div class="card-block p-4">
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Repeat password">
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-block btn-success">Create Account</button>
|
||||
</div>
|
||||
<div class="card-footer p-4">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
10
src/app/pages/register.component.ts
Normal file
10
src/app/pages/register.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'register.component.html'
|
||||
})
|
||||
export class RegisterComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
17
src/app/shared/aside.directive.ts
Normal file
17
src/app/shared/aside.directive.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Allows the aside to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appAsideMenuToggler]',
|
||||
})
|
||||
export class AsideToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('aside-menu-hidden');
|
||||
}
|
||||
}
|
||||
42
src/app/shared/breadcrumb.component.ts
Normal file
42
src/app/shared/breadcrumb.component.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
||||
import 'rxjs/add/operator/filter';
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumbs',
|
||||
template: `
|
||||
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
|
||||
<li class="breadcrumb-item"
|
||||
*ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
|
||||
[ngClass]="{active: last}">
|
||||
<a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
|
||||
<span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
|
||||
</li>
|
||||
</ng-template>`
|
||||
})
|
||||
export class BreadcrumbsComponent implements OnInit {
|
||||
breadcrumbs: Array<Object>;
|
||||
constructor(private router: Router, private route: ActivatedRoute) {}
|
||||
ngOnInit(): void {
|
||||
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
|
||||
this.breadcrumbs = [];
|
||||
let currentRoute = this.route.root,
|
||||
url = '';
|
||||
do {
|
||||
const childrenRoutes = currentRoute.children;
|
||||
currentRoute = null;
|
||||
childrenRoutes.forEach(route => {
|
||||
if (route.outlet === 'primary') {
|
||||
const routeSnapshot = route.snapshot;
|
||||
url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
|
||||
this.breadcrumbs.push({
|
||||
label: route.snapshot.data,
|
||||
url: url
|
||||
});
|
||||
currentRoute = route;
|
||||
}
|
||||
});
|
||||
} while (currentRoute);
|
||||
});
|
||||
}
|
||||
}
|
||||
31
src/app/shared/nav-dropdown.directive.ts
Normal file
31
src/app/shared/nav-dropdown.directive.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { Directive, HostListener, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[appNavDropdown]'
|
||||
})
|
||||
export class NavDropdownDirective {
|
||||
|
||||
constructor(private el: ElementRef) { }
|
||||
|
||||
toggle() {
|
||||
this.el.nativeElement.classList.toggle('open');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the dropdown to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appNavDropdownToggle]'
|
||||
})
|
||||
export class NavDropdownToggleDirective {
|
||||
constructor(private dropdown: NavDropdownDirective) {}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
this.dropdown.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];
|
||||
92
src/app/shared/sidebar.directive.ts
Normal file
92
src/app/shared/sidebar.directive.ts
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Allows the sidebar to be toggled via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appSidebarToggler]'
|
||||
})
|
||||
export class SidebarToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[appSidebarMinimizer]'
|
||||
})
|
||||
export class SidebarMinimizeDirective {
|
||||
constructor() { }
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-minimized');
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[appMobileSidebarToggler]'
|
||||
})
|
||||
export class MobileSidebarToggleDirective {
|
||||
constructor() { }
|
||||
|
||||
// Check if element has class
|
||||
private hasClass(target: any, elementClassName: string) {
|
||||
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
document.querySelector('body').classList.toggle('sidebar-mobile-show');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the off-canvas sidebar to be closed via click.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[appSidebarClose]'
|
||||
})
|
||||
export class SidebarOffCanvasCloseDirective {
|
||||
constructor() { }
|
||||
|
||||
// Check if element has class
|
||||
private hasClass(target: any, elementClassName: string) {
|
||||
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
|
||||
}
|
||||
|
||||
// Toggle element class
|
||||
private toggleClass(elem: any, elementClassName: string) {
|
||||
let newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
|
||||
if (this.hasClass(elem, elementClassName)) {
|
||||
while (newClass.indexOf(' ' + elementClassName + ' ') >= 0 ) {
|
||||
newClass = newClass.replace( ' ' + elementClassName + ' ' , ' ' );
|
||||
}
|
||||
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
||||
} else {
|
||||
elem.className += ' ' + elementClassName;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
toggleOpen($event: any) {
|
||||
$event.preventDefault();
|
||||
|
||||
if (this.hasClass(document.querySelector('body'), 'sidebar-off-canvas')) {
|
||||
this.toggleClass(document.querySelector('body'), 'sidebar-opened');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const SIDEBAR_TOGGLE_DIRECTIVES = [
|
||||
SidebarToggleDirective,
|
||||
SidebarMinimizeDirective,
|
||||
SidebarOffCanvasCloseDirective,
|
||||
MobileSidebarToggleDirective
|
||||
];
|
||||
Some files were not shown because too many files have changed in this diff Show more
Reference in a new issue