Skip to content

chart.js module #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
ef7fb43
Allow to configure fonts path
Aug 27, 2014
bb86cbc
Merge pull request #65 from rkintzi/develop
Ehesp Aug 27, 2014
7cc649e
fixed minor typo
bertyhell Aug 20, 2014
c60810c
Updated Readme & Remove unused sidebar links
Ehesp Aug 31, 2014
adde73a
Added widget js files to gulp build block. Fixes #66
Sep 1, 2014
bcc3830
Added widget directives to index.html.
Sep 1, 2014
d49ddaa
Added repository to pacakge.json to fix npm warning.
Sep 1, 2014
5a00cf8
Merge pull request #68 from mgoldsborough/widget-directives
mgoldsborough Sep 1, 2014
ded84e1
Gulp optimizations to combine and minify js/css files.
Sep 1, 2014
a12f641
Gulp task to prepend generated js files with ```use strict```
Sep 1, 2014
82ce8d7
Added to contributors
Sep 1, 2014
9375175
Merge pull request #72 from mgoldsborough/contrib
Ehesp Sep 1, 2014
65c8de3
Merge pull request #69 from mgoldsborough/repository
mgoldsborough Sep 6, 2014
5cad328
Merge branch 'develop' into optimize-gulp
Sep 11, 2014
90faad7
Merge pull request #70 from mgoldsborough/optimize-gulp
mgoldsborough Sep 11, 2014
ad8451c
Merge pull request #71 from mgoldsborough/use-strict
mgoldsborough Sep 11, 2014
4f4c5b4
Added css animation to sidebar-title and sidebar-footer
mohatt Oct 3, 2014
a949193
Merge pull request #79 from mdkholy/sidebar-css
Ehesp Oct 3, 2014
ffa0dfc
ignore idea folder
rdpascua Oct 4, 2014
3b6b856
fix merge conflict
rdpascua Oct 4, 2014
c49810b
optimize less
rdpascua Oct 4, 2014
d03d318
Merge pull request #80 from Ehesp/less-refactor
Ehesp Oct 24, 2014
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,6 @@ Icon

# Bower components
/src/bower_components

# IDEA
/.idea
92 changes: 59 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,51 +1,47 @@
## AngularJS + Bootstrap Responsive Dashboard

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.
This AngularJS driven dashboard was created as there is a lack of free, open-source, readable and bloat free admin templates. Many premium templates require a lot of hackery out of the box - this template is intended to have only the extra features we think are needed to get up and running as quick as possible.

Compatibility/Tested:
* Chrome, Firefox, IE 11+
* Works best on screen sizes greater than ~335px
> [Live Demo!](http://ehesp.github.io/Responsive-Dashboard)

[Responsive Screenshots](http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-Dashboard/)
[*Want the dashboard without AngularJS and build functionality?*](https://github.com/Ehesp/Responsive-Dashboard/tree/barebones)

Live Example:
* http://ehesp.github.io/Responsive-Dashboard/

> jQuery version available on the [jQuery branch](https://github.com/Ehesp/Responsive-Dashboard/tree/jquery)!

### Usage

Simply clone, or download and unzip this repository and access the dist folder via your browser. There is only one page on show (`index.html`), and the relevant sections have been commented.

### Development

Requirements:
### Requirements
* [Node](http://nodejs.org/)
* [NPM](http://npmjs.org/)

The project uses:
### Usage

This project uses the following tools:
* [Gulp](http://gulpjs.com/)
* [Bower](http://bower.io/)
* [AngularJS](https://angularjs.org/)

#### Getting Started

Clone the repo, run `npm install` to install all dependencies.
After that you can either:
- Run `node_mopdules/.bin/gulp build` to build the project.
- Run `node_mopdules/.bin/gulp` to start a local webserver with **AWESOME** automatic compilation and [Livereload](http://livereload.com/) (We use [gulp-connect](https://github.com/avevlad/gulp-connect)).
1. Clone the repository and run `npm install` to install all dependencies. This will also run the `bower install` automatically after completion.
2. There are now two `gulp` commands to choose from:
- `node_modules/.bin/gulp build` to build the project.
- `node_modules/.bin/gulp` to start a local webserver with **AWESOME** automatic compilation and [Livereload](http://livereload.com/) (We use [gulp-connect](https://github.com/avevlad/gulp-connect)).
3. The files will now be built into the `dist` directory.

### Styling

### Stylesheets
Currently, only the sidebar colours can be easily be changed. [LESS](http://lesscss.org/) is used for styling so we take advantage of variables - checkout `src/less/dashboard/variables.less` and change the sidebar base colour, the others will be converted for you.

#### Theme
#### Hamburg Menu

Responsive Dashboard uses [LESS](http://lesscss.org/) for styling so we take advantage of variables to theme the dashboard. Take a look at `src/less/dashboard/variables.less` and customize with your own colors.
By default the responsive dashboard menu on a small sized screen sticks to the left side of the screen. If you wish the menu to have 'native app' menu functionality, where the sidebar overlaps the content from the left and side, simply add the `hamburg` class to the body:

#### Bootstrap + Font Awesome
```HTML
<body class="hamburg">
```

The grid layout and components are powered by [Bootstrap](http://getbootstrap.com/), also Font Awesome icons are ready to use.
### Bootstrap & Font Awesome

##### Widgets
The grid layout and components are powered by [Bootstrap](http://getbootstrap.com/), also [Font Awesome](http://fontawesome.io/) icons are ready to use.

#### Widgets

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:

Expand All @@ -60,7 +56,7 @@ Any content can be inside a `widget-body`, which will be padded by default. Thre

> If no size is set, the content will expand vertically based on content size.

###### Widget Body
##### Widget Body

**Padding**

Expand Down Expand Up @@ -106,14 +102,44 @@ Usage of the directive: `<rd-loading></rd-loading>` or `<div rd-loading></div>`

If you want to change it, simply replace the template and CSS!

#### Widget component
##### Widget component

Usage:
Instead of hardcoding the widget HTML directly, AngularJS widget component functionality is ready to use:

```HTML
<rd-widget>
<rd-widget-header icon="fa-tasks" title="Awesome Widget">
<a href="#" class="pull-right">Widget Link</a>
</rd-widget-header>
<!-- Classes are optional but allow you to style the widget-body. -->
<rd-widget-body classes="medium no-padding">
<p>Hello world from a widget!</p>
</rd-widget-body>
</rd-widget>
```

Loading widget

```HTML
<rd-widget>
<rd-widget-header title="Hello World"><rd-widget-header>
<!-- The if the loading parameter is true, it will show an spinner instead of the content.-->
<rd-widget-body loading="true">Hello Universe<rd-widget-body>
<rd-widget>
```
</rd-widget>
```


### FAQ

#### What is the dashboard compatible with?

The dashboard uses CSS3 for animations along with other style enhancements meaning browsers supporting this (Chrome, Firefox, IE11+) are compatible.
As for smaller screen sizes, the dashboard works best on screen sizes greater than ~335px.

#### Any screenshots?

Checkout [am-i-responsive](http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-Dashboard), this doesn't have the Hamburg menu enabled though.

#### I don't want to use AngularJS or NPM/Bower/Gulp!

No worries, theres a barebones branch available with the basic HTML and CSS!
125 changes: 89 additions & 36 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,120 @@
var gulp = require('gulp'),
less = require('gulp-less'),
usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
watch = require('gulp-watch'),
concat = require('gulp-concat'),
insert = require('gulp-insert'),
uglify = require('gulp-uglify'),
connect = require('gulp-connect'),
watch = require('gulp-watch');
cssmin = require('gulp-minify-css'),
templates = require('gulp-angular-templates');

var vendors = [
'src/bower_components/angular/angular.js',
'src/bower_components/angular-cookies/angular-cookies.js',
'src/bower_components/angular-bootstrap/ui-bootstrap.js',
'src/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'src/bower_components/angular-ui-router/release/angular-ui-router.js',
];

var styles = [
'src/bower_components/bootstrap/dist/css/bootstrap.css',
'src/bower_components/font-awesome/css/font-awesome.css',
'src/less/dashboard/variables.less',
'src/less/dashboard/mixins.less',
'src/less/dashboard/main.less',
'src/less/dashboard/loading.less',
'src/less/dashboard/content.less',
'src/less/dashboard/header.less',
'src/less/dashboard/sidebar.less',
'src/less/dashboard/widgets.less',
'src/less/dashboard/hamburg.less',
];

var fonts = [
'src/fonts/**.*',
'src/bower_components/bootstrap/dist/fonts/*.{ttf,woff,eof,svg}',
'src/bower_components/font-awesome/fonts/*.{ttf,woff,eof,svg}'
];

var paths = {
js: 'src/js/**/*.*',
fonts: 'src/fonts/**.*',
js: ['src/js/**/*.*', 'dist/js/templates.js'],
files: ['src/index.html'],
images: 'src/img/**/*.*',
styles: 'src/less/**/*.less',
index: 'src/index.html',
bower_fonts: 'src/bower_components/**/*.{ttf,woff,eof,svg}',
bower_components: 'src/bower_components/**/*.*',
templates: 'src/templates/**/*.html',
fonts: fonts,
styles: styles,
vendors: vendors
};

// The name of the Angular module which will be injected into the templates.
var moduleName = 'Dashboard';

gulp.task('usemin', function() {
return gulp.src(paths.index)
.pipe(usemin({
less: ['concat', less()],
js: ['concat', wrap('(function(){ \n<%= contents %>\n})();')],
}))
.pipe(gulp.dest('dist/'));
// Minify and copy all 3rd party libs to vendors.min.js
gulp.task('copy-vendors', function() {
return gulp.src(paths.vendors)
.pipe(uglify())
.pipe(concat('vendors.min.js'))
.pipe(gulp.dest('dist/js'));
});

/**
* Copy assets
*/
gulp.task('copy-assets', ['copy-images', 'copy-fonts', 'copy-bower_fonts']);
// Minify and copy all dashboard script files to dashboard.min.js
gulp.task('copy-scripts', function() {
return gulp.src(paths.js)
.pipe(uglify())
.pipe(concat('dashboard.min.js'))
.pipe(insert.prepend('\'use strict\';'))
.pipe(gulp.dest('dist/js'));
});

// Minify and copy all angular templates to templates.min.js
gulp.task('copy-templates', function() {
return gulp.src(paths.templates)
.pipe(templates({module: moduleName}))
.pipe(uglify())
.pipe(concat('templates.min.js'))
.pipe(insert.prepend('\'use strict\';'))
.pipe(gulp.dest('dist/js'));
});

// Copy all static/HTML files to output directory
gulp.task('copy-files', function(){
return gulp.src(paths.files)
.pipe(gulp.dest('dist'));
});

// Copy all images to output directory
gulp.task('copy-images', function(){
return gulp.src(paths.images)
.pipe(gulp.dest('dist/img'));
});

// Copy all fonts to output directory
gulp.task('copy-fonts', function(){
return gulp.src(paths.fonts)
.pipe(gulp.dest('dist/fonts'));
});

gulp.task('copy-bower_fonts', function(){
return gulp.src(paths.bower_fonts)
.pipe(gulp.dest('dist/lib'));
// Compile less styles into dashboard.css
gulp.task('compile-less', function(){
return gulp.src(paths.styles)
.pipe(less())
.pipe(cssmin())
.pipe(concat('dashboard.min.css'))
.pipe(gulp.dest('dist/css'));
});

/**
* Watch src
*/
gulp.task('watch', function () {
gulp.watch([paths.styles, paths.index, paths.js], ['usemin']);
gulp.watch([paths.images], ['copy-images']);
gulp.watch([paths.fonts], ['copy-fonts']);
gulp.watch([paths.bower_fonts], ['copy-bower_fonts']);
gulp.watch(paths.vendors, ['copy-vendors']);
gulp.watch(paths.js, ['copy-scripts']);
gulp.watch(paths.templates, ['copy-templates']);
gulp.watch(paths.files, ['copy-files']);
gulp.watch(paths.images, ['copy-images']);
gulp.watch(paths.fonts, ['copy-fonts']);
gulp.watch(paths.styles, ['compile-less']);
});

gulp.task('webserver', function() {
Expand All @@ -68,14 +130,5 @@ gulp.task('livereload', function() {
.pipe(connect.reload());
});

/**
* Compile less
*/
gulp.task('compile-less', function(){
return gulp.src(paths.styles)
.pipe(less())
.pipe(gulp.dest('dist/css'));
});

gulp.task('build', ['usemin', 'copy-assets']);
gulp.task('build', ['copy-vendors', 'copy-scripts', 'copy-templates', 'copy-files', 'copy-images', 'copy-fonts', 'compile-less']);
gulp.task('default', ['build', 'webserver', 'livereload', 'watch']);
13 changes: 11 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,28 @@
"name": "Responsive-Dashboard",
"version": "0.0.2",
"author": "Elliot Hesp",
"repository": {
"type": "git",
"url": "git://github.com/Ehesp/Responsive-Dashboard"
},
"contributors": [
"Leonel Samayoa <[email protected]> (http://gobliip.com)",
"Ricardo Pascua <[email protected]>"
"Ricardo Pascua <[email protected]>",
"Mathew Goldsborough <[email protected]>"
],
"scripts": {
"postinstall": "node node_modules/bower/bin/bower install"
},
"devDependencies": {
"bower": "^1.3.9",
"gulp": "~3.8.0",
"gulp-angular-templates": "^0.0.1",
"gulp-concat": "^2.3.4",
"gulp-connect": "^2.0.6",
"gulp-insert": "^0.4.0",
"gulp-less": "~1.3.3",
"gulp-usemin": "^0.3.7",
"gulp-minify-css": "^0.3.7",
"gulp-uglify": "^1.0.0",
"gulp-watch": "^0.6.9",
"gulp-wrap": "^0.3.0"
}
Expand Down
Loading