├── .bowerrc ├── src ├── img │ └── avatar.jpg ├── fonts │ ├── montserrat-regular-webfont.eot │ ├── montserrat-regular-webfont.ttf │ ├── montserrat-regular-webfont.woff │ └── montserrat-regular-webfont.svg ├── less │ └── dashboard │ │ ├── content.less │ │ ├── loading.less │ │ ├── main.less │ │ ├── widgets.less │ │ ├── header.less │ │ └── sidebar.less ├── js │ └── dashboard │ │ └── app.js └── index.html ├── .editorconfig ├── .gitattributes ├── .gitignore ├── package.json ├── bower.json ├── LICENSE ├── CONTRIBUTING.md ├── gulpfile.js └── README.md /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "src/bower_components" 3 | } -------------------------------------------------------------------------------- /src/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdash/rdash-jquery/HEAD/src/img/avatar.jpg -------------------------------------------------------------------------------- /src/fonts/montserrat-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdash/rdash-jquery/HEAD/src/fonts/montserrat-regular-webfont.eot -------------------------------------------------------------------------------- /src/fonts/montserrat-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdash/rdash-jquery/HEAD/src/fonts/montserrat-regular-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/montserrat-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdash/rdash-jquery/HEAD/src/fonts/montserrat-regular-webfont.woff -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | end_of_line = lf 3 | insert_final_newline = true 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | -------------------------------------------------------------------------------- /src/less/dashboard/content.less: -------------------------------------------------------------------------------- 1 | #content-wrapper { 2 | padding-left: 0; 3 | margin-left: 0; 4 | width: 100%; 5 | height: auto; 6 | } 7 | @media only screen and (min-width:561px){ 8 | #page-wrapper.active { 9 | padding-left: 250px; 10 | } 11 | } 12 | @media only screen and (max-width:560px){ 13 | #page-wrapper.active { 14 | padding-left: 70px; 15 | } 16 | } 17 | #page-wrapper.active #sidebar-wrapper { 18 | left: 150px; 19 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # ========================= 18 | # Operating System Files 19 | # ========================= 20 | 21 | # OSX 22 | # ========================= 23 | 24 | .DS_Store 25 | .AppleDouble 26 | .LSOverride 27 | 28 | # Icon must ends with two \r. 29 | Icon 30 | 31 | 32 | # Thumbnails 33 | ._* 34 | 35 | # Files that might appear on external disk 36 | .Spotlight-V100 37 | .Trashes 38 | 39 | # Node modules 40 | /node_modules 41 | 42 | # Bower components 43 | /src/bower_components -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rdash-jquery", 3 | "version": "0.0.2", 4 | "author": "Elliot Hesp", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/rdash/rdash-jquery.git" 8 | }, 9 | "contributors": [ 10 | "Leonel Samayoa (http://gobliip.com)", 11 | "Ricardo Pascua ", 12 | "Mathew Goldsborough " 13 | ], 14 | "scripts": { 15 | "postinstall": "node node_modules/bower/bin/bower install" 16 | }, 17 | "devDependencies": { 18 | "bower": "^1.3.9", 19 | "gulp": "~3.8.0", 20 | "gulp-connect": "^2.0.6", 21 | "gulp-less": "~1.3.3", 22 | "gulp-usemin": "^0.3.7", 23 | "gulp-watch": "^0.6.9", 24 | "gulp-wrap": "^0.3.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rdash-jquery", 3 | "version": "0.0.2", 4 | "homepage": "https://github.com/rdash/rdash-jquery", 5 | "authors": [ 6 | "Elliot Hesp ", 7 | "Ricardo Pascua Jr ", 8 | "Leonel Samayoa " 9 | ], 10 | "description": "jQuery + Bootstrap Responsive Dashboard", 11 | "main": "index.html", 12 | "license": "MIT", 13 | "ignore": [ 14 | "**/.*", 15 | "node_modules", 16 | "bower_components", 17 | "test", 18 | "tests" 19 | ], 20 | "dependencies": { 21 | "jquery": ">= 1.9.0", 22 | "jquery.cookie": "~1.4.1", 23 | "bootstrap": "~3.2.0", 24 | "font-awesome": "~4.1.0" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git://github.com/rdash/rdash-jquery.git" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/less/dashboard/loading.less: -------------------------------------------------------------------------------- 1 | .loading { 2 | width: 40px; 3 | height: 40px; 4 | position: relative; 5 | margin: 100px auto; 6 | } 7 | 8 | .double-bounce1, .double-bounce2 { 9 | width: 100%; 10 | height: 100%; 11 | border-radius: 50%; 12 | background-color: #333; 13 | opacity: 0.6; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | 18 | -webkit-animation: bounce 2.0s infinite ease-in-out; 19 | animation: bounce 2.0s infinite ease-in-out; 20 | } 21 | 22 | .double-bounce2 { 23 | -webkit-animation-delay: -1.0s; 24 | animation-delay: -1.0s; 25 | } 26 | 27 | @-webkit-keyframes bounce { 28 | 0%, 100% { -webkit-transform: scale(0.0) } 29 | 50% { -webkit-transform: scale(1.0) } 30 | } 31 | 32 | @keyframes bounce { 33 | 0%, 100% { 34 | transform: scale(0.0); 35 | -webkit-transform: scale(0.0); 36 | } 50% { 37 | transform: scale(1.0); 38 | -webkit-transform: scale(1.0); 39 | } 40 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) [2014] [Elliot Hesp] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | If you've found a bug, want to improve the current dashboard or use a new tool to help with workflow, feel free to submit and issue or pull request. Please check to see whether it's already been discussed though. 4 | 5 | I'm fully open to all new ideas and improvements, however please keep in mind the aim of this dashboard is to be as simplistic and clean as possible with no bloat: 6 | * Avoid using plugins/3rd party libaries 7 | * Ensure your code works cross (major) browsers - Chrome, Firefox & IE11+ (CSS3 support) 8 | * Ensure your code works on all screen sizes. [Chrome Emulation](https://developer.chrome.com/devtools/docs/device-mode) is handy here! 9 | * If you're working with CSS, ensure the LESS files are also created, and visa versa. 10 | * The build system of choice is [Gulp](http://gulpjs.com/). 11 | * The package manager of choice is [Bower](http://bower.io/). 12 | 13 | ## Issues/Features 14 | 15 | Please be as descriptive as possible when submitting an issue or feature. Include your browser/device name plus version and if possible a screenshot. A 'how to replicate the issue' is always handy! 16 | 17 | ## Pull Requests 18 | 19 | Even though the repository can be fast moving, ensure your PR is up to date with the latest master version. 20 | If submitting a new feature which requires testing (as opposed to a small CSS tweak), create a new branch with a relevant name and submit this with your PR. 21 | 22 | -------------------------------------------------------------------------------- /src/less/dashboard/main.less: -------------------------------------------------------------------------------- 1 | /* Fonts */ 2 | @font-face { 3 | font-family: 'Montserrat'; 4 | src: url('../../fonts/montserrat-regular-webfont.eot'); 5 | src: url('../../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 6 | url('../../fonts/montserrat-regular-webfont.woff') format('woff'), 7 | url('../../fonts/montserrat-regular-webfont.ttf') format('truetype'), 8 | url('../../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | @media screen and (-webkit-min-device-pixel-ratio:0) { 13 | @font-face { 14 | font-family: 'Montserrat'; 15 | src: url('../../fonts/montserrat-regular-webfont.svg') format('svg'); 16 | } 17 | select { 18 | font-family: Arial; 19 | } 20 | } 21 | 22 | /* Base */ 23 | html { 24 | overflow-y: scroll; 25 | } 26 | body { 27 | background: #f3f3f3; 28 | font-family: "Montserrat"; 29 | color: #333333 !important; 30 | } 31 | .row { 32 | margin-left: 0 !important; 33 | margin-right: 0 !important; 34 | } 35 | .row > div { 36 | margin-bottom: 15px; 37 | } 38 | .alerts-container .alert:last-child { 39 | margin-bottom: 0; 40 | } 41 | #page-wrapper { 42 | padding-left: 70px; 43 | height: 100% 44 | } 45 | #sidebar-wrapper { 46 | margin-left: -150px; 47 | left: -30px; 48 | width: 250px; 49 | position: fixed; 50 | height: 100%; 51 | z-index: 999; 52 | } 53 | #page-wrapper, #sidebar-wrapper { 54 | transition: all .4s ease 0s; 55 | } 56 | .green { 57 | background: #23ae89 !important; 58 | } 59 | .blue { 60 | background: #2361ae !important; 61 | } 62 | .orange { 63 | background: #d3a938 !important; 64 | } 65 | .red { 66 | background: #ae2323 !important; 67 | } 68 | .form-group .help-block.form-group-inline-message { 69 | padding-top: 5px; 70 | } 71 | div.input-mask { 72 | padding-top: 7px; 73 | } 74 | -------------------------------------------------------------------------------- /src/js/dashboard/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * globals 3 | */ 4 | var MOBILE_VIEW = 992; 5 | 6 | $(function() { 7 | 'use strict'; 8 | 9 | function getWidth() { 10 | return window.innerWidth; 11 | } 12 | 13 | var App = { 14 | /** 15 | * init 16 | */ 17 | init: function() { 18 | this.cacheElements(); 19 | this.bindEvents(); 20 | this.checkViewport(); 21 | }, 22 | 23 | /** 24 | * cache elements 25 | */ 26 | cacheElements: function() { 27 | this.$viewport = $(window); 28 | this.$pageWrapper = $("#page-wrapper"); 29 | this.$toggleBtn = $("#toggle-sidebar"); 30 | }, 31 | 32 | /** 33 | * bind events to elements 34 | */ 35 | bindEvents: function() { 36 | this.$viewport.on('resize', this.viewportResize.bind(this)); 37 | this.$toggleBtn.on('click', this.toggleSidebar.bind(this)); 38 | }, 39 | 40 | /** 41 | * trigger checkviewport on resize 42 | */ 43 | viewportResize: function() { 44 | this.checkViewport(); 45 | }, 46 | 47 | /** 48 | * toggles sidebar 49 | */ 50 | toggleSidebar: function(e) { 51 | this.$pageWrapper.toggleClass('active'); 52 | 53 | $.cookie('toggle', this.$pageWrapper.hasClass("active")); 54 | }, 55 | 56 | /** 57 | * Checks the viewport and toggles sidebar if toggled 58 | */ 59 | checkViewport: function() { 60 | if (getWidth() >= MOBILE_VIEW) { 61 | if ($.cookie('toggle') === undefined) { 62 | this.$pageWrapper.addClass("active"); 63 | } else { 64 | if($.cookie('toggle') == 'true') { 65 | this.$pageWrapper.addClass("active"); 66 | } else { 67 | this.$pageWrapper.removeClass("active"); 68 | } 69 | } 70 | } else { 71 | this.$pageWrapper.removeClass("active"); 72 | } 73 | }, 74 | 75 | }; 76 | 77 | App.init(); 78 | 79 | }); 80 | -------------------------------------------------------------------------------- /src/less/dashboard/widgets.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Widgets 3 | */ 4 | .widget { 5 | background: #ffffff; 6 | border: 1px solid transparent; 7 | border-radius: 2px; 8 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 9 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 10 | border-color: #e9e9e9; 11 | .widget-title { 12 | color: #767676; 13 | background-color: #f6f6f6; 14 | padding: 10px 15px; 15 | border-bottom: 1px solid #e9e9e9; 16 | line-height: 30px; 17 | i { 18 | margin-right: 5px; 19 | } 20 | input { 21 | width: 25%; 22 | } 23 | } 24 | .widget-body { 25 | padding: 20px; 26 | table { 27 | thead { 28 | background: #fafafa; 29 | * { 30 | font-size: 14px !important; 31 | } 32 | } 33 | tbody { 34 | * { 35 | font-size: 13px !important; 36 | } 37 | } 38 | } 39 | .error { 40 | color: #ff0000; 41 | } 42 | button { 43 | margin-left: 5px; 44 | } 45 | div.alert { 46 | margin-bottom: 10px; 47 | } 48 | } 49 | .widget-body.large { 50 | height: 350px; 51 | overflow-y: auto; 52 | } 53 | .widget-body.medium { 54 | height: 250px; 55 | overflow-y: auto; 56 | } 57 | .widget-body.small { 58 | height: 150px; 59 | overflow-y: auto; 60 | } 61 | .widget-body.no-padding { 62 | padding: 0; 63 | } 64 | .widget-icon { 65 | background: #30426a; 66 | width: 65px; 67 | height: 65px; 68 | border-radius: 50%; 69 | text-align: center; 70 | vertical-align: middle; 71 | margin-right: 15px; 72 | i { 73 | line-height: 66px; 74 | color: #ffffff; 75 | font-size: 30px; 76 | } 77 | } 78 | .widget-content { 79 | .title { 80 | font-size: 28px; 81 | display: block; 82 | } 83 | } 84 | } 85 | .widget .widget-body.no-padding .error, .widget .widget-body.no-padding .message { 86 | padding: 20px; 87 | } 88 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | less = require('gulp-less'), 3 | usemin = require('gulp-usemin'), 4 | wrap = require('gulp-wrap'), 5 | connect = require('gulp-connect'), 6 | watch = require('gulp-watch'); 7 | 8 | var paths = { 9 | js: 'src/js/**/*.*', 10 | fonts: 'src/fonts/**.*', 11 | images: 'src/img/**/*.*', 12 | styles: 'src/less/**/*.less', 13 | index: 'src/index.html', 14 | bower_fonts: 'src/bower_components/**/*.{ttf,woff,eof,svg}', 15 | bower_components: 'src/bower_components/**/*.*', 16 | watch_path: 'src/less/dashboard/**/*.less' 17 | }; 18 | 19 | 20 | gulp.task('usemin', function() { 21 | return gulp.src(paths.index) 22 | .pipe(usemin({ 23 | less: [less(), 'concat'], 24 | js: ['concat', wrap('(function(){ \n<%= contents %>\n})();')], 25 | })) 26 | .pipe(gulp.dest('dist/')); 27 | }); 28 | 29 | /** 30 | * Copy assets 31 | */ 32 | gulp.task('copy-assets', ['copy-images', 'copy-fonts', 'copy-bower_fonts']); 33 | 34 | gulp.task('copy-images', function(){ 35 | return gulp.src(paths.images) 36 | .pipe(gulp.dest('dist/img')); 37 | }); 38 | 39 | gulp.task('copy-fonts', function(){ 40 | return gulp.src(paths.fonts) 41 | .pipe(gulp.dest('dist/fonts')); 42 | }); 43 | 44 | gulp.task('copy-bower_fonts', function(){ 45 | return gulp.src(paths.bower_fonts) 46 | .pipe(gulp.dest('dist/lib')); 47 | }); 48 | 49 | /** 50 | * Watch src 51 | */ 52 | gulp.task('watch', function () { 53 | gulp.watch([paths.styles, paths.index, paths.js], ['usemin']); 54 | gulp.watch([paths.images], ['copy-images']); 55 | gulp.watch([paths.fonts], ['copy-fonts']); 56 | gulp.watch([paths.bower_fonts], ['copy-bower_fonts']); 57 | }); 58 | 59 | gulp.task('webserver', function() { 60 | connect.server({ 61 | root: 'dist', 62 | livereload: true 63 | }); 64 | }); 65 | 66 | gulp.task('livereload', function() { 67 | gulp.src(['dist/**/*.*']) 68 | .pipe(watch()) 69 | .pipe(connect.reload()); 70 | }); 71 | 72 | /** 73 | * Compile less 74 | */ 75 | gulp.task('compile-less', function(){ 76 | return gulp.src(paths.styles) 77 | .pipe(less()) 78 | .pipe(gulp.dest('dist/css')); 79 | }); 80 | 81 | gulp.task('build', ['usemin', 'copy-assets']); 82 | gulp.task('default', ['build', 'webserver', 'livereload', 'watch']); 83 | -------------------------------------------------------------------------------- /src/less/dashboard/header.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Header 3 | */ 4 | .row.header { 5 | height: 60px; 6 | background: #fff; 7 | margin-bottom: 15px; 8 | & > div:last-child { 9 | padding-right: 0; 10 | } 11 | .meta { 12 | .page { 13 | font-size: 17px; 14 | padding-top: 11px; 15 | white-space: nowrap; 16 | overflow: hidden; 17 | text-overflow: ellipsis; 18 | } 19 | .breadcrumb-links { 20 | font-size: 10px; 21 | } 22 | } 23 | .login { 24 | a { 25 | padding: 18px; 26 | display: block; 27 | } 28 | } 29 | .user { 30 | & > .item { 31 | width: 65px; 32 | height: 60px; 33 | float: right; 34 | display: inline-block; 35 | text-align: center; 36 | vertical-align: middle; 37 | a { 38 | color: #919191; 39 | display: block; 40 | } 41 | i { 42 | font-size: 20px; 43 | line-height: 55px; 44 | } 45 | img { 46 | width: 40px; 47 | height: 40px; 48 | margin-top: 10px; 49 | border-radius: 2px; 50 | } 51 | ul.dropdown-menu { 52 | border-radius: 2px; 53 | -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.05); 54 | box-shadow: 0 6px 12px rgba(0,0,0,.05); 55 | .dropdown-header { 56 | text-align: center; 57 | } 58 | li.link { 59 | text-align: left; 60 | a { 61 | padding-left: 7px; 62 | padding-right: 7px; 63 | } 64 | } 65 | } 66 | ul.dropdown-menu:before { 67 | position: absolute; 68 | top: -7px; 69 | right: 23px; 70 | display: inline-block; 71 | border-right: 7px solid transparent; 72 | border-bottom: 7px solid #ccc; 73 | border-left: 7px solid transparent; 74 | border-bottom-color: rgba(0, 0, 0, 0.2); 75 | content: ''; 76 | } 77 | ul.dropdown-menu:after { 78 | position: absolute; 79 | top: -6px; 80 | right: 24px; 81 | display: inline-block; 82 | border-right: 6px solid transparent; 83 | border-bottom: 6px solid #ffffff; 84 | border-left: 6px solid transparent; 85 | content: ''; 86 | } 87 | } 88 | } 89 | } 90 | 91 | @media only screen and (min-width : 993px) { 92 | .row.header .meta .page { 93 | width: 380px; 94 | } 95 | } 96 | @media only screen and (max-width : 992px) { 97 | .row header .meta .page { 98 | width: 180px; 99 | } 100 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## jQuery + Bootstrap Responsive Dashboard 2 | 3 | This dashboard front-end was created as I was lacking a simple responsive but slick looking dashboard for another project of mine. Other available dashboards were bloated with external plugins and required a lot of hackery/work out of the box - plus the fact many were powered by jQuery. The design takes inspiration from other dashboards around, but the code to create the layout is my own. 4 | 5 | Compatibility/Tested: 6 | * Chrome, Firefox, IE 11+ 7 | * Works best on screen sizes greater than ~335px 8 | 9 | [Responsive Screenshots](http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-Dashboard/) 10 | 11 | Live Example (uses Angular JS): 12 | * http://ehesp.github.io/Responsive-Dashboard/ 13 | 14 | > jQuery version available on the [jQuery branch](https://github.com/Ehesp/Responsive-Dashboard/tree/jquery)! 15 | 16 | ### Usage 17 | 18 | Simply clone, or download and unzip this repository and access the root via your browser. There is only one page on show (`index.html`), and the relevant sections have been commented. 19 | 20 | If you want to use LESS, then cd into the root directory and 21 | 22 | ``` 23 | npm install 24 | 25 | ``` 26 | 27 | After that, run `gulp` in order to compile the LESS files into CSS. 28 | 29 | #### jQuery 30 | 31 | jQuery is simply being used to power the sidebar toggle (side in and out). It does a combination of detecting the browser size and managing a `toggle` cookie to keep the state the same when the page is reloaded. Check out the `js/jquery/bootstrap.js` file. 32 | 33 | The idea is not for jQuery to be used just to power this functionality, it's used to be compatible with your jQuery project. 34 | 35 | Please check the [master branch](https://github.com/Ehesp/Responsive-Dashboard) for the AngularJS implementation of this. 36 | 37 | #### Theme 38 | 39 | Three different colour files (blue, green & red) have been included in `css/themes`, which changes the colour of the sidebar. Blue is on by default, the others are commented out in the `index.html` file. 40 | 41 | #### Bootstrap + Font Awesome 42 | 43 | The grid layout and components are powered by [Bootstrap](http://getbootstrap.com/), also Font Awesome icons are ready to use. 44 | 45 | #### Custom Items 46 | 47 | The `css/dashboard/dashboard.min.css` file is the base CSS file for the dashboard, however it also contains the styling for the "widgets". 48 | 49 | ##### Widgets 50 | 51 | A widget is essentially a white container box with some styling, that will expand 100% of it's parent container. To separate these out, I suggest putting them inside a bootstrap grid item, e.g: 52 | 53 | ```HTML 54 |
55 |
56 | ``` 57 | 58 | A widget has a `widget-title` and also a `widget-body` which can be used individually inside the widget. 59 | 60 | Any content can be inside a `widget-body`, which will be padded by default. Three set sizes for the body are available and will provide a scroller for the content when the content breaks the height. Apply either `large` `medium` or `small` to the `widget-body` class, e.g: `
`. 61 | 62 | > If no size is set, the content will expand vertically based on content size. 63 | 64 | ###### Widget Body 65 | 66 | **Padding** 67 | 68 | Padding inside widgets is set to 20px. To remove this padding, apply the `no-padding` class on the widget body, e.g: `
`. 69 | 70 | **Tables** 71 | 72 | Styling for tables is included. Ensure your table has the class `table` and feel free to apply other Bootstrap classes. For table headings use `thead` and the body `tbody`. Tables work well with the `no-padding` class. 73 | 74 | **Messages & Errors** 75 | 76 | A message can be set within the body whether it has padding or not - simply place a `
` within the body with the class of `message`, e.g: 77 | 78 | ```HTML 79 |
80 |
81 | There are no servers in the application! 82 |
83 |
84 | ``` 85 | 86 | If you wish to set this text to red, to display an error for example, simply replace `message` with `error`, e.g: 87 | 88 | ```HTML 89 |
90 |
91 | An error occured retrieving data from the server! 92 |
93 |
94 | ``` 95 | 96 | ##### Loading Template 97 | 98 | There's a sample HTML template/snippet used to demonstrate a loading "spinner", which is taken from [this awesome spinkit repo](http://tobiasahlin.com/spinkit/), and the CSS placed in the `css/dashboard/loading.css` file (which is imported at the top of the `dashboard.css` file). 99 | 100 | If you want to change it, simply replace the template and CSS! 101 | -------------------------------------------------------------------------------- /src/less/dashboard/sidebar.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Sidebar 3 | */ 4 | /* #592727 RED */ 5 | /* #2f5927 GREEN */ 6 | /* #30426a BLUE (default)*/ 7 | 8 | /* Sidebar background color */ 9 | @sidebarBaseColor: #30426a; 10 | /* Sidebar header and footer color */ 11 | @sidebarHeaderColor: darken(@sidebarBaseColor, 2%); 12 | /* Sidebar title text colour */ 13 | @sidebarTitleColor: lighten(@sidebarBaseColor, 30%); /*#627cb7*/ 14 | 15 | 16 | #sidebar-wrapper { 17 | background: @sidebarBaseColor; 18 | } 19 | 20 | ul.sidebar .sidebar-main a, 21 | .sidebar-footer, 22 | ul.sidebar .sidebar-list a:hover, 23 | #page-wrapper:not(.active) ul.sidebar .sidebar-title.separator { 24 | /* Sidebar header and footer color */ 25 | background: @sidebarHeaderColor; 26 | } 27 | 28 | ul.sidebar { 29 | position: absolute; 30 | top: 0; 31 | bottom: 45px; 32 | padding: 0; 33 | margin: 0; 34 | list-style: none; 35 | text-indent: 20px; 36 | overflow-x: hidden; 37 | overflow-y: auto; 38 | position: absolute; 39 | top: 0; 40 | bottom: 45px; 41 | padding: 0; 42 | margin: 0; 43 | list-style: none; 44 | text-indent: 20px; 45 | overflow-x: hidden; 46 | overflow-y: auto; 47 | li { 48 | a { 49 | color: #fff; 50 | display: block; 51 | float: left; 52 | text-decoration: none; 53 | width: 250px; 54 | color: #fff; 55 | display: block; 56 | float: left; 57 | text-decoration: none; 58 | width: 250px; 59 | } 60 | } 61 | .sidebar-main { 62 | height: 65px; 63 | height: 65px; 64 | a { 65 | font-size: 18px; 66 | line-height: 60px; 67 | font-size: 18px; 68 | line-height: 60px; 69 | } 70 | .menu-icon { 71 | float: right; 72 | font-size: 18px; 73 | padding-right: 28px; 74 | line-height: 60px; 75 | float: right; 76 | font-size: 18px; 77 | padding-right: 28px; 78 | line-height: 60px; 79 | } 80 | } 81 | .sidebar-title { 82 | color: @sidebarTitleColor; 83 | font-size: 12px; 84 | height: 35px; 85 | line-height: 40px; 86 | text-transform: uppercase; 87 | font-size: 12px; 88 | height: 35px; 89 | line-height: 40px; 90 | text-transform: uppercase; 91 | } 92 | .sidebar-list { 93 | height: 40px; 94 | height: 40px; 95 | a { 96 | text-indent: 25px; 97 | font-size: 15px; 98 | color: #b2bfdc; 99 | line-height: 40px; 100 | text-indent: 25px; 101 | font-size: 15px; 102 | color: #b2bfdc; 103 | line-height: 40px; 104 | } 105 | a:hover { 106 | color: #fff; 107 | border-left: 3px solid #e99d1a; 108 | text-indent: 22px; 109 | color: #fff; 110 | border-left: 3px solid #e99d1a; 111 | text-indent: 22px; 112 | .menu-icon { 113 | text-indent: 25px; 114 | text-indent: 25px; 115 | } 116 | } 117 | .menu-icon { 118 | float: right; 119 | padding-right: 29px; 120 | line-height: 40px; 121 | width: 70px; 122 | float: right; 123 | padding-right: 29px; 124 | line-height: 40px; 125 | width: 70px; 126 | } 127 | } 128 | } 129 | #page-wrapper:not(.active) { 130 | ul.sidebar { 131 | bottom: 0; 132 | bottom: 0; 133 | .sidebar-title { 134 | display: none; 135 | display: none; 136 | } 137 | .sidebar-title.separator { 138 | display: block; 139 | height: 2px; 140 | margin: 13px 0; 141 | display: block; 142 | height: 2px; 143 | margin: 13px 0; 144 | } 145 | .sidebar-list { 146 | a:hover { 147 | span { 148 | border-left: 3px solid #e99d1a; 149 | text-indent: 22px; 150 | border-left: 3px solid #e99d1a; 151 | text-indent: 22px; 152 | } 153 | } 154 | } 155 | } 156 | .sidebar-footer { 157 | display: none; 158 | display: none; 159 | } 160 | } 161 | .sidebar-footer { 162 | position: absolute; 163 | height: 40px; 164 | bottom: 0; 165 | width: 100%; 166 | padding: 0; 167 | margin: 0; 168 | text-align: center; 169 | position: absolute; 170 | height: 40px; 171 | bottom: 0; 172 | width: 100%; 173 | padding: 0; 174 | margin: 0; 175 | text-align: center; 176 | div { 177 | a { 178 | color: #b2bfdc; 179 | font-size: 12px; 180 | line-height: 43px; 181 | color: #b2bfdc; 182 | font-size: 12px; 183 | line-height: 43px; 184 | } 185 | a:hover { 186 | color: #ffffff; 187 | text-decoration: none; 188 | color: #ffffff; 189 | text-decoration: none; 190 | } 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dashboard 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 | 88 | 89 | 90 | 91 |
92 |
93 | 94 | 95 | 96 |
97 |
98 |
99 |
100 | Dashboard 101 |
102 |
103 | Home / Dashboard 104 |
105 |
106 |
107 |
108 | 109 | 110 | 111 | 138 |
139 |
140 | 141 | 142 | 143 |
    144 |
  • 145 | Notifications 146 |
    • 147 |
  • 148 |
  • 149 | Server Down! 150 |
    • 151 |
152 |
153 |
154 |
155 |
156 | 157 | 158 | 159 | 160 |
161 |
162 |
Thanks for visiting! Feel free to create pull requests to improve the dashboard!
163 |
Found a bug? Create an issue with as many details as you can.
164 |
165 |
166 | 167 |
168 |
169 |
170 |
171 |
172 | 173 |
174 |
175 |
80
176 |
Users
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 | 187 |
188 |
189 |
16
190 |
Servers
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 | 201 |
202 |
203 |
225
204 |
Documents
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 | 216 |
217 |
218 |
62
219 |
Tickets
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | Servers 231 | Manage 232 |
233 |
234 |
235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 |
RDVMPC001238.103.133.37
RDVMPC00268.66.63.170
RDVMPC00376.117.212.33
RDPHPC00191.88.224.5
RDESX001197.188.15.93
RDESX002168.85.154.251
RDESX003209.25.191.61
RDESX004252.37.192.235
RDTerminal01139.71.18.207
RDTerminal02136.80.122.212
RDDomainCont01196.80.245.33
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 | Users 258 | 259 |
260 |
261 |
262 |
263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 |
IDUsernameRoleAccount
1Joe BloggsSuper AdminAZ23045
2Timothy HernandezAdminAU24783
3Joe BickhamUserAM23781
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 | Extras 283 | 284 |
285 |
286 |
287 | 288 |
289 | This is a standard message which will also work the ".no-padding" class, I can also be an error message! 290 |
291 | 292 |
293 | 294 |
295 | UI Bootstrap is included, so you can use tooltips and all of the other native Bootstrap JS components! 296 |
297 | 298 |
299 | 300 |
301 |
302 | 303 |
304 | 305 | 306 |
307 |
308 |
I'm an input mask!
309 |
310 |
311 |
312 | I'm a properly padded inline message! 313 |
314 |
315 |
316 |
317 | 318 |
319 |
320 |
321 |
322 |
323 |
324 | Loading Directive 325 | SpinKit 326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 | 337 | 338 | 339 |
340 |
341 |
342 | 343 | 344 | -------------------------------------------------------------------------------- /src/fonts/montserrat-regular-webfont.svg: -------------------------------------------------------------------------------- 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 | 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 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | 1034 | 1035 | 1036 | 1037 | 1038 | 1039 | 1040 | 1041 | 1042 | 1043 | 1044 | 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | 1065 | 1066 | 1067 | 1068 | 1069 | 1070 | 1071 | 1072 | 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 | 1095 | 1096 | 1097 | 1098 | 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | 1107 | 1108 | 1109 | 1110 | 1111 | 1112 | 1113 | 1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | 1139 | 1140 | 1141 | 1142 | 1143 | 1144 | 1145 | 1146 | 1147 | 1148 | 1149 | 1150 | 1151 | 1152 | 1153 | 1154 | 1155 | 1156 | 1157 | 1158 | 1159 | 1160 | 1161 | 1162 | 1163 | 1164 | 1165 | 1166 | 1167 | 1168 | 1169 | 1170 | 1171 | 1172 | 1173 | 1174 | 1175 | 1176 | 1177 | 1178 | 1179 | 1180 | 1181 | 1182 | 1183 | 1184 | 1185 | 1186 | 1187 | 1188 | 1189 | 1190 | 1191 | 1192 | 1193 | 1194 | 1195 | 1196 | 1197 | 1198 | 1199 | 1200 | 1201 | 1202 | 1203 | 1204 | 1205 | 1206 | 1207 | 1208 | 1209 | 1210 | 1211 | 1212 | 1213 | 1214 | 1215 | 1216 | 1217 | 1218 | 1219 | 1220 | 1221 | 1222 | 1223 | 1224 | 1225 | 1226 | 1227 | 1228 | 1229 | 1230 | 1231 | 1232 | 1233 | 1234 | 1235 | 1236 | 1237 | 1238 | 1239 | 1240 | 1241 | 1242 | 1243 | 1244 | 1245 | 1246 | 1247 | 1248 | 1249 | 1250 | 1251 | 1252 | 1253 | 1254 | 1255 | 1256 | 1257 | 1258 | 1259 | 1260 | 1261 | 1262 | 1263 | 1264 | 1265 | 1266 | 1267 | 1268 | 1269 | 1270 | 1271 | 1272 | 1273 | 1274 | 1275 | 1276 | 1277 | 1278 | 1279 | 1280 | 1281 | 1282 | 1283 | 1284 | 1285 | 1286 | 1287 | 1288 | 1289 | 1290 | 1291 | 1292 | 1293 | 1294 | 1295 | 1296 | 1297 | 1298 | 1299 | 1300 | 1301 | 1302 | 1303 | 1304 | 1305 | 1306 | 1307 | 1308 | 1309 | 1310 | 1311 | 1312 | 1313 | 1314 | 1315 | 1316 | 1317 | --------------------------------------------------------------------------------