/dashboard

Windows 8 Style Dashboard

This repository contains the source code of a Windows 8 style dashboard built with AngularJS, bootstrap, gridster, and angular-carousel.

Demo

It's hosted here.

UI Interaction

Manipulate the cards

  • Resize Card: Move the cursor to a card's right, bottom, or right bottom corner, and then drag to resize
  • Move Card: Click and drag the card

Add more slides

  • Click the plus sign icon on the left
  • Type in the number of cards
  • Click the save button

Move slides

  • Use left/right arrow key
  • Use mouse click on the top/bottom area (not on cards) and drag to left/right

For Touch Devices

It seems to be working for Android Jelly Bean. To move the card, touch, and hold for a brief moment, then move the card. To resize, just touch the bottom right corner and move. To move slide, touch and move.

Development

Overview of Folder Structure

app Contains the source code for the Website

  • css CSS files used by the site, but they are generated by the .less files in the less folder
  • less less files for generating CSS files
  • img Images
  • js JavaScripts files and template files
    • data Data used by the charts or views
    • extension Extensions for libraries in the lib folder
    • lib Libraries
    • views Controllers and view partials

Grunt Configuration

Based on Thomas Boyt's[More maintainable Gruntfiles](http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html), I split the Gruntfile.js into files under tasks` folder. I think it's more maintainable.

Build

To build the package, you have to have node.js installed, then in command line console, run the followings steps once:

  • go to portfolio-site folder
  • (if grunt-cli is not installed) run npm install -g grunt-cli
  • run npm install

Now, you can build your project with running grunt build. The output folder is dist, you can change it in the config variable of Gruntfile.js.

Less Files Compilation

grunt build compiles all less files to app-min.css. In development, you can run grunt watch, and all less files will be compiled in 2 seconds after you change a less file. You can change the delay period debounceDelay in tasks/options/watch.js.

Run the Website locally

If you have python installed, run the following steps in the command line console:

  • go to app folder
  • run python -m http.server (you can specify port number at the end as well, default is 8000)
  • go to your browser, and type in the localhost:8000 to the address bar
  • you should see the site running in the browser

License

MIT