Improvement/radiobutton

.travis.yml

@@ -0,0 +1,24 @@
+sudo: false
+
+language: node_js
+
+node_js:
+  - "4"
+
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+
+install:
+  - npm config set spin false
+  - npm install -g npm@3
+  - npm install -g gulp
+  - npm install -g bower
+
+  - npm install
+
+script:
+  - gulp build

CHANGELOG.md

@@ -1,3 +1,10 @@
+v1.2.0 - 16 May 2016
+--------------------
+- Refactoring to improve customization, fixes #22, #26
+- Add documentation
+- Sidebar refactoring, fixes #14, #15, #27
+- Bootstrap select refactoring #18
+
 v1.1.1 - 11 Apr 2016
 --------------------
 - Improved scrolling performance, fixes #2

README.md

@@ -1,26 +1,31 @@
-# Blur Admin HTML template
+[![Build Status](https://travis-ci.org/akveo/blur-admin.svg?branch=master)](https://travis-ci.org/akveo/blur-admin)
 
-Admin template made with ♥ by [Akveo team](http://akveo.com/).
+# BlurAdmin Angular admin panel front-end framework
 
-We put a lot of efforts to bring together latest and the most trending web design approaches, while creating this template.
-Every color, character or image was carefully selected by our team to provide the best experience possible.
-We're very proud of it and like it very much. We also hope that you will enjoy it as well.
+Customizable admin panel framework made with :heart: by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get latest news about this template first!
 
-It's just a first version, but we will continue development of this template to create not just another bootstrap customization, but the whole HTML framework that can be applied in a lot of places.
+### Demo
+**[Mint version demo](http://akveo.com/blur-admin-mint/)**             |  **[Blur version demo](http://akveo.com/blur-admin/)**
+:-------------------------:|:-------------------------:
+![Mint version demo](http://i.imgur.com/A3TMviJ.png)  |  ![Blur version demo](http://i.imgur.com/EAoiK2O.jpg)
 
-## Theme Demo
-![alt tag](http://i.imgur.com/yOZPlps.jpg)
-**[Template Demo](http://akveo.com/blur-admin/#/dashboard)**
+## Angular 2 version
+Here you can find Angular2 based version: [ng2-admin](https://github.com/akveo/ng2-admin).
 
-## Installation
+### Documentation
+Installation, customization and other useful articles: https://akveo.github.io/blur-admin/
+
+*If you have problems installing and just want to download JS and css files, you can find download links here*: http://akveo.github.io/blur-admin/articles/091-downloads/
+
+## How can I support developers?
+- Star our GitHub repo
+- Create pull requests, submit bugs, suggest new features or documentation updates
+- Follow us on [Twitter](https://twitter.com/akveo_inc)
+- Like our page on [Facebook](https://www.facebook.com/akveo/)
+
+## Can I hire you guys?
+Yes! We are available for hire. Visit [our homepage](http://akveo.com/) or simply leave us a note to contact@akveo.com. We will be happy to work with you!
 
-To build the template from scratch you will be required to have following tools
-* Download and install nodejs [https://nodejs.org](https://nodejs.org)
-* Open the console inside of extracted folder and run `npm install` to fetch all dependencies
-* Run `gulp` to build sources
-* Go to `release\` folder in check out your freshly made compiled files
-* Run `gulp serve` and enjoy the beauty!
-
 ## Features
 * Responsive layout
 * High resolution
@@ -29,7 +34,6 @@ To build the template from scratch you will be required to have following tools
 * Gulp build
 * AngularJS
 * Jquery
-* Jquery ui
 * Charts (amChart, Chartist, Chart.js, Morris)
 * Maps (Google, Leaflet, amMap)
 * etc
@@ -41,5 +45,4 @@ License
 ### From akveo
 
 Enjoy!
-
-Made with ♥ by [Akveo team](http://akveo.com/).
+We're always happy to hear your feedback.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "blur-admin",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "homepage": "https://github.com/1itvinka/blur-admin",
   "authors": [
     "akveo"
@@ -43,18 +43,21 @@
     "moment": "~2.10.6",
     "slimScroll": "jquery-slimscroll#~1.3.6",
     "angular-progress-button-styles": "~0.1.0",
-    "angular-ui-router": "~0.2.15",
+    "angular-ui-router": "~0.2.16",
     "angular-chart.js": "~0.8.8",
     "angular-chartist.js": "~3.3.12",
     "chartist": "0.9.5",
     "angular-morris-chart": "~1.1.0",
     "ionrangeslider": "~2.1.2",
-    "angular-bootstrap": "~0.14.3",
+    "angular-bootstrap": "~1.3.3",
     "angular-animate": "~1.4.8",
     "textAngular": "~1.4.6",
     "angular-xeditable": "~0.1.9",
     "ng-js-tree": "~0.0.7"
   },
+  "resolutions": {
+    "angular": "~1.4.8"
+  },
   "overrides": {
     "amcharts": {
       "main": [
@@ -78,7 +81,8 @@
     "bootstrap": {
       "main": [
         "dist/css/bootstrap.css",
-        "js/dropdown.js"
+        "js/dropdown.js",
+        "./dist/fonts/**.*"
       ]
     },
     "slimScroll": {

docs/config.json

@@ -0,0 +1,33 @@
+{
+  "baseUrl": "/blur-admin/",
+  "locals": {
+    "url": "http://localhost:8080",
+    "name": "The Wintersmith's blog",
+    "owner": "Someone",
+    "description": "Ramblings of an immor(t)al demigod"
+  },
+  "plugins": [
+    "./plugins/paginator.coffee"
+  ],
+  "require": {
+    "moment": "moment",
+    "_": "underscore",
+    "typogr": "typogr"
+  },
+  "jade": {
+    "pretty": true
+  },
+  "markdown": {
+    "smartLists": true,
+    "smartypants": true
+  },
+  "paginator": {
+    "perPage": 3,
+    "groupSort": {
+      "Quick Start": 1000,
+      "Customization": 900,
+      "Components": 800,
+      "Other": 100
+    }
+  }
+}

docs/contents/articles/001-getting-started/index.md

@@ -0,0 +1,43 @@
+---
+title: Getting Started
+author: vl
+sort: 999
+group: Quick Start
+template: article.jade
+---
+
+## What is BlurAdmin?
+
+Blur admin is Angular front-end Admin Dashboard template. That means all data you can see on graphs, charts tables is hardcoded in Javascript. You can use any backend you want with it without limitations.
+
+## How can it help me?
+
+We believe that that at the moment a lot of business applications have some kind of admin interface inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboard with panels, charts analytics.
+
+BlurAdmin aims to bootstrap development of your product and provide ecosystem for building a prototype or even production-ready application.
+
+Despite frameworks like Bootstrap provide a number of components, usually it's not enough of them to build real-world app. This template comes with lots of popular UI components with unified color scheme.
+
+As well you can use BlurAdmin for learning purposes.
+
+## List of features
+
+* Responsive layout
+* High resolution
+* Bootstrap CSS Framework
+* Sass
+* Gulp build
+* AngularJS
+* Jquery
+* Jquery ui
+* Charts (amChart, Chartist, Chart.js, Morris)
+* Maps (Google, Leaflet, amMap)
+* etc
+
+## I want to start developing with BlurAdmin
+
+Welcome abroad!
+
+You can start with [Installation Guidelines](/blur-admin/articles/002-installation-guidelines/). We describe there how can you download and run template on you local machine.
+
+Good luck and have fun!

docs/contents/articles/002-installation-guidelines/index.md

@@ -0,0 +1,46 @@
+---
+title: Installation Guidelines
+author: vl
+sort: 500
+group: Quick Start
+template: article.jade
+---
+
+## Prerequisites
+
+Despite BlurAdmin can be run without any development experience, it would be much easier if you already know something about it. In general following instruction do allow to run local copy by complete newbie, but it doesn't answer questions that can arise in the process of installation.
+
+## Install tools
+
+If you don't havee any of these tools installed already, you will need to:
+* Download and install [git](https://git-scm.com/)
+* Download and install nodejs [https://nodejs.org](https://nodejs.org)
+
+**Note**: It seems like there are some problems with some libraries used in this template and old node versions. That's why we suggest you to have one of the latest.
+
+## Clone repository and install dependencies
+
+You will need to clone source code of BlurAdmin GitHub repository. To do this open console and execute following lines:
+```bash
+git clone https://github.com/akveo/blur-admin.git
+```
+After repository is cloned, go inside of repository directory and install dependencies there:
+```bash
+cd blur-admin
+npm install
+```
+This will setup a working copy of BlurAdmin on your local machine
+
+## Running local copy
+
+To run local copy in development mode, execute:
+```bash
+gulp serve
+```
+This script should automatically open template in your default browser.
+
+To run local copy in production mode, execute:
+```bash
+gulp serve:dist
+```
+For addition information about build, please check out [this angular generator](https://github.com/Swiip/generator-gulp-angular)

docs/contents/articles/011-changing-color-scheme/index.md

@@ -0,0 +1,60 @@
+---
+title: Changing Color Scheme
+author: vl
+sort: 900
+group: Customization
+template: article.jade
+---
+
+We tried to make the process of changing color scheme in BlurAdmin as easy as possible. 
+
+By default BlurAdmin has two color profiles: mint and blur.
+This article will help you to create your own color profile.
+Let's say you want to make BlurAdmin dark.
+
+First we advice you to take some colorscheme file as a basis. 
+For light themes we suggest you to take `src/sass/theme/conf/colorScheme/_mint.scss` one and for dark take `src/sass/theme/conf/colorScheme/_blur.scss` one.
+As we want dark theme, we're taking `blur`.
+
+1) Copy `src/sass/theme/conf/colorScheme/_blur.scss` to `src/sass/theme/conf/colorScheme/_dark.scss`.
+
+2) Include your colorscheme file in `src/sass/theme/common.scs`.
+
+To do this, replace 
+```scss
+@import 'theme/conf/colorScheme/mint';
+```
+
+to
+
+```scss
+@import 'theme/conf/colorScheme/dark';
+```
+
+Now you can start changing your colors.
+For example, after playing a bit with different colors, we changed 5 first main variables in `_dark.scss` file:
+```sass
+$default: rgba(#000000, 0.2); //Panel background color
+$body-bg: #F0F3F4; // Body background color
+$default-text: #ffffff; // Default text color
+$help-text: #eeeeee; // Default subtext color
+$label-text: #ffffff; // Text for labels in forms (Basically it should be equal to default-text in most cases)
+```
+
+After this is done, you need to setup javascript to use **same colors** while building charts and other javascript components.
+To do this, add following code to some configuration block, for example to `src/app/theme/theme.config.js`:
+```javascript
+  baConfigProvider.changeColors({
+    default: '#4e4e55',
+    defaultText: '#e2e2e2',
+  });
+``` 
+
+That's basically it! Right now your admin application should look like this:
+
+![](new-color-scheme.jpg)
+
+For further reference, please look in
+- Colorscheme scss file (`src/sass/theme/conf/colorScheme/_mint.scss` or `src/sass/theme/conf/colorScheme/_blur.scss`)
+- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
+- If you want to know how to change theme to blur, read [following article](/blur-admin/articles/014-switch-to-blur-theme/)

docs/contents/articles/012-project-structure/index.md

@@ -0,0 +1,33 @@
+---
+title: Project Structure
+author: vl
+sort: 800
+group: Customization
+template: article.jade
+---
+
+Project structure was originally based on [this angular generator](https://github.com/Swiip/generator-gulp-angular). We made some changes we thought would be better for our particular problem.
+
+The directory structure of this template is as follows:
+```
+├── bower.json               <- front-end library dependencies
+├── gulpfile.js              <- main task runner file
+├── package.json             <- mostly task runner dependencies
+├── docs/                    <- wintersmith documentation generator
+├── gulp/                    <- build tasks
+├── src/                     <- main front-end assets
+│   ├── 404.html
+│   ├── auth.html
+│   ├── index.html          <- main app dashboard page
+│   ├── reg.html
+│   ├── app/                <- angular application files
+│   │   ├── app.js         <- angular application entry point. Used for managing dependencies
+│   │   ├── pages/         <- UI router pages. Pages created for demonstration purposes. Put your application js and html files here
+│   │   ├── theme/         <- theme components. Contains various common widgets, panels which used across application
+│   ├── assets/             <- static files (images, fonts etc.)
+│   ├── sass/               <- sass styles
+│   │   ├── app/           <- application styles. Used mostly for demonstration purposes. Put your app styles here.
+│   │   ├── theme/         <- theme styles. Used to customize bootstrap and other common components used in tempate.
+```
+
+In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need. Though we understand that our structure is not ideal, but we're aiming to make it as good as possible.