initial commit
This commit is contained in:
Mason Payne
42
.gitignore
vendored
Normal file
42
.gitignore
vendored
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# compiled output
|
||||||
|
/dist
|
||||||
|
/tmp
|
||||||
|
/out-tsc
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
/.idea
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# IDE - VSCode
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
|
||||||
|
# misc
|
||||||
|
/.sass-cache
|
||||||
|
/connect.lock
|
||||||
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
|
npm-debug.log
|
||||||
|
testem.log
|
||||||
|
/typings
|
||||||
|
|
||||||
|
# e2e
|
||||||
|
/e2e/*.js
|
||||||
|
/e2e/*.map
|
||||||
|
|
||||||
|
# System Files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
57
CHANGELOG.md
Normal file
57
CHANGELOG.md
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
## [2.2.0] - 2018-11-14
|
||||||
|
### Changes
|
||||||
|
- update to Angular 7
|
||||||
|
- update all dependencies to match Angular 7 version
|
||||||
|
|
||||||
|
## [2.1.1] - 2018-05-23
|
||||||
|
### Fixes
|
||||||
|
- changed some links
|
||||||
|
|
||||||
|
## [2.1.0] - 2018-04-27
|
||||||
|
### Fixes
|
||||||
|
- changed file structure
|
||||||
|
- moved documentation online
|
||||||
|
|
||||||
|
## [2.0.0] - 2018-04-20
|
||||||
|
### Fixes
|
||||||
|
- added bootstrap 4
|
||||||
|
- added angular 5
|
||||||
|
|
||||||
|
## [1.4.2] - 2017-10-01
|
||||||
|
### Fixes
|
||||||
|
- added Perfect Scrollbar
|
||||||
|
- added scrollTop on route change
|
||||||
|
- added closeSidebar on mobile
|
||||||
|
- autocompile scss files
|
||||||
|
- fixes for IE
|
||||||
|
- update package dependencies to 4.4.4
|
||||||
|
|
||||||
|
## [1.4.1] - 2017-09-19
|
||||||
|
### Material
|
||||||
|
- added material.init()
|
||||||
|
- fixed input float problem
|
||||||
|
- fixed checkboxes in tabs
|
||||||
|
|
||||||
|
## [1.4.0] - 2017-08-23
|
||||||
|
### Changes for Angular 4
|
||||||
|
- added angular-cli
|
||||||
|
- update to Angular 4
|
||||||
|
|
||||||
|
## [v1.3.0] 2017-08-23
|
||||||
|
### skipped for sync with Angular 4 version convention
|
||||||
|
|
||||||
|
## [1.2.0] - 2017-04-05
|
||||||
|
### Added
|
||||||
|
- added Upgrade to PRO page
|
||||||
|
- update package
|
||||||
|
- made sidebar dynamic
|
||||||
|
|
||||||
|
## [1.1.1] - 2017-03-21
|
||||||
|
### Added
|
||||||
|
- added "@types/core-js": "0.9.35" in package
|
||||||
|
|
||||||
|
## [1.1.0] - 2017-03-20
|
||||||
|
### small fix
|
||||||
|
|
||||||
|
## [1.0.0] - 2017-01-30
|
||||||
|
### initial Release
|
||||||
21
LICENSE.md
Normal file
21
LICENSE.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2017 Creative Tim (www.creative-tim.com)
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
183
README.md
Normal file
183
README.md
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
# [Material Dashboard Angular - Free Bootstrap Material Design Admin](https://www.creative-tim.com/product/material-dashboard-angular2)[![version][version-badge]][CHANGELOG]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**[Material Dashboard Angular](https://www.creative-tim.com/product/material-dashboard-angular2/)** is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.
|
||||||
|
|
||||||
|
Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.
|
||||||
|
|
||||||
|
This product came as a result of users asking for a material dashboard after we released our successful [Material Kit](http://www.creative-tim.com/product/material-kit). We developed it based on your feedback and it is a powerful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs.
|
||||||
|
|
||||||
|
Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.
|
||||||
|
|
||||||
|
Material Dashboard uses a framework built by our friend [Federico - Bootstrap Material Design](http://fezvrasta.github.io/bootstrap-material-design/), who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to his team for the effort and forward thinking they put into it.
|
||||||
|
|
||||||
|
Special thanks go to:
|
||||||
|
[Robert McIntosh](https://github.com/mouse0270/bootstrap-notify) for the notification system.
|
||||||
|
[Chartist](https://gionkunz.github.io/chartist-js/) for the wonderful charts.
|
||||||
|
We are very excited to share this dashboard with you and we look forward to hearing your feedback!
|
||||||
|
|
||||||
|
You can find the Github Repo here.
|
||||||
|
|
||||||
|
## Links:
|
||||||
|
|
||||||
|
+ [Live Preview](https://www.creative-tim.com/product/material-dashboard-angular2)
|
||||||
|
+ [Material Kit - For Front End Development](http://www.creative-tim.com/product/material-kit?ref=github-md-angular)
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
Quick start options:
|
||||||
|
|
||||||
|
- [Download from Github](https://github.com/tiniestory/material-dashboard-angular2/archive/master.zip).
|
||||||
|
- [Download from Creative Tim](http://www.creative-tim.com/product/material-dashboard-angular2).
|
||||||
|
|
||||||
|
## Terminal Commands
|
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0 and angular 4.x.
|
||||||
|
|
||||||
|
1. Install NodeJs from [NodeJs Official Page](https://nodejs.org/en).
|
||||||
|
2. Open Terminal
|
||||||
|
3. Go to your file project
|
||||||
|
4. Make sure you have installed [Angular CLI](https://github.com/angular/angular-cli) already. If not, please install.
|
||||||
|
5. Run in terminal: ```npm install```
|
||||||
|
6. 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.
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
||||||
|
### What's included
|
||||||
|
|
||||||
|
Within the download you'll find the following directories and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
material-dashboard-angular
|
||||||
|
├── CHANGELOG.md
|
||||||
|
├── LICENSE.md
|
||||||
|
├── README.md
|
||||||
|
├── angular-cli.json
|
||||||
|
├── documentation
|
||||||
|
├── e2e
|
||||||
|
├── karma.conf.js
|
||||||
|
├── package-lock.json
|
||||||
|
├── package.json
|
||||||
|
├── protractor.conf.js
|
||||||
|
├── src
|
||||||
|
│ ├── app
|
||||||
|
│ │ ├── app.component.css
|
||||||
|
│ │ ├── app.component.html
|
||||||
|
│ │ ├── app.component.spec.ts
|
||||||
|
│ │ ├── app.component.ts
|
||||||
|
│ │ ├── app.module.ts
|
||||||
|
│ │ ├── app.routing.ts
|
||||||
|
│ │ ├── components
|
||||||
|
│ │ │ ├── components.module.ts
|
||||||
|
│ │ │ ├── footer
|
||||||
|
│ │ │ │ ├── footer.component.css
|
||||||
|
│ │ │ │ ├── footer.component.html
|
||||||
|
│ │ │ │ ├── footer.component.spec.ts
|
||||||
|
│ │ │ │ └── footer.component.ts
|
||||||
|
│ │ │ ├── navbar
|
||||||
|
│ │ │ │ ├── navbar.component.css
|
||||||
|
│ │ │ │ ├── navbar.component.html
|
||||||
|
│ │ │ │ ├── navbar.component.spec.ts
|
||||||
|
│ │ │ │ └── navbar.component.ts
|
||||||
|
│ │ │ └── sidebar
|
||||||
|
│ │ │ ├── sidebar.component.css
|
||||||
|
│ │ │ ├── sidebar.component.html
|
||||||
|
│ │ │ ├── sidebar.component.spec.ts
|
||||||
|
│ │ │ └── sidebar.component.ts
|
||||||
|
│ │ ├── dashboard
|
||||||
|
│ │ │ ├── dashboard.component.css
|
||||||
|
│ │ │ ├── dashboard.component.html
|
||||||
|
│ │ │ ├── dashboard.component.spec.ts
|
||||||
|
│ │ │ └── dashboard.component.ts
|
||||||
|
│ │ ├── icons
|
||||||
|
│ │ │ ├── icons.component.css
|
||||||
|
│ │ │ ├── icons.component.html
|
||||||
|
│ │ │ ├── icons.component.spec.ts
|
||||||
|
│ │ │ └── icons.component.ts
|
||||||
|
│ │ ├── layouts
|
||||||
|
│ │ │ └── admin-layout
|
||||||
|
│ │ │ ├── admin-layout.component.html
|
||||||
|
│ │ │ ├── admin-layout.component.scss
|
||||||
|
│ │ │ ├── admin-layout.component.spec.ts
|
||||||
|
│ │ │ ├── admin-layout.component.ts
|
||||||
|
│ │ │ ├── admin-layout.module.ts
|
||||||
|
│ │ │ └── admin-layout.routing.ts
|
||||||
|
│ │ ├── maps
|
||||||
|
│ │ │ ├── maps.component.css
|
||||||
|
│ │ │ ├── maps.component.html
|
||||||
|
│ │ │ ├── maps.component.spec.ts
|
||||||
|
│ │ │ └── maps.component.ts
|
||||||
|
│ │ ├── notifications
|
||||||
|
│ │ │ ├── notifications.component.css
|
||||||
|
│ │ │ ├── notifications.component.html
|
||||||
|
│ │ │ ├── notifications.component.spec.ts
|
||||||
|
│ │ │ └── notifications.component.ts
|
||||||
|
│ │ ├── table-list
|
||||||
|
│ │ │ ├── table-list.component.css
|
||||||
|
│ │ │ ├── table-list.component.html
|
||||||
|
│ │ │ ├── table-list.component.spec.ts
|
||||||
|
│ │ │ └── table-list.component.ts
|
||||||
|
│ │ ├── typography
|
||||||
|
│ │ │ ├── typography.component.css
|
||||||
|
│ │ │ ├── typography.component.html
|
||||||
|
│ │ │ ├── typography.component.spec.ts
|
||||||
|
│ │ │ └── typography.component.ts
|
||||||
|
│ │ ├── upgrade
|
||||||
|
│ │ │ ├── upgrade.component.css
|
||||||
|
│ │ │ ├── upgrade.component.html
|
||||||
|
│ │ │ ├── upgrade.component.spec.ts
|
||||||
|
│ │ │ └── upgrade.component.ts
|
||||||
|
│ │ └── user-profile
|
||||||
|
│ │ ├── user-profile.component.css
|
||||||
|
│ │ ├── user-profile.component.html
|
||||||
|
│ │ ├── user-profile.component.spec.ts
|
||||||
|
│ │ └── user-profile.component.ts
|
||||||
|
│ ├── assets
|
||||||
|
│ │ ├── css
|
||||||
|
│ │ │ └── demo.css
|
||||||
|
│ │ ├── img
|
||||||
|
│ │ └── scss
|
||||||
|
│ │ ├── core
|
||||||
|
│ │ └── material-dashboard.scss
|
||||||
|
│ ├── environments
|
||||||
|
│ ├── favicon.ico
|
||||||
|
│ ├── index.html
|
||||||
|
│ ├── main.ts
|
||||||
|
│ ├── polyfills.ts
|
||||||
|
│ ├── styles.css
|
||||||
|
│ ├── test.ts
|
||||||
|
│ ├── tsconfig.app.json
|
||||||
|
│ ├── tsconfig.spec.json
|
||||||
|
│ └── typings.d.ts
|
||||||
|
├── tsconfig.json
|
||||||
|
├── tslint.json
|
||||||
|
└── typings
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Useful Links
|
||||||
|
|
||||||
|
More products from Creative Tim: <http://www.creative-tim.com/bootstrap-themes>
|
||||||
|
|
||||||
|
Tutorials: <https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w>
|
||||||
|
|
||||||
|
Freebies: <http://www.creative-tim.com/products>
|
||||||
|
|
||||||
|
Affiliate Program (earn money): <http://www.creative-tim.com/affiliates/new>
|
||||||
|
|
||||||
|
Social Media:
|
||||||
|
|
||||||
|
Twitter: <https://twitter.com/CreativeTim>
|
||||||
|
|
||||||
|
Facebook: <https://www.facebook.com/CreativeTim>
|
||||||
|
|
||||||
|
Dribbble: <https://dribbble.com/creativetim>
|
||||||
|
|
||||||
|
Google+: <https://plus.google.com/+CreativetimPage>
|
||||||
|
|
||||||
|
Instagram: <https://instagram.com/creativetimofficial>
|
||||||
|
|
||||||
|
[CHANGELOG]: ./CHANGELOG.md
|
||||||
|
|
||||||
|
[version-badge]: https://img.shields.io/badge/version-2.2.0-blue.svg
|
||||||
150
angular.json
Normal file
150
angular.json
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"material-dashboard-angular": {
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"projectType": "application",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"tsConfig": "src/tsconfig.app.json",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"assets": [
|
||||||
|
"src/assets",
|
||||||
|
"src/favicon.ico"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||||
|
"src/assets/scss/material-dashboard.scss",
|
||||||
|
"src/assets/css/demo.css"
|
||||||
|
],
|
||||||
|
"scripts": [
|
||||||
|
"node_modules/jquery/dist/jquery.js",
|
||||||
|
"node_modules/popper.js/dist/umd/popper.js",
|
||||||
|
"node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
|
||||||
|
"node_modules/arrive/src/arrive.js",
|
||||||
|
"node_modules/moment/moment.js",
|
||||||
|
"node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
|
||||||
|
"node_modules/bootstrap-notify/bootstrap-notify.js",
|
||||||
|
"node_modules/chartist/dist/chartist.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"optimization": true,
|
||||||
|
"outputHashing": "all",
|
||||||
|
"sourceMap": false,
|
||||||
|
"extractCss": true,
|
||||||
|
"namedChunks": false,
|
||||||
|
"aot": true,
|
||||||
|
"extractLicenses": true,
|
||||||
|
"vendorChunk": false,
|
||||||
|
"buildOptimizer": true,
|
||||||
|
"fileReplacements": [
|
||||||
|
{
|
||||||
|
"replace": "src/environments/environment.ts",
|
||||||
|
"with": "src/environments/environment.prod.ts"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "material-dashboard-angular:build"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"browserTarget": "material-dashboard-angular:build:production"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "material-dashboard-angular:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"karmaConfig": "./karma.conf.js",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "src/tsconfig.spec.json",
|
||||||
|
"scripts": [
|
||||||
|
"node_modules/jquery/dist/jquery.js",
|
||||||
|
"node_modules/popper.js/dist/umd/popper.js",
|
||||||
|
"node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
|
||||||
|
"node_modules/arrive/src/arrive.js",
|
||||||
|
"node_modules/moment/moment.js",
|
||||||
|
"node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
|
||||||
|
"node_modules/bootstrap-notify/bootstrap-notify.js",
|
||||||
|
"node_modules/chartist/dist/chartist.js"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||||
|
"src/assets/scss/material-dashboard.scss",
|
||||||
|
"src/assets/css/demo.css"
|
||||||
|
],
|
||||||
|
"assets": [
|
||||||
|
"src/assets",
|
||||||
|
"src/favicon.ico"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"src/tsconfig.app.json",
|
||||||
|
"src/tsconfig.spec.json"
|
||||||
|
],
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"material-dashboard-angular-e2e": {
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "",
|
||||||
|
"projectType": "application",
|
||||||
|
"architect": {
|
||||||
|
"e2e": {
|
||||||
|
"builder": "@angular-devkit/build-angular:protractor",
|
||||||
|
"options": {
|
||||||
|
"protractorConfig": "./protractor.conf.js",
|
||||||
|
"devServerTarget": "material-dashboard-angular:serve"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"e2e/tsconfig.e2e.json"
|
||||||
|
],
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultProject": "material-dashboard-angular",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"prefix": "app",
|
||||||
|
"styleext": "scss"
|
||||||
|
},
|
||||||
|
"@schematics/angular:directive": {
|
||||||
|
"prefix": "app"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
documentation/css/bootstrap.min.css
vendored
Normal file
5
documentation/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
967
documentation/css/demo-documentation.css
Normal file
967
documentation/css/demo-documentation.css
Normal file
@ -0,0 +1,967 @@
|
|||||||
|
body{
|
||||||
|
background-color: #E5E5E5;
|
||||||
|
color: #3C4858;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PRESENTION PAGE */
|
||||||
|
|
||||||
|
/* Section Components */
|
||||||
|
|
||||||
|
.presentation-page{
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-components .title{
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.section-components .description{
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-components .image-container{
|
||||||
|
height: 560px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-components .components-macbook{
|
||||||
|
width: auto;
|
||||||
|
left: -100px;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-components .table-img,
|
||||||
|
.section-components .share-btn-img,
|
||||||
|
.section-components .coloured-card-btn-img,
|
||||||
|
.section-components .coloured-card-img,
|
||||||
|
.section-components .social-img,
|
||||||
|
.section-components .pin-btn-img{
|
||||||
|
position: absolute;
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.section-components .coloured-card-img{
|
||||||
|
left: 90%;
|
||||||
|
top: 11%;
|
||||||
|
height: 90px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-components .social-img{
|
||||||
|
left: 70%;
|
||||||
|
top: 67%;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.section-components .coloured-card-btn-img{
|
||||||
|
left: 35%;
|
||||||
|
top: 2%;
|
||||||
|
height: 125px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.section-components .table-img{
|
||||||
|
left: -13%;
|
||||||
|
top: 27%;
|
||||||
|
height: 175px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.section-components .pin-btn-img{
|
||||||
|
left: 0%;
|
||||||
|
top: 68%;
|
||||||
|
height: 25px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.section-components .share-btn-img{
|
||||||
|
left: 3%;
|
||||||
|
top: -3%;
|
||||||
|
height: 25px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Content */
|
||||||
|
|
||||||
|
.section-content .section-description{
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
.section-content .title{
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content .section-description .title + .description{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.section-content .description{
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content .image-container{
|
||||||
|
max-width: 900px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.section-content .image-container .ipad-img{
|
||||||
|
width: 100%;
|
||||||
|
transition: transform .6s .9s;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.section-content .image-container .area-img,
|
||||||
|
.section-content .image-container .info-img{
|
||||||
|
position: absolute;
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3D(0px, 100px, 0px);
|
||||||
|
-webkit-transform: translate3D(0px, 100px, 0px);
|
||||||
|
}
|
||||||
|
.section-content .image-container .area-img{
|
||||||
|
top: 10%;
|
||||||
|
left: 60%;
|
||||||
|
height: 300px;
|
||||||
|
width: 250px;
|
||||||
|
z-index: 2;
|
||||||
|
-webkit-transition: all 1s ease-out 0s;
|
||||||
|
-moz-transition: all 1s ease-out 0s;
|
||||||
|
-o-transition: all 1s ease-out 0s;
|
||||||
|
-ms-transition: all 1s ease-out 0s;
|
||||||
|
transition: all 1s ease-out 0s;
|
||||||
|
}
|
||||||
|
.section-content .image-container .info-img{
|
||||||
|
top: 50%;
|
||||||
|
left: 0%;
|
||||||
|
height: 200px;
|
||||||
|
width: 300px;
|
||||||
|
-webkit-transition: all 1s ease-out 0s;
|
||||||
|
-moz-transition: all 1s ease-out 0s;
|
||||||
|
-o-transition: all 1s ease-out 0s;
|
||||||
|
-ms-transition: all 1s ease-out 0s;
|
||||||
|
transition: all 1s ease-out 0s;
|
||||||
|
}
|
||||||
|
.animated{
|
||||||
|
transform: translate3D(0px, 0px, 0px) !important;
|
||||||
|
-webkit-transform: translate3D(0px, 0px, 0px) !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* animated images */
|
||||||
|
|
||||||
|
@-webkit-keyframes Floatingy{
|
||||||
|
from {-webkit-transform:translate(0, 0px);}
|
||||||
|
65% {-webkit-transform:translate(50px, 0);}
|
||||||
|
to {-webkit-transform: translate(0, -0px);}
|
||||||
|
}
|
||||||
|
@-moz-keyframes Floatingy{
|
||||||
|
from {-moz-transform:translate(0, 0px);}
|
||||||
|
65% {-moz-transform:translate(50px, 0);}
|
||||||
|
to {-moz-transform: translate(0, -0px);}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes Floatingx{
|
||||||
|
from {-webkit-transform:translate(50px, 0px);}
|
||||||
|
65% {-webkit-transform:translate(0, 0);}
|
||||||
|
to {-webkit-transform: translate(50px, -0px);}
|
||||||
|
}
|
||||||
|
@-moz-keyframes Floatingx{
|
||||||
|
from {-moz-transform:translate(50px, 0px);}
|
||||||
|
65% {-moz-transform:translate(0, 0);}
|
||||||
|
to {-moz-transform: translate(50px, -0px);}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-img, .coloured-card-img, .coloured-card-btn-img, .pin-btn-img, .share-btn-img, .social-img{
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
-moz-animation-iteration-count: infinite;
|
||||||
|
-moz-animation-timing-function: ease-in-out;
|
||||||
|
-webkit-animation-name: Floatingy;
|
||||||
|
-moz-animation-name: Floatingy;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.table-img{
|
||||||
|
-webkit-animation-duration: 14s;
|
||||||
|
-moz-animation-duration: 14s;
|
||||||
|
-webkit-animation-name: Floatingx;
|
||||||
|
-moz-animation-name: Floatingx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coloured-card-img{
|
||||||
|
-webkit-animation-duration: 10s;
|
||||||
|
-moz-animation-duration: 10s;
|
||||||
|
-webkit-animation-name: Floatingx;
|
||||||
|
-moz-animation-name: Floatingx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coloured-card-btn-img{
|
||||||
|
-webkit-animation-duration: 18s;
|
||||||
|
-moz-animation-duration: 18s;
|
||||||
|
}
|
||||||
|
.pin-btn-img{
|
||||||
|
-webkit-animation-duration: 15s;
|
||||||
|
-moz-animation-duration: 15s;
|
||||||
|
}
|
||||||
|
.share-btn-img{
|
||||||
|
-webkit-animation-duration: 11s;
|
||||||
|
-moz-animation-duration: 11s;
|
||||||
|
}
|
||||||
|
.social-img{
|
||||||
|
-webkit-animation-duration: 16s;
|
||||||
|
-moz-animation-duration: 16s;
|
||||||
|
-webkit-animation-name: Floatingx;
|
||||||
|
-moz-animation-name: Floatingx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Presentation Page OnScroll Animation */
|
||||||
|
|
||||||
|
.animated {
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.infinite {
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.hinge {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.flipOutX,
|
||||||
|
.animated.flipOutY,
|
||||||
|
.animated.bounceIn,
|
||||||
|
.animated.bounceOut {
|
||||||
|
animation-duration: .75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
from, 20%, 53%, 80%, to {
|
||||||
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
40%, 43% {
|
||||||
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
transform: translate3d(0, -30px, 0);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
transform: translate3d(0, -15px, 0);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: translate3d(0, -4px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bounce {
|
||||||
|
animation-name: bounce;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flash {
|
||||||
|
from, 50%, to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25%, 75% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flash {
|
||||||
|
animation-name: flash;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fixed-section{
|
||||||
|
top: 90px;
|
||||||
|
max-height: 71vh;
|
||||||
|
overflow: scroll;
|
||||||
|
border-bottom: 1px solid rgba(220,220,220, .8);
|
||||||
|
}
|
||||||
|
.fixed-section ul li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.fixed-section li a{
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 2px;
|
||||||
|
display: block;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.fixed-section li a.active{
|
||||||
|
color: #00bbff;
|
||||||
|
}
|
||||||
|
.fixed-section.float{
|
||||||
|
position: fixed;
|
||||||
|
top: 100px;
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.navbar-title .image-container{
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
top: -1px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-mobile-menu .navbar-title{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.navbar-title{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.navbar-title h4{
|
||||||
|
margin-bottom: -6px;
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-header{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-header img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-title img{
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
.section .wizard-card{
|
||||||
|
min-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tim-row{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.tim-white-buttons {
|
||||||
|
background-color: #777777;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
min-height: 32px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tim-row p{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title.text-center{
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.tim-typo{
|
||||||
|
padding-left: 25%;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tim-typo .tim-note{
|
||||||
|
bottom: 10px;
|
||||||
|
color: #c0c1c2;
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 13px;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 20px;
|
||||||
|
position: absolute;
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
.tim-row{
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
.tim-row h3{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.switch{
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
#navbar-full .navbar{
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.space{
|
||||||
|
height: 130px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.space-110{
|
||||||
|
height: 110px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.space-50{
|
||||||
|
height: 50px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.space-70{
|
||||||
|
height: 70px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.navigation-example .img-src{
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-example{
|
||||||
|
background-image: url('../img/bg.jpg');
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
margin-top:0;
|
||||||
|
min-height: 740px;
|
||||||
|
}
|
||||||
|
#notifications{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#notifications .alert-danger{
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.tim-note{
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons .btn{
|
||||||
|
margin: 0 0px 15px;
|
||||||
|
}
|
||||||
|
.space-100{
|
||||||
|
height: 100px;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.be-social{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
/* border-bottom: 1px solid #aaa; */
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
}
|
||||||
|
.txt-white{
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.txt-gray{
|
||||||
|
color: #ddd !important;
|
||||||
|
}
|
||||||
|
.navbar-center{
|
||||||
|
margin-top: -3px;
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax{
|
||||||
|
width:100%;
|
||||||
|
height:570px;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-size:cover;
|
||||||
|
background-position: center center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container.logo-documentation{
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container .logo{
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #333333;
|
||||||
|
width: 50px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container .brand{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
float: left;
|
||||||
|
color: #555555;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-top: 7px;
|
||||||
|
width: 70px;
|
||||||
|
height: 40px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.navbar-default .logo-container .brand{
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.navbar-transparent .logo-container .brand{
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container .brand-material{
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 15px;
|
||||||
|
height: 25px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container .logo img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.navbar-small .logo-container .brand{
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-section{
|
||||||
|
top: 127px;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.fixed-section ul li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.fixed-section li a{
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 2px;
|
||||||
|
display: block;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.fixed-section li a.active{
|
||||||
|
color: #00bbff;
|
||||||
|
}
|
||||||
|
.fixed-section.float{
|
||||||
|
position: fixed;
|
||||||
|
top: 100px;
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.parallax .parallax-image{
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.parallax .parallax-image img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px){
|
||||||
|
.parallax .parallax-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 640px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.parallax .parallax-image img{
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator{
|
||||||
|
content: "Separator";
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.separator-line{
|
||||||
|
background-color: #EEE;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.separator.separator-gray{
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
}
|
||||||
|
.social-buttons-demo .btn{
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container{
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.img-container img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.lightbox .modal-content{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.lightbox .modal-body{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 991px){
|
||||||
|
.lightbox .modal-dialog{
|
||||||
|
width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px){
|
||||||
|
.btn, .btn-morphing{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.parallax .motto{
|
||||||
|
top: 170px;
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 60px;
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading dots */
|
||||||
|
|
||||||
|
/* transitions */
|
||||||
|
.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand{
|
||||||
|
-webkit-transition: all .2s;
|
||||||
|
-moz-transition: all .2s;
|
||||||
|
-o-transition: all .2s;
|
||||||
|
transition: all .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#images h4{
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
#javascriptComponents{
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
#javascriptComponents .btn-raised{
|
||||||
|
margin: 10px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* layer animation */
|
||||||
|
|
||||||
|
.layers-container{
|
||||||
|
display: block;
|
||||||
|
margin-top: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.layers-container img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-black {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate {
|
||||||
|
transition: 1.5s ease-in-out;
|
||||||
|
-moz-transition: 1.5s ease-in-out;
|
||||||
|
-webkit-transition: 1.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-default.navbar-small .logo-container .brand{
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.navbar-transparent.navbar-small .logo-container .brand{
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.navbar-default.navbar-small .logo-container .brand{
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sharing-area{
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
.sharing-area .btn{
|
||||||
|
margin: 15px 4px 0;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.sharing-area .btn i{
|
||||||
|
font-size: 18px;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.sharing-area .btn-twitter{
|
||||||
|
background-color: #55acee;
|
||||||
|
}
|
||||||
|
.sharing-area .btn-facebook{
|
||||||
|
background-color: #3b5998;
|
||||||
|
}
|
||||||
|
.sharing-area .btn-google-plus{
|
||||||
|
background-color: #dd4b39;
|
||||||
|
}
|
||||||
|
.sharing-area .btn-github{
|
||||||
|
background-color: #333333;
|
||||||
|
}
|
||||||
|
.section-thin,
|
||||||
|
.section-notifications{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.section-navbars{
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
#navbar .navbar{
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.section-tabs{
|
||||||
|
background: #EEEEEE;
|
||||||
|
}
|
||||||
|
.section-pagination{
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.section-download h4{
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.section-examples a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.section-examples h5{
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.components-page .wrapper > .header,
|
||||||
|
.tutorial-page .wrapper > .header{
|
||||||
|
height: 400px;
|
||||||
|
padding-top: 100px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
background: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-raised {
|
||||||
|
margin: -60px 30px 0px;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-filter {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.header-filter:before, .header-filter:after {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.header-filter::before {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.header-filter .container {
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header{
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
.page-header .title{
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: "Roboto Slab", "Times New Roman", serif;
|
||||||
|
line-height: 1.15em;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.3em;
|
||||||
|
}
|
||||||
|
.page-header .sub-title{
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 50px 0;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
-webkit-transition: all 150ms ease 0s;
|
||||||
|
-moz-transition: all 150ms ease 0s;
|
||||||
|
-o-transition: all 150ms ease 0s;
|
||||||
|
-ms-transition: all 150ms ease 0s;
|
||||||
|
transition: all 150ms ease 0s;
|
||||||
|
}
|
||||||
|
.navbar .navbar-brand {
|
||||||
|
position: relative;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: inherit;
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
|
||||||
|
color: inherit;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.navbar-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-fixed-top {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .navbar-nav > li > a .material-icons,
|
||||||
|
.navbar .navbar-nav > li > a .fa {
|
||||||
|
font-size: 20px;
|
||||||
|
max-width: 20px;
|
||||||
|
}
|
||||||
|
.navbar .navbar-nav > li > a:hover,
|
||||||
|
.navbar .navbar-nav > li > a:focus {
|
||||||
|
color: inherit;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .navbar-nav > li > a:not(.btn) .material-icons {
|
||||||
|
margin-top: -3px;
|
||||||
|
top: 0px;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.fixed-section.affix {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
.nav-mobile-menu .navbar-title{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
|
||||||
|
.navbar .navbar-brand {
|
||||||
|
height: 50px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 15px 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.footer a{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.footer-documentation{
|
||||||
|
margin-top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
text-shadow: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.footer-documentation li a{
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer.footer-documentation li a:hover,
|
||||||
|
footer.footer-documentation li a:focus{
|
||||||
|
color: #89229b;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
footer ul li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
footer ul li a {
|
||||||
|
color: inherit;
|
||||||
|
padding: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 3px;
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
footer ul li a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
footer ul li .btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
footer ul.links-horizontal:first-child a {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
footer ul.links-horizontal:last-child a {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
footer ul.links-vertical li {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
footer ul.links-vertical li a {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
footer .social-buttons a,
|
||||||
|
footer .social-buttons .btn {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
footer .footer-brand {
|
||||||
|
float: left;
|
||||||
|
height: 50px;
|
||||||
|
padding: 15px 15px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
footer .footer-brand:hover, footer .footer-brand:focus {
|
||||||
|
color: #3C4858;
|
||||||
|
}
|
||||||
|
footer .copyright {
|
||||||
|
padding: 15px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer .copyright .material-icons {
|
||||||
|
font-size: 18px;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
footer .pull-center {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer .copyright {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
float: none !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.navbar-transparent {
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
padding-top: 10px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-raised {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
15445
documentation/css/material-dashboard.css
Normal file
15445
documentation/css/material-dashboard.css
Normal file
File diff suppressed because it is too large
Load Diff
10
documentation/js/arrive.min.js
vendored
Normal file
10
documentation/js/arrive.min.js
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/*
|
||||||
|
* arrive.js
|
||||||
|
* v2.4.1
|
||||||
|
* https://github.com/uzairfarooq/arrive
|
||||||
|
* MIT licensed
|
||||||
|
*
|
||||||
|
* Copyright (c) 2014-2017 Uzair Farooq
|
||||||
|
*/
|
||||||
|
|
||||||
|
var Arrive=function(e,t,n){"use strict";function r(e,t,n){l.addMethod(t,n,e.unbindEvent),l.addMethod(t,n,e.unbindEventWithSelectorOrCallback),l.addMethod(t,n,e.unbindEventWithSelectorAndCallback)}function i(e){e.arrive=f.bindEvent,r(f,e,"unbindArrive"),e.leave=d.bindEvent,r(d,e,"unbindLeave")}if(e.MutationObserver&&"undefined"!=typeof HTMLElement){var o=0,l=function(){var t=HTMLElement.prototype.matches||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector;return{matchesSelector:function(e,n){return e instanceof HTMLElement&&t.call(e,n)},addMethod:function(e,t,r){var i=e[t];e[t]=function(){return r.length==arguments.length?r.apply(this,arguments):"function"==typeof i?i.apply(this,arguments):n}},callCallbacks:function(e,t){t&&t.options.onceOnly&&1==t.firedElems.length&&(e=[e[0]]);for(var n,r=0;n=e[r];r++)n&&n.callback&&n.callback.call(n.elem,n.elem);t&&t.options.onceOnly&&1==t.firedElems.length&&t.me.unbindEventWithSelectorAndCallback.call(t.target,t.selector,t.callback)},checkChildNodesRecursively:function(e,t,n,r){for(var i,o=0;i=e[o];o++)n(i,t,r)&&r.push({callback:t.callback,elem:i}),i.childNodes.length>0&&l.checkChildNodesRecursively(i.childNodes,t,n,r)},mergeArrays:function(e,t){var n,r={};for(n in e)e.hasOwnProperty(n)&&(r[n]=e[n]);for(n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);return r},toElementsArray:function(t){return n===t||"number"==typeof t.length&&t!==e||(t=[t]),t}}}(),c=function(){var e=function(){this._eventsBucket=[],this._beforeAdding=null,this._beforeRemoving=null};return e.prototype.addEvent=function(e,t,n,r){var i={target:e,selector:t,options:n,callback:r,firedElems:[]};return this._beforeAdding&&this._beforeAdding(i),this._eventsBucket.push(i),i},e.prototype.removeEvent=function(e){for(var t,n=this._eventsBucket.length-1;t=this._eventsBucket[n];n--)if(e(t)){this._beforeRemoving&&this._beforeRemoving(t);var r=this._eventsBucket.splice(n,1);r&&r.length&&(r[0].callback=null)}},e.prototype.beforeAdding=function(e){this._beforeAdding=e},e.prototype.beforeRemoving=function(e){this._beforeRemoving=e},e}(),a=function(t,r){var i=new c,o=this,a={fireOnAttributesModification:!1};return i.beforeAdding(function(n){var i,l=n.target;(l===e.document||l===e)&&(l=document.getElementsByTagName("html")[0]),i=new MutationObserver(function(e){r.call(this,e,n)});var c=t(n.options);i.observe(l,c),n.observer=i,n.me=o}),i.beforeRemoving(function(e){e.observer.disconnect()}),this.bindEvent=function(e,t,n){t=l.mergeArrays(a,t);for(var r=l.toElementsArray(this),o=0;o<r.length;o++)i.addEvent(r[o],e,t,n)},this.unbindEvent=function(){var e=l.toElementsArray(this);i.removeEvent(function(t){for(var r=0;r<e.length;r++)if(this===n||t.target===e[r])return!0;return!1})},this.unbindEventWithSelectorOrCallback=function(e){var t,r=l.toElementsArray(this),o=e;t="function"==typeof e?function(e){for(var t=0;t<r.length;t++)if((this===n||e.target===r[t])&&e.callback===o)return!0;return!1}:function(t){for(var i=0;i<r.length;i++)if((this===n||t.target===r[i])&&t.selector===e)return!0;return!1},i.removeEvent(t)},this.unbindEventWithSelectorAndCallback=function(e,t){var r=l.toElementsArray(this);i.removeEvent(function(i){for(var o=0;o<r.length;o++)if((this===n||i.target===r[o])&&i.selector===e&&i.callback===t)return!0;return!1})},this},s=function(){function e(e){var t={attributes:!1,childList:!0,subtree:!0};return e.fireOnAttributesModification&&(t.attributes=!0),t}function t(e,t){e.forEach(function(e){var n=e.addedNodes,i=e.target,o=[];null!==n&&n.length>0?l.checkChildNodesRecursively(n,t,r,o):"attributes"===e.type&&r(i,t,o)&&o.push({callback:t.callback,elem:i}),l.callCallbacks(o,t)})}function r(e,t){return l.matchesSelector(e,t.selector)&&(e._id===n&&(e._id=o++),-1==t.firedElems.indexOf(e._id))?(t.firedElems.push(e._id),!0):!1}var i={fireOnAttributesModification:!1,onceOnly:!1,existing:!1};f=new a(e,t);var c=f.bindEvent;return f.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t);var o=l.toElementsArray(this);if(t.existing){for(var a=[],s=0;s<o.length;s++)for(var u=o[s].querySelectorAll(e),f=0;f<u.length;f++)a.push({callback:r,elem:u[f]});if(t.onceOnly&&a.length)return r.call(a[0].elem,a[0].elem);setTimeout(l.callCallbacks,1,a)}c.call(this,e,t,r)},f},u=function(){function e(){var e={childList:!0,subtree:!0};return e}function t(e,t){e.forEach(function(e){var n=e.removedNodes,i=[];null!==n&&n.length>0&&l.checkChildNodesRecursively(n,t,r,i),l.callCallbacks(i,t)})}function r(e,t){return l.matchesSelector(e,t.selector)}var i={};d=new a(e,t);var o=d.bindEvent;return d.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t),o.call(this,e,t,r)},d},f=new s,d=new u;t&&i(t.fn),i(HTMLElement.prototype),i(NodeList.prototype),i(HTMLCollection.prototype),i(HTMLDocument.prototype),i(Window.prototype);var h={};return r(f,h,"unbindAllArrive"),r(d,h,"unbindAllLeave"),h}}(window,"undefined"==typeof jQuery?null:jQuery,void 0);
|
||||||
404
documentation/js/bootstrap-notify.js
vendored
Normal file
404
documentation/js/bootstrap-notify.js
vendored
Normal file
@ -0,0 +1,404 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Creative Tim Modifications
|
||||||
|
|
||||||
|
Lines: 239, 240 was changed from top: 5px to top: 50% and we added margin-top: -13px. In this way the close button will be aligned vertically
|
||||||
|
Line:242 - modified when the icon is set, we add the class "alert-with-icon", so there will be enough space for the icon.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Project: Bootstrap Notify = v3.1.5
|
||||||
|
* Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
|
||||||
|
* Author: Mouse0270 aka Robert McIntosh
|
||||||
|
* License: MIT License
|
||||||
|
* Website: https://github.com/mouse0270/bootstrap-growl
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* global define:false, require: false, jQuery:false */
|
||||||
|
|
||||||
|
(function (factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// Node/CommonJS
|
||||||
|
factory(require('jquery'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(jQuery);
|
||||||
|
}
|
||||||
|
}(function ($) {
|
||||||
|
// Create the defaults once
|
||||||
|
var defaults = {
|
||||||
|
element: 'body',
|
||||||
|
position: null,
|
||||||
|
type: "info",
|
||||||
|
allow_dismiss: true,
|
||||||
|
allow_duplicates: true,
|
||||||
|
newest_on_top: false,
|
||||||
|
showProgressbar: false,
|
||||||
|
placement: {
|
||||||
|
from: "top",
|
||||||
|
align: "right"
|
||||||
|
},
|
||||||
|
offset: 20,
|
||||||
|
spacing: 10,
|
||||||
|
z_index: 1031,
|
||||||
|
delay: 5000,
|
||||||
|
timer: 1000,
|
||||||
|
url_target: '_blank',
|
||||||
|
mouse_over: null,
|
||||||
|
animate: {
|
||||||
|
enter: 'animated fadeInDown',
|
||||||
|
exit: 'animated fadeOutUp'
|
||||||
|
},
|
||||||
|
onShow: null,
|
||||||
|
onShown: null,
|
||||||
|
onClose: null,
|
||||||
|
onClosed: null,
|
||||||
|
icon_type: 'class',
|
||||||
|
template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button><i data-notify="icon" class="material-icons"></i><span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
|
||||||
|
};
|
||||||
|
|
||||||
|
String.format = function () {
|
||||||
|
var str = arguments[0];
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]);
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
|
||||||
|
function isDuplicateNotification(notification) {
|
||||||
|
var isDupe = false;
|
||||||
|
|
||||||
|
$('[data-notify="container"]').each(function (i, el) {
|
||||||
|
var $el = $(el);
|
||||||
|
var title = $el.find('[data-notify="title"]').text().trim();
|
||||||
|
var message = $el.find('[data-notify="message"]').html().trim();
|
||||||
|
|
||||||
|
// The input string might be different than the actual parsed HTML string!
|
||||||
|
// (<br> vs <br /> for example)
|
||||||
|
// So we have to force-parse this as HTML here!
|
||||||
|
var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim();
|
||||||
|
var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim();
|
||||||
|
var isSameType = $el.hasClass('alert-' + notification.settings.type);
|
||||||
|
|
||||||
|
if (isSameTitle && isSameMsg && isSameType) {
|
||||||
|
//we found the dupe. Set the var and stop checking.
|
||||||
|
isDupe = true;
|
||||||
|
}
|
||||||
|
return !isDupe;
|
||||||
|
});
|
||||||
|
|
||||||
|
return isDupe;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Notify(element, content, options) {
|
||||||
|
// Setup Content of Notify
|
||||||
|
var contentObj = {
|
||||||
|
content: {
|
||||||
|
message: typeof content === 'object' ? content.message : content,
|
||||||
|
title: content.title ? content.title : '',
|
||||||
|
icon: content.icon ? content.icon : '',
|
||||||
|
url: content.url ? content.url : '#',
|
||||||
|
target: content.target ? content.target : '-'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
options = $.extend(true, {}, contentObj, options);
|
||||||
|
this.settings = $.extend(true, {}, defaults, options);
|
||||||
|
this._defaults = defaults;
|
||||||
|
if (this.settings.content.target === "-") {
|
||||||
|
this.settings.content.target = this.settings.url_target;
|
||||||
|
}
|
||||||
|
this.animations = {
|
||||||
|
start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
|
||||||
|
end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof this.settings.offset === 'number') {
|
||||||
|
this.settings.offset = {
|
||||||
|
x: this.settings.offset,
|
||||||
|
y: this.settings.offset
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing
|
||||||
|
if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.extend(Notify.prototype, {
|
||||||
|
init: function () {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.buildNotify();
|
||||||
|
if (this.settings.content.icon) {
|
||||||
|
this.setIcon();
|
||||||
|
}
|
||||||
|
if (this.settings.content.url != "#") {
|
||||||
|
this.styleURL();
|
||||||
|
}
|
||||||
|
this.styleDismiss();
|
||||||
|
this.placement();
|
||||||
|
this.bind();
|
||||||
|
|
||||||
|
this.notify = {
|
||||||
|
$ele: this.$ele,
|
||||||
|
update: function (command, update) {
|
||||||
|
var commands = {};
|
||||||
|
if (typeof command === "string") {
|
||||||
|
commands[command] = update;
|
||||||
|
} else {
|
||||||
|
commands = command;
|
||||||
|
}
|
||||||
|
for (var cmd in commands) {
|
||||||
|
switch (cmd) {
|
||||||
|
case "type":
|
||||||
|
this.$ele.removeClass('alert-' + self.settings.type);
|
||||||
|
this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
|
||||||
|
self.settings.type = commands[cmd];
|
||||||
|
this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]);
|
||||||
|
break;
|
||||||
|
case "icon":
|
||||||
|
var $icon = this.$ele.find('[data-notify="icon"]');
|
||||||
|
if (self.settings.icon_type.toLowerCase() === 'class') {
|
||||||
|
$icon.html(commands[cmd]);
|
||||||
|
} else {
|
||||||
|
if (!$icon.is('img')) {
|
||||||
|
$icon.find('img');
|
||||||
|
}
|
||||||
|
$icon.attr('src', commands[cmd]);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "progress":
|
||||||
|
var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100));
|
||||||
|
this.$ele.data('notify-delay', newDelay);
|
||||||
|
this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%');
|
||||||
|
break;
|
||||||
|
case "url":
|
||||||
|
this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]);
|
||||||
|
break;
|
||||||
|
case "target":
|
||||||
|
this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
|
||||||
|
self.reposition(posX);
|
||||||
|
},
|
||||||
|
close: function () {
|
||||||
|
self.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},
|
||||||
|
buildNotify: function () {
|
||||||
|
var content = this.settings.content;
|
||||||
|
this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
|
||||||
|
this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
|
||||||
|
if (!this.settings.allow_dismiss) {
|
||||||
|
this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
|
||||||
|
}
|
||||||
|
if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
|
||||||
|
this.$ele.find('[data-notify="progressbar"]').remove();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setIcon: function () {
|
||||||
|
|
||||||
|
this.$ele.addClass('alert-with-icon');
|
||||||
|
|
||||||
|
if (this.settings.icon_type.toLowerCase() === 'class') {
|
||||||
|
this.$ele.find('[data-notify="icon"]').html(this.settings.content.icon);
|
||||||
|
} else {
|
||||||
|
if (this.$ele.find('[data-notify="icon"]').is('img')) {
|
||||||
|
this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
|
||||||
|
} else {
|
||||||
|
this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
styleDismiss: function () {
|
||||||
|
this.$ele.find('[data-notify="dismiss"]').css({
|
||||||
|
position: 'absolute',
|
||||||
|
right: '10px',
|
||||||
|
top: '50%',
|
||||||
|
marginTop: '-13px',
|
||||||
|
zIndex: this.settings.z_index + 2
|
||||||
|
});
|
||||||
|
},
|
||||||
|
styleURL: function () {
|
||||||
|
this.$ele.find('[data-notify="url"]').css({
|
||||||
|
backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
|
||||||
|
height: '100%',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
width: '100%',
|
||||||
|
zIndex: this.settings.z_index + 1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
placement: function () {
|
||||||
|
var self = this,
|
||||||
|
offsetAmt = this.settings.offset.y,
|
||||||
|
css = {
|
||||||
|
display: 'inline-block',
|
||||||
|
margin: '0px auto',
|
||||||
|
position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
|
||||||
|
transition: 'all .5s ease-in-out',
|
||||||
|
zIndex: this.settings.z_index
|
||||||
|
},
|
||||||
|
hasAnimation = false,
|
||||||
|
settings = this.settings;
|
||||||
|
|
||||||
|
$('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function () {
|
||||||
|
offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
|
||||||
|
});
|
||||||
|
if (this.settings.newest_on_top === true) {
|
||||||
|
offsetAmt = this.settings.offset.y;
|
||||||
|
}
|
||||||
|
css[this.settings.placement.from] = offsetAmt + 'px';
|
||||||
|
|
||||||
|
switch (this.settings.placement.align) {
|
||||||
|
case "left":
|
||||||
|
case "right":
|
||||||
|
css[this.settings.placement.align] = this.settings.offset.x + 'px';
|
||||||
|
break;
|
||||||
|
case "center":
|
||||||
|
css.left = 0;
|
||||||
|
css.right = 0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.$ele.css(css).addClass(this.settings.animate.enter);
|
||||||
|
$.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function (index, prefix) {
|
||||||
|
self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
$(this.settings.element).append(this.$ele);
|
||||||
|
|
||||||
|
if (this.settings.newest_on_top === true) {
|
||||||
|
offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight();
|
||||||
|
this.reposition(offsetAmt);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($.isFunction(self.settings.onShow)) {
|
||||||
|
self.settings.onShow.call(this.$ele);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$ele.one(this.animations.start, function () {
|
||||||
|
hasAnimation = true;
|
||||||
|
}).one(this.animations.end, function () {
|
||||||
|
if ($.isFunction(self.settings.onShown)) {
|
||||||
|
self.settings.onShown.call(this);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (!hasAnimation) {
|
||||||
|
if ($.isFunction(self.settings.onShown)) {
|
||||||
|
self.settings.onShown.call(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 600);
|
||||||
|
},
|
||||||
|
bind: function () {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.$ele.find('[data-notify="dismiss"]').on('click', function () {
|
||||||
|
self.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$ele.mouseover(function () {
|
||||||
|
$(this).data('data-hover', "true");
|
||||||
|
}).mouseout(function () {
|
||||||
|
$(this).data('data-hover', "false");
|
||||||
|
});
|
||||||
|
this.$ele.data('data-hover', "false");
|
||||||
|
|
||||||
|
if (this.settings.delay > 0) {
|
||||||
|
self.$ele.data('notify-delay', self.settings.delay);
|
||||||
|
var timer = setInterval(function () {
|
||||||
|
var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
|
||||||
|
if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") {
|
||||||
|
var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
|
||||||
|
self.$ele.data('notify-delay', delay);
|
||||||
|
self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
|
||||||
|
}
|
||||||
|
if (delay <= -(self.settings.timer)) {
|
||||||
|
clearInterval(timer);
|
||||||
|
self.close();
|
||||||
|
}
|
||||||
|
}, self.settings.timer);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
close: function () {
|
||||||
|
var self = this,
|
||||||
|
posX = parseInt(this.$ele.css(this.settings.placement.from)),
|
||||||
|
hasAnimation = false;
|
||||||
|
|
||||||
|
this.$ele.data('closing', 'true').addClass(this.settings.animate.exit);
|
||||||
|
self.reposition(posX);
|
||||||
|
|
||||||
|
if ($.isFunction(self.settings.onClose)) {
|
||||||
|
self.settings.onClose.call(this.$ele);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$ele.one(this.animations.start, function () {
|
||||||
|
hasAnimation = true;
|
||||||
|
}).one(this.animations.end, function () {
|
||||||
|
$(this).remove();
|
||||||
|
if ($.isFunction(self.settings.onClosed)) {
|
||||||
|
self.settings.onClosed.call(this);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (!hasAnimation) {
|
||||||
|
self.$ele.remove();
|
||||||
|
if (self.settings.onClosed) {
|
||||||
|
self.settings.onClosed(self.$ele);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 600);
|
||||||
|
},
|
||||||
|
reposition: function (posX) {
|
||||||
|
var self = this,
|
||||||
|
notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
|
||||||
|
$elements = this.$ele.nextAll(notifies);
|
||||||
|
if (this.settings.newest_on_top === true) {
|
||||||
|
$elements = this.$ele.prevAll(notifies);
|
||||||
|
}
|
||||||
|
$elements.each(function () {
|
||||||
|
$(this).css(self.settings.placement.from, posX);
|
||||||
|
posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$.notify = function (content, options) {
|
||||||
|
var plugin = new Notify(this, content, options);
|
||||||
|
return plugin.notify;
|
||||||
|
};
|
||||||
|
$.notifyDefaults = function (options) {
|
||||||
|
defaults = $.extend(true, {}, defaults, options);
|
||||||
|
return defaults;
|
||||||
|
};
|
||||||
|
$.notifyClose = function (command) {
|
||||||
|
if (typeof command === "undefined" || command === "all") {
|
||||||
|
$('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
|
||||||
|
} else {
|
||||||
|
$('[data-notify-position="' + command + '"]').find('[data-notify="dismiss"]').trigger('click');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
}));
|
||||||
7
documentation/js/bootstrap.min.js
vendored
Normal file
7
documentation/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
documentation/js/chartist.min.js
vendored
Normal file
8
documentation/js/chartist.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
183
documentation/js/demo.js
Normal file
183
documentation/js/demo.js
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
type = ['','info','success','warning','danger'];
|
||||||
|
|
||||||
|
|
||||||
|
demo = {
|
||||||
|
initPickColor: function(){
|
||||||
|
$('.pick-class-label').click(function(){
|
||||||
|
var new_class = $(this).attr('new-class');
|
||||||
|
var old_class = $('#display-buttons').attr('data-class');
|
||||||
|
var display_div = $('#display-buttons');
|
||||||
|
if(display_div.length) {
|
||||||
|
var display_buttons = display_div.find('.btn');
|
||||||
|
display_buttons.removeClass(old_class);
|
||||||
|
display_buttons.addClass(new_class);
|
||||||
|
display_div.attr('data-class', new_class);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
initFormExtendedDatetimepickers: function(){
|
||||||
|
$('.datetimepicker').datetimepicker({
|
||||||
|
icons: {
|
||||||
|
time: "fa fa-clock-o",
|
||||||
|
date: "fa fa-calendar",
|
||||||
|
up: "fa fa-chevron-up",
|
||||||
|
down: "fa fa-chevron-down",
|
||||||
|
previous: 'fa fa-chevron-left',
|
||||||
|
next: 'fa fa-chevron-right',
|
||||||
|
today: 'fa fa-screenshot',
|
||||||
|
clear: 'fa fa-trash',
|
||||||
|
close: 'fa fa-remove'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
initDocumentationCharts: function(){
|
||||||
|
/* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
|
||||||
|
|
||||||
|
dataDailySalesChart = {
|
||||||
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||||
|
series: [
|
||||||
|
[12, 17, 7, 17, 23, 18, 38]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
optionsDailySalesChart = {
|
||||||
|
lineSmooth: Chartist.Interpolation.cardinal({
|
||||||
|
tension: 0
|
||||||
|
}),
|
||||||
|
low: 0,
|
||||||
|
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||||
|
chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
|
||||||
|
}
|
||||||
|
|
||||||
|
var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
|
||||||
|
|
||||||
|
md.startAnimationForLineChart(dailySalesChart);
|
||||||
|
},
|
||||||
|
|
||||||
|
initDashboardPageCharts: function(){
|
||||||
|
|
||||||
|
/* ----------========== Daily Sales Chart initialization ==========---------- */
|
||||||
|
|
||||||
|
dataDailySalesChart = {
|
||||||
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||||
|
series: [
|
||||||
|
[12, 17, 7, 17, 23, 18, 38]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
optionsDailySalesChart = {
|
||||||
|
lineSmooth: Chartist.Interpolation.cardinal({
|
||||||
|
tension: 0
|
||||||
|
}),
|
||||||
|
low: 0,
|
||||||
|
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||||
|
chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
|
||||||
|
}
|
||||||
|
|
||||||
|
var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
|
||||||
|
|
||||||
|
md.startAnimationForLineChart(dailySalesChart);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------========== Completed Tasks Chart initialization ==========---------- */
|
||||||
|
|
||||||
|
dataCompletedTasksChart = {
|
||||||
|
labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
|
||||||
|
series: [
|
||||||
|
[230, 750, 450, 300, 280, 240, 200, 190]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
optionsCompletedTasksChart = {
|
||||||
|
lineSmooth: Chartist.Interpolation.cardinal({
|
||||||
|
tension: 0
|
||||||
|
}),
|
||||||
|
low: 0,
|
||||||
|
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||||
|
chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
|
||||||
|
}
|
||||||
|
|
||||||
|
var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
|
||||||
|
|
||||||
|
// start animation for the Completed Tasks Chart - Line Chart
|
||||||
|
md.startAnimationForLineChart(completedTasksChart);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------========== Emails Subscription Chart initialization ==========---------- */
|
||||||
|
|
||||||
|
var dataEmailsSubscriptionChart = {
|
||||||
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
series: [
|
||||||
|
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
|
||||||
|
|
||||||
|
]
|
||||||
|
};
|
||||||
|
var optionsEmailsSubscriptionChart = {
|
||||||
|
axisX: {
|
||||||
|
showGrid: false
|
||||||
|
},
|
||||||
|
low: 0,
|
||||||
|
high: 1000,
|
||||||
|
chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
|
||||||
|
};
|
||||||
|
var responsiveOptions = [
|
||||||
|
['screen and (max-width: 640px)', {
|
||||||
|
seriesBarDistance: 5,
|
||||||
|
axisX: {
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
];
|
||||||
|
var emailsSubscriptionChart = Chartist.Bar('#emailsSubscriptionChart', dataEmailsSubscriptionChart, optionsEmailsSubscriptionChart, responsiveOptions);
|
||||||
|
|
||||||
|
//start animation for the Emails Subscription Chart
|
||||||
|
md.startAnimationForBarChart(emailsSubscriptionChart);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
initGoogleMaps: function(){
|
||||||
|
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
||||||
|
var mapOptions = {
|
||||||
|
zoom: 13,
|
||||||
|
center: myLatlng,
|
||||||
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
||||||
|
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
|
||||||
|
|
||||||
|
}
|
||||||
|
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
|
||||||
|
|
||||||
|
var marker = new google.maps.Marker({
|
||||||
|
position: myLatlng,
|
||||||
|
title:"Hello World!"
|
||||||
|
});
|
||||||
|
|
||||||
|
// To add the marker to the map, call setMap();
|
||||||
|
marker.setMap(map);
|
||||||
|
},
|
||||||
|
|
||||||
|
showNotification: function(from, align){
|
||||||
|
color = Math.floor((Math.random() * 4) + 1);
|
||||||
|
|
||||||
|
$.notify({
|
||||||
|
icon: "notifications",
|
||||||
|
message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."
|
||||||
|
|
||||||
|
},{
|
||||||
|
type: type[color],
|
||||||
|
timer: 4000,
|
||||||
|
placement: {
|
||||||
|
from: from,
|
||||||
|
align: align
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
203
documentation/js/initMenu.js
Normal file
203
documentation/js/initMenu.js
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
var mobile_menu_visible = 0,
|
||||||
|
mobile_menu_initialized = false,
|
||||||
|
toggle_initialized = false,
|
||||||
|
bootstrap_nav_initialized = false;
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$sidebar = $('.sidebar');
|
||||||
|
|
||||||
|
window_width = $(window).width();
|
||||||
|
mda.initSidebarCheck();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window).resize(function(){
|
||||||
|
mda.initSidebarCheck();
|
||||||
|
|
||||||
|
});
|
||||||
|
mda = {
|
||||||
|
initSidebarCheck: function(){
|
||||||
|
if($(window).width() <= 991){
|
||||||
|
if($sidebar.length != 0){
|
||||||
|
mda.initRightMenu();
|
||||||
|
} else{
|
||||||
|
mda.initBootstrapNavbarMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initRightMenu: debounce(function(){
|
||||||
|
$sidebar_wrapper = $('.sidebar-wrapper');
|
||||||
|
|
||||||
|
if(!mobile_menu_initialized){
|
||||||
|
|
||||||
|
$navbar = $('nav').find('.navbar-collapse').first().clone(true);
|
||||||
|
|
||||||
|
nav_content = '';
|
||||||
|
mobile_menu_content = '';
|
||||||
|
|
||||||
|
$navbar.children('ul').each(function(){
|
||||||
|
|
||||||
|
content_buff = $(this).html();
|
||||||
|
nav_content = nav_content + content_buff;
|
||||||
|
});
|
||||||
|
|
||||||
|
nav_content = '<ul class="nav nav-mobile-menu">' + nav_content + '</ul>';
|
||||||
|
|
||||||
|
$navbar_form = $('nav').find('.navbar-form').clone(true);
|
||||||
|
|
||||||
|
$sidebar_nav = $sidebar_wrapper.find('.nav-container');
|
||||||
|
|
||||||
|
// insert the navbar form before the sidebar list
|
||||||
|
$nav_content = $(nav_content);
|
||||||
|
$nav_content.insertBefore($sidebar_nav);
|
||||||
|
$navbar_form.insertBefore($nav_content);
|
||||||
|
|
||||||
|
|
||||||
|
$(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
});
|
||||||
|
mobile_menu_initialized = true;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if($(window).width() > 991){
|
||||||
|
// reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
|
||||||
|
$sidebar_wrapper.find('.navbar-form').remove();
|
||||||
|
$sidebar_wrapper.find('.nav-mobile-menu').remove();
|
||||||
|
mobile_menu_initialized = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!toggle_initialized){
|
||||||
|
$toggle = $('.navbar-toggle');
|
||||||
|
|
||||||
|
$toggle.click(function (){
|
||||||
|
|
||||||
|
if(mobile_menu_visible == 1) {
|
||||||
|
$('html').removeClass('nav-open');
|
||||||
|
|
||||||
|
$('.close-layer').remove();
|
||||||
|
setTimeout(function(){
|
||||||
|
$toggle.removeClass('toggled');
|
||||||
|
}, 400);
|
||||||
|
|
||||||
|
mobile_menu_visible = 0;;
|
||||||
|
} else {
|
||||||
|
setTimeout(function(){
|
||||||
|
$toggle.addClass('toggled');
|
||||||
|
}, 430);
|
||||||
|
|
||||||
|
|
||||||
|
$layer = $('<div class="close-layer"></div>');
|
||||||
|
$layer.appendTo(".wrapper");
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$layer.addClass('visible');
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
$layer.click(function() {
|
||||||
|
$('html').removeClass('nav-open');
|
||||||
|
mobile_menu_visible = 0;
|
||||||
|
|
||||||
|
$layer.removeClass('visible');
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$layer.remove();
|
||||||
|
$toggle.removeClass('toggled');
|
||||||
|
|
||||||
|
}, 400);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('html').addClass('nav-open');
|
||||||
|
mobile_menu_visible = 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
toggle_initialized = true;
|
||||||
|
}
|
||||||
|
},200),
|
||||||
|
|
||||||
|
|
||||||
|
initBootstrapNavbarMenu: debounce(function(){
|
||||||
|
if(!bootstrap_nav_initialized){
|
||||||
|
$navbar = $('nav').find('.navbar-collapse').first().clone(true);
|
||||||
|
|
||||||
|
nav_content = '';
|
||||||
|
mobile_menu_content = '';
|
||||||
|
//add the content from the regular header to the mobile menu
|
||||||
|
$navbar.children('ul').each(function(){
|
||||||
|
content_buff = $(this).html();
|
||||||
|
nav_content = nav_content + content_buff;
|
||||||
|
});
|
||||||
|
|
||||||
|
nav_content = '<ul class="nav nav-mobile-menu">' + nav_content + '</ul>';
|
||||||
|
$navbar.html(nav_content);
|
||||||
|
$navbar.addClass('bootstrap-navbar');
|
||||||
|
|
||||||
|
// append it to the body, so it will come from the right side of the screen
|
||||||
|
$('body').append($navbar);
|
||||||
|
$toggle = $('.navbar-toggle');
|
||||||
|
$navbar.find('a').removeClass('btn btn-round btn-default');
|
||||||
|
$navbar.find('button').removeClass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral');
|
||||||
|
$navbar.find('button').addClass('btn-simple btn-block');
|
||||||
|
|
||||||
|
$toggle.click(function (){
|
||||||
|
if(mobile_menu_visible == 1) {
|
||||||
|
$('html').removeClass('nav-open');
|
||||||
|
$('.close-layer').remove();
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$toggle.removeClass('toggled');
|
||||||
|
}, 400);
|
||||||
|
mobile_menu_visible = 0;
|
||||||
|
} else {
|
||||||
|
setTimeout(function(){
|
||||||
|
$toggle.addClass('toggled');
|
||||||
|
}, 430);
|
||||||
|
|
||||||
|
$layer = $('<div class="close-layer"></div>');
|
||||||
|
$layer.appendTo(".wrapper-full-page");
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$layer.addClass('visible');
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
$layer.click(function() {
|
||||||
|
$('html').removeClass('nav-open');
|
||||||
|
|
||||||
|
mobile_menu_visible = 0;
|
||||||
|
$layer.removeClass('visible');
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$layer.remove();
|
||||||
|
$toggle.removeClass('toggled');
|
||||||
|
}, 400);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('html').addClass('nav-open');
|
||||||
|
mobile_menu_visible = 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
bootstrap_nav_initialized = true;
|
||||||
|
}
|
||||||
|
}, 500),
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Returns a function, that, as long as it continues to be invoked, will not
|
||||||
|
// be triggered. The function will be called after it stops being called for
|
||||||
|
// N milliseconds. If `immediate` is passed, trigger the function on the
|
||||||
|
// leading edge, instead of the trailing.
|
||||||
|
|
||||||
|
function debounce(func, wait, immediate) {
|
||||||
|
var timeout;
|
||||||
|
return function() {
|
||||||
|
var context = this, args = arguments;
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(function() {
|
||||||
|
timeout = null;
|
||||||
|
if (!immediate) func.apply(context, args);
|
||||||
|
}, wait);
|
||||||
|
if (immediate && !timeout) func.apply(context, args);
|
||||||
|
};
|
||||||
|
};
|
||||||
4
documentation/js/jquery-3.2.1.min.js
vendored
Normal file
4
documentation/js/jquery-3.2.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
146
documentation/js/material-dashboard.js
Normal file
146
documentation/js/material-dashboard.js
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
/*!
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
* Material Dashboard Angular 2 - V1.2.0
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
|
||||||
|
* Copyright 2017 Creative Tim (https://www.creative-tim.com)
|
||||||
|
* Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular/blob/master/LICENSE.md)
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
var searchVisible = 0;
|
||||||
|
var transparent = true;
|
||||||
|
|
||||||
|
var transparentDemo = true;
|
||||||
|
var fixedTop = false;
|
||||||
|
|
||||||
|
var seq = 0, delays = 80, durations = 500;
|
||||||
|
var seq2 = 0, delays2 = 80, durations2 = 500;
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
$sidebar = $('.sidebar');
|
||||||
|
|
||||||
|
$.material.init();
|
||||||
|
|
||||||
|
window_width = $(window).width();
|
||||||
|
// check if there is an image set for the sidebar's background
|
||||||
|
// Activate the tooltips
|
||||||
|
$('[rel="tooltip"]').tooltip();
|
||||||
|
|
||||||
|
|
||||||
|
$('.form-control').on("focus", function(){
|
||||||
|
$(this).parent('.input-group').addClass("input-group-focus");
|
||||||
|
}).on("blur", function(){
|
||||||
|
$(this).parent(".input-group").removeClass("input-group-focus");
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// activate collapse right menu when the windows is resized
|
||||||
|
$(window).resize(function(){
|
||||||
|
// reset the seq for charts drawing animations
|
||||||
|
seq = seq2 = 0;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
md = {
|
||||||
|
misc:{
|
||||||
|
navbar_menu_visible: 0,
|
||||||
|
active_collapse: true,
|
||||||
|
disabled_collapse_init: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
checkScrollForTransparentNavbar: debounce(function() {
|
||||||
|
if($(document).scrollTop() > 381 ) {
|
||||||
|
if(transparent) {
|
||||||
|
transparent = false;
|
||||||
|
$('.navbar-color-on-scroll').removeClass('navbar-transparent');
|
||||||
|
$('.navbar-title').removeClass('hidden');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if( !transparent ) {
|
||||||
|
transparent = true;
|
||||||
|
$('.navbar-color-on-scroll').addClass('navbar-transparent');
|
||||||
|
$('.navbar-title').addClass('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 17),
|
||||||
|
|
||||||
|
|
||||||
|
startAnimationForLineChart: function(chart){
|
||||||
|
|
||||||
|
chart.on('draw', function(data) {
|
||||||
|
if(data.type === 'line' || data.type === 'area') {
|
||||||
|
data.element.animate({
|
||||||
|
d: {
|
||||||
|
begin: 600,
|
||||||
|
dur: 700,
|
||||||
|
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
||||||
|
to: data.path.clone().stringify(),
|
||||||
|
easing: Chartist.Svg.Easing.easeOutQuint
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if(data.type === 'point') {
|
||||||
|
seq++;
|
||||||
|
data.element.animate({
|
||||||
|
opacity: {
|
||||||
|
begin: seq * delays,
|
||||||
|
dur: durations,
|
||||||
|
from: 0,
|
||||||
|
to: 1,
|
||||||
|
easing: 'ease'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
seq = 0;
|
||||||
|
},
|
||||||
|
startAnimationForBarChart: function(chart){
|
||||||
|
|
||||||
|
chart.on('draw', function(data) {
|
||||||
|
if(data.type === 'bar'){
|
||||||
|
seq2++;
|
||||||
|
data.element.animate({
|
||||||
|
opacity: {
|
||||||
|
begin: seq2 * delays2,
|
||||||
|
dur: durations2,
|
||||||
|
from: 0,
|
||||||
|
to: 1,
|
||||||
|
easing: 'ease'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
seq2 = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Returns a function, that, as long as it continues to be invoked, will not
|
||||||
|
// be triggered. The function will be called after it stops being called for
|
||||||
|
// N milliseconds. If `immediate` is passed, trigger the function on the
|
||||||
|
// leading edge, instead of the trailing.
|
||||||
|
|
||||||
|
function debounce(func, wait, immediate) {
|
||||||
|
var timeout;
|
||||||
|
return function() {
|
||||||
|
var context = this, args = arguments;
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(function() {
|
||||||
|
timeout = null;
|
||||||
|
if (!immediate) func.apply(context, args);
|
||||||
|
}, wait);
|
||||||
|
if (immediate && !timeout) func.apply(context, args);
|
||||||
|
};
|
||||||
|
};
|
||||||
1
documentation/js/material.min.js
vendored
Normal file
1
documentation/js/material.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
154
documentation/tutorial-components.html
Normal file
154
documentation/tutorial-components.html
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="apple-touch-icon" sizes="76x76" href="../src/assets/img/apple-icon.png" />
|
||||||
|
<link rel="icon" type="image/png" href="../src/assets/img/favicon.png" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<title>Material Dashboard Angular by Creative Tim</title>
|
||||||
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
|
<!-- Material Dashboard CSS -->
|
||||||
|
<link href="css/material-dashboard.css" rel="stylesheet" />
|
||||||
|
<!-- CSS for Demo Purpose, don't include it in your project -->
|
||||||
|
<!-- Fonts and icons -->
|
||||||
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
|
||||||
|
<link href="css/demo-documentation.css" rel="stylesheet" />
|
||||||
|
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
|
||||||
|
<style>
|
||||||
|
pre.prettyprint {
|
||||||
|
background-color: #eee;
|
||||||
|
border: 0px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atv,
|
||||||
|
.str {
|
||||||
|
color: #05AE0E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag,
|
||||||
|
.pln,
|
||||||
|
.kwd {
|
||||||
|
color: #3472F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atn {
|
||||||
|
color: #2C93FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pln {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-top {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-line {
|
||||||
|
border: 1px solid #999;
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 8px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-line a {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!-- Fonts and icons -->
|
||||||
|
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="offline-doc index-page">
|
||||||
|
<nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-translate">
|
||||||
|
<a class="navbar-brand">Material Dashboard Angular - Docs </a>
|
||||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse">
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard-angular2/issues">Have an issue?</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="page-header header-filter clear-filter" style="background-image: url('../src/assets/img/cover.jpeg'); background-size: cover">
|
||||||
|
<div class="container">
|
||||||
|
<div class="col-md-8 ml-auto mr-auto">
|
||||||
|
<div class="brand">
|
||||||
|
<h1>Material Dashboard Angular
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h3 class="title">Documentation v2.2.0</h3>
|
||||||
|
<br/>
|
||||||
|
<a href="https://demos.creative-tim.com/material-dashboard-angular2/documentation/tutorial" class="btn btn-white btn-round">View documentation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="footer ">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="pull-left">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.creative-tim.com">
|
||||||
|
Creative Tim
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://presentation.creative-tim.com">
|
||||||
|
About Us
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://blog.creative-tim.com">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.creative-tim.com/license">
|
||||||
|
Licenses
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="copyright pull-right">
|
||||||
|
© <script>document.write(new Date().getFullYear())</script>, made with <i class="material-icons">favorite</i> by <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
14
e2e/app.e2e-spec.ts
Normal file
14
e2e/app.e2e-spec.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { MaterialDashboardAngularPage } from './app.po';
|
||||||
|
|
||||||
|
describe('material-dashboard-angular App', () => {
|
||||||
|
let page: MaterialDashboardAngularPage;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new MaterialDashboardAngularPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
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';
|
||||||
|
|
||||||
|
export class MaterialDashboardAngularPage {
|
||||||
|
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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
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-devkit/build-angular'],
|
||||||
|
plugins: [
|
||||||
|
require('karma-jasmine'),
|
||||||
|
require('karma-chrome-launcher'),
|
||||||
|
require('karma-jasmine-html-reporter'),
|
||||||
|
require('karma-coverage-istanbul-reporter'),
|
||||||
|
require('@angular-devkit/build-angular/plugins/karma')
|
||||||
|
],
|
||||||
|
client:{
|
||||||
|
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
files: [
|
||||||
|
|
||||||
|
],
|
||||||
|
preprocessors: {
|
||||||
|
|
||||||
|
},
|
||||||
|
mime: {
|
||||||
|
'text/x-typescript': ['ts','tsx']
|
||||||
|
},
|
||||||
|
coverageIstanbulReporter: {
|
||||||
|
dir: require('path').join(__dirname, 'coverage'), 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
|
||||||
|
});
|
||||||
|
};
|
||||||
77
package.json
Normal file
77
package.json
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
{
|
||||||
|
"name": "material-dashboard-angular",
|
||||||
|
"version": "2.2.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build",
|
||||||
|
"test": "ng test",
|
||||||
|
"lint": "ng lint",
|
||||||
|
"e2e": "ng e2e",
|
||||||
|
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "10.13.0",
|
||||||
|
"npm": "6.4.1"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@agm/core": "1.0.0-beta.5",
|
||||||
|
"@angular/animations": "7.0.2",
|
||||||
|
"@angular/cdk": "7.0.2",
|
||||||
|
"@angular/common": "7.0.2",
|
||||||
|
"@angular/compiler": "7.0.2",
|
||||||
|
"@angular/core": "7.0.2",
|
||||||
|
"@angular/forms": "7.0.2",
|
||||||
|
"@angular/http": "7.0.2",
|
||||||
|
"@angular/material": "7.0.2",
|
||||||
|
"@angular/platform-browser": "7.0.2",
|
||||||
|
"@angular/platform-browser-dynamic": "7.0.2",
|
||||||
|
"@angular/platform-server": "7.0.2",
|
||||||
|
"@angular/router": "7.0.2",
|
||||||
|
"ajv": "6.4.0",
|
||||||
|
"arrive": "2.4.1",
|
||||||
|
"bootstrap": "4.1.0",
|
||||||
|
"bootstrap-material-design": "4.1.1",
|
||||||
|
"bootstrap-notify": "3.1.3",
|
||||||
|
"chartist": "0.11.0",
|
||||||
|
"classlist.js": "1.1.20150312",
|
||||||
|
"core-js": "2.4.1",
|
||||||
|
"express": "4.16.3",
|
||||||
|
"googleapis": "28.1.0",
|
||||||
|
"hammerjs": "2.0.8",
|
||||||
|
"jquery": "3.2.1",
|
||||||
|
"moment": "2.22.1",
|
||||||
|
"perfect-scrollbar": "1.1.0",
|
||||||
|
"popper.js": "1.14.3",
|
||||||
|
"rxjs": "6.3.3",
|
||||||
|
"rxjs-compat": "6.3.3",
|
||||||
|
"web-animations-js": "2.3.1",
|
||||||
|
"zone.js": "0.8.26"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular/cli": "6.0.3",
|
||||||
|
"@angular/compiler-cli": "7.0.2",
|
||||||
|
"@angular/language-service": "7.0.2",
|
||||||
|
"@types/bootstrap": "3.3.32",
|
||||||
|
"@types/chartist": "0.9.34",
|
||||||
|
"@types/googlemaps": "3.30.8",
|
||||||
|
"@types/jasmine": "2.5.38",
|
||||||
|
"@types/jquery": "1.10.31",
|
||||||
|
"@types/node": "6.0.73",
|
||||||
|
"codelyzer": "4.2.1",
|
||||||
|
"jasmine-core": "3.1.0",
|
||||||
|
"jasmine-spec-reporter": "4.2.1",
|
||||||
|
"karma": "2.0.0",
|
||||||
|
"karma-chrome-launcher": "2.2.0",
|
||||||
|
"karma-cli": "1.0.1",
|
||||||
|
"karma-coverage-istanbul-reporter": "1.4.2",
|
||||||
|
"karma-jasmine": "1.1.1",
|
||||||
|
"protractor": "5.3.1",
|
||||||
|
"ts-node": "5.0.1",
|
||||||
|
"tslint": "5.9.1",
|
||||||
|
"typescript": "3.1.6",
|
||||||
|
"@angular-devkit/build-angular": "~0.6.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
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 } }));
|
||||||
|
}
|
||||||
|
};
|
||||||
0
src/app/app.component.css
Normal file
0
src/app/app.component.css
Normal file
2
src/app/app.component.html
Normal file
2
src/app/app.component.html
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
<router-outlet></router-outlet>
|
||||||
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(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent
|
||||||
|
],
|
||||||
|
}).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!');
|
||||||
|
}));
|
||||||
|
});
|
||||||
11
src/app/app.component.ts
Normal file
11
src/app/app.component.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Component} from '@angular/core';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.css']
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
|
||||||
|
}
|
||||||
46
src/app/app.module.ts
Normal file
46
src/app/app.module.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { HttpModule } from '@angular/http';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
|
||||||
|
import { AppRoutingModule } from './app.routing';
|
||||||
|
import { ComponentsModule } from './components/components.module';
|
||||||
|
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||||
|
import { UserProfileComponent } from './user-profile/user-profile.component';
|
||||||
|
import { TableListComponent } from './table-list/table-list.component';
|
||||||
|
import { TypographyComponent } from './typography/typography.component';
|
||||||
|
import { IconsComponent } from './icons/icons.component';
|
||||||
|
import { MapsComponent } from './maps/maps.component';
|
||||||
|
import { NotificationsComponent } from './notifications/notifications.component';
|
||||||
|
import { UpgradeComponent } from './upgrade/upgrade.component';
|
||||||
|
import {
|
||||||
|
AgmCoreModule
|
||||||
|
} from '@agm/core';
|
||||||
|
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
FormsModule,
|
||||||
|
HttpModule,
|
||||||
|
ComponentsModule,
|
||||||
|
RouterModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
AgmCoreModule.forRoot({
|
||||||
|
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
AdminLayoutComponent,
|
||||||
|
|
||||||
|
],
|
||||||
|
providers: [],
|
||||||
|
bootstrap: [AppComponent]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
||||||
41
src/app/app.routing.ts
Normal file
41
src/app/app.routing.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule, } from '@angular/common';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
|
||||||
|
|
||||||
|
const routes: Routes =[
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
redirectTo: 'dashboard',
|
||||||
|
pathMatch: 'full',
|
||||||
|
}, {
|
||||||
|
path: '',
|
||||||
|
component: AdminLayoutComponent,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
|
||||||
|
}]}
|
||||||
|
// { path: 'dashboard', component: DashboardComponent },
|
||||||
|
// { path: 'user-profile', component: UserProfileComponent },
|
||||||
|
// { path: 'table-list', component: TableListComponent },
|
||||||
|
// { path: 'typography', component: TypographyComponent },
|
||||||
|
// { path: 'icons', component: IconsComponent },
|
||||||
|
// { path: 'maps', component: MapsComponent },
|
||||||
|
// { path: 'notifications', component: NotificationsComponent },
|
||||||
|
// { path: 'upgrade', component: UpgradeComponent },
|
||||||
|
// { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
BrowserModule,
|
||||||
|
RouterModule.forRoot(routes)
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class AppRoutingModule { }
|
||||||
25
src/app/components/components.module.ts
Normal file
25
src/app/components/components.module.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
import { FooterComponent } from './footer/footer.component';
|
||||||
|
import { NavbarComponent } from './navbar/navbar.component';
|
||||||
|
import { SidebarComponent } from './sidebar/sidebar.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
RouterModule,
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
FooterComponent,
|
||||||
|
NavbarComponent,
|
||||||
|
SidebarComponent
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
FooterComponent,
|
||||||
|
NavbarComponent,
|
||||||
|
SidebarComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class ComponentsModule { }
|
||||||
0
src/app/components/footer/footer.component.css
Normal file
0
src/app/components/footer/footer.component.css
Normal file
33
src/app/components/footer/footer.component.html
Normal file
33
src/app/components/footer/footer.component.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<footer class="footer ">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<nav class="pull-left">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.creative-tim.com">
|
||||||
|
Creative Tim
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://creative-tim.com/about-us">
|
||||||
|
About Us
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://blog.creative-tim.com">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.creative-tim.com/license">
|
||||||
|
Licenses
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="copyright pull-right">
|
||||||
|
©
|
||||||
|
{{test | date: 'yyyy'}}, made with love by
|
||||||
|
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
25
src/app/components/footer/footer.component.spec.ts
Normal file
25
src/app/components/footer/footer.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FooterComponent } from './footer.component';
|
||||||
|
|
||||||
|
describe('FooterComponent', () => {
|
||||||
|
let component: FooterComponent;
|
||||||
|
let fixture: ComponentFixture<FooterComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FooterComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FooterComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
16
src/app/components/footer/footer.component.ts
Normal file
16
src/app/components/footer/footer.component.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-footer',
|
||||||
|
templateUrl: './footer.component.html',
|
||||||
|
styleUrls: ['./footer.component.css']
|
||||||
|
})
|
||||||
|
export class FooterComponent implements OnInit {
|
||||||
|
test : Date = new Date();
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/components/navbar/navbar.component.css
Normal file
0
src/app/components/navbar/navbar.component.css
Normal file
114
src/app/components/navbar/navbar.component.html
Normal file
114
src/app/components/navbar/navbar.component.html
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-wrapper">
|
||||||
|
<a class="navbar-brand" href="#">{{getTitle()}}</a>
|
||||||
|
</div>
|
||||||
|
<button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="navbar-toggler-icon icon-bar"></span>
|
||||||
|
<span class="navbar-toggler-icon icon-bar"></span>
|
||||||
|
<span class="navbar-toggler-icon icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse justify-content-end" id="navigation">
|
||||||
|
<form class="navbar-form">
|
||||||
|
<div class="input-group no-border">
|
||||||
|
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||||
|
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||||
|
<i class="material-icons">search</i>
|
||||||
|
<div class="ripple-container"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#pablo">
|
||||||
|
<i class="material-icons">dashboard</i>
|
||||||
|
<p>
|
||||||
|
<span class="d-lg-none d-md-block">Stats</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="material-icons">notifications</i>
|
||||||
|
<span class="notification">5</span>
|
||||||
|
<p>
|
||||||
|
<span class="d-lg-none d-md-block">Some Actions</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||||
|
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||||
|
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||||
|
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||||
|
<a class="dropdown-item" href="#">Another Notification</a>
|
||||||
|
<a class="dropdown-item" href="#">Another One</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#pablo">
|
||||||
|
<i class="material-icons">person</i>
|
||||||
|
<p>
|
||||||
|
<span class="d-lg-none d-md-block">Account</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
<nav class="navbar navbar-transparent navbar-absolute">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button mat-raised-button type="button" class="navbar-toggle" data-toggle="collapse" (click)="sidebarToggle()">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">{{getTitle()}}</a>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse">
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li>
|
||||||
|
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<i class="material-icons">dashboard</i>
|
||||||
|
<p class="hidden-lg hidden-md">Dashboard</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<i class="material-icons">notifications</i>
|
||||||
|
<span class="notification">5</span>
|
||||||
|
<p class="hidden-lg hidden-md">Notifications</p>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Mike John responded to your email</a></li>
|
||||||
|
<li><a href="#">You have 5 new tasks</a></li>
|
||||||
|
<li><a href="#">You're now friend with Andrew</a></li>
|
||||||
|
<li><a href="#">Another Notification</a></li>
|
||||||
|
<li><a href="#">Another One</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<i class="material-icons">person</i>
|
||||||
|
<p class="hidden-lg hidden-md">Profile</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<form class="navbar-form navbar-right" role="search">
|
||||||
|
<div class="form-group form-black is-empty">
|
||||||
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
|
<span class="material-input"></span>
|
||||||
|
</div>
|
||||||
|
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||||
|
<i class="material-icons">search</i><div class="ripple-container"></div>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav> -->
|
||||||
25
src/app/components/navbar/navbar.component.spec.ts
Normal file
25
src/app/components/navbar/navbar.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { NavbarComponent } from './navbar.component';
|
||||||
|
|
||||||
|
describe('NavbarComponent', () => {
|
||||||
|
let component: NavbarComponent;
|
||||||
|
let fixture: ComponentFixture<NavbarComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ NavbarComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(NavbarComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
126
src/app/components/navbar/navbar.component.ts
Normal file
126
src/app/components/navbar/navbar.component.ts
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
import { Component, OnInit, ElementRef } from '@angular/core';
|
||||||
|
import { ROUTES } from '../sidebar/sidebar.component';
|
||||||
|
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-navbar',
|
||||||
|
templateUrl: './navbar.component.html',
|
||||||
|
styleUrls: ['./navbar.component.css']
|
||||||
|
})
|
||||||
|
export class NavbarComponent implements OnInit {
|
||||||
|
private listTitles: any[];
|
||||||
|
location: Location;
|
||||||
|
mobile_menu_visible: any = 0;
|
||||||
|
private toggleButton: any;
|
||||||
|
private sidebarVisible: boolean;
|
||||||
|
|
||||||
|
constructor(location: Location, private element: ElementRef, private router: Router) {
|
||||||
|
this.location = location;
|
||||||
|
this.sidebarVisible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.listTitles = ROUTES.filter(listTitle => listTitle);
|
||||||
|
const navbar: HTMLElement = this.element.nativeElement;
|
||||||
|
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
|
||||||
|
this.router.events.subscribe((event) => {
|
||||||
|
this.sidebarClose();
|
||||||
|
var $layer: any = document.getElementsByClassName('close-layer')[0];
|
||||||
|
if ($layer) {
|
||||||
|
$layer.remove();
|
||||||
|
this.mobile_menu_visible = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
sidebarOpen() {
|
||||||
|
const toggleButton = this.toggleButton;
|
||||||
|
const body = document.getElementsByTagName('body')[0];
|
||||||
|
setTimeout(function(){
|
||||||
|
toggleButton.classList.add('toggled');
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
body.classList.add('nav-open');
|
||||||
|
|
||||||
|
this.sidebarVisible = true;
|
||||||
|
};
|
||||||
|
sidebarClose() {
|
||||||
|
const body = document.getElementsByTagName('body')[0];
|
||||||
|
this.toggleButton.classList.remove('toggled');
|
||||||
|
this.sidebarVisible = false;
|
||||||
|
body.classList.remove('nav-open');
|
||||||
|
};
|
||||||
|
sidebarToggle() {
|
||||||
|
// const toggleButton = this.toggleButton;
|
||||||
|
// const body = document.getElementsByTagName('body')[0];
|
||||||
|
var $toggle = document.getElementsByClassName('navbar-toggler')[0];
|
||||||
|
|
||||||
|
if (this.sidebarVisible === false) {
|
||||||
|
this.sidebarOpen();
|
||||||
|
} else {
|
||||||
|
this.sidebarClose();
|
||||||
|
}
|
||||||
|
const body = document.getElementsByTagName('body')[0];
|
||||||
|
|
||||||
|
if (this.mobile_menu_visible == 1) {
|
||||||
|
// $('html').removeClass('nav-open');
|
||||||
|
body.classList.remove('nav-open');
|
||||||
|
if ($layer) {
|
||||||
|
$layer.remove();
|
||||||
|
}
|
||||||
|
setTimeout(function() {
|
||||||
|
$toggle.classList.remove('toggled');
|
||||||
|
}, 400);
|
||||||
|
|
||||||
|
this.mobile_menu_visible = 0;
|
||||||
|
} else {
|
||||||
|
setTimeout(function() {
|
||||||
|
$toggle.classList.add('toggled');
|
||||||
|
}, 430);
|
||||||
|
|
||||||
|
var $layer = document.createElement('div');
|
||||||
|
$layer.setAttribute('class', 'close-layer');
|
||||||
|
|
||||||
|
|
||||||
|
if (body.querySelectorAll('.main-panel')) {
|
||||||
|
document.getElementsByClassName('main-panel')[0].appendChild($layer);
|
||||||
|
}else if (body.classList.contains('off-canvas-sidebar')) {
|
||||||
|
document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
$layer.classList.add('visible');
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
$layer.onclick = function() { //asign a function
|
||||||
|
body.classList.remove('nav-open');
|
||||||
|
this.mobile_menu_visible = 0;
|
||||||
|
$layer.classList.remove('visible');
|
||||||
|
setTimeout(function() {
|
||||||
|
$layer.remove();
|
||||||
|
$toggle.classList.remove('toggled');
|
||||||
|
}, 400);
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
body.classList.add('nav-open');
|
||||||
|
this.mobile_menu_visible = 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
getTitle(){
|
||||||
|
var titlee = this.location.prepareExternalUrl(this.location.path());
|
||||||
|
if(titlee.charAt(0) === '#'){
|
||||||
|
titlee = titlee.slice( 2 );
|
||||||
|
}
|
||||||
|
titlee = titlee.split('/').pop();
|
||||||
|
|
||||||
|
for(var item = 0; item < this.listTitles.length; item++){
|
||||||
|
if(this.listTitles[item].path === titlee){
|
||||||
|
return this.listTitles[item].title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 'Dashboard';
|
||||||
|
}
|
||||||
|
}
|
||||||
0
src/app/components/sidebar/sidebar.component.css
Normal file
0
src/app/components/sidebar/sidebar.component.css
Normal file
65
src/app/components/sidebar/sidebar.component.html
Normal file
65
src/app/components/sidebar/sidebar.component.html
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<div class="logo">
|
||||||
|
<a href="https://www.creative-tim.com" class="simple-text">
|
||||||
|
<div class="logo-img">
|
||||||
|
<img src="/assets/img/angular2-logo-red.png"/>
|
||||||
|
</div>
|
||||||
|
Creative Tim
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-wrapper">
|
||||||
|
<div *ngIf="isMobileMenu()">
|
||||||
|
<form class="navbar-form">
|
||||||
|
<span class="bmd-form-group">
|
||||||
|
<div class="input-group no-border">
|
||||||
|
<input type="text" value="" class="form-control" placeholder="Search...">
|
||||||
|
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
|
||||||
|
<i class="material-icons">search</i>
|
||||||
|
<div class="ripple-container"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</form>
|
||||||
|
<ul class="nav navbar-nav nav-mobile-menu">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#pablo">
|
||||||
|
<i class="material-icons">dashboard</i>
|
||||||
|
<p>
|
||||||
|
<span class="d-lg-none d-md-block">Stats</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="material-icons">notifications</i>
|
||||||
|
<span class="notification">5</span>
|
||||||
|
<p>
|
||||||
|
<span class="d-lg-none d-md-block">Some Actions</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
||||||
|
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
||||||
|
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
||||||
|
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
||||||
|
<a class="dropdown-item" href="#">Another Notification</a>
|
||||||
|
<a class="dropdown-item" href="#">Another One</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#pablo">
|
||||||
|
<i class="material-icons">person</i>
|
||||||
|
<p>
|
||||||
|
<span class="d-lg-none d-md-block">Account</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<ul class="nav">
|
||||||
|
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
|
||||||
|
<a class="nav-link" [routerLink]="[menuItem.path]">
|
||||||
|
<i class="material-icons">{{menuItem.icon}}</i>
|
||||||
|
<p>{{menuItem.title}}</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
25
src/app/components/sidebar/sidebar.component.spec.ts
Normal file
25
src/app/components/sidebar/sidebar.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SidebarComponent } from './sidebar.component';
|
||||||
|
|
||||||
|
describe('SidebarComponent', () => {
|
||||||
|
let component: SidebarComponent;
|
||||||
|
let fixture: ComponentFixture<SidebarComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ SidebarComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(SidebarComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
40
src/app/components/sidebar/sidebar.component.ts
Normal file
40
src/app/components/sidebar/sidebar.component.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare const $: any;
|
||||||
|
declare interface RouteInfo {
|
||||||
|
path: string;
|
||||||
|
title: string;
|
||||||
|
icon: string;
|
||||||
|
class: string;
|
||||||
|
}
|
||||||
|
export const ROUTES: RouteInfo[] = [
|
||||||
|
{ path: '/dashboard', title: 'Dashboard', icon: 'dashboard', class: '' },
|
||||||
|
{ path: '/user-profile', title: 'User Profile', icon:'person', class: '' },
|
||||||
|
{ path: '/table-list', title: 'Table List', icon:'content_paste', class: '' },
|
||||||
|
{ path: '/typography', title: 'Typography', icon:'library_books', class: '' },
|
||||||
|
{ path: '/icons', title: 'Icons', icon:'bubble_chart', class: '' },
|
||||||
|
{ path: '/maps', title: 'Maps', icon:'location_on', class: '' },
|
||||||
|
{ path: '/notifications', title: 'Notifications', icon:'notifications', class: '' },
|
||||||
|
{ path: '/upgrade', title: 'Upgrade to PRO', icon:'unarchive', class: 'active-pro' },
|
||||||
|
];
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-sidebar',
|
||||||
|
templateUrl: './sidebar.component.html',
|
||||||
|
styleUrls: ['./sidebar.component.css']
|
||||||
|
})
|
||||||
|
export class SidebarComponent implements OnInit {
|
||||||
|
menuItems: any[];
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.menuItems = ROUTES.filter(menuItem => menuItem);
|
||||||
|
}
|
||||||
|
isMobileMenu() {
|
||||||
|
if ($(window).width() > 991) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
}
|
||||||
0
src/app/dashboard/dashboard.component.css
Normal file
0
src/app/dashboard/dashboard.component.css
Normal file
415
src/app/dashboard/dashboard.component.html
Normal file
415
src/app/dashboard/dashboard.component.html
Normal file
@ -0,0 +1,415 @@
|
|||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||||
|
<div class="card card-stats">
|
||||||
|
<div class="card-header card-header-warning card-header-icon">
|
||||||
|
<div class="card-icon">
|
||||||
|
<i class="material-icons">content_copy</i>
|
||||||
|
</div>
|
||||||
|
<p class="card-category">Used Space</p>
|
||||||
|
<h3 class="card-title">49/50
|
||||||
|
<small>GB</small>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons text-danger">warning</i>
|
||||||
|
<a href="#pablo">Get More Space...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||||
|
<div class="card card-stats">
|
||||||
|
<div class="card-header card-header-success card-header-icon">
|
||||||
|
<div class="card-icon">
|
||||||
|
<i class="material-icons">store</i>
|
||||||
|
</div>
|
||||||
|
<p class="card-category">Revenue</p>
|
||||||
|
<h3 class="card-title">$34,245</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons">date_range</i> Last 24 Hours
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||||
|
<div class="card card-stats">
|
||||||
|
<div class="card-header card-header-danger card-header-icon">
|
||||||
|
<div class="card-icon">
|
||||||
|
<i class="material-icons">info_outline</i>
|
||||||
|
</div>
|
||||||
|
<p class="card-category">Fixed Issues</p>
|
||||||
|
<h3 class="card-title">75</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons">local_offer</i> Tracked from Github
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-3 col-md-6 col-sm-6">
|
||||||
|
<div class="card card-stats">
|
||||||
|
<div class="card-header card-header-info card-header-icon">
|
||||||
|
<div class="card-icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</div>
|
||||||
|
<p class="card-category">Followers</p>
|
||||||
|
<h3 class="card-title">+245</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons">update</i> Just Updated
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card card-chart">
|
||||||
|
<div class="card-header card-header-success">
|
||||||
|
<div class="ct-chart" id="dailySalesChart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">Daily Sales</h4>
|
||||||
|
<p class="card-category">
|
||||||
|
<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card card-chart">
|
||||||
|
<div class="card-header card-header-warning">
|
||||||
|
<div class="ct-chart" id="websiteViewsChart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">Email Subscriptions</h4>
|
||||||
|
<p class="card-category">Last Campaign Performance</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card card-chart">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<div class="ct-chart" id="completedTasksChart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">Completed Tasks</h4>
|
||||||
|
<p class="card-category">Last Campaign Performance</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="stats">
|
||||||
|
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="col-lg-6 col-md-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-tabs card-header-primary">
|
||||||
|
<div class="nav-tabs-navigation">
|
||||||
|
<div class="nav-tabs-wrapper">
|
||||||
|
<span class="nav-tabs-title">Tasks:</span>
|
||||||
|
<ul class="nav nav-tabs" data-tabs="tabs">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a mat-button class="nav-link active" href="#profile" data-toggle="tab">
|
||||||
|
<i class="material-icons">bug_report</i> Bugs
|
||||||
|
<div class="ripple-container"></div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a mat-button class="nav-link" href="#messages" data-toggle="tab">
|
||||||
|
<i class="material-icons">code</i> Website
|
||||||
|
<div class="ripple-container"></div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a mat-button class="nav-link" href="#settings" data-toggle="tab">
|
||||||
|
<i class="material-icons">cloud</i> Server
|
||||||
|
<div class="ripple-container"></div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane active" id="profile">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" checked>
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Sign contract for "What are conference organizers afraid of?"</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="">
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="">
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
|
||||||
|
</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" checked>
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Create 4 Invisible User Experiences you Never Knew About</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="messages">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" checked>
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
|
||||||
|
</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="">
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Sign contract for "What are conference organizers afraid of?"</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="settings">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="">
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" checked>
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
|
||||||
|
</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" checked>
|
||||||
|
<span class="form-check-sign">
|
||||||
|
<span class="check"></span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>Sign contract for "What are conference organizers afraid of?"</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">edit</i>
|
||||||
|
</button>
|
||||||
|
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-md-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-warning">
|
||||||
|
<h4 class="card-title">Employees Stats</h4>
|
||||||
|
<p class="card-category">New employees on 15th September, 2016</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body table-responsive">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead class="text-warning">
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Salary</th>
|
||||||
|
<th>Country</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Dakota Rice</td>
|
||||||
|
<td>$36,738</td>
|
||||||
|
<td>Niger</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>Minerva Hooper</td>
|
||||||
|
<td>$23,789</td>
|
||||||
|
<td>Curaçao</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>Sage Rodriguez</td>
|
||||||
|
<td>$56,142</td>
|
||||||
|
<td>Netherlands</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4</td>
|
||||||
|
<td>Philip Chaney</td>
|
||||||
|
<td>$38,735</td>
|
||||||
|
<td>Korea, South</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/dashboard/dashboard.component.spec.ts
Normal file
25
src/app/dashboard/dashboard.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { DashboardComponent } from './dashboard.component';
|
||||||
|
|
||||||
|
describe('DashboardComponent', () => {
|
||||||
|
let component: DashboardComponent;
|
||||||
|
let fixture: ComponentFixture<DashboardComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ DashboardComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(DashboardComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
150
src/app/dashboard/dashboard.component.ts
Normal file
150
src/app/dashboard/dashboard.component.ts
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import * as Chartist from 'chartist';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-dashboard',
|
||||||
|
templateUrl: './dashboard.component.html',
|
||||||
|
styleUrls: ['./dashboard.component.css']
|
||||||
|
})
|
||||||
|
export class DashboardComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
startAnimationForLineChart(chart){
|
||||||
|
let seq: any, delays: any, durations: any;
|
||||||
|
seq = 0;
|
||||||
|
delays = 80;
|
||||||
|
durations = 500;
|
||||||
|
|
||||||
|
chart.on('draw', function(data) {
|
||||||
|
if(data.type === 'line' || data.type === 'area') {
|
||||||
|
data.element.animate({
|
||||||
|
d: {
|
||||||
|
begin: 600,
|
||||||
|
dur: 700,
|
||||||
|
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
||||||
|
to: data.path.clone().stringify(),
|
||||||
|
easing: Chartist.Svg.Easing.easeOutQuint
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if(data.type === 'point') {
|
||||||
|
seq++;
|
||||||
|
data.element.animate({
|
||||||
|
opacity: {
|
||||||
|
begin: seq * delays,
|
||||||
|
dur: durations,
|
||||||
|
from: 0,
|
||||||
|
to: 1,
|
||||||
|
easing: 'ease'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
seq = 0;
|
||||||
|
};
|
||||||
|
startAnimationForBarChart(chart){
|
||||||
|
let seq2: any, delays2: any, durations2: any;
|
||||||
|
|
||||||
|
seq2 = 0;
|
||||||
|
delays2 = 80;
|
||||||
|
durations2 = 500;
|
||||||
|
chart.on('draw', function(data) {
|
||||||
|
if(data.type === 'bar'){
|
||||||
|
seq2++;
|
||||||
|
data.element.animate({
|
||||||
|
opacity: {
|
||||||
|
begin: seq2 * delays2,
|
||||||
|
dur: durations2,
|
||||||
|
from: 0,
|
||||||
|
to: 1,
|
||||||
|
easing: 'ease'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
seq2 = 0;
|
||||||
|
};
|
||||||
|
ngOnInit() {
|
||||||
|
/* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
|
||||||
|
|
||||||
|
const dataDailySalesChart: any = {
|
||||||
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||||
|
series: [
|
||||||
|
[12, 17, 7, 17, 23, 18, 38]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const optionsDailySalesChart: any = {
|
||||||
|
lineSmooth: Chartist.Interpolation.cardinal({
|
||||||
|
tension: 0
|
||||||
|
}),
|
||||||
|
low: 0,
|
||||||
|
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||||
|
chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
|
||||||
|
}
|
||||||
|
|
||||||
|
var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
|
||||||
|
|
||||||
|
this.startAnimationForLineChart(dailySalesChart);
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------========== Completed Tasks Chart initialization ==========---------- */
|
||||||
|
|
||||||
|
const dataCompletedTasksChart: any = {
|
||||||
|
labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
|
||||||
|
series: [
|
||||||
|
[230, 750, 450, 300, 280, 240, 200, 190]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const optionsCompletedTasksChart: any = {
|
||||||
|
lineSmooth: Chartist.Interpolation.cardinal({
|
||||||
|
tension: 0
|
||||||
|
}),
|
||||||
|
low: 0,
|
||||||
|
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||||
|
chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
|
||||||
|
}
|
||||||
|
|
||||||
|
var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
|
||||||
|
|
||||||
|
// start animation for the Completed Tasks Chart - Line Chart
|
||||||
|
this.startAnimationForLineChart(completedTasksChart);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------========== Emails Subscription Chart initialization ==========---------- */
|
||||||
|
|
||||||
|
var datawebsiteViewsChart = {
|
||||||
|
labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
|
||||||
|
series: [
|
||||||
|
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
|
||||||
|
|
||||||
|
]
|
||||||
|
};
|
||||||
|
var optionswebsiteViewsChart = {
|
||||||
|
axisX: {
|
||||||
|
showGrid: false
|
||||||
|
},
|
||||||
|
low: 0,
|
||||||
|
high: 1000,
|
||||||
|
chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
|
||||||
|
};
|
||||||
|
var responsiveOptions: any[] = [
|
||||||
|
['screen and (max-width: 640px)', {
|
||||||
|
seriesBarDistance: 5,
|
||||||
|
axisX: {
|
||||||
|
labelInterpolationFnc: function (value) {
|
||||||
|
return value[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
];
|
||||||
|
var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
|
||||||
|
|
||||||
|
//start animation for the Emails Subscription Chart
|
||||||
|
this.startAnimationForBarChart(websiteViewsChart);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/icons/icons.component.css
Normal file
0
src/app/icons/icons.component.css
Normal file
29
src/app/icons/icons.component.html
Normal file
29
src/app/icons/icons.component.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="card card-plain">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h4 class="card-title">Material Design Icons</h4>
|
||||||
|
<p class="card-category">Handcrafted by our friends from
|
||||||
|
<a target="_blank" href="https://design.google.com/icons/">Google</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="iframe-container d-none d-lg-block">
|
||||||
|
<iframe src="https://design.google.com/icons/">
|
||||||
|
<p>Your browser does not support iframes.</p>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
|
||||||
|
<h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
|
||||||
|
<a href="https://design.google.com/icons/" target="_blank">Material Icons</a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/icons/icons.component.spec.ts
Normal file
25
src/app/icons/icons.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { IconsComponent } from './icons.component';
|
||||||
|
|
||||||
|
describe('IconsComponent', () => {
|
||||||
|
let component: IconsComponent;
|
||||||
|
let fixture: ComponentFixture<IconsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ IconsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(IconsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/icons/icons.component.ts
Normal file
15
src/app/icons/icons.component.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-icons',
|
||||||
|
templateUrl: './icons.component.html',
|
||||||
|
styleUrls: ['./icons.component.css']
|
||||||
|
})
|
||||||
|
export class IconsComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
13
src/app/layouts/admin-layout/admin-layout.component.html
Normal file
13
src/app/layouts/admin-layout/admin-layout.component.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<div class="wrapper">
|
||||||
|
<div class="sidebar" data-color="danger" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
|
||||||
|
<app-sidebar></app-sidebar>
|
||||||
|
<div class="sidebar-background" style="background-image: url(./assets/img/sidebar-4.jpg)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="main-panel">
|
||||||
|
<app-navbar></app-navbar>
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
<div *ngIf="isMaps('maps')">
|
||||||
|
<app-footer></app-footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/layouts/admin-layout/admin-layout.component.spec.ts
Normal file
25
src/app/layouts/admin-layout/admin-layout.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AdminLayoutComponent } from './admin-layout.component';
|
||||||
|
|
||||||
|
describe('AdminLayoutComponent', () => {
|
||||||
|
let component: AdminLayoutComponent;
|
||||||
|
let fixture: ComponentFixture<AdminLayoutComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ AdminLayoutComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(AdminLayoutComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
86
src/app/layouts/admin-layout/admin-layout.component.ts
Normal file
86
src/app/layouts/admin-layout/admin-layout.component.ts
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
|
||||||
|
import { Location, LocationStrategy, PathLocationStrategy, PopStateEvent } from '@angular/common';
|
||||||
|
import 'rxjs/add/operator/filter';
|
||||||
|
import { NavbarComponent } from '../../components/navbar/navbar.component';
|
||||||
|
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
|
||||||
|
import { Subscription } from 'rxjs/Subscription';
|
||||||
|
import PerfectScrollbar from 'perfect-scrollbar';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-admin-layout',
|
||||||
|
templateUrl: './admin-layout.component.html',
|
||||||
|
styleUrls: ['./admin-layout.component.scss']
|
||||||
|
})
|
||||||
|
export class AdminLayoutComponent implements OnInit {
|
||||||
|
private _router: Subscription;
|
||||||
|
private lastPoppedUrl: string;
|
||||||
|
private yScrollStack: number[] = [];
|
||||||
|
|
||||||
|
constructor( public location: Location, private router: Router) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
const isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
|
||||||
|
|
||||||
|
if (isWindows && !document.getElementsByTagName('body')[0].classList.contains('sidebar-mini')) {
|
||||||
|
// if we are on windows OS we activate the perfectScrollbar function
|
||||||
|
|
||||||
|
document.getElementsByTagName('body')[0].classList.add('perfect-scrollbar-on');
|
||||||
|
} else {
|
||||||
|
document.getElementsByTagName('body')[0].classList.remove('perfect-scrollbar-off');
|
||||||
|
}
|
||||||
|
const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
|
||||||
|
const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
|
||||||
|
|
||||||
|
this.location.subscribe((ev:PopStateEvent) => {
|
||||||
|
this.lastPoppedUrl = ev.url;
|
||||||
|
});
|
||||||
|
this.router.events.subscribe((event:any) => {
|
||||||
|
if (event instanceof NavigationStart) {
|
||||||
|
if (event.url != this.lastPoppedUrl)
|
||||||
|
this.yScrollStack.push(window.scrollY);
|
||||||
|
} else if (event instanceof NavigationEnd) {
|
||||||
|
if (event.url == this.lastPoppedUrl) {
|
||||||
|
this.lastPoppedUrl = undefined;
|
||||||
|
window.scrollTo(0, this.yScrollStack.pop());
|
||||||
|
} else
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
|
||||||
|
elemMainPanel.scrollTop = 0;
|
||||||
|
elemSidebar.scrollTop = 0;
|
||||||
|
});
|
||||||
|
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
|
||||||
|
let ps = new PerfectScrollbar(elemMainPanel);
|
||||||
|
ps = new PerfectScrollbar(elemSidebar);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.runOnRouteChange();
|
||||||
|
}
|
||||||
|
isMaps(path){
|
||||||
|
var titlee = this.location.prepareExternalUrl(this.location.path());
|
||||||
|
titlee = titlee.slice( 1 );
|
||||||
|
if(path == titlee){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
runOnRouteChange(): void {
|
||||||
|
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
|
||||||
|
const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
|
||||||
|
const ps = new PerfectScrollbar(elemMainPanel);
|
||||||
|
ps.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
isMac(): boolean {
|
||||||
|
let bool = false;
|
||||||
|
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
|
||||||
|
bool = true;
|
||||||
|
}
|
||||||
|
return bool;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
47
src/app/layouts/admin-layout/admin-layout.module.ts
Normal file
47
src/app/layouts/admin-layout/admin-layout.module.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { AdminLayoutRoutes } from './admin-layout.routing';
|
||||||
|
import { DashboardComponent } from '../../dashboard/dashboard.component';
|
||||||
|
import { UserProfileComponent } from '../../user-profile/user-profile.component';
|
||||||
|
import { TableListComponent } from '../../table-list/table-list.component';
|
||||||
|
import { TypographyComponent } from '../../typography/typography.component';
|
||||||
|
import { IconsComponent } from '../../icons/icons.component';
|
||||||
|
import { MapsComponent } from '../../maps/maps.component';
|
||||||
|
import { NotificationsComponent } from '../../notifications/notifications.component';
|
||||||
|
import { UpgradeComponent } from '../../upgrade/upgrade.component';
|
||||||
|
|
||||||
|
import {
|
||||||
|
MatButtonModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatRippleModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatTooltipModule,
|
||||||
|
MatSelectModule
|
||||||
|
} from '@angular/material';
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
RouterModule.forChild(AdminLayoutRoutes),
|
||||||
|
FormsModule,
|
||||||
|
MatButtonModule,
|
||||||
|
MatRippleModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatSelectModule,
|
||||||
|
MatTooltipModule,
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
DashboardComponent,
|
||||||
|
UserProfileComponent,
|
||||||
|
TableListComponent,
|
||||||
|
TypographyComponent,
|
||||||
|
IconsComponent,
|
||||||
|
MapsComponent,
|
||||||
|
NotificationsComponent,
|
||||||
|
UpgradeComponent,
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AdminLayoutModule {}
|
||||||
63
src/app/layouts/admin-layout/admin-layout.routing.ts
Normal file
63
src/app/layouts/admin-layout/admin-layout.routing.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Routes } from '@angular/router';
|
||||||
|
|
||||||
|
import { DashboardComponent } from '../../dashboard/dashboard.component';
|
||||||
|
import { UserProfileComponent } from '../../user-profile/user-profile.component';
|
||||||
|
import { TableListComponent } from '../../table-list/table-list.component';
|
||||||
|
import { TypographyComponent } from '../../typography/typography.component';
|
||||||
|
import { IconsComponent } from '../../icons/icons.component';
|
||||||
|
import { MapsComponent } from '../../maps/maps.component';
|
||||||
|
import { NotificationsComponent } from '../../notifications/notifications.component';
|
||||||
|
import { UpgradeComponent } from '../../upgrade/upgrade.component';
|
||||||
|
|
||||||
|
export const AdminLayoutRoutes: Routes = [
|
||||||
|
// {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'dashboard',
|
||||||
|
// component: DashboardComponent
|
||||||
|
// }]}, {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'userprofile',
|
||||||
|
// component: UserProfileComponent
|
||||||
|
// }]
|
||||||
|
// }, {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'icons',
|
||||||
|
// component: IconsComponent
|
||||||
|
// }]
|
||||||
|
// }, {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'notifications',
|
||||||
|
// component: NotificationsComponent
|
||||||
|
// }]
|
||||||
|
// }, {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'maps',
|
||||||
|
// component: MapsComponent
|
||||||
|
// }]
|
||||||
|
// }, {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'typography',
|
||||||
|
// component: TypographyComponent
|
||||||
|
// }]
|
||||||
|
// }, {
|
||||||
|
// path: '',
|
||||||
|
// children: [ {
|
||||||
|
// path: 'upgrade',
|
||||||
|
// component: UpgradeComponent
|
||||||
|
// }]
|
||||||
|
// }
|
||||||
|
{ path: 'dashboard', component: DashboardComponent },
|
||||||
|
{ path: 'user-profile', component: UserProfileComponent },
|
||||||
|
{ path: 'table-list', component: TableListComponent },
|
||||||
|
{ path: 'typography', component: TypographyComponent },
|
||||||
|
{ path: 'icons', component: IconsComponent },
|
||||||
|
{ path: 'maps', component: MapsComponent },
|
||||||
|
{ path: 'notifications', component: NotificationsComponent },
|
||||||
|
{ path: 'upgrade', component: UpgradeComponent },
|
||||||
|
];
|
||||||
0
src/app/maps/maps.component.css
Normal file
0
src/app/maps/maps.component.css
Normal file
1
src/app/maps/maps.component.html
Normal file
1
src/app/maps/maps.component.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<div id="map"></div>
|
||||||
25
src/app/maps/maps.component.spec.ts
Normal file
25
src/app/maps/maps.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { MapsComponent } from './maps.component';
|
||||||
|
|
||||||
|
describe('MapsComponent', () => {
|
||||||
|
let component: MapsComponent;
|
||||||
|
let fixture: ComponentFixture<MapsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ MapsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(MapsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
125
src/app/maps/maps.component.ts
Normal file
125
src/app/maps/maps.component.ts
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
declare const google: any;
|
||||||
|
|
||||||
|
interface Marker {
|
||||||
|
lat: number;
|
||||||
|
lng: number;
|
||||||
|
label?: string;
|
||||||
|
draggable?: boolean;
|
||||||
|
}
|
||||||
|
@Component({
|
||||||
|
selector: 'app-maps',
|
||||||
|
templateUrl: './maps.component.html',
|
||||||
|
styleUrls: ['./maps.component.css']
|
||||||
|
})
|
||||||
|
export class MapsComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
|
||||||
|
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
||||||
|
var mapOptions = {
|
||||||
|
zoom: 13,
|
||||||
|
center: myLatlng,
|
||||||
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
||||||
|
styles: [{
|
||||||
|
"featureType": "water",
|
||||||
|
"stylers": [{
|
||||||
|
"saturation": 43
|
||||||
|
}, {
|
||||||
|
"lightness": -11
|
||||||
|
}, {
|
||||||
|
"hue": "#0088ff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "road",
|
||||||
|
"elementType": "geometry.fill",
|
||||||
|
"stylers": [{
|
||||||
|
"hue": "#ff0000"
|
||||||
|
}, {
|
||||||
|
"saturation": -100
|
||||||
|
}, {
|
||||||
|
"lightness": 99
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "road",
|
||||||
|
"elementType": "geometry.stroke",
|
||||||
|
"stylers": [{
|
||||||
|
"color": "#808080"
|
||||||
|
}, {
|
||||||
|
"lightness": 54
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "landscape.man_made",
|
||||||
|
"elementType": "geometry.fill",
|
||||||
|
"stylers": [{
|
||||||
|
"color": "#ece2d9"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "poi.park",
|
||||||
|
"elementType": "geometry.fill",
|
||||||
|
"stylers": [{
|
||||||
|
"color": "#ccdca1"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "road",
|
||||||
|
"elementType": "labels.text.fill",
|
||||||
|
"stylers": [{
|
||||||
|
"color": "#767676"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "road",
|
||||||
|
"elementType": "labels.text.stroke",
|
||||||
|
"stylers": [{
|
||||||
|
"color": "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "poi",
|
||||||
|
"stylers": [{
|
||||||
|
"visibility": "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "landscape.natural",
|
||||||
|
"elementType": "geometry.fill",
|
||||||
|
"stylers": [{
|
||||||
|
"visibility": "on"
|
||||||
|
}, {
|
||||||
|
"color": "#b8cb93"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "poi.park",
|
||||||
|
"stylers": [{
|
||||||
|
"visibility": "on"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "poi.sports_complex",
|
||||||
|
"stylers": [{
|
||||||
|
"visibility": "on"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "poi.medical",
|
||||||
|
"stylers": [{
|
||||||
|
"visibility": "on"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"featureType": "poi.business",
|
||||||
|
"stylers": [{
|
||||||
|
"visibility": "simplified"
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
|
||||||
|
};
|
||||||
|
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
|
||||||
|
|
||||||
|
var marker = new google.maps.Marker({
|
||||||
|
position: myLatlng,
|
||||||
|
title: "Hello World!"
|
||||||
|
});
|
||||||
|
|
||||||
|
// To add the marker to the map, call setMap();
|
||||||
|
marker.setMap(map);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/notifications/notifications.component.css
Normal file
0
src/app/notifications/notifications.component.css
Normal file
123
src/app/notifications/notifications.component.html
Normal file
123
src/app/notifications/notifications.component.html
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h3 class="card-title">Notifications</h3>
|
||||||
|
<p class="card-category">Handcrafted by our friend
|
||||||
|
<a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
|
||||||
|
<a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h4 class="card-title">Notifications Style</h4>
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<span>This is a plain notification</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span>This is a notification with close button.</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info alert-with-icon" data-notify="container">
|
||||||
|
<i class="material-icons" data-notify="icon">add_alert</i>
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span data-notify="message">This is a notification with close button and icon.</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info alert-with-icon" data-notify="container">
|
||||||
|
<i class="material-icons" data-notify="icon">add_alert</i>
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h4 class="card-title">Notification states</h4>
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-success">
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger">
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-primary">
|
||||||
|
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
<b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="places-buttons">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 ml-auto mr-auto text-center">
|
||||||
|
<h4 class="card-title">
|
||||||
|
Notifications Places
|
||||||
|
<p class="category">Click to view notifications</p>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','left')">Top Left</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','center')">Top Center</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','right')">Top Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','left')">Bottom Left</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','center')">Bottom Center</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','right')">Bottom Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/notifications/notifications.component.spec.ts
Normal file
25
src/app/notifications/notifications.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { NotificationsComponent } from './notifications.component';
|
||||||
|
|
||||||
|
describe('NotificationsComponent', () => {
|
||||||
|
let component: NotificationsComponent;
|
||||||
|
let fixture: ComponentFixture<NotificationsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ NotificationsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(NotificationsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
42
src/app/notifications/notifications.component.ts
Normal file
42
src/app/notifications/notifications.component.ts
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
declare var $: any;
|
||||||
|
@Component({
|
||||||
|
selector: 'app-notifications',
|
||||||
|
templateUrl: './notifications.component.html',
|
||||||
|
styleUrls: ['./notifications.component.css']
|
||||||
|
})
|
||||||
|
export class NotificationsComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
showNotification(from, align){
|
||||||
|
const type = ['','info','success','warning','danger'];
|
||||||
|
|
||||||
|
const color = Math.floor((Math.random() * 4) + 1);
|
||||||
|
|
||||||
|
$.notify({
|
||||||
|
icon: "notifications",
|
||||||
|
message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."
|
||||||
|
|
||||||
|
},{
|
||||||
|
type: type[color],
|
||||||
|
timer: 4000,
|
||||||
|
placement: {
|
||||||
|
from: from,
|
||||||
|
align: align
|
||||||
|
},
|
||||||
|
template: '<div data-notify="container" class="col-xl-4 col-lg-4 col-11 col-sm-4 col-md-4 alert alert-{0} alert-with-icon" role="alert">' +
|
||||||
|
'<button mat-button type="button" aria-hidden="true" class="close mat-button" data-notify="dismiss"> <i class="material-icons">close</i></button>' +
|
||||||
|
'<i class="material-icons" data-notify="icon">notifications</i> ' +
|
||||||
|
'<span data-notify="title">{1}</span> ' +
|
||||||
|
'<span data-notify="message">{2}</span>' +
|
||||||
|
'<div class="progress" data-notify="progressbar">' +
|
||||||
|
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<a href="{3}" target="{4}" data-notify="url"></a>' +
|
||||||
|
'</div>'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/table-list/table-list.component.css
Normal file
0
src/app/table-list/table-list.component.css
Normal file
276
src/app/table-list/table-list.component.html
Normal file
276
src/app/table-list/table-list.component.html
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h4 class="card-title ">Simple Table</h4>
|
||||||
|
<p class="card-category"> Here is a subtitle for this table</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table">
|
||||||
|
<thead class=" text-primary">
|
||||||
|
<th>
|
||||||
|
ID
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Country
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
City
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Salary
|
||||||
|
</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
1
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Dakota Rice
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Niger
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Oud-Turnhout
|
||||||
|
</td>
|
||||||
|
<td class="text-primary">
|
||||||
|
$36,738
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
2
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Minerva Hooper
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Curaçao
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Sinaai-Waas
|
||||||
|
</td>
|
||||||
|
<td class="text-primary">
|
||||||
|
$23,789
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
3
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Sage Rodriguez
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Netherlands
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Baileux
|
||||||
|
</td>
|
||||||
|
<td class="text-primary">
|
||||||
|
$56,142
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
4
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Philip Chaney
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Korea, South
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Overland Park
|
||||||
|
</td>
|
||||||
|
<td class="text-primary">
|
||||||
|
$38,735
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
5
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Doris Greene
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Malawi
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Feldkirchen in Kärnten
|
||||||
|
</td>
|
||||||
|
<td class="text-primary">
|
||||||
|
$63,542
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
6
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Mason Porter
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Chile
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Gloucester
|
||||||
|
</td>
|
||||||
|
<td class="text-primary">
|
||||||
|
$78,615
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="card card-plain">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h4 class="card-title mt-0"> Table on Plain Background</h4>
|
||||||
|
<p class="card-category"> Here is a subtitle for this table</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead class="">
|
||||||
|
<th>
|
||||||
|
ID
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Country
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
City
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Salary
|
||||||
|
</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
1
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Dakota Rice
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Niger
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Oud-Turnhout
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$36,738
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
2
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Minerva Hooper
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Curaçao
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Sinaai-Waas
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$23,789
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
3
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Sage Rodriguez
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Netherlands
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Baileux
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$56,142
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
4
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Philip Chaney
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Korea, South
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Overland Park
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$38,735
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
5
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Doris Greene
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Malawi
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Feldkirchen in Kärnten
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$63,542
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
6
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Mason Porter
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Chile
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Gloucester
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
$78,615
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/table-list/table-list.component.spec.ts
Normal file
25
src/app/table-list/table-list.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TableListComponent } from './table-list.component';
|
||||||
|
|
||||||
|
describe('TableListComponent', () => {
|
||||||
|
let component: TableListComponent;
|
||||||
|
let fixture: ComponentFixture<TableListComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ TableListComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TableListComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/table-list/table-list.component.ts
Normal file
15
src/app/table-list/table-list.component.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-table-list',
|
||||||
|
templateUrl: './table-list.component.html',
|
||||||
|
styleUrls: ['./table-list.component.css']
|
||||||
|
})
|
||||||
|
export class TableListComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/typography/typography.component.css
Normal file
0
src/app/typography/typography.component.css
Normal file
98
src/app/typography/typography.component.html
Normal file
98
src/app/typography/typography.component.html
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h4 class="card-title">Material Dashboard Heading</h4>
|
||||||
|
<p class="card-category">Created using Roboto Font Family</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="typography">
|
||||||
|
<div class="card-title">
|
||||||
|
<h2>Typography</h2>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h1>
|
||||||
|
<span class="tim-note">Header 1</span>The Life of Material Dashboard </h1>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h2>
|
||||||
|
<span class="tim-note">Header 2</span>The Life of Material Dashboard</h2>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h3>
|
||||||
|
<span class="tim-note">Header 3</span>The Life of Material Dashboard</h3>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h4>
|
||||||
|
<span class="tim-note">Header 4</span>The Life of Material Dashboard</h4>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h5>
|
||||||
|
<span class="tim-note">Header 5</span>The Life of Material Dashboard</h5>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h6>
|
||||||
|
<span class="tim-note">Header 6</span>The Life of Material Dashboard</h6>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<p>
|
||||||
|
<span class="tim-note">Paragraph</span>
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Quote</span>
|
||||||
|
<blockquote class="blockquote">
|
||||||
|
<p>
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
|
||||||
|
</p>
|
||||||
|
<small>
|
||||||
|
Kanye West, Musician
|
||||||
|
</small>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Muted Text</span>
|
||||||
|
<p class="text-muted">
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Primary Text</span>
|
||||||
|
<p class="text-primary">
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Info Text</span>
|
||||||
|
<p class="text-info">
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Success Text</span>
|
||||||
|
<p class="text-success">
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Warning Text</span>
|
||||||
|
<p class="text-warning">
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<span class="tim-note">Danger Text</span>
|
||||||
|
<p class="text-danger">
|
||||||
|
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||||
|
</div>
|
||||||
|
<div class="tim-typo">
|
||||||
|
<h2>
|
||||||
|
<span class="tim-note">Small Tag</span>
|
||||||
|
Header with small subtitle
|
||||||
|
<br>
|
||||||
|
<small>Use "small" tag for the headers</small>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/typography/typography.component.spec.ts
Normal file
25
src/app/typography/typography.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TypographyComponent } from './typography.component';
|
||||||
|
|
||||||
|
describe('TypographyComponent', () => {
|
||||||
|
let component: TypographyComponent;
|
||||||
|
let fixture: ComponentFixture<TypographyComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ TypographyComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TypographyComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/typography/typography.component.ts
Normal file
15
src/app/typography/typography.component.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-typography',
|
||||||
|
templateUrl: './typography.component.html',
|
||||||
|
styleUrls: ['./typography.component.css']
|
||||||
|
})
|
||||||
|
export class TypographyComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/upgrade/upgrade.component.css
Normal file
0
src/app/upgrade/upgrade.component.css
Normal file
78
src/app/upgrade/upgrade.component.html
Normal file
78
src/app/upgrade/upgrade.component.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-8 ml-auto mr-auto">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h4 class="card-title">Material Dashboard PRO Angular</h4>
|
||||||
|
<p class="card-category">Are you looking for more components? Please check our Premium Version of Material Dashboard Angular.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-responsive table-upgrade">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th class="text-center">Free</th>
|
||||||
|
<th class="text-center">PRO</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Components</td>
|
||||||
|
<td class="text-center">60</td>
|
||||||
|
<td class="text-center">200</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Plugins</td>
|
||||||
|
<td class="text-center">2</td>
|
||||||
|
<td class="text-center">15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Example Pages</td>
|
||||||
|
<td class="text-center">3</td>
|
||||||
|
<td class="text-center">27</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Login, Register, Pricing, Lock Pages</td>
|
||||||
|
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||||
|
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>DataTables, VectorMap, SweetAlert, Wizard, jQueryValidation, FullCalendar etc...</td>
|
||||||
|
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||||
|
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Mini Sidebar</td>
|
||||||
|
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||||
|
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Premium Support</td>
|
||||||
|
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
|
||||||
|
<td class="text-center"><i class="fa fa-check text-success"></i></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td class="text-center">Free</td>
|
||||||
|
<td class="text-center">Just $59</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="text-center"></td>
|
||||||
|
<td class="text-center">
|
||||||
|
<a href="#" class="btn btn-round btn-fill btn-default disabled">Current Version</a>
|
||||||
|
</td>
|
||||||
|
<td class="text-center">
|
||||||
|
<a target="_blank" href="https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=md-free-angular-upgrade-live" class="btn btn-round btn-fill btn-info">Upgrade to PRO</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/upgrade/upgrade.component.spec.ts
Normal file
25
src/app/upgrade/upgrade.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UpgradeComponent } from './upgrade.component';
|
||||||
|
|
||||||
|
describe('UpgradeComponent', () => {
|
||||||
|
let component: UpgradeComponent;
|
||||||
|
let fixture: ComponentFixture<UpgradeComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ UpgradeComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(UpgradeComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/upgrade/upgrade.component.ts
Normal file
15
src/app/upgrade/upgrade.component.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-upgrade',
|
||||||
|
templateUrl: './upgrade.component.html',
|
||||||
|
styleUrls: ['./upgrade.component.css']
|
||||||
|
})
|
||||||
|
export class UpgradeComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/app/user-profile/user-profile.component.css
Normal file
0
src/app/user-profile/user-profile.component.css
Normal file
105
src/app/user-profile/user-profile.component.html
Normal file
105
src/app/user-profile/user-profile.component.html
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<div class="main-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header card-header-danger">
|
||||||
|
<h4 class="card-title">Edit Profile</h4>
|
||||||
|
<p class="card-category">Complete your profile</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Company (disabled)" disabled>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Username">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Email address" type="email">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Fist Name" type="text">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Last Name" type="text">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Adress" type="text">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="City" type="text">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Country" type="text">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<input matInput placeholder="Postal Code" type="text">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<label>About Me</label>
|
||||||
|
<mat-form-field class="example-full-width">
|
||||||
|
<textarea matInput placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
<!-- <div class="form-group">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
|
||||||
|
<textarea class="form-control" rows="5"></textarea>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button mat-raised-button type="submit" class="btn btn-danger pull-right">Update Profile</button>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card card-profile">
|
||||||
|
<div class="card-avatar">
|
||||||
|
<a href="#pablo">
|
||||||
|
<img class="img" src="./assets/img/faces/marc.jpg" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
|
||||||
|
<h4 class="card-title">Alec Thompson</h4>
|
||||||
|
<p class="card-description">
|
||||||
|
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
|
||||||
|
</p>
|
||||||
|
<a href="#pablo" class="btn btn-danger btn-round">Follow</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
src/app/user-profile/user-profile.component.spec.ts
Normal file
25
src/app/user-profile/user-profile.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UserProfileComponent } from './user-profile.component';
|
||||||
|
|
||||||
|
describe('UserProfileComponent', () => {
|
||||||
|
let component: UserProfileComponent;
|
||||||
|
let fixture: ComponentFixture<UserProfileComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ UserProfileComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(UserProfileComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/user-profile/user-profile.component.ts
Normal file
15
src/app/user-profile/user-profile.component.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-profile',
|
||||||
|
templateUrl: './user-profile.component.html',
|
||||||
|
styleUrls: ['./user-profile.component.css']
|
||||||
|
})
|
||||||
|
export class UserProfileComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
0
src/assets/.gitkeep
Normal file
0
src/assets/.gitkeep
Normal file
25
src/assets/css/demo.css
Normal file
25
src/assets/css/demo.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/*my-app .main-panel .main-content .card{
|
||||||
|
animation-duration: 750ms;
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
.tim-typo{
|
||||||
|
padding-left: 25%;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.tim-typo .tim-note{
|
||||||
|
bottom: 5px;
|
||||||
|
color: #c0c1c2;
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 15px;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 20px;
|
||||||
|
position: absolute;
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
BIN
src/assets/img/angular2-logo-red.png
Normal file
BIN
src/assets/img/angular2-logo-red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/img/angular2-logo.png
Normal file
BIN
src/assets/img/angular2-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/img/apple-icon.png
Normal file
BIN
src/assets/img/apple-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/img/cover.jpeg
Normal file
BIN
src/assets/img/cover.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
BIN
src/assets/img/faces/marc.jpg
Normal file
BIN
src/assets/img/faces/marc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/img/favicon.png
Normal file
BIN
src/assets/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/img/gears.gif
Normal file
BIN
src/assets/img/gears.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/img/mask.png
Normal file
BIN
src/assets/img/mask.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 756 B |
BIN
src/assets/img/new_logo.png
Normal file
BIN
src/assets/img/new_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/img/sidebar-1.jpg
Normal file
BIN
src/assets/img/sidebar-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
src/assets/img/sidebar-2.jpg
Normal file
BIN
src/assets/img/sidebar-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
src/assets/img/sidebar-3.jpg
Normal file
BIN
src/assets/img/sidebar-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
src/assets/img/sidebar-4.jpg
Normal file
BIN
src/assets/img/sidebar-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
src/assets/img/tim_80x80.png
Normal file
BIN
src/assets/img/tim_80x80.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
3614
src/assets/scss/colormind-material-dashboard.css
Normal file
3614
src/assets/scss/colormind-material-dashboard.css
Normal file
File diff suppressed because it is too large
Load Diff
161
src/assets/scss/core/_alerts.scss
Normal file
161
src/assets/scss/core/_alerts.scss
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
.alert {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
padding: 20px 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
b{
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
}
|
||||||
|
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
|
||||||
|
@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
|
||||||
|
|
||||||
|
&-info, &-danger, &-warning, &-success, &-rose {
|
||||||
|
color: $mdb-text-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-default {
|
||||||
|
a, .alert-link {
|
||||||
|
color: $mdb-text-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
max-width: 89%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-danger{
|
||||||
|
@include shadow-alert-color($brand-danger);
|
||||||
|
@include alert-icon-color($brand-danger);
|
||||||
|
}
|
||||||
|
&.alert-warning{
|
||||||
|
@include shadow-alert-color($brand-warning);
|
||||||
|
@include alert-icon-color($brand-warning);
|
||||||
|
}
|
||||||
|
&.alert-success{
|
||||||
|
@include shadow-alert-color($brand-success);
|
||||||
|
@include alert-icon-color($brand-success);
|
||||||
|
}
|
||||||
|
&.alert-info{
|
||||||
|
@include shadow-alert-color($brand-info);
|
||||||
|
@include alert-icon-color($brand-info);
|
||||||
|
}
|
||||||
|
&.alert-primary{
|
||||||
|
@include shadow-alert-color($brand-primary);
|
||||||
|
@include alert-icon-color($brand-primary);
|
||||||
|
}
|
||||||
|
&.alert-rose{
|
||||||
|
@include shadow-alert-color($brand-rose);
|
||||||
|
@include alert-icon-color($brand-rose);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-with-icon{
|
||||||
|
padding-left: 66px;
|
||||||
|
|
||||||
|
i[data-notify="icon"] {
|
||||||
|
font-size: 30px;
|
||||||
|
display: block;
|
||||||
|
left: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -15px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-button.close{
|
||||||
|
min-width: auto;
|
||||||
|
line-height: .5;
|
||||||
|
i{
|
||||||
|
color: $white-color;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i[data-notify="icon"]{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-icon{
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: $margin-base;
|
||||||
|
|
||||||
|
i{
|
||||||
|
margin-top: -7px;
|
||||||
|
top: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-notify="dismiss"]{
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.places-buttons .btn {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// .alert {
|
||||||
|
// border: 0;
|
||||||
|
// border-radius: 3px;
|
||||||
|
//
|
||||||
|
// padding: 20px 15px;
|
||||||
|
// line-height: 20px;
|
||||||
|
//
|
||||||
|
// //@include shadow-z-2();
|
||||||
|
//
|
||||||
|
// b{
|
||||||
|
// font-weight: $font-weight-bold;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
// font-size: $font-size-small;
|
||||||
|
// }
|
||||||
|
// // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
|
||||||
|
// @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
|
||||||
|
//
|
||||||
|
// &-info, &-danger, &-warning, &-success {
|
||||||
|
// color: $mdb-text-color-light;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &-default {
|
||||||
|
// a, .alert-link {
|
||||||
|
// color: $mdb-text-color-primary;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .alert-icon{
|
||||||
|
// display: block;
|
||||||
|
// float: left;
|
||||||
|
// margin-right: $margin-base;
|
||||||
|
//
|
||||||
|
// i{
|
||||||
|
// margin-top: -7px;
|
||||||
|
// top: 5px;
|
||||||
|
// position: relative;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .mat-button.close,
|
||||||
|
// .close{
|
||||||
|
// min-width: auto;
|
||||||
|
// color: $white-color;
|
||||||
|
// text-shadow: none;
|
||||||
|
// opacity: .9;
|
||||||
|
//
|
||||||
|
// i{
|
||||||
|
// font-size: 11px;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// &:hover,
|
||||||
|
// &:focus{
|
||||||
|
// opacity: 1;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .alert .close {
|
||||||
|
// line-height: .5;
|
||||||
|
// }
|
||||||
257
src/assets/scss/core/_buttons.scss
Normal file
257
src/assets/scss/core/_buttons.scss
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
.mat-button.btn,.mat-raised-button.btn,.mat-raised-button.btn:not([class*=mat-elevation-z]),
|
||||||
|
.btn{
|
||||||
|
position: relative;
|
||||||
|
padding: 12px 30px;
|
||||||
|
margin: $bmd-btn-margin-bottom 1px;
|
||||||
|
min-width: auto;
|
||||||
|
font-size: .75rem; // 12px
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: $bmd-line-height;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
vertical-align: middle;
|
||||||
|
letter-spacing: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $border-radius-sm;
|
||||||
|
outline: 0;
|
||||||
|
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
will-change: box-shadow, transform;
|
||||||
|
@include undo-bs-tab-focus();
|
||||||
|
|
||||||
|
//--
|
||||||
|
// Colors
|
||||||
|
@include bmd-raised-button-color();
|
||||||
|
&.btn-white {
|
||||||
|
&,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: $white-color;
|
||||||
|
color: $gray-color;
|
||||||
|
}
|
||||||
|
&.btn-link {
|
||||||
|
color: $white-color;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-link:hover,
|
||||||
|
&.btn-link:focus,
|
||||||
|
&.btn-link:active {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include hover-focus();
|
||||||
|
|
||||||
|
//---
|
||||||
|
// btn-raised
|
||||||
|
&.btn-raised,
|
||||||
|
.btn-group-raised & {
|
||||||
|
// baseline shadow
|
||||||
|
// @include box-shadow($bmd-shadow-2dp);
|
||||||
|
|
||||||
|
// reverse any of the above for links
|
||||||
|
&.btn-link {
|
||||||
|
box-shadow: none;
|
||||||
|
@include bmd-hover-focus-active() {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include bmd-disabled() {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//---
|
||||||
|
// btn-outline
|
||||||
|
@include bmd-outline-button-color();
|
||||||
|
|
||||||
|
// Size variations
|
||||||
|
&.btn-lg,
|
||||||
|
.btn-group-lg & {
|
||||||
|
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $bmd-btn-font-size, $btn-lg-line-height, $border-radius-sm);
|
||||||
|
}
|
||||||
|
&.btn-sm,
|
||||||
|
.btn-group-sm & {
|
||||||
|
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $bmd-btn-font-size-sm, $line-height-sm, $border-radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-round {
|
||||||
|
border-radius: $border-radius-extreme;
|
||||||
|
|
||||||
|
> .mat-button-focus-overlay, .mat-button-ripple{
|
||||||
|
border-radius: $border-radius-extreme;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-fab,
|
||||||
|
&.btn-just-icon {
|
||||||
|
// see above for color variations
|
||||||
|
font-size: $mdb-btn-fab-font-size;
|
||||||
|
height: $mdb-btn-fab-size;
|
||||||
|
min-width: $mdb-btn-fab-size;
|
||||||
|
width: $mdb-btn-fab-size;
|
||||||
|
// margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
line-height: $mdb-btn-fab-size;
|
||||||
|
|
||||||
|
&.btn-round{
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group-sm &,
|
||||||
|
&.btn-sm,
|
||||||
|
&.btn-fab-mini{
|
||||||
|
height: $mdb-btn-fab-size-mini + 1;
|
||||||
|
min-width: $mdb-btn-fab-size-mini + 1;
|
||||||
|
width: $mdb-btn-fab-size-mini + 1;
|
||||||
|
|
||||||
|
.material-icons,
|
||||||
|
.fa{
|
||||||
|
font-size: $mdb-btn-icon-size-mini;
|
||||||
|
line-height: $mdb-btn-fab-size-mini;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group-lg &,
|
||||||
|
&.btn-lg{
|
||||||
|
height: $mdb-btn-fab-size-lg + 1;
|
||||||
|
min-width: $mdb-btn-fab-size-lg + 1;
|
||||||
|
width: $mdb-btn-fab-size-lg + 1;
|
||||||
|
line-height: $mdb-btn-fab-size-lg;
|
||||||
|
|
||||||
|
.material-icons,
|
||||||
|
.fa{
|
||||||
|
font-size: $mdb-btn-icon-size;
|
||||||
|
line-height: $mdb-btn-fab-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons,
|
||||||
|
.fa {
|
||||||
|
margin-top: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: none;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
line-height: $mdb-btn-fab-size;
|
||||||
|
font-size: $mdb-btn-just-icon-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-just-icon{
|
||||||
|
&.btn-lg{
|
||||||
|
font-size: $mdb-btn-fab-font-size;
|
||||||
|
height: $mdb-btn-fab-size;
|
||||||
|
min-width: $mdb-btn-fab-size;
|
||||||
|
width: $mdb-btn-fab-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-btn > .btn{
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Align icons inside buttons with text
|
||||||
|
.btn .material-icons,
|
||||||
|
.btn:not(.btn-just-icon):not(.btn-fab) .fa{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
top: 0;
|
||||||
|
margin-top: -1em;
|
||||||
|
margin-bottom: -1em;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled buttons and button groups
|
||||||
|
.mat-raised-button.btn,
|
||||||
|
.input-group-btn .mat-raised-button.btn,
|
||||||
|
.btn-group,
|
||||||
|
.btn-group-vertical {
|
||||||
|
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
|
||||||
|
@include bmd-disabled() {
|
||||||
|
.bg-inverse & {
|
||||||
|
color: $bmd-inverse-btn-disabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
// flat buttons shouldn't lose transparency on disabled hover/focus
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// btn-group variations
|
||||||
|
.btn-group,
|
||||||
|
.btn-group-vertical {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px 1px;
|
||||||
|
|
||||||
|
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
|
||||||
|
//&.open {
|
||||||
|
// .dropdown-toggle {
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// > .dropdown-toggle.btn {
|
||||||
|
// @include bmd-raised-button-color-bg();
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-group-raised {
|
||||||
|
@include box-shadow($bmd-shadow-2dp);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-raised-button.btn + .mat-raised-button.btn,
|
||||||
|
.mat-raised-button.btn,
|
||||||
|
.mat-raised-button.btn:active,
|
||||||
|
.btn-group {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove margin from nested btn-group(s) to properly align them with the outer buttons
|
||||||
|
> .btn-group {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.btn-group > .mat-raised-button.btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn,
|
||||||
|
|
||||||
|
.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-ripple, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-ripple,
|
||||||
|
|
||||||
|
.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-focus-overlay, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-focus-overlay{
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn,
|
||||||
|
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-ripple, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-ripple,
|
||||||
|
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-focus-overlay, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-focus-overlay {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
.btn-no-ripple .mat-button-ripple{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mat-button, .mat-icon-button {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.mat-button:hover .mat-button-focus-overlay, .mat-stroked-button:hover .mat-button-focus-overlay{
|
||||||
|
opacity: 0;
|
||||||
|
background-color: transparent!important;
|
||||||
|
}
|
||||||
|
button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.mat-button .mat-button-ripple{
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user