├── app ├── .buildignore ├── robots.txt ├── favicon.ico ├── scripts │ ├── directives │ │ ├── index.js │ │ ├── chat │ │ │ ├── chat.js │ │ │ └── chat.html │ │ ├── header │ │ │ ├── header.js │ │ │ ├── header-notification │ │ │ │ ├── header-notification.js │ │ │ │ └── header-notification.html │ │ │ └── header.html │ │ ├── timeline │ │ │ ├── timeline.js │ │ │ └── timeline.html │ │ ├── sidebar │ │ │ ├── sidebar-search │ │ │ │ ├── sidebar-search.html │ │ │ │ └── sidebar-search.js │ │ │ ├── sidebar.js │ │ │ └── sidebar.html │ │ ├── notifications │ │ │ ├── notifications.js │ │ │ └── notifications.html │ │ └── dashboard │ │ │ └── stats │ │ │ ├── stats.js │ │ │ └── stats.html │ ├── controllers │ │ ├── index.js │ │ ├── form.js │ │ ├── main.js │ │ └── chartContoller.js │ └── app.js ├── views │ ├── pages │ │ ├── blank.html │ │ └── login.html │ ├── dashboard │ │ ├── main.html │ │ └── home.html │ ├── chart.html │ ├── ui-elements │ │ ├── notifications.html │ │ ├── typography.html │ │ ├── buttons.html │ │ ├── grid.html │ │ └── panels-wells.html │ └── form.html ├── js │ └── sb-admin-2.js ├── styles │ ├── main.css │ ├── timeline.css │ └── sb-admin-2.css ├── 404.html ├── index.html └── .htaccess ├── .gitignore ├── webpack.config.js ├── test ├── spec │ └── controllers │ │ ├── main.js │ │ └── about.js ├── .jshintrc └── karma.conf.js ├── bower.json ├── LICENSE ├── README.md ├── package.json └── Gruntfile.js /app/.buildignore: -------------------------------------------------------------------------------- 1 | *.coffee -------------------------------------------------------------------------------- /app/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org 2 | 3 | User-agent: * 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/start-angular/sb-admin-angular-webpack/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | dist 4 | .tmp 5 | .sass-cache 6 | bower_components 7 | .idea 8 | -------------------------------------------------------------------------------- /app/scripts/directives/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(ngModule){ 2 | require('./header/header')(ngModule); 3 | } -------------------------------------------------------------------------------- /app/scripts/controllers/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function(){ 2 | require('./main')(ngModule); 3 | require('./chartContoller')(ngModule); 4 | require('./form')(ngModule); 5 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | context: __dirname + '/app', 3 | entry: __dirname + '/app/scripts/app.js', 4 | output: { 5 | path: __dirname + '/app', 6 | filename: 'bundle.js' 7 | } 8 | }; -------------------------------------------------------------------------------- /app/views/pages/blank.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Blank

5 |
6 | 7 |
8 | 9 |
-------------------------------------------------------------------------------- /app/scripts/controllers/form.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /** 3 | * @ngdoc function 4 | * @name sbAdminApp.controller:MainCtrl 5 | * @description 6 | * # MainCtrl 7 | * Controller of the sbAdminApp 8 | */ 9 | angular.module('sbAdminApp') 10 | .controller('FormCtrl', function($scope) { 11 | 12 | }); -------------------------------------------------------------------------------- /app/scripts/controllers/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /** 3 | * @ngdoc function 4 | * @name sbAdminApp.controller:MainCtrl 5 | * @description 6 | * # MainCtrl 7 | * Controller of the sbAdminApp 8 | */ 9 | module.exports = function(ngModule){ 10 | 11 | ngModule 12 | .controller('MainCtrl', function($scope,$position) { 13 | }); 14 | 15 | } 16 | -------------------------------------------------------------------------------- /app/scripts/directives/chat/chat.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | angular.module('sbAdminApp') 10 | .directive('chat',function(){ 11 | return { 12 | templateUrl:'scripts/directives/chat/chat.html', 13 | restrict: 'E', 14 | replace: true, 15 | } 16 | }); 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/scripts/directives/header/header.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | angular.module('sbAdminApp') 10 | .directive('header',function(){ 11 | return { 12 | templateUrl:'scripts/directives/header/header.html', 13 | restrict: 'E', 14 | replace: true, 15 | } 16 | }); 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/scripts/directives/timeline/timeline.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | angular.module('sbAdminApp') 10 | .directive('timeline',function() { 11 | return { 12 | templateUrl:'scripts/directives/timeline/timeline.html', 13 | restrict: 'E', 14 | replace: true, 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /app/scripts/directives/sidebar/sidebar-search/sidebar-search.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/scripts/directives/notifications/notifications.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | angular.module('sbAdminApp') 10 | .directive('notifications',function(){ 11 | return { 12 | templateUrl:'scripts/directives/notifications/notifications.html', 13 | restrict: 'E', 14 | replace: true, 15 | } 16 | }); 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/views/dashboard/main.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 |
18 | -------------------------------------------------------------------------------- /app/scripts/directives/header/header-notification/header-notification.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | angular.module('sbAdminApp') 10 | .directive('headerNotification',function(){ 11 | return { 12 | templateUrl:'scripts/directives/header/header-notification/header-notification.html', 13 | restrict: 'E', 14 | replace: true, 15 | } 16 | }); 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/scripts/directives/sidebar/sidebar-search/sidebar-search.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | 10 | angular.module('sbAdminApp') 11 | .directive('sidebarSearch',function() { 12 | return { 13 | templateUrl:'scripts/directives/sidebar/sidebar-search/sidebar-search.html', 14 | restrict: 'E', 15 | replace: true, 16 | scope: { 17 | }, 18 | controller:function($scope){ 19 | $scope.selectedMenu = 'home'; 20 | } 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /test/spec/controllers/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Controller: MainCtrl', function () { 4 | 5 | // load the controller's module 6 | beforeEach(module('sbAdminApp')); 7 | 8 | var MainCtrl, 9 | scope; 10 | 11 | // Initialize the controller and a mock scope 12 | beforeEach(inject(function ($controller, $rootScope) { 13 | scope = $rootScope.$new(); 14 | MainCtrl = $controller('MainCtrl', { 15 | $scope: scope 16 | }); 17 | })); 18 | 19 | it('should attach a list of awesomeThings to the scope', function () { 20 | expect(scope.awesomeThings.length).toBe(3); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /test/spec/controllers/about.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Controller: AboutCtrl', function () { 4 | 5 | // load the controller's module 6 | beforeEach(module('sbAdminApp')); 7 | 8 | var AboutCtrl, 9 | scope; 10 | 11 | // Initialize the controller and a mock scope 12 | beforeEach(inject(function ($controller, $rootScope) { 13 | scope = $rootScope.$new(); 14 | AboutCtrl = $controller('AboutCtrl', { 15 | $scope: scope 16 | }); 17 | })); 18 | 19 | it('should attach a list of awesomeThings to the scope', function () { 20 | expect(scope.awesomeThings.length).toBe(3); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /app/scripts/directives/dashboard/stats/stats.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | angular.module('sbAdminApp') 10 | .directive('stats',function() { 11 | return { 12 | templateUrl:'scripts/directives/dashboard/stats/stats.html', 13 | restrict:'E', 14 | replace:true, 15 | scope: { 16 | 'model': '=', 17 | 'comments': '@', 18 | 'number': '@', 19 | 'name': '@', 20 | 'colour': '@', 21 | 'details':'@', 22 | 'type':'@', 23 | 'goto':'@' 24 | } 25 | 26 | } 27 | }); 28 | -------------------------------------------------------------------------------- /app/scripts/directives/header/header.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "globals": { 22 | "after": false, 23 | "afterEach": false, 24 | "angular": false, 25 | "before": false, 26 | "beforeEach": false, 27 | "browser": false, 28 | "describe": false, 29 | "expect": false, 30 | "inject": false, 31 | "it": false, 32 | "jasmine": false, 33 | "spyOn": false 34 | } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /app/scripts/directives/dashboard/stats/stats.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 7 |
8 |
9 |
{{number}}
10 |
{{comments}}
11 |
12 |
13 |
14 | 15 | 20 | 21 |
22 |
-------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sb-admin", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "angular": "1.2.16", 6 | "json3": "~3.3.1", 7 | "es5-shim": "~3.1.0", 8 | "angular-resource": "1.2.16", 9 | "angular-cookies": "1.2.16", 10 | "angular-sanitize": "1.2.16", 11 | "angular-animate": "1.2.16", 12 | "angular-touch": "1.2.16", 13 | "angular-route": "1.2.16", 14 | "font-awesome": "4.3.0", 15 | "angular-bootstrap": "0.12.0", 16 | "oclazyload": "~0.5.2", 17 | "angular-loading-bar": "~0.7.0", 18 | "angular-ui-router": "~0.2.13", 19 | "angular-toggle-switch": "~1.2.1", 20 | "metisMenu": "~1.1.3", 21 | "angular-chart.js": "~0.5.2" 22 | }, 23 | "devDependencies": { 24 | "angular-mocks": "1.2.16", 25 | "angular-scenario": "1.2.16" 26 | }, 27 | "resolutions":{ 28 | "bootstrap": "~3.1.1" 29 | }, 30 | "appPath": "app" 31 | } 32 | -------------------------------------------------------------------------------- /app/scripts/directives/sidebar/sidebar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name izzyposWebApp.directive:adminPosHeader 6 | * @description 7 | * # adminPosHeader 8 | */ 9 | 10 | angular.module('sbAdminApp') 11 | .directive('sidebar',['$location',function() { 12 | return { 13 | templateUrl:'scripts/directives/sidebar/sidebar.html', 14 | restrict: 'E', 15 | replace: true, 16 | scope: { 17 | }, 18 | controller:function($scope){ 19 | $scope.selectedMenu = 'dashboard'; 20 | $scope.collapseVar = 0; 21 | $scope.multiCollapseVar = 0; 22 | 23 | $scope.check = function(x){ 24 | 25 | if(x==$scope.collapseVar) 26 | $scope.collapseVar = 0; 27 | else 28 | $scope.collapseVar = x; 29 | }; 30 | 31 | $scope.multiCheck = function(y){ 32 | 33 | if(y==$scope.multiCollapseVar) 34 | $scope.multiCollapseVar = 0; 35 | else 36 | $scope.multiCollapseVar = y; 37 | }; 38 | } 39 | } 40 | }]); 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 GeekyAnts 4 | http://geekyants.com/ 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## SB Admin v2.0 rewritten in AngularJS 2 | 3 | [![Join the chat at https://gitter.im/start-angular/sb-admin-angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/start-angular/sb-admin-angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | This project is a port of the famous Free Admin Bootstrap Theme [SB Admin v2.0](http://startbootstrap.com/template-overviews/sb-admin-2/) to Angular Theme. 6 | 7 | Find out more [Free Angular Themes at StartAngular.com](http://www.startangular.com/). 8 | 9 | ## Installation 10 | 1. Clone this project or Download that ZIP file 11 | 2. Make sure you have [bower](http://bower.io/), [grunt-cli](https://www.npmjs.com/package/grunt-cli) and [npm](https://www.npmjs.org/) installed globally 12 | 3. On the command prompt run the following commands 13 | - cd `project-directory` 14 | - `npm install` - bower install is ran from the postinstall 15 | - `npm start` - a shortcut for `grunt serve` 16 | - `npm run dist` - a shortcut for `grunt serve:dist` to minify the files for deployment 17 | 18 | ## Roadmap 19 | 20 | - Add sample AJAX calls and make the directives more modular 21 | 22 | ### Automation tools 23 | 24 | - [Grunt](http://gruntjs.com/) 25 | -------------------------------------------------------------------------------- /app/js/sb-admin-2.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | $('#side-menu').metisMenu(); 4 | 5 | }); 6 | 7 | //Loads the correct sidebar on window load, 8 | //collapses the sidebar on window resize. 9 | // Sets the min-height of #page-wrapper to window size 10 | $(function() { 11 | $(window).bind("load resize", function() { 12 | topOffset = 50; 13 | width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width; 14 | if (width < 768) { 15 | $('div.navbar-collapse').addClass('collapse'); 16 | topOffset = 100; // 2-row-menu 17 | } else { 18 | $('div.navbar-collapse').removeClass('collapse'); 19 | } 20 | 21 | height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1; 22 | height = height - topOffset; 23 | if (height < 1) height = 1; 24 | if (height > topOffset) { 25 | $("#page-wrapper").css("min-height", (height) + "px"); 26 | } 27 | }); 28 | 29 | var url = window.location; 30 | var element = $('ul.nav a').filter(function() { 31 | return this.href == url || url.href.indexOf(this.href) == 0; 32 | }).addClass('active').parent().parent().addClass('in').parent(); 33 | if (element.is('li')) { 34 | element.addClass('active'); 35 | } 36 | }); 37 | -------------------------------------------------------------------------------- /app/views/pages/login.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 28 |
29 |
30 |
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sb-admin", 3 | "version": "0.0.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/start-angular/sb-admin-angular" 7 | }, 8 | "dependencies": {}, 9 | "devDependencies": { 10 | "grunt": "^0.4.1", 11 | "grunt-autoprefixer": "^0.7.3", 12 | "grunt-concurrent": "^0.5.0", 13 | "grunt-contrib-clean": "^0.5.0", 14 | "grunt-contrib-concat": "^0.4.0", 15 | "grunt-contrib-connect": "^0.7.1", 16 | "grunt-contrib-copy": "^0.5.0", 17 | "grunt-contrib-cssmin": "^0.9.0", 18 | "grunt-contrib-htmlmin": "^0.3.0", 19 | "grunt-contrib-imagemin": "^0.7.0", 20 | "grunt-contrib-jshint": "^0.10.0", 21 | "grunt-contrib-uglify": "^0.4.0", 22 | "grunt-contrib-watch": "^0.6.1", 23 | "grunt-filerev": "^0.2.1", 24 | "grunt-google-cdn": "^0.4.0", 25 | "grunt-karma": "^0.10.1", 26 | "grunt-newer": "^0.7.0", 27 | "grunt-ng-annotate": "^0.10.0", 28 | "grunt-svgmin": "^0.4.0", 29 | "grunt-usemin": "^2.1.1", 30 | "jasmine-core": "^2.1.3", 31 | "jshint-stylish": "^0.2.0", 32 | "karma": "^0.12.31", 33 | "karma-jasmine": "^0.3.5", 34 | "karma-phantomjs-launcher": "^0.1.4", 35 | "load-grunt-tasks": "^0.4.0", 36 | "node-libs-browser": "^0.5.2", 37 | "time-grunt": "^0.3.1", 38 | "webpack": "^1.10.1", 39 | "webpack-dev-server": "^1.10.1" 40 | }, 41 | "engines": { 42 | "node": ">=0.10.0" 43 | }, 44 | "scripts": { 45 | "test": "grunt test", 46 | "dist": "grunt serve:dist", 47 | "start":"node node_modules/.bin/webpack-dev-server --content-base app", 48 | "postinstall": "bower install" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /app/styles/main.css: -------------------------------------------------------------------------------- 1 | /* Space out content a bit */ 2 | body { 3 | padding-bottom: 20px; 4 | } 5 | 6 | /* Everything but the jumbotron gets side spacing for mobile first views */ 7 | .header, 8 | .marketing, 9 | .footer { 10 | padding-left: 15px; 11 | padding-right: 15px; 12 | } 13 | 14 | /* Custom page header */ 15 | .header { 16 | border-bottom: 1px solid #e5e5e5; 17 | } 18 | /* Make the masthead heading the same height as the navigation */ 19 | .header h3 { 20 | margin-top: 0; 21 | margin-bottom: 0; 22 | line-height: 40px; 23 | padding-bottom: 19px; 24 | } 25 | 26 | /* Custom page footer */ 27 | .footer { 28 | padding-top: 19px; 29 | color: #777; 30 | border-top: 1px solid #e5e5e5; 31 | } 32 | 33 | /* Customize container */ 34 | @media (min-width: 768px) { 35 | .container { 36 | max-width: 730px; 37 | } 38 | } 39 | .container-narrow > hr { 40 | margin: 30px 0; 41 | } 42 | 43 | /* Main marketing message and sign up button */ 44 | .jumbotron { 45 | text-align: center; 46 | border-bottom: 1px solid #e5e5e5; 47 | } 48 | .jumbotron .btn { 49 | font-size: 21px; 50 | padding: 14px 24px; 51 | } 52 | 53 | /* Supporting marketing content */ 54 | .marketing { 55 | margin: 40px 0; 56 | } 57 | .marketing p + h4 { 58 | margin-top: 28px; 59 | } 60 | 61 | /* Responsive: Portrait tablets and up */ 62 | @media screen and (min-width: 768px) { 63 | /* Remove the padding we set earlier */ 64 | .header, 65 | .marketing, 66 | .footer { 67 | padding-left: 0; 68 | padding-right: 0; 69 | } 70 | /* Space out the masthead */ 71 | .header { 72 | margin-bottom: 30px; 73 | } 74 | /* Remove the bottom border on the jumbotron for visual effect */ 75 | .jumbotron { 76 | border-bottom: 0; 77 | } 78 | } 79 | 80 | .nav>li.active>a { 81 | text-decoration: none; 82 | background-color: #eee; 83 | } -------------------------------------------------------------------------------- /app/views/dashboard/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Dashboard

5 |
6 | 7 |
8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 |
21 |
22 |
23 | Responsive Timeline 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 |
34 |
35 | Notifications Panel 36 |
37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 |
46 | 47 |
48 | 49 |
50 | -------------------------------------------------------------------------------- /app/scripts/controllers/chartContoller.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /** 3 | * @ngdoc function 4 | * @name sbAdminApp.controller:MainCtrl 5 | * @description 6 | * # MainCtrl 7 | * Controller of the sbAdminApp 8 | */ 9 | angular.module('sbAdminApp') 10 | .controller('ChartCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 11 | $scope.line = { 12 | labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 13 | series: ['Series A', 'Series B'], 14 | data: [ 15 | [65, 59, 80, 81, 56, 55, 40], 16 | [28, 48, 40, 19, 86, 27, 90] 17 | ], 18 | onClick: function (points, evt) { 19 | console.log(points, evt); 20 | } 21 | }; 22 | 23 | $scope.bar = { 24 | labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], 25 | series: ['Series A', 'Series B'], 26 | 27 | data: [ 28 | [65, 59, 80, 81, 56, 55, 40], 29 | [28, 48, 40, 19, 86, 27, 90] 30 | ] 31 | 32 | }; 33 | 34 | $scope.donut = { 35 | labels: ["Download Sales", "In-Store Sales", "Mail-Order Sales"], 36 | data: [300, 500, 100] 37 | }; 38 | 39 | $scope.radar = { 40 | labels:["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 41 | 42 | data:[ 43 | [65, 59, 90, 81, 56, 55, 40], 44 | [28, 48, 40, 19, 96, 27, 100] 45 | ] 46 | }; 47 | 48 | $scope.pie = { 49 | labels : ["Download Sales", "In-Store Sales", "Mail-Order Sales"], 50 | data : [300, 500, 100] 51 | }; 52 | 53 | $scope.polar = { 54 | labels : ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"], 55 | data : [300, 500, 100, 40, 120] 56 | }; 57 | 58 | $scope.dynamic = { 59 | labels : ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"], 60 | data : [300, 500, 100, 40, 120], 61 | type : 'PolarArea', 62 | 63 | toggle : function () 64 | { 65 | this.type = this.type === 'PolarArea' ? 66 | 'Pie' : 'PolarArea'; 67 | } 68 | }; 69 | }]); -------------------------------------------------------------------------------- /app/scripts/directives/notifications/notifications.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | New Comment 5 | 4 minutes ago 6 | 7 | 8 | 9 | 3 New Followers 10 | 12 minutes ago 11 | 12 | 13 | 14 | Message Sent 15 | 27 minutes ago 16 | 17 | 18 | 19 | New Task 20 | 43 minutes ago 21 | 22 | 23 | 24 | Server Rebooted 25 | 11:32 AM 26 | 27 | 28 | 29 | Server Crashed! 30 | 11:13 AM 31 | 32 | 33 | 34 | Server Not Responding 35 | 10:57 AM 36 | 37 | 38 | 39 | New Order Placed 40 | 9:49 AM 41 | 42 | 43 | 44 | Payment Received 45 | Yesterday 46 | 47 | 48 |
49 | 50 | View All Alerts 51 |
-------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // http://karma-runner.github.io/0.12/config/configuration-file.html 3 | // Generated on 2015-01-21 using 4 | // generator-karma 0.8.3 5 | 6 | module.exports = function(config) { 7 | 'use strict'; 8 | 9 | config.set({ 10 | // enable / disable watching file and executing tests whenever any file changes 11 | autoWatch: true, 12 | 13 | // base path, that will be used to resolve files and exclude 14 | basePath: '../', 15 | 16 | // testing framework to use (jasmine/mocha/qunit/...) 17 | frameworks: ['jasmine'], 18 | 19 | // list of files / patterns to load in the browser 20 | files: [ 21 | 'bower_components/angular/angular.js', 22 | 'bower_components/angular-mocks/angular-mocks.js', 23 | 'bower_components/angular-animate/angular-animate.js', 24 | 'bower_components/angular-cookies/angular-cookies.js', 25 | 'bower_components/angular-resource/angular-resource.js', 26 | 'bower_components/angular-route/angular-route.js', 27 | 'bower_components/angular-sanitize/angular-sanitize.js', 28 | 'bower_components/angular-touch/angular-touch.js', 29 | 'app/scripts/**/*.js', 30 | 'test/mock/**/*.js', 31 | 'test/spec/**/*.js' 32 | ], 33 | 34 | // list of files / patterns to exclude 35 | exclude: [], 36 | 37 | // web server port 38 | port: 8080, 39 | 40 | // Start these browsers, currently available: 41 | // - Chrome 42 | // - ChromeCanary 43 | // - Firefox 44 | // - Opera 45 | // - Safari (only Mac) 46 | // - PhantomJS 47 | // - IE (only Windows) 48 | browsers: [ 49 | 'PhantomJS' 50 | ], 51 | 52 | // Which plugins to enable 53 | plugins: [ 54 | 'karma-phantomjs-launcher', 55 | 'karma-jasmine' 56 | ], 57 | 58 | // Continuous Integration mode 59 | // if true, it capture browsers, run tests and exit 60 | singleRun: false, 61 | 62 | colors: true, 63 | 64 | // level of logging 65 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 66 | logLevel: config.LOG_INFO, 67 | 68 | // Uncomment the following lines if you are using grunt's server to run the tests 69 | // proxies: { 70 | // '/': 'http://localhost:9000/' 71 | // }, 72 | // URL root prevent conflicts with the site root 73 | // urlRoot: '_karma_' 74 | }); 75 | }; 76 | -------------------------------------------------------------------------------- /app/scripts/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /** 3 | * @ngdoc overview 4 | * @name sbAdminApp 5 | * @description 6 | * # sbAdminApp 7 | * 8 | * Main module of the application. 9 | */ 10 | var angular = require('angular'); 11 | import uirouter from 'angular-ui-router'; 12 | import routing from './app.config'; 13 | var ngModule = angular.module('sbAdminApp', [ 14 | 'ui.router', 15 | 'ui.bootstrap', 16 | 'angular-loading-bar', 17 | 'toggle-switch', 18 | 'ngAnimate', 19 | 'ngCookies', 20 | 'ngResource', 21 | 'ngSanitize', 22 | 'ngTouch', 23 | ]) 24 | .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) { 25 | 26 | $urlRouterProvider.otherwise('/dashboard/home'); 27 | 28 | $stateProvider 29 | .state('dashboard', { 30 | url:'/dashboard', 31 | templateUrl: 'views/dashboard/main.html', 32 | }) 33 | .state('dashboard.home',{ 34 | url:'/home', 35 | controller: 'MainCtrl', 36 | templateUrl:'views/dashboard/home.html', 37 | }) 38 | .state('dashboard.form',{ 39 | templateUrl:'views/form.html', 40 | url:'/form' 41 | }) 42 | .state('dashboard.blank',{ 43 | templateUrl:'views/pages/blank.html', 44 | url:'/blank' 45 | }) 46 | .state('login',{ 47 | templateUrl:'views/pages/login.html', 48 | url:'/login' 49 | }) 50 | .state('dashboard.chart',{ 51 | templateUrl:'views/chart.html', 52 | url:'/chart', 53 | controller:'ChartCtrl', 54 | }) 55 | .state('dashboard.table',{ 56 | templateUrl:'views/table.html', 57 | url:'/table' 58 | }) 59 | .state('dashboard.panels-wells',{ 60 | templateUrl:'views/ui-elements/panels-wells.html', 61 | url:'/panels-wells' 62 | }) 63 | .state('dashboard.buttons',{ 64 | templateUrl:'views/ui-elements/buttons.html', 65 | url:'/buttons' 66 | }) 67 | .state('dashboard.notifications',{ 68 | templateUrl:'views/ui-elements/notifications.html', 69 | url:'/notifications' 70 | }) 71 | .state('dashboard.typography',{ 72 | templateUrl:'views/ui-elements/typography.html', 73 | url:'/typography' 74 | }) 75 | .state('dashboard.icons',{ 76 | templateUrl:'views/ui-elements/icons.html', 77 | url:'/icons' 78 | }) 79 | .state('dashboard.grid',{ 80 | templateUrl:'views/ui-elements/grid.html', 81 | url:'/grid' 82 | }) 83 | }]); 84 | 85 | require('./controllers')(ngModule); 86 | require('./directives')(ngModule); -------------------------------------------------------------------------------- /app/views/chart.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Charts

4 |
5 | 6 |
7 |
8 |
9 |
10 |
Line Chart
11 |
12 | 14 |
15 |
16 |
17 |
18 |
19 |
Bar Chart
20 |
21 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
Doughnut Chart
31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |
Radar Chart
39 |
40 | 41 |
42 |
43 |
44 |
45 |
46 |
Pie Chart
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
Polar Area Chart
55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 |
Dynamic Chart
63 |
64 | 65 |
66 |
67 | 68 |
69 |
-------------------------------------------------------------------------------- /app/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 141 | 142 | 143 |
144 |

Not found :(

145 |

Sorry, but the page you were trying to view does not exist.

146 |

It looks like this was the result of either:

147 | 151 | 154 | 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /app/styles/timeline.css: -------------------------------------------------------------------------------- 1 | .timeline { 2 | position: relative; 3 | padding: 20px 0 20px; 4 | list-style: none; 5 | } 6 | 7 | .timeline:before { 8 | content: " "; 9 | position: absolute; 10 | top: 0; 11 | bottom: 0; 12 | left: 50%; 13 | width: 3px; 14 | margin-left: -1.5px; 15 | background-color: #eeeeee; 16 | } 17 | 18 | .timeline > li { 19 | position: relative; 20 | margin-bottom: 20px; 21 | } 22 | 23 | .timeline > li:before, 24 | .timeline > li:after { 25 | content: " "; 26 | display: table; 27 | } 28 | 29 | .timeline > li:after { 30 | clear: both; 31 | } 32 | 33 | .timeline > li:before, 34 | .timeline > li:after { 35 | content: " "; 36 | display: table; 37 | } 38 | 39 | .timeline > li:after { 40 | clear: both; 41 | } 42 | 43 | .timeline > li > .timeline-panel { 44 | float: left; 45 | position: relative; 46 | width: 46%; 47 | padding: 20px; 48 | border: 1px solid #d4d4d4; 49 | border-radius: 2px; 50 | -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); 51 | box-shadow: 0 1px 6px rgba(0,0,0,0.175); 52 | } 53 | 54 | .timeline > li > .timeline-panel:before { 55 | content: " "; 56 | display: inline-block; 57 | position: absolute; 58 | top: 26px; 59 | right: -15px; 60 | border-top: 15px solid transparent; 61 | border-right: 0 solid #ccc; 62 | border-bottom: 15px solid transparent; 63 | border-left: 15px solid #ccc; 64 | } 65 | 66 | .timeline > li > .timeline-panel:after { 67 | content: " "; 68 | display: inline-block; 69 | position: absolute; 70 | top: 27px; 71 | right: -14px; 72 | border-top: 14px solid transparent; 73 | border-right: 0 solid #fff; 74 | border-bottom: 14px solid transparent; 75 | border-left: 14px solid #fff; 76 | } 77 | 78 | .timeline > li > .timeline-badge { 79 | z-index: 100; 80 | position: absolute; 81 | top: 16px; 82 | left: 50%; 83 | width: 50px; 84 | height: 50px; 85 | margin-left: -25px; 86 | border-radius: 50% 50% 50% 50%; 87 | text-align: center; 88 | font-size: 1.4em; 89 | line-height: 50px; 90 | color: #fff; 91 | background-color: #999999; 92 | } 93 | 94 | .timeline > li.timeline-inverted > .timeline-panel { 95 | float: right; 96 | } 97 | 98 | .timeline > li.timeline-inverted > .timeline-panel:before { 99 | right: auto; 100 | left: -15px; 101 | border-right-width: 15px; 102 | border-left-width: 0; 103 | } 104 | 105 | .timeline > li.timeline-inverted > .timeline-panel:after { 106 | right: auto; 107 | left: -14px; 108 | border-right-width: 14px; 109 | border-left-width: 0; 110 | } 111 | 112 | .timeline-badge.primary { 113 | background-color: #2e6da4 !important; 114 | } 115 | 116 | .timeline-badge.success { 117 | background-color: #3f903f !important; 118 | } 119 | 120 | .timeline-badge.warning { 121 | background-color: #f0ad4e !important; 122 | } 123 | 124 | .timeline-badge.danger { 125 | background-color: #d9534f !important; 126 | } 127 | 128 | .timeline-badge.info { 129 | background-color: #5bc0de !important; 130 | } 131 | 132 | .timeline-title { 133 | margin-top: 0; 134 | color: inherit; 135 | } 136 | 137 | .timeline-body > p, 138 | .timeline-body > ul { 139 | margin-bottom: 0; 140 | } 141 | 142 | .timeline-body > p + p { 143 | margin-top: 5px; 144 | } 145 | 146 | @media(max-width:767px) { 147 | ul.timeline:before { 148 | left: 40px; 149 | } 150 | 151 | ul.timeline > li > .timeline-panel { 152 | width: calc(100% - 90px); 153 | width: -moz-calc(100% - 90px); 154 | width: -webkit-calc(100% - 90px); 155 | } 156 | 157 | ul.timeline > li > .timeline-badge { 158 | top: 16px; 159 | left: 15px; 160 | margin-left: 0; 161 | } 162 | 163 | ul.timeline > li > .timeline-panel { 164 | float: right; 165 | } 166 | 167 | ul.timeline > li > .timeline-panel:before { 168 | right: auto; 169 | left: -15px; 170 | border-right-width: 15px; 171 | border-left-width: 0; 172 | } 173 | 174 | ul.timeline > li > .timeline-panel:after { 175 | right: auto; 176 | left: -14px; 177 | border-right-width: 14px; 178 | border-left-width: 0; 179 | } 180 | } -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 | 87 |
88 | 89 |
90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /app/scripts/directives/sidebar/sidebar.html: -------------------------------------------------------------------------------- 1 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /app/scripts/directives/chat/chat.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Chat 5 |
6 | 9 | 37 |
38 |
39 | 40 |
41 | 104 |
105 | 106 | 116 | 117 |
-------------------------------------------------------------------------------- /app/scripts/directives/timeline/timeline.html: -------------------------------------------------------------------------------- 1 |
2 | 104 |
-------------------------------------------------------------------------------- /app/styles/sb-admin-2.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com) 3 | * Code licensed under the Apache License v2.0. 4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0. 5 | */ 6 | 7 | body { 8 | background-color: #f8f8f8; 9 | } 10 | 11 | #wrapper { 12 | width: 100%; 13 | } 14 | 15 | #page-wrapper { 16 | padding: 0 15px; 17 | min-height: 568px; 18 | background-color: #fff; 19 | } 20 | 21 | @media(min-width:768px) { 22 | #page-wrapper { 23 | position: inherit; 24 | margin: 0 0 0 250px; 25 | padding: 0 30px; 26 | border-left: 1px solid #e7e7e7; 27 | } 28 | } 29 | 30 | .navbar-top-links { 31 | margin-right: 0; 32 | } 33 | 34 | .navbar-top-links li { 35 | display: inline-block; 36 | } 37 | 38 | .navbar-top-links li:last-child { 39 | margin-right: 15px; 40 | } 41 | 42 | .navbar-top-links li a { 43 | padding: 15px; 44 | min-height: 50px; 45 | } 46 | 47 | .navbar-top-links .dropdown-menu li { 48 | display: block; 49 | } 50 | 51 | .navbar-top-links .dropdown-menu li:last-child { 52 | margin-right: 0; 53 | } 54 | 55 | .navbar-top-links .dropdown-menu li a { 56 | padding: 3px 20px; 57 | min-height: 0; 58 | } 59 | 60 | .navbar-top-links .dropdown-menu li a div { 61 | white-space: normal; 62 | } 63 | 64 | .navbar-top-links .dropdown-messages, 65 | .navbar-top-links .dropdown-tasks, 66 | .navbar-top-links .dropdown-alerts { 67 | width: 310px; 68 | min-width: 0; 69 | } 70 | 71 | .navbar-top-links .dropdown-messages { 72 | margin-left: 5px; 73 | } 74 | 75 | .navbar-top-links .dropdown-tasks { 76 | margin-left: -59px; 77 | } 78 | 79 | .navbar-top-links .dropdown-alerts { 80 | margin-left: -123px; 81 | } 82 | 83 | .navbar-top-links .dropdown-user { 84 | right: 0; 85 | left: auto; 86 | } 87 | 88 | .sidebar .sidebar-nav.navbar-collapse { 89 | padding-right: 0; 90 | padding-left: 0; 91 | } 92 | 93 | .sidebar .sidebar-search { 94 | padding: 15px; 95 | } 96 | 97 | .sidebar ul li { 98 | border-bottom: 1px solid #e7e7e7; 99 | } 100 | 101 | .sidebar ul li a.active { 102 | background-color: #eee; 103 | } 104 | 105 | .sidebar .arrow { 106 | float: right; 107 | } 108 | 109 | .sidebar .fa.arrow:before { 110 | content: "\f104"; 111 | } 112 | 113 | .sidebar .active>a>.fa.arrow:before { 114 | content: "\f107"; 115 | } 116 | 117 | .sidebar .nav-second-level li, 118 | .sidebar .nav-third-level li { 119 | border-bottom: 0!important; 120 | } 121 | 122 | .sidebar .nav-second-level li a { 123 | padding-left: 37px; 124 | } 125 | 126 | .sidebar .nav-third-level li a { 127 | padding-left: 52px; 128 | } 129 | 130 | @media(min-width:768px) { 131 | .sidebar { 132 | z-index: 1; 133 | position: absolute; 134 | width: 250px; 135 | margin-top: 51px; 136 | } 137 | 138 | .navbar-top-links .dropdown-messages, 139 | .navbar-top-links .dropdown-tasks, 140 | .navbar-top-links .dropdown-alerts { 141 | margin-left: auto; 142 | } 143 | } 144 | 145 | .btn-outline { 146 | color: inherit; 147 | background-color: transparent; 148 | transition: all .5s; 149 | } 150 | 151 | .btn-primary.btn-outline { 152 | color: #428bca; 153 | } 154 | 155 | .btn-success.btn-outline { 156 | color: #5cb85c; 157 | } 158 | 159 | .btn-info.btn-outline { 160 | color: #5bc0de; 161 | } 162 | 163 | .btn-warning.btn-outline { 164 | color: #f0ad4e; 165 | } 166 | 167 | .btn-danger.btn-outline { 168 | color: #d9534f; 169 | } 170 | 171 | .btn-primary.btn-outline:hover, 172 | .btn-success.btn-outline:hover, 173 | .btn-info.btn-outline:hover, 174 | .btn-warning.btn-outline:hover, 175 | .btn-danger.btn-outline:hover { 176 | color: #fff; 177 | } 178 | 179 | .chat { 180 | margin: 0; 181 | padding: 0; 182 | list-style: none; 183 | } 184 | 185 | .chat li { 186 | margin-bottom: 10px; 187 | padding-bottom: 5px; 188 | border-bottom: 1px dotted #999; 189 | } 190 | 191 | .chat li.left .chat-body { 192 | margin-left: 60px; 193 | } 194 | 195 | .chat li.right .chat-body { 196 | margin-right: 60px; 197 | } 198 | 199 | .chat li .chat-body p { 200 | margin: 0; 201 | } 202 | 203 | .panel .slidedown .glyphicon, 204 | .chat .glyphicon { 205 | margin-right: 5px; 206 | } 207 | 208 | .chat-panel .panel-body { 209 | height: 350px; 210 | overflow-y: scroll; 211 | } 212 | 213 | .login-panel { 214 | margin-top: 25%; 215 | } 216 | 217 | .flot-chart { 218 | display: block; 219 | height: 400px; 220 | } 221 | 222 | .flot-chart-content { 223 | width: 100%; 224 | height: 100%; 225 | } 226 | 227 | .dataTables_wrapper { 228 | position: relative; 229 | clear: both; 230 | } 231 | 232 | table.dataTable thead .sorting, 233 | table.dataTable thead .sorting_asc, 234 | table.dataTable thead .sorting_desc, 235 | table.dataTable thead .sorting_asc_disabled, 236 | table.dataTable thead .sorting_desc_disabled { 237 | background: 0 0; 238 | } 239 | 240 | table.dataTable thead .sorting_asc:after { 241 | content: "\f0de"; 242 | float: right; 243 | font-family: fontawesome; 244 | } 245 | 246 | table.dataTable thead .sorting_desc:after { 247 | content: "\f0dd"; 248 | float: right; 249 | font-family: fontawesome; 250 | } 251 | 252 | table.dataTable thead .sorting:after { 253 | content: "\f0dc"; 254 | float: right; 255 | font-family: fontawesome; 256 | color: rgba(50,50,50,.5); 257 | } 258 | 259 | .btn-circle { 260 | width: 30px; 261 | height: 30px; 262 | padding: 6px 0; 263 | border-radius: 15px; 264 | text-align: center; 265 | font-size: 12px; 266 | line-height: 1.428571429; 267 | } 268 | 269 | .btn-circle.btn-lg { 270 | width: 50px; 271 | height: 50px; 272 | padding: 10px 16px; 273 | border-radius: 25px; 274 | font-size: 18px; 275 | line-height: 1.33; 276 | } 277 | 278 | .btn-circle.btn-xl { 279 | width: 70px; 280 | height: 70px; 281 | padding: 10px 16px; 282 | border-radius: 35px; 283 | font-size: 24px; 284 | line-height: 1.33; 285 | } 286 | 287 | .show-grid [class^=col-] { 288 | padding-top: 10px; 289 | padding-bottom: 10px; 290 | border: 1px solid #ddd; 291 | background-color: #eee!important; 292 | } 293 | 294 | .show-grid { 295 | margin: 15px 0; 296 | } 297 | 298 | .huge { 299 | font-size: 40px; 300 | } 301 | 302 | .panel-green { 303 | border-color: #5cb85c; 304 | } 305 | 306 | .panel-green .panel-heading { 307 | border-color: #5cb85c; 308 | color: #fff; 309 | background-color: #5cb85c; 310 | } 311 | 312 | .panel-green a { 313 | color: #5cb85c; 314 | } 315 | 316 | .panel-green a:hover { 317 | color: #3d8b3d; 318 | } 319 | 320 | .panel-red { 321 | border-color: #d9534f; 322 | } 323 | 324 | .panel-red .panel-heading { 325 | border-color: #d9534f; 326 | color: #fff; 327 | background-color: #d9534f; 328 | } 329 | 330 | .panel-red a { 331 | color: #d9534f; 332 | } 333 | 334 | .panel-red a:hover { 335 | color: #b52b27; 336 | } 337 | 338 | .panel-yellow { 339 | border-color: #f0ad4e; 340 | } 341 | 342 | .panel-yellow .panel-heading { 343 | border-color: #f0ad4e; 344 | color: #fff; 345 | background-color: #f0ad4e; 346 | } 347 | 348 | .panel-yellow a { 349 | color: #f0ad4e; 350 | } 351 | 352 | .panel-yellow a:hover { 353 | color: #df8a13; 354 | } -------------------------------------------------------------------------------- /app/scripts/directives/header/header-notification/header-notification.html: -------------------------------------------------------------------------------- 1 | 210 | 211 | -------------------------------------------------------------------------------- /app/views/ui-elements/notifications.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Notifications

4 |
5 | 6 |
7 | 8 |
9 |
10 |
11 |
12 | Alert Styles 13 |
14 | 15 |
16 |
17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 18 |
19 |
20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 21 |
22 |
23 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 24 |
25 |
26 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 27 |
28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |
37 | Dismissable Alerts 38 |
39 | 40 |
41 |
42 | 43 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 44 |
45 |
46 | 47 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 48 |
49 |
50 | 51 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 52 |
53 |
54 | 55 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link. 56 |
57 |
58 | 59 |
60 | 61 |
62 | 63 |
64 | 65 |
66 |
67 |
68 |
69 | Modals 70 |
71 | 72 |
73 | 74 | 77 | 78 | 97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 |
105 |
106 |
107 | Tooltips and Popovers 108 |
109 | 110 |
111 |

Tooltip Demo

112 |
113 | 114 | 115 | 116 | 117 | 118 |
119 |
120 |
121 |

Clickable Popover Demo

122 |
123 | 126 | 129 | 132 | 135 |
136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 | -------------------------------------------------------------------------------- /app/views/form.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Forms

4 |
5 | 6 |
7 | 8 |
9 |
10 |
11 |
12 | Basic Form Elements 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 |

Example block-level help text here.

22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 |

email@example.com

30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 |
42 | 45 |
46 |
47 | 50 |
51 |
52 | 55 |
56 |
57 |
58 | 59 | 62 | 65 | 68 |
69 |
70 | 71 |
72 | 75 |
76 |
77 | 80 |
81 |
82 | 85 |
86 |
87 |
88 | 89 | 92 | 95 | 98 |
99 |
100 | 101 | 108 |
109 |
110 | 111 | 118 |
119 | 120 | 121 |
122 |
123 | 124 |
125 |

Disabled Form States

126 |
127 |
128 |
129 | 130 | 131 |
132 |
133 | 134 | 137 |
138 |
139 | 142 |
143 | 144 |
145 |
146 |

Form Validation States

147 |
148 |
149 | 150 | 151 |
152 |
153 | 154 | 155 |
156 |
157 | 158 | 159 |
160 |
161 |

Input Groups

162 |
163 |
164 | @ 165 | 166 |
167 |
168 | 169 | .00 170 |
171 |
172 | 173 | 174 | 175 |
176 |
177 | $ 178 | 179 | .00 180 |
181 |
182 | 183 | 184 | 186 | 187 |
188 |
189 |
190 | 191 |
192 | 193 |
194 | 195 |
196 | 197 |
198 | 199 |
-------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | // Generated on 2015-01-21 using generator-angular 0.9.2 2 | 'use strict'; 3 | 4 | // # Globbing 5 | // for performance reasons we're only matching one level down: 6 | // 'test/spec/{,*/}*.js' 7 | // use this if you want to recursively match all subfolders: 8 | // 'test/spec/**/*.js' 9 | 10 | module.exports = function (grunt) { 11 | 12 | // Load grunt tasks automatically 13 | require('load-grunt-tasks')(grunt); 14 | 15 | // Time how long tasks take. Can help when optimizing build times 16 | require('time-grunt')(grunt); 17 | 18 | // Configurable paths for the application 19 | var appConfig = { 20 | app: require('./bower.json').appPath || 'app', 21 | dist: 'dist' 22 | }; 23 | 24 | // Define the configuration for all the tasks 25 | grunt.initConfig({ 26 | 27 | // Project settings 28 | yeoman: appConfig, 29 | 30 | // Watches files for changes and runs tasks based on the changed files 31 | watch: { 32 | bower: { 33 | files: ['bower.json'], 34 | tasks: ['wiredep'] 35 | }, 36 | js: { 37 | files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 38 | tasks: ['newer:jshint:all'], 39 | options: { 40 | livereload: '<%= connect.options.livereload %>' 41 | } 42 | }, 43 | jsTest: { 44 | files: ['test/spec/{,*/}*.js'], 45 | tasks: ['newer:jshint:test', 'karma'] 46 | }, 47 | styles: { 48 | files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 49 | tasks: ['newer:copy:styles', 'autoprefixer'] 50 | }, 51 | gruntfile: { 52 | files: ['Gruntfile.js'] 53 | }, 54 | livereload: { 55 | options: { 56 | livereload: '<%= connect.options.livereload %>' 57 | }, 58 | files: [ 59 | '<%= yeoman.app %>/{,*/}*.html', 60 | '.tmp/styles/{,*/}*.css', 61 | '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 62 | ] 63 | } 64 | }, 65 | 66 | // The actual grunt server settings 67 | connect: { 68 | options: { 69 | port: 9000, 70 | // Change this to '0.0.0.0' to access the server from outside. 71 | hostname: 'localhost', 72 | livereload: 35729 73 | }, 74 | livereload: { 75 | options: { 76 | open: true, 77 | middleware: function (connect) { 78 | return [ 79 | connect.static('.tmp'), 80 | connect().use( 81 | '/bower_components', 82 | connect.static('./bower_components') 83 | ), 84 | connect.static(appConfig.app) 85 | ]; 86 | } 87 | } 88 | }, 89 | test: { 90 | options: { 91 | port: 9001, 92 | middleware: function (connect) { 93 | return [ 94 | connect.static('.tmp'), 95 | connect.static('test'), 96 | connect().use( 97 | '/bower_components', 98 | connect.static('./bower_components') 99 | ), 100 | connect.static(appConfig.app) 101 | ]; 102 | } 103 | } 104 | }, 105 | dist: { 106 | options: { 107 | open: true, 108 | base: '<%= yeoman.dist %>' 109 | } 110 | } 111 | }, 112 | 113 | // Make sure code styles are up to par and there are no obvious mistakes 114 | jshint: { 115 | options: { 116 | jshintrc: '.jshintrc', 117 | reporter: require('jshint-stylish') 118 | }, 119 | all: { 120 | src: [ 121 | 'Gruntfile.js', 122 | '<%= yeoman.app %>/scripts/{,*/}*.js' 123 | ] 124 | }, 125 | test: { 126 | options: { 127 | jshintrc: 'test/.jshintrc' 128 | }, 129 | src: ['test/spec/{,*/}*.js'] 130 | } 131 | }, 132 | 133 | // Empties folders to start fresh 134 | clean: { 135 | dist: { 136 | files: [{ 137 | dot: true, 138 | src: [ 139 | '.tmp', 140 | '<%= yeoman.dist %>/{,*/}*', 141 | '!<%= yeoman.dist %>/.git*' 142 | ] 143 | }] 144 | }, 145 | server: '.tmp' 146 | }, 147 | 148 | // Add vendor prefixed styles 149 | autoprefixer: { 150 | options: { 151 | browsers: ['last 1 version'] 152 | }, 153 | dist: { 154 | files: [{ 155 | expand: true, 156 | cwd: '.tmp/styles/', 157 | src: '{,*/}*.css', 158 | dest: '.tmp/styles/' 159 | }] 160 | } 161 | }, 162 | 163 | // Automatically inject Bower components into the app 164 | /* wiredep: { 165 | options: { 166 | cwd: '<%= yeoman.app %>' 167 | }, 168 | app: { 169 | src: ['<%= yeoman.app %>/index.html'], 170 | ignorePath: /\.\.\// 171 | } 172 | }, 173 | */ 174 | // Renames files for browser caching purposes 175 | filerev: { 176 | dist: { 177 | src: [ 178 | '<%= yeoman.dist %>/scripts/{,*/}*.js', 179 | '<%= yeoman.dist %>/styles/{,*/}*.css', 180 | '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 181 | '<%= yeoman.dist %>/styles/fonts/*' 182 | ] 183 | } 184 | }, 185 | 186 | // Reads HTML for usemin blocks to enable smart builds that automatically 187 | // concat, minify and revision files. Creates configurations in memory so 188 | // additional tasks can operate on them 189 | useminPrepare: { 190 | html: '<%= yeoman.app %>/index.html', 191 | options: { 192 | dest: '<%= yeoman.dist %>', 193 | flow: { 194 | html: { 195 | steps: { 196 | js: ['concat', 'uglifyjs'], 197 | css: ['cssmin'] 198 | }, 199 | post: {} 200 | } 201 | } 202 | } 203 | }, 204 | 205 | // Performs rewrites based on filerev and the useminPrepare configuration 206 | usemin: { 207 | html: ['<%= yeoman.dist %>/{,*/}*.html'], 208 | css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 209 | options: { 210 | assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images'] 211 | } 212 | }, 213 | 214 | // The following *-min tasks will produce minified files in the dist folder 215 | // By default, your `index.html`'s will take care of 216 | // minification. These next options are pre-configured if you do not wish 217 | // to use the Usemin blocks. 218 | cssmin: { 219 | dist: { 220 | files: [{ 221 | expand: true, 222 | cwd: '<%= yeoman.dist %>', 223 | src: 'styles/*.css', 224 | dest: '<%= yeoman.dist %>' 225 | }] 226 | } 227 | }, 228 | uglify: { 229 | build: { 230 | files: [{ 231 | expand: true, 232 | src: '**/*.js', 233 | dest: '<%= yeoman.dist %>/scripts', 234 | cwd: '<%= yeoman.app %>/scripts' 235 | }] 236 | }, 237 | options: { 238 | mangle:false 239 | }, 240 | }, 241 | // concat: { 242 | // dist: {} 243 | // }, 244 | 245 | imagemin: { 246 | dist: { 247 | files: [{ 248 | expand: true, 249 | cwd: '<%= yeoman.app %>/images', 250 | src: '{,*/}*.{png,jpg,jpeg,gif}', 251 | dest: '<%= yeoman.dist %>/images' 252 | }] 253 | } 254 | }, 255 | 256 | svgmin: { 257 | dist: { 258 | files: [{ 259 | expand: true, 260 | cwd: '<%= yeoman.app %>/images', 261 | src: '{,*/}*.svg', 262 | dest: '<%= yeoman.dist %>/images' 263 | }] 264 | } 265 | }, 266 | 267 | htmlmin: { 268 | dist: { 269 | options: { 270 | collapseWhitespace: true, 271 | conservativeCollapse: true, 272 | collapseBooleanAttributes: true, 273 | removeCommentsFromCDATA: true, 274 | removeOptionalTags: true 275 | }, 276 | files: [{ 277 | expand: true, 278 | cwd: '<%= yeoman.dist %>', 279 | src: '**/*.html', 280 | dest: '<%= yeoman.dist %>' 281 | }] 282 | } 283 | }, 284 | 285 | // ngAnnotate tries to make the code safe for minification automatically by 286 | // using the Angular long form for dependency injection. It doesn't work on 287 | // things like resolve or inject so those have to be done manually. 288 | ngAnnotate: { 289 | dist: { 290 | files: [{ 291 | expand: true, 292 | cwd: '<%= yeoman.app %>/scripts', 293 | src: '**/*.js', 294 | dest: '<%= yeoman.dist %>/scripts', 295 | }] 296 | } 297 | }, 298 | 299 | // Replace Google CDN references 300 | cdnify: { 301 | dist: { 302 | html: ['<%= yeoman.dist %>/*.html'] 303 | } 304 | }, 305 | 306 | // Copies remaining files to places other tasks can use 307 | copy: { 308 | dist: { 309 | files: [{ 310 | expand: true, 311 | dot: true, 312 | cwd: '<%= yeoman.app %>', 313 | dest: '<%= yeoman.dist %>', 314 | src: [ '**'] 315 | },{ 316 | 317 | expand:true, 318 | cwd:'bower_components', 319 | dest:'<%= yeoman.dist %>/bower_components', 320 | src:['**'] 321 | } , 322 | 323 | { 324 | expand: true, 325 | cwd: '.tmp/images', 326 | dest: '<%= yeoman.dist %>/images', 327 | src: ['generated/*'] 328 | }, { 329 | expand: true, 330 | cwd: 'bower_components/bootstrap/dist', 331 | src: 'fonts/*', 332 | dest: '<%= yeoman.dist %>' 333 | }] 334 | }, 335 | styles: { 336 | expand: true, 337 | cwd: '<%= yeoman.app %>/styles', 338 | dest: '.tmp/styles/', 339 | src: '{,*/}*.css' 340 | } 341 | }, 342 | 343 | // Run some tasks in parallel to speed up the build process 344 | concurrent: { 345 | server: [ 346 | 'copy:styles' 347 | ], 348 | test: [ 349 | 'copy:styles' 350 | ], 351 | dist: [ 352 | 'copy:styles', 353 | 'imagemin', 354 | 'svgmin' 355 | ] 356 | }, 357 | 358 | // Test settings 359 | karma: { 360 | unit: { 361 | configFile: 'test/karma.conf.js', 362 | singleRun: true 363 | } 364 | } 365 | }); 366 | 367 | 368 | grunt.registerTask('serve', 'Compile then start a connect web server', function (target) { 369 | if (target === 'dist') { 370 | return grunt.task.run(['build', 'connect:dist:keepalive']); 371 | } 372 | 373 | grunt.task.run([ 374 | 'clean:server', 375 | 'concurrent:server', 376 | 'autoprefixer', 377 | 'connect:livereload', 378 | 'watch' 379 | ]); 380 | }); 381 | 382 | grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) { 383 | grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 384 | grunt.task.run(['serve:' + target]); 385 | }); 386 | 387 | grunt.registerTask('test', [ 388 | 'clean:server', 389 | 'concurrent:test', 390 | 'autoprefixer', 391 | 'connect:test', 392 | 'karma' 393 | ]); 394 | 395 | grunt.registerTask('build', [ 396 | 'clean:dist', 397 | 'concurrent:dist', 398 | 'copy:dist', 399 | 'cssmin', 400 | 'ngAnnotate', 401 | 'uglify', 402 | 'htmlmin' 403 | ]); 404 | 405 | grunt.registerTask('default', [ 406 | 'newer:jshint', 407 | 'test', 408 | 'build' 409 | ]); 410 | }; 411 | -------------------------------------------------------------------------------- /app/views/ui-elements/typography.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Typography

4 |
5 | 6 |
7 | 8 |
9 |
10 |
11 |
12 | Headings 13 |
14 |
15 |

Heading 1 16 | Sub-heading 17 |

18 |

Heading 2 19 | Sub-heading 20 |

21 |

Heading 3 22 | Sub-heading 23 |

24 |

Heading 4 25 | Sub-heading 26 |

27 |
Heading 5 28 | Sub-heading 29 |
30 |
Heading 6 31 | Sub-heading 32 |
33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 |
41 |
42 | Paragraphs 43 |
44 |
45 |

This is an example of lead body copy.

46 |

This is an example of standard paragraph text. This is an example of link anchor text within body copy.

47 |

48 | This is an example of small, fine print text. 49 |

50 |

51 | This is an example of strong, bold text. 52 |

53 |

54 | This is an example of emphasized, italic text. 55 |

56 |
57 |

Alignment Helpers

58 |

Left aligned text.

59 |

Center aligned text.

60 |

Right aligned text.

61 |
62 | 63 |
64 | 65 |
66 | 67 |
68 |
69 |
70 | Emphasis Classes 71 |
72 |
73 |

This is an example of muted text.

74 |

This is an example of primary text.

75 |

This is an example of success text.

76 |

This is an example of info text.

77 |

This is an example of warning text.

78 |

This is an example of danger text.

79 |
80 | 81 |
82 | 83 |
84 | 85 |
86 | 87 |
88 |
89 |
90 |
91 | Abbreviations 92 |
93 |
94 |

The abbreviation of the word attribute is 95 | attr.

96 |

97 | HTMLis an abbreviation for a programming language.

98 |
99 |

Addresses

100 |
101 | Twitter, Inc. 102 |
795 Folsom Ave, Suite 600 103 |
San Francisco, CA 94107 104 |
105 | P:(123) 456-7890 106 |
107 |
108 | Full Name 109 |
110 | first.last@example.com 111 |
112 |
113 | 114 |
115 | 116 |
117 | 118 |
119 |
120 |
121 | Blockquotes 122 |
123 |
124 |

Default Blockquote

125 |
126 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

127 |
128 |

Blockquote with Citation

129 |
130 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

131 | Someone famous in 132 | Source Title 133 | 134 |
135 |

Right Aligned Blockquote

136 |
137 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

138 |
139 |
140 | 141 |
142 | 143 |
144 | 145 |
146 |
147 |
148 | Lists 149 |
150 |
151 |

Unordered List

152 |
    153 |
  • List Item
  • 154 |
  • List Item
  • 155 |
  • 156 |
      157 |
    • List Item
    • 158 |
    • List Item
    • 159 |
    • List Item
    • 160 |
    161 |
  • 162 |
  • List Item
  • 163 |
164 |

Ordered List

165 |
    166 |
  1. List Item
  2. 167 |
  3. List Item
  4. 168 |
  5. List Item
  6. 169 |
170 |

Unstyled List

171 |
    172 |
  • List Item
  • 173 |
  • List Item
  • 174 |
  • List Item
  • 175 |
176 |

Inline List

177 |
    178 |
  • List Item
  • 179 |
  • List Item
  • 180 |
  • List Item
  • 181 |
182 |
183 | 184 |
185 | 186 |
187 | 188 |
189 | 190 |
191 |
192 |
193 |
194 | Description Lists 195 |
196 |
197 |
198 |
Standard Description List
199 |
Description Text
200 |
Description List Title
201 |
Description List Text
202 |
203 |
204 |
Horizontal Description List
205 |
Description Text
206 |
Description List Title
207 |
Description List Text
208 |
209 |
210 | 211 |
212 | 213 |
214 | 215 |
216 |
217 |
218 | Code 219 |
220 |
221 |

This is an example of an inline code element within body copy. Wrap inline code within a 222 | <code>...</code>tag.

223 |
This is an example of preformatted text.
224 |
225 | 226 |
227 | 228 |
229 | 230 |
231 | -------------------------------------------------------------------------------- /app/views/ui-elements/buttons.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Buttons

4 |
5 | 6 |
7 | 8 |
9 |
10 |
11 |
12 | Default Buttons 13 |
14 | 15 |
16 |

Normal Buttons

17 |

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 |
27 |

Disabled Buttons

28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 |
38 |

Button Sizes

39 |

40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 |

48 |
49 | 50 |
51 | 52 |
53 |
54 | Circle Icon Buttons with Font Awesome Icons 55 |
56 | 57 |
58 |

Normal Circle Buttons

59 | 61 | 63 | 65 | 67 | 69 | 71 |
72 |
73 |

Large Circle Buttons

74 | 76 | 78 | 80 | 82 | 84 | 86 |
87 |
88 |

Extra Large Circle Buttons

89 | 91 | 93 | 95 | 97 | 99 | 101 |
102 | 103 |
104 | 105 |
106 | 107 |
108 |
109 |
110 | Outline Buttons with Smooth Transition 111 |
112 | 113 |
114 |

Outline Buttons

115 |

116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 |

124 |
125 |

Outline Button Sizes

126 |

127 | 128 | 129 | 130 | 131 |
132 |
133 | 134 |

135 |
136 | 137 |
138 | 139 | 202 | 203 |
204 | 205 |
206 | -------------------------------------------------------------------------------- /app/views/ui-elements/grid.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Grid

4 |
5 | 6 |
7 | 8 |
9 |
10 |
11 |
12 |

Grid options

13 |

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

14 |
15 | 16 | 17 | 18 | 19 | 23 | 27 | 31 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 55 | 58 | 61 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |
20 | Extra small devices 21 | Phones (<768px) 22 | 24 | Small devices 25 | Tablets (≥768px) 26 | 28 | Medium devices 29 | Desktops (≥992px) 30 | 32 | Large devices 33 | Desktops (≥1200px) 34 |
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Max container widthNone (auto)750px970px1170px
Class prefix 53 | .col-xs- 54 | 56 | .col-sm- 57 | 59 | .col-md- 60 | 62 | .col-lg- 63 |
# of columns12
Max column widthAuto60px78px95px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
94 |
95 |

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any 96 | .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a 97 | .col-lg- class is not present.

98 |
99 |
100 |
101 | 102 |
103 | 104 | 105 |
106 |
107 |
108 |
109 |

Example: Stacked-to-horizontal

110 |

Using a single set of 111 | .col-md-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any 112 | .row.

113 |
114 |
.col-md-1
115 |
.col-md-1
116 |
.col-md-1
117 |
.col-md-1
118 |
.col-md-1
119 |
.col-md-1
120 |
.col-md-1
121 |
.col-md-1
122 |
.col-md-1
123 |
.col-md-1
124 |
.col-md-1
125 |
.col-md-1
126 |
127 |
128 |
.col-md-8
129 |
.col-md-4
130 |
131 |
132 |
.col-md-4
133 |
.col-md-4
134 |
.col-md-4
135 |
136 |
137 |
.col-md-6
138 |
.col-md-6
139 |
140 |
141 |
142 |
143 | 144 |
145 | 146 | 147 |
148 |
149 |
150 |
151 |

Example: Mobile and desktop

152 |

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding 153 | .col-xs-* 154 | .col-md-* to your columns. See the example below for a better idea of how it all works.

155 |
156 |
.col-xs-12 .col-md-8
157 |
.col-xs-6 .col-md-4
158 |
159 |
160 |
.col-xs-6 .col-md-4
161 |
.col-xs-6 .col-md-4
162 |
.col-xs-6 .col-md-4
163 |
164 |
165 |
.col-xs-6
166 |
.col-xs-6
167 |
168 |
169 |
170 |
171 | 172 |
173 | 174 | 175 |
176 |
177 |
178 |
179 |

Example: Mobile, tablet, desktops

180 |

Build on the previous example by creating even more dynamic and powerful layouts with tablet 181 | .col-sm-* classes.

182 |
183 |
.col-xs-12 .col-sm-6 .col-md-8
184 |
.col-xs-6 .col-md-4
185 |
186 |
187 |
.col-xs-6 .col-sm-4
188 |
.col-xs-6 .col-sm-4
189 | 190 |
191 |
.col-xs-6 .col-sm-4
192 |
193 |
194 |
195 |
196 | 197 |
198 | 199 | 200 |
201 |
202 |
203 |
204 |

Responsive column resets

205 |

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a 206 | .clearfix and our responsive utility classes.

207 |
208 |
209 | .col-xs-6 .col-sm-3 210 |
Resize your viewport or check it out on your phone for an example. 211 |
212 |
.col-xs-6 .col-sm-3
213 | 214 | 215 |
216 | 217 |
.col-xs-6 .col-sm-3
218 |
.col-xs-6 .col-sm-3
219 |
220 |
221 |
222 |
223 | 224 |
225 | 226 | 227 |
228 |
229 |
230 |
231 |

Offsetting columns

232 |

Move columns to the right using 233 | .col-md-offset-* classes. These classes increase the left margin of a column by 234 | * columns. For example, 235 | .col-md-offset-4 moves 236 | .col-md-4 over four columns.

237 |
238 |
.col-md-4
239 |
.col-md-4 .col-md-offset-4
240 |
241 |
242 |
.col-md-3 .col-md-offset-3
243 |
.col-md-3 .col-md-offset-3
244 |
245 |
246 |
.col-md-6 .col-md-offset-3
247 |
248 |
249 |
250 |
251 | 252 |
253 | 254 | 255 |
256 |
257 |
258 |
259 |

Nesting columns

260 |

To nest your content with the default grid, add a new 261 | .row and set of 262 | .col-md-* columns within an existing 263 | .col-md-* column. Nested rows should include a set of columns that add up to 12.

264 |
265 |
266 | Level 1: .col-md-9 267 |
268 |
269 | Level 2: .col-md-6 270 |
271 |
272 | Level 2: .col-md-6 273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 | 281 |
282 | 283 | 284 |
285 |
286 |
287 |
288 |

Column ordering

289 |

Easily change the order of our built-in grid columns with 290 | .col-md-push-* and 291 | .col-md-pull-* modifier classes.

292 |
293 |
.col-md-9 .col-md-push-3
294 |
.col-md-3 .col-md-pull-9
295 |
296 |
297 |
298 |
299 | 300 |
301 | -------------------------------------------------------------------------------- /app/views/ui-elements/panels-wells.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Panels and Wells

4 |
5 | 6 |
7 | 8 |
9 |
10 |
11 |
12 | Default Panel 13 |
14 |
15 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

16 |
17 | 20 |
21 |
22 | 23 |
24 |
25 |
26 | Primary Panel 27 |
28 |
29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

30 |
31 | 34 |
35 |
36 | 37 |
38 |
39 |
40 | Success Panel 41 |
42 |
43 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

44 |
45 | 48 |
49 |
50 | 51 |
52 | 53 |
54 |
55 |
56 |
57 | Info Panel 58 |
59 |
60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

61 |
62 | 65 |
66 |
67 | 68 |
69 |
70 |
71 | Warning Panel 72 |
73 |
74 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

75 |
76 | 79 |
80 |
81 | 82 |
83 |
84 |
85 | Danger Panel 86 |
87 |
88 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

89 |
90 | 93 |
94 |
95 | 96 |
97 | 98 |
99 |
100 |
101 |
102 | Green Panel 103 |
104 |
105 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

106 |
107 | 110 |
111 | 112 |
113 |
114 |
115 |
116 | Yellow Panel 117 |
118 |
119 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

120 |
121 | 124 |
125 | 126 |
127 |
128 |
129 |
130 | Red Panel 131 |
132 |
133 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

134 |
135 | 138 |
139 | 140 |
141 |
142 | 143 |
144 |
145 |
146 |
147 | Collapsible Accordion Panel Group 148 |
149 | 150 |
151 |
152 |
153 |
154 |

155 | Collapsible Group Item #1 156 |

157 |
158 |
159 |
160 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 161 |
162 |
163 |
164 |
165 |
166 |

167 | Collapsible Group Item #2 168 |

169 |
170 |
171 |
172 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 173 |
174 |
175 |
176 |
177 |
178 |

179 | Collapsible Group Item #3 180 |

181 |
182 |
183 |
184 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 185 |
186 |
187 |
188 |
189 |
190 | 191 |
192 | 193 |
194 | 195 |
196 | 197 |
198 |
199 |
200 |
201 | Basic Tabs 202 |
203 | 204 |
205 | 206 | 216 | 217 | 218 |
219 |
220 |

Home Tab

221 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

222 |
223 |
224 |

Profile Tab

225 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

226 |
227 |
228 |

Messages Tab

229 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

230 |
231 |
232 |

Settings Tab

233 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

234 |
235 |
236 |
237 | 238 |
239 | 240 |
241 | 242 |
243 |
244 |
245 | Pill Tabs 246 |
247 | 248 |
249 | 250 | 260 | 261 | 262 |
263 |
264 |

Home Tab

265 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

266 |
267 |
268 |

Profile Tab

269 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

270 |
271 |
272 |

Messages Tab

273 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

274 |
275 |
276 |

Settings Tab

277 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

278 |
279 |
280 |
281 | 282 |
283 | 284 |
285 | 286 |
287 | 288 |
289 |
290 |
291 |

Normal Well

292 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

293 |
294 |
295 | 296 |
297 |
298 |

Large Well

299 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

300 |
301 |
302 | 303 |
304 |
305 |

Small Well

306 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

307 |
308 |
309 | 310 |
311 | 312 |
313 |
314 |
315 |

Jumbotron

316 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.

317 |

Learn more 318 |

319 |
320 |
321 | 322 |
-------------------------------------------------------------------------------- /app/.htaccess: -------------------------------------------------------------------------------- 1 | # Apache Configuration File 2 | 3 | # (!) Using `.htaccess` files slows down Apache, therefore, if you have access 4 | # to the main server config file (usually called `httpd.conf`), you should add 5 | # this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html. 6 | 7 | # ############################################################################## 8 | # # CROSS-ORIGIN RESOURCE SHARING (CORS) # 9 | # ############################################################################## 10 | 11 | # ------------------------------------------------------------------------------ 12 | # | Cross-domain AJAX requests | 13 | # ------------------------------------------------------------------------------ 14 | 15 | # Enable cross-origin AJAX requests. 16 | # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity 17 | # http://enable-cors.org/ 18 | 19 | # 20 | # Header set Access-Control-Allow-Origin "*" 21 | # 22 | 23 | # ------------------------------------------------------------------------------ 24 | # | CORS-enabled images | 25 | # ------------------------------------------------------------------------------ 26 | 27 | # Send the CORS header for images when browsers request it. 28 | # https://developer.mozilla.org/en/CORS_Enabled_Image 29 | # http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 30 | # http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ 31 | 32 | 33 | 34 | 35 | SetEnvIf Origin ":" IS_CORS 36 | Header set Access-Control-Allow-Origin "*" env=IS_CORS 37 | 38 | 39 | 40 | 41 | # ------------------------------------------------------------------------------ 42 | # | Web fonts access | 43 | # ------------------------------------------------------------------------------ 44 | 45 | # Allow access from all domains for web fonts 46 | 47 | 48 | 49 | Header set Access-Control-Allow-Origin "*" 50 | 51 | 52 | 53 | 54 | # ############################################################################## 55 | # # ERRORS # 56 | # ############################################################################## 57 | 58 | # ------------------------------------------------------------------------------ 59 | # | 404 error prevention for non-existing redirected folders | 60 | # ------------------------------------------------------------------------------ 61 | 62 | # Prevent Apache from returning a 404 error for a rewrite if a directory 63 | # with the same name does not exist. 64 | # http://httpd.apache.org/docs/current/content-negotiation.html#multiviews 65 | # http://www.webmasterworld.com/apache/3808792.htm 66 | 67 | Options -MultiViews 68 | 69 | # ------------------------------------------------------------------------------ 70 | # | Custom error messages / pages | 71 | # ------------------------------------------------------------------------------ 72 | 73 | # You can customize what Apache returns to the client in case of an error (see 74 | # http://httpd.apache.org/docs/current/mod/core.html#errordocument), e.g.: 75 | 76 | ErrorDocument 404 /404.html 77 | 78 | 79 | # ############################################################################## 80 | # # INTERNET EXPLORER # 81 | # ############################################################################## 82 | 83 | # ------------------------------------------------------------------------------ 84 | # | Better website experience | 85 | # ------------------------------------------------------------------------------ 86 | 87 | # Force IE to render pages in the highest available mode in the various 88 | # cases when it may not: http://hsivonen.iki.fi/doctype/ie-mode.pdf. 89 | 90 | 91 | Header set X-UA-Compatible "IE=edge" 92 | # `mod_headers` can't match based on the content-type, however, we only 93 | # want to send this header for HTML pages and not for the other resources 94 | 95 | Header unset X-UA-Compatible 96 | 97 | 98 | 99 | # ------------------------------------------------------------------------------ 100 | # | Cookie setting from iframes | 101 | # ------------------------------------------------------------------------------ 102 | 103 | # Allow cookies to be set from iframes in IE. 104 | 105 | # 106 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" 107 | # 108 | 109 | # ------------------------------------------------------------------------------ 110 | # | Screen flicker | 111 | # ------------------------------------------------------------------------------ 112 | 113 | # Stop screen flicker in IE on CSS rollovers (this only works in 114 | # combination with the `ExpiresByType` directives for images from below). 115 | 116 | # BrowserMatch "MSIE" brokenvary=1 117 | # BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 118 | # BrowserMatch "Opera" !brokenvary 119 | # SetEnvIf brokenvary 1 force-no-vary 120 | 121 | 122 | # ############################################################################## 123 | # # MIME TYPES AND ENCODING # 124 | # ############################################################################## 125 | 126 | # ------------------------------------------------------------------------------ 127 | # | Proper MIME types for all files | 128 | # ------------------------------------------------------------------------------ 129 | 130 | 131 | 132 | # Audio 133 | AddType audio/mp4 m4a f4a f4b 134 | AddType audio/ogg oga ogg 135 | 136 | # JavaScript 137 | # Normalize to standard type (it's sniffed in IE anyways): 138 | # http://tools.ietf.org/html/rfc4329#section-7.2 139 | AddType application/javascript js jsonp 140 | AddType application/json json 141 | 142 | # Video 143 | AddType video/mp4 mp4 m4v f4v f4p 144 | AddType video/ogg ogv 145 | AddType video/webm webm 146 | AddType video/x-flv flv 147 | 148 | # Web fonts 149 | AddType application/font-woff woff 150 | AddType application/vnd.ms-fontobject eot 151 | 152 | # Browsers usually ignore the font MIME types and sniff the content, 153 | # however, Chrome shows a warning if other MIME types are used for the 154 | # following fonts. 155 | AddType application/x-font-ttf ttc ttf 156 | AddType font/opentype otf 157 | 158 | # Make SVGZ fonts work on iPad: 159 | # https://twitter.com/FontSquirrel/status/14855840545 160 | AddType image/svg+xml svg svgz 161 | AddEncoding gzip svgz 162 | 163 | # Other 164 | AddType application/octet-stream safariextz 165 | AddType application/x-chrome-extension crx 166 | AddType application/x-opera-extension oex 167 | AddType application/x-shockwave-flash swf 168 | AddType application/x-web-app-manifest+json webapp 169 | AddType application/x-xpinstall xpi 170 | AddType application/xml atom rdf rss xml 171 | AddType image/webp webp 172 | AddType image/x-icon ico 173 | AddType text/cache-manifest appcache manifest 174 | AddType text/vtt vtt 175 | AddType text/x-component htc 176 | AddType text/x-vcard vcf 177 | 178 | 179 | 180 | # ------------------------------------------------------------------------------ 181 | # | UTF-8 encoding | 182 | # ------------------------------------------------------------------------------ 183 | 184 | # Use UTF-8 encoding for anything served as `text/html` or `text/plain`. 185 | AddDefaultCharset utf-8 186 | 187 | # Force UTF-8 for certain file formats. 188 | 189 | AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml 190 | 191 | 192 | 193 | # ############################################################################## 194 | # # URL REWRITES # 195 | # ############################################################################## 196 | 197 | # ------------------------------------------------------------------------------ 198 | # | Rewrite engine | 199 | # ------------------------------------------------------------------------------ 200 | 201 | # Turning on the rewrite engine and enabling the `FollowSymLinks` option is 202 | # necessary for the following directives to work. 203 | 204 | # If your web host doesn't allow the `FollowSymlinks` option, you may need to 205 | # comment it out and use `Options +SymLinksIfOwnerMatch` but, be aware of the 206 | # performance impact: http://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks 207 | 208 | # Also, some cloud hosting services require `RewriteBase` to be set: 209 | # http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-mod-rewrite-not-working-on-my-site 210 | 211 | 212 | Options +FollowSymlinks 213 | # Options +SymLinksIfOwnerMatch 214 | RewriteEngine On 215 | # RewriteBase / 216 | 217 | 218 | # ------------------------------------------------------------------------------ 219 | # | Suppressing / Forcing the "www." at the beginning of URLs | 220 | # ------------------------------------------------------------------------------ 221 | 222 | # The same content should never be available under two different URLs especially 223 | # not with and without "www." at the beginning. This can cause SEO problems 224 | # (duplicate content), therefore, you should choose one of the alternatives and 225 | # redirect the other one. 226 | 227 | # By default option 1 (no "www.") is activated: 228 | # http://no-www.org/faq.php?q=class_b 229 | 230 | # If you'd prefer to use option 2, just comment out all the lines from option 1 231 | # and uncomment the ones from option 2. 232 | 233 | # IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME! 234 | 235 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 236 | 237 | # Option 1: rewrite www.example.com → example.com 238 | 239 | 240 | RewriteCond %{HTTPS} !=on 241 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 242 | RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L] 243 | 244 | 245 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 246 | 247 | # Option 2: rewrite example.com → www.example.com 248 | 249 | # Be aware that the following might not be a good idea if you use "real" 250 | # subdomains for certain parts of your website. 251 | 252 | # 253 | # RewriteCond %{HTTPS} !=on 254 | # RewriteCond %{HTTP_HOST} !^www\..+$ [NC] 255 | # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 256 | # 257 | 258 | 259 | # ############################################################################## 260 | # # SECURITY # 261 | # ############################################################################## 262 | 263 | # ------------------------------------------------------------------------------ 264 | # | Content Security Policy (CSP) | 265 | # ------------------------------------------------------------------------------ 266 | 267 | # You can mitigate the risk of cross-site scripting and other content-injection 268 | # attacks by setting a Content Security Policy which whitelists trusted sources 269 | # of content for your site. 270 | 271 | # The example header below allows ONLY scripts that are loaded from the current 272 | # site's origin (no inline scripts, no CDN, etc). This almost certainly won't 273 | # work as-is for your site! 274 | 275 | # To get all the details you'll need to craft a reasonable policy for your site, 276 | # read: http://html5rocks.com/en/tutorials/security/content-security-policy (or 277 | # see the specification: http://w3.org/TR/CSP). 278 | 279 | # 280 | # Header set Content-Security-Policy "script-src 'self'; object-src 'self'" 281 | # 282 | # Header unset Content-Security-Policy 283 | # 284 | # 285 | 286 | # ------------------------------------------------------------------------------ 287 | # | File access | 288 | # ------------------------------------------------------------------------------ 289 | 290 | # Block access to directories without a default document. 291 | # Usually you should leave this uncommented because you shouldn't allow anyone 292 | # to surf through every directory on your server (which may includes rather 293 | # private places like the CMS's directories). 294 | 295 | 296 | Options -Indexes 297 | 298 | 299 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 300 | 301 | # Block access to hidden files and directories. 302 | # This includes directories used by version control systems such as Git and SVN. 303 | 304 | 305 | RewriteCond %{SCRIPT_FILENAME} -d [OR] 306 | RewriteCond %{SCRIPT_FILENAME} -f 307 | RewriteRule "(^|/)\." - [F] 308 | 309 | 310 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 311 | 312 | # Block access to backup and source files. 313 | # These files may be left by some text editors and can pose a great security 314 | # danger when anyone has access to them. 315 | 316 | 317 | Order allow,deny 318 | Deny from all 319 | Satisfy All 320 | 321 | 322 | # ------------------------------------------------------------------------------ 323 | # | Secure Sockets Layer (SSL) | 324 | # ------------------------------------------------------------------------------ 325 | 326 | # Rewrite secure requests properly to prevent SSL certificate warnings, e.g.: 327 | # prevent `https://www.example.com` when your certificate only allows 328 | # `https://secure.example.com`. 329 | 330 | # 331 | # RewriteCond %{SERVER_PORT} !^443 332 | # RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L] 333 | # 334 | 335 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 336 | 337 | # Force client-side SSL redirection. 338 | 339 | # If a user types "example.com" in his browser, the above rule will redirect him 340 | # to the secure version of the site. That still leaves a window of opportunity 341 | # (the initial HTTP connection) for an attacker to downgrade or redirect the 342 | # request. The following header ensures that browser will ONLY connect to your 343 | # server via HTTPS, regardless of what the users type in the address bar. 344 | # http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ 345 | 346 | # 347 | # Header set Strict-Transport-Security max-age=16070400; 348 | # 349 | 350 | # ------------------------------------------------------------------------------ 351 | # | Server software information | 352 | # ------------------------------------------------------------------------------ 353 | 354 | # Avoid displaying the exact Apache version number, the description of the 355 | # generic OS-type and the information about Apache's compiled-in modules. 356 | 357 | # ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`! 358 | 359 | # ServerTokens Prod 360 | 361 | 362 | # ############################################################################## 363 | # # WEB PERFORMANCE # 364 | # ############################################################################## 365 | 366 | # ------------------------------------------------------------------------------ 367 | # | Compression | 368 | # ------------------------------------------------------------------------------ 369 | 370 | 371 | 372 | # Force compression for mangled headers. 373 | # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping 374 | 375 | 376 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 377 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 378 | 379 | 380 | 381 | # Compress all output labeled with one of the following MIME-types 382 | # (for Apache versions below 2.3.7, you don't need to enable `mod_filter` 383 | # and can remove the `` and `` lines 384 | # as `AddOutputFilterByType` is still in the core directives). 385 | 386 | AddOutputFilterByType DEFLATE application/atom+xml \ 387 | application/javascript \ 388 | application/json \ 389 | application/rss+xml \ 390 | application/vnd.ms-fontobject \ 391 | application/x-font-ttf \ 392 | application/x-web-app-manifest+json \ 393 | application/xhtml+xml \ 394 | application/xml \ 395 | font/opentype \ 396 | image/svg+xml \ 397 | image/x-icon \ 398 | text/css \ 399 | text/html \ 400 | text/plain \ 401 | text/x-component \ 402 | text/xml 403 | 404 | 405 | 406 | 407 | # ------------------------------------------------------------------------------ 408 | # | Content transformations | 409 | # ------------------------------------------------------------------------------ 410 | 411 | # Prevent some of the mobile network providers from modifying the content of 412 | # your site: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5. 413 | 414 | # 415 | # Header set Cache-Control "no-transform" 416 | # 417 | 418 | # ------------------------------------------------------------------------------ 419 | # | ETag removal | 420 | # ------------------------------------------------------------------------------ 421 | 422 | # Since we're sending far-future expires headers (see below), ETags can 423 | # be removed: http://developer.yahoo.com/performance/rules.html#etags. 424 | 425 | # `FileETag None` is not enough for every server. 426 | 427 | Header unset ETag 428 | 429 | 430 | FileETag None 431 | 432 | # ------------------------------------------------------------------------------ 433 | # | Expires headers (for better cache control) | 434 | # ------------------------------------------------------------------------------ 435 | 436 | # The following expires headers are set pretty far in the future. If you don't 437 | # control versioning with filename-based cache busting, consider lowering the 438 | # cache time for resources like CSS and JS to something like 1 week. 439 | 440 | 441 | 442 | ExpiresActive on 443 | ExpiresDefault "access plus 1 month" 444 | 445 | # CSS 446 | ExpiresByType text/css "access plus 1 year" 447 | 448 | # Data interchange 449 | ExpiresByType application/json "access plus 0 seconds" 450 | ExpiresByType application/xml "access plus 0 seconds" 451 | ExpiresByType text/xml "access plus 0 seconds" 452 | 453 | # Favicon (cannot be renamed!) 454 | ExpiresByType image/x-icon "access plus 1 week" 455 | 456 | # HTML components (HTCs) 457 | ExpiresByType text/x-component "access plus 1 month" 458 | 459 | # HTML 460 | ExpiresByType text/html "access plus 0 seconds" 461 | 462 | # JavaScript 463 | ExpiresByType application/javascript "access plus 1 year" 464 | 465 | # Manifest files 466 | ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 467 | ExpiresByType text/cache-manifest "access plus 0 seconds" 468 | 469 | # Media 470 | ExpiresByType audio/ogg "access plus 1 month" 471 | ExpiresByType image/gif "access plus 1 month" 472 | ExpiresByType image/jpeg "access plus 1 month" 473 | ExpiresByType image/png "access plus 1 month" 474 | ExpiresByType video/mp4 "access plus 1 month" 475 | ExpiresByType video/ogg "access plus 1 month" 476 | ExpiresByType video/webm "access plus 1 month" 477 | 478 | # Web feeds 479 | ExpiresByType application/atom+xml "access plus 1 hour" 480 | ExpiresByType application/rss+xml "access plus 1 hour" 481 | 482 | # Web fonts 483 | ExpiresByType application/font-woff "access plus 1 month" 484 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 485 | ExpiresByType application/x-font-ttf "access plus 1 month" 486 | ExpiresByType font/opentype "access plus 1 month" 487 | ExpiresByType image/svg+xml "access plus 1 month" 488 | 489 | 490 | 491 | # ------------------------------------------------------------------------------ 492 | # | Filename-based cache busting | 493 | # ------------------------------------------------------------------------------ 494 | 495 | # If you're not using a build process to manage your filename version revving, 496 | # you might want to consider enabling the following directives to route all 497 | # requests such as `/css/style.12345.css` to `/css/style.css`. 498 | 499 | # To understand why this is important and a better idea than `*.css?v231`, read: 500 | # http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring 501 | 502 | # 503 | # RewriteCond %{REQUEST_FILENAME} !-f 504 | # RewriteCond %{REQUEST_FILENAME} !-d 505 | # RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] 506 | # 507 | 508 | # ------------------------------------------------------------------------------ 509 | # | File concatenation | 510 | # ------------------------------------------------------------------------------ 511 | 512 | # Allow concatenation from within specific CSS and JS files, e.g.: 513 | # Inside of `script.combined.js` you could have 514 | # 515 | # 516 | # and they would be included into this single file. 517 | 518 | # 519 | # 520 | # Options +Includes 521 | # AddOutputFilterByType INCLUDES application/javascript application/json 522 | # SetOutputFilter INCLUDES 523 | # 524 | # 525 | # Options +Includes 526 | # AddOutputFilterByType INCLUDES text/css 527 | # SetOutputFilter INCLUDES 528 | # 529 | # 530 | 531 | # ------------------------------------------------------------------------------ 532 | # | Persistent connections | 533 | # ------------------------------------------------------------------------------ 534 | 535 | # Allow multiple requests to be sent over the same TCP connection: 536 | # http://httpd.apache.org/docs/current/en/mod/core.html#keepalive. 537 | 538 | # Enable if you serve a lot of static content but, be aware of the 539 | # possible disadvantages! 540 | 541 | # 542 | # Header set Connection Keep-Alive 543 | # 544 | --------------------------------------------------------------------------------