forked from invertase/rdash-angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from rdash/master
添加修改
- Loading branch information
Showing
41 changed files
with
572 additions
and
2,487 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| { | ||
| "directory" : "src/bower_components" | ||
| "directory" : "src/components" | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,36 @@ | ||
| ## AngularJS + Bootstrap Responsive Dashboard | ||
| # RDash rdash-angular | ||
| ## Responsive, bloat free, bootstrap powered admin style dashboard! | ||
| [](https://gitter.im/rdash/rdash-angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) | ||
|
|
||
| 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. | ||
| rdash-angular is an AngularJS implementation of the RDash admin dashboard. The dashboard uses a small number of modules to get you started, along with some handy directives and controllers to speed up development using the dashboard. | ||
|
|
||
| Compatibility/Tested: | ||
| * Chrome, Firefox, IE 11+ | ||
| * Works best on screen sizes greater than ~335px | ||
| Check out the live example! | ||
|
|
||
| [Responsive Screenshots](http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-Dashboard/) | ||
| ## Usage | ||
| ### Requirements | ||
| * [NodeJS](http://nodejs.org/) (with [NPM](https://www.npmjs.org/)) | ||
| * [Bower](http://bower.io) | ||
| * [Gulp](http://bower.io) | ||
|
|
||
| Live Example: | ||
| * http://ehesp.github.io/Responsive-Dashboard/ | ||
| ### Installation | ||
| 1. Clone the repository: `git clone https://github.com/rdash/rdash-angular.git` | ||
| 2. Install the NodeJS dependencies: `sudo npm install`. | ||
| 3. Install the Bower dependencies: `bower install`. | ||
| 4. Run the gulp build task: `gulp build`. | ||
| 5. Run the gulp default task: `gulp`. This will build any changes made automatically, and also run a live reload server on [http://localhost:8888](http://localhost:8080). | ||
|
|
||
| > 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. | ||
| Ensure your preferred web server points towards the `dist` directory. | ||
|
|
||
| ### Development | ||
| Continue developing the dashboard further by editing the `src` directory. With the `gulp` command, any file changes made will automatically be compiled into the specific location within the `dist` directory. | ||
|
|
||
| Requirements: | ||
| * [Node](http://nodejs.org/) | ||
| * [NPM](http://npmjs.org/) | ||
|
|
||
| The project uses: | ||
| * [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_modules/.bin/gulp build` to build the project. | ||
| - Run `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)). | ||
|
|
||
| ### Stylesheets | ||
|
|
||
| #### Theme | ||
|
|
||
| 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. | ||
|
|
||
| #### Bootstrap + Font Awesome | ||
|
|
||
| The grid layout and components are powered by [Bootstrap](http://getbootstrap.com/), also Font Awesome 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: | ||
|
|
||
| ```HTML | ||
| <div class="col-lg-3"> | ||
| <div class="widget"> | ||
| ``` | ||
|
|
||
| A widget has a `widget-title` and also a `widget-body` which can be used individually inside the widget. | ||
|
|
||
| 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: `<div class="widget-body medium">`. | ||
|
|
||
| > If no size is set, the content will expand vertically based on content size. | ||
| ###### Widget Body | ||
|
|
||
| **Padding** | ||
|
|
||
| Padding inside widgets is set to 20px. To remove this padding, apply the `no-padding` class on the widget body, e.g: `<div class="widget-body no-padding">`. | ||
|
|
||
| **Tables** | ||
|
|
||
| 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. | ||
|
|
||
| **Messages & Errors** | ||
|
|
||
| A message can be set within the body whether it has padding or not - simply place a `<div>` within the body with the class of `message`, e.g: | ||
|
|
||
| ```HTML | ||
| <div class="widget-body no-padding"> | ||
| <div class="message" ng-if="servers.length == 0"> | ||
| There are no servers in the application! | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| If you wish to set this text to red, to display an error for example, simply replace `message` with `error`, e.g: | ||
|
|
||
| ```HTML | ||
| <div class="widget-body no-padding"> | ||
| <div class="error" ng-if="error"> | ||
| An error occurred retrieving data from the server! | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### AngularJS | ||
|
|
||
| AngularJS is mainly 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 `src/js/dashboard/controllers/master-ctrl.js` file. | ||
|
|
||
| The idea is not for AngularJS to be used *just* to power this functionality, it's used to be compatible with your AngularJS project. | ||
|
|
||
| ##### Loading Directive | ||
|
|
||
| The loading 'spinner' is a simple directive created with AngularJS within the `src/js/dashboard/directives/loading.js` file which replaces an HTML element with a defined template. In this case, the HTML template is taken from [this awesome spinkit repo](http://tobiasahlin.com/spinkit/), and the CSS placed in the `src/less/dashboard/loading.less`. | ||
|
|
||
| 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 | ||
| #### Modules & Packages | ||
| By default, rdash-angular includes [`ui.bootstrap`](http://angular-ui.github.io/bootstrap/), [`ui.router`](https://github.com/angular-ui/ui-router) and [`ngCookies`](https://docs.angularjs.org/api/ngCookies). | ||
|
|
||
| Usage: | ||
| If you'd like to include any additional modules/packages not included with rdash-angular, add them to your `bower.json` file and then update the `src/index.html` file, to include them in the minified distribution output. | ||
|
|
||
| ```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> | ||
| ``` | ||
| ## Credits | ||
| * [Elliot Hesp](https://github.com/Ehesp) | ||
| * [Leonel Samayoa](https://github.com/lsamayoa) | ||
| * [Mathew Goldsborough](https://github.com/mgoldsborough) | ||
| * [Ricardo Pascua Jr](https://github.com/rdpascua) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,35 @@ | ||
| { | ||
| "name": "Responsive-Dashboard", | ||
| "version": "0.0.2", | ||
| "homepage": "https://github.com/Ehesp/Responsive-Dashboard", | ||
| "authors": [ | ||
| "Elliot Hesp <[email protected]>", | ||
| "Ricardo Pascua Jr <[email protected]>", | ||
| "Leonel Samayoa <[email protected]>" | ||
| ], | ||
| "description": "AngularJS + Bootstrap Responsive Dashboard", | ||
| "main": "index.html", | ||
| "license": "MIT", | ||
| "ignore": [ | ||
| "**/.*", | ||
| "node_modules", | ||
| "bower_components", | ||
| "test", | ||
| "tests" | ||
| ], | ||
| "dependencies": { | ||
| "angular": "~1.2.21", | ||
| "angular-cookies": "~1.2.21", | ||
| "angular-bootstrap": "~0.11.0", | ||
| "angular-ui-router": "^0.2.10", | ||
| "bootstrap": "~3.2.0", | ||
| "font-awesome": "~4.1.0" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/Ehesp/Responsive-Dashboard.git" | ||
| } | ||
| } | ||
| "name": "rdash-angular", | ||
| "version": "0.0.1", | ||
| "description": "An AngularJS implementation of the responsive dashboard", | ||
| "homepage": "https://github.com/Ehesp/Responsive-Dashboard", | ||
| "authors": [ | ||
| "Elliot Hesp <[email protected]>" | ||
| ], | ||
| "contributors": [ | ||
| "Ricardo Pascua Jr <[email protected]>", | ||
| "Leonel Samayoa <[email protected]>" | ||
| ], | ||
| "main": "index.html", | ||
| "license": "MIT", | ||
| "ignore": [ | ||
| "**/.*", | ||
| "node_modules", | ||
| "bower_components", | ||
| "test", | ||
| "tests" | ||
| ], | ||
| "dependencies": { | ||
| "rdash-ui": "1.0.*", | ||
| "angular": "~1.2.21", | ||
| "angular-cookies": "~1.2.21", | ||
| "angular-bootstrap": "~0.11.0", | ||
| "angular-ui-router": "^0.2.10", | ||
| "bootstrap": "~3.2.0", | ||
| "font-awesome": "~4.1.0" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/rdash/rdash-angular" | ||
| } | ||
| } |
Oops, something went wrong.