add an aside for filter caldendar in mobile

2024-12-01 12:24:28 +01:00 · 2016-07-18 16:31:14 +02:00 · 2016-07-18 16:31:14 +02:00 · 120df2e716
commit 120df2e716
parent 9638b775fc
27 changed files with 1419 additions and 65 deletions
--- a/app/assets/javascripts/app.js.erb
+++ b/app/assets/javascripts/app.js.erb
@ -20,7 +20,7 @@ angular.module('application', ['ngCookies', 'ngResource', 'ngSanitize', 'ngCooki
               'ui.select', 'ui.calendar', 'angularMoment', 'Devise', 'DeviseModal', 'angular-growl', 'xeditable',
               'checklist-model', 'unsavedChanges', 'angular-loading-bar', 'ngTouch', 'angular-google-analytics',
               'angularUtils.directives.dirDisqus', 'summernote', 'elasticsearch', 'angular-medium-editor', 'naif.base64',
-               'minicolors', 'pascalprecht.translate', 'ngFitText']).
+               'minicolors', 'pascalprecht.translate', 'ngFitText', 'ngAside']).
 config(['$httpProvider', 'AuthProvider', "growlProvider", "unsavedWarningsConfigProvider", "AnalyticsProvider", "uibDatepickerPopupConfig", "$provide", "$translateProvider",
    function($httpProvider, AuthProvider, growlProvider, unsavedWarningsConfigProvider, AnalyticsProvider, uibDatepickerPopupConfig, $provide, $translateProvider) {

--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@ -67,6 +67,7 @@
 //= require messageformat/messageformat
 //= require angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat
 //= require ngFitText/dist/ng-FitText.min
+//= require angular-aside/dist/js/angular-aside
 //= require_tree ./controllers
 //= require_tree ./services
 //= require_tree ./directives
--- a/app/assets/javascripts/controllers/calendar.coffee
+++ b/app/assets/javascripts/controllers/calendar.coffee
@ -4,8 +4,8 @@
 # Controller used in the public calendar global
 ##

-Application.Controllers.controller "CalendarController", ["$scope", "$state", "$uibModal", "moment", "Availability", 'Slot', 'Setting', 'growl', 'dialogs', 'bookingWindowStart', 'bookingWindowEnd', '_t', 'uiCalendarConfig', 'CalendarConfig', 'trainingsPromise', 'machinesPromise',
-($scope, $state, $uibModal, moment, Availability, Slot, Setting, growl, dialogs, bookingWindowStart, bookingWindowEnd, _t, uiCalendarConfig, CalendarConfig, trainingsPromise, machinesPromise) ->
+Application.Controllers.controller "CalendarController", ["$scope", "$state", "$aside", "moment", "Availability", 'Slot', 'Setting', 'growl', 'dialogs', 'bookingWindowStart', 'bookingWindowEnd', '_t', 'uiCalendarConfig', 'CalendarConfig', 'trainingsPromise', 'machinesPromise',
+($scope, $state, $aside, moment, Availability, Slot, Setting, growl, dialogs, bookingWindowStart, bookingWindowEnd, _t, uiCalendarConfig, CalendarConfig, trainingsPromise, machinesPromise) ->


  ### PRIVATE STATIC CONSTANTS ###
@ -13,6 +13,9 @@ Application.Controllers.controller "CalendarController", ["$scope", "$state", "$
  machinesPromise.forEach((m) -> m.checked = true)
  trainingsPromise.forEach((t) -> t.checked = true)

+  ## check all formation/machine is select in filter
+  isSelectAll = (type, scope) ->
+    scope[type].length == scope[type].filter((t) -> t.checked).length

  ### PUBLIC SCOPE ###

@ -22,35 +25,64 @@ Application.Controllers.controller "CalendarController", ["$scope", "$state", "$
  ## List of machines
  $scope.machines = machinesPromise

-  ## variable for filter event
-  $scope.evt = true
-
-  ## variable for show/hidden slot no dispo
-  $scope.dispo = true
-
  ## add availabilities source to event sources
  $scope.eventSources = []

  ## filter availabilities if have change
-  $scope.filterAvailabilities = ->
-    $scope.filter =
-      trainings: $scope.isSelectAll('trainings')
-      machines: $scope.isSelectAll('machines')
+  $scope.filterAvailabilities = (filter, scope) ->
+    scope ||= $scope
+    scope.filter = $scope.filter =
+      trainings: isSelectAll('trainings', scope)
+      machines: isSelectAll('machines', scope)
+      evt: filter.evt
+      dispo: filter.dispo
    $scope.calendarConfig.events = availabilitySourceUrl()

-  ## check all formation/machine is select in filter
-  $scope.isSelectAll = (type) ->
-    $scope[type].length == $scope[type].filter((t) -> t.checked).length

-  ## a variable for formation/machine checkbox is or not checked
+  ## a variable for formation/machine/event/dispo checkbox is or not checked
  $scope.filter =
-    trainings: $scope.isSelectAll('trainings')
-    machines: $scope.isSelectAll('machines')
+    trainings: isSelectAll('trainings', $scope)
+    machines: isSelectAll('machines', $scope)
+    evt: true
+    dispo: true

  ## toggle to select all formation/machine
-  $scope.toggleFilter = (type) ->
-    $scope[type].forEach((t) -> t.checked = $scope.filter[type])
-    $scope.filterAvailabilities()
+  $scope.toggleFilter = (type, filter) ->
+    $scope[type].forEach((t) -> t.checked = filter[type])
+    $scope.filterAvailabilities(filter, $scope)
+
+  $scope.openFilterAside = ->
+    $aside.open
+      templateUrl: 'filterAside.html'
+      placement: 'right'
+      size: 'md'
+      backdrop: false
+      resolve:
+        trainings: ->
+          $scope.trainings
+        machines: ->
+          $scope.machines
+        filter: ->
+          $scope.filter
+        toggleFilter: ->
+          $scope.toggleFilter
+        filterAvailabilities: ->
+          $scope.filterAvailabilities
+      controller: ['$scope', '$uibModalInstance', 'trainings', 'machines', 'filter', 'toggleFilter', 'filterAvailabilities', ($scope, $uibModalInstance, trainings, machines, filter, toggleFilter, filterAvailabilities) ->
+        $scope.trainings = trainings
+        $scope.machines = machines
+        $scope.filter = filter
+
+        $scope.toggleFilter = (type, filter) ->
+          toggleFilter(type, filter)
+
+        $scope.filterAvailabilities = (filter) ->
+          filterAvailabilities(filter, $scope)
+
+        $scope.close = (e) ->
+          $uibModalInstance.dismiss()
+          e.stopPropagation()
+      ]


  ### PRIVATE SCOPE ###
@ -104,7 +136,7 @@ Application.Controllers.controller "CalendarController", ["$scope", "$state", "$
  getFilter = ->
    t = $scope.trainings.filter((t) -> t.checked).map((t) -> t.id)
    m = $scope.machines.filter((m) -> m.checked).map((m) -> m.id)
-    {t: t, m: m, evt: $scope.evt, dispo: $scope.dispo}
+    {t: t, m: m, evt: $scope.filter.evt, dispo: $scope.filter.dispo}

  availabilitySourceUrl = ->
    "/api/availabilities/public?#{$.param(getFilter())}"
--- a/app/assets/stylesheets/app.colors.scss
+++ b/app/assets/stylesheets/app.colors.scss
@ -36,3 +36,6 @@
 .text-blue { color: $blue; }
 .text-muted { color: $text-muted; }
 .text-danger, .red { color: $red !important; }
+.text-purple { color: $violet !important; }
+.text-japonica { color: $japonica !important; }
+.text-beige { color: $beige !important; }
--- a/app/assets/stylesheets/app.layout.scss
+++ b/app/assets/stylesheets/app.layout.scss
@ -605,3 +605,13 @@ body.container{
  text-align: center;
  height: 50px;
 }
+
+.calendar-filter {
+  h3 {
+    line-height: 2.1rem !important;
+  }
+}
+
+.calendar-filter-aside {
+  padding: 20px;
+}
--- a/app/assets/stylesheets/app.utilities.scss
+++ b/app/assets/stylesheets/app.utilities.scss
@ -342,6 +342,7 @@ p, .widget p {

@media screen and (min-width: $screen-lg-min) {
  .b-r-lg {border-right: 1px solid $border-color; }
+  .hide-b-r-lg { border: none !important; }
 }


--- a/app/assets/stylesheets/application.scss.erb
+++ b/app/assets/stylesheets/application.scss.erb
@ -13,6 +13,7 @@
 *= require bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min
 *= require summernote/dist/summernote
 *= require jquery-minicolors/jquery.minicolors.css
+ *= require angular-aside/dist/css/angular-aside
 */

@import "app.functions";
--- a/app/assets/templates/calendar/calendar.html.erb
+++ b/app/assets/templates/calendar/calendar.html.erb
@ -5,18 +5,18 @@
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
-    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
+    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md hide-b-r-lg">
      <section class="heading-title">
        <h1 translate>{{ 'calendar' }}</h1>
      </section>
    </div>

-    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
-      <section class="heading-actions wrapper">
-        <span class="badge text-sm bg-formation m-t" translate>{{ 'trainings' }}</span>
-        <span class="badge text-sm bg-machine" translate>{{ 'machines' }}</span>
-        <span class="badge text-sm bg-event" translate>{{ 'events' }}</span>
-      </section>
+    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md hidden-lg">
+      <div class="heading-actions wrapper">
+        <button type="button" class="btn btn-default m-t m-b" ng-click="openFilterAside()">
+          <span class="fa fa-filter"></span> {{ 'filter-calendar' | translate }}
+        </button>
+      </div>
    </div>

  </div>
@ -24,47 +24,39 @@


 <section class="row no-gutter">
+  <div class="hidden-lg">
+    <div class="row">
+      <div class="col-sm-12 col-md-12">
+      </div>
+    </div>
+  </div>

-  <div class="col-sm-9 col-md-9 col-lg-9">
+  <div class="col-sm-12 col-md-12 col-lg-9">
    <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg public-calendar"></div>
  </div>

-  <div class="col-sm-12 col-md-3 col-lg-3">
+  <div class="col-lg-3 hidden-md hidden-sm hidden-xs">
    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
-        <h3 translate>{{ 'filter' }}</h3>
+        <h3 translate>{{ 'filter-calendar' }}</h3>
      </div>
-      <div class="widget-content no-bg auto wrapper">
-        <div>
-          <div class="row">
-            <h3 class="col-md-11" translate>{{ 'trainings' }}</h3>
-            <input class="col-md-1" type="checkbox" ng-model="filter.trainings" ng-change="toggleFilter('trainings')">
-          </div>
-          <div ng-repeat="t in trainings" class="row">
-            <span class="col-md-11">{{::t.name}}</span>
-            <input class="col-md-1" type="checkbox" ng-model="t.checked" ng-change="filterAvailabilities()">
-          </div>
-        </div>
-        <div class="m-t">
-          <div class="row">
-            <h3 class="col-md-11" translate>{{ 'machines' }}</h3>
-            <input class="col-md-1" type="checkbox" ng-model="filter.machines" ng-change="toggleFilter('machines')">
-          </div>
-          <div ng-repeat="m in machines" class="row">
-            <span class="col-md-11">{{::m.name}}</span>
-            <input class="col-md-1" type="checkbox" ng-model="m.checked" ng-change="filterAvailabilities()">
-          </div>
-        </div>
-        <div class="m-t row">
-          <h3 class="col-md-11" translate>{{ 'events' }}</h3>
-          <input class="col-md-1" type="checkbox" ng-model="evt" ng-change="filterAvailabilities()">
-        </div>
-        <div class="m-t row">
-          <h3 class="col-md-11" translate>{{ 'show_no_disponible' }}</h3>
-          <input class="col-md-1" type="checkbox" ng-model="dispo" ng-change="filterAvailabilities()">
-        </div>
+      <div class="widget-content no-bg auto wrapper calendar-filter">
+        <ng-include src="'<%= asset_path 'calendar/filter.html' %>'"></ng-include>
      </div>
    </div>
  </div>

 </section>
+
+
+<script type="text/ng-template" id="filterAside.html">
+  <div class="widget">
+    <div class="modal-header">
+      <button type="button" class="close" ng-click="close($event)"><span>&times;</span></button>
+      <h1 class="modal-title" translate>{{ 'filter-calendar' }}</h1>
+    </div>
+    <div class="modal-body widget-content calendar-filter calendar-filter-aside">
+      <ng-include src="'<%= asset_path 'calendar/filter.html' %>'"></ng-include>
+    </div>
+  </div>
+</script>
--- a/app/assets/templates/calendar/filter.html.erb
+++ b/app/assets/templates/calendar/filter.html.erb
@ -0,0 +1,28 @@
+<div>
+  <div class="row">
+    <h3 class="col-md-11 col-sm-11 col-xs-11 text-purple" translate>{{ 'trainings' }}</h3>
+    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.trainings" ng-change="toggleFilter('trainings', filter)">
+  </div>
+  <div ng-repeat="t in trainings" class="row">
+    <span class="col-md-11 col-sm-11 col-xs-11">{{::t.name}}</span>
+    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="t.checked" ng-change="filterAvailabilities(filter)">
+  </div>
+</div>
+<div class="m-t">
+  <div class="row">
+    <h3 class="col-md-11 col-sm-11 col-xs-11 text-beige" translate>{{ 'machines' }}</h3>
+    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.machines" ng-change="toggleFilter('machines', filter)">
+  </div>
+  <div ng-repeat="m in machines" class="row">
+    <span class="col-md-11 col-sm-11 col-xs-11">{{::m.name}}</span>
+    <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="m.checked" ng-change="filterAvailabilities(filter)">
+  </div>
+</div>
+<div class="m-t row">
+  <h3 class="col-md-11 col-sm-11 col-xs-11 text-japonica" translate>{{ 'events' }}</h3>
+  <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.evt" ng-change="filterAvailabilities(filter)">
+</div>
+<div class="m-t row">
+  <h3 class="col-md-11 col-sm-11 col-xs-11 text-black" translate>{{ 'show_no_disponible' }}</h3>
+  <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.dispo" ng-change="filterAvailabilities(filter)">
+</div>
--- a/bower.json
+++ b/bower.json
@ -53,7 +53,8 @@
    "angular-translate-interpolation-messageformat": "~2.8.1",
    "messageformat": "=0.1.8",
    "moment-timezone": "~0.5.0",
-    "ngFitText": "~4.1.1"
+    "ngFitText": "~4.1.1",
+    "angular-aside": "^1.3.2"
  },
  "resolutions": {
    "jquery": ">=1.10.2",
--- a/config/locales/app.public.en.yml
+++ b/config/locales/app.public.en.yml
@ -232,3 +232,4 @@ en:
      calendar:
        calendar: "Calendar"
        show_no_disponible: "Show the slots no disponibles"
+        filter-calendar: "Filter calendar"
--- a/config/locales/app.public.fr.yml
+++ b/config/locales/app.public.fr.yml
@ -234,3 +234,4 @@ fr:
      calendar:
        calendar: "Calendrier"
        show_no_disponible: "Afficher les crénaux non disponibles"
+        filter-calendar: "Filtrer le calendier"
--- a/vendor/assets/components/angular-aside/.bower.json
+++ b/vendor/assets/components/angular-aside/.bower.json
@ -0,0 +1,49 @@
+{
+  "name": "angular-aside",
+  "version": "1.3.2",
+  "homepage": "https://github.com/dbtek/angular-aside",
+  "author": {
+    "name": "İsmail Demirbilek",
+    "email": "ce.demirbilek@gmail.com"
+  },
+  "description": "Off canvas side menu to use with ui-bootstrap.",
+  "main": [
+    "dist/js/angular-aside.js",
+    "dist/css/angular-aside.css"
+  ],
+  "keywords": [
+    "aside",
+    "off",
+    "canvas",
+    "menu",
+    "ui",
+    "bootstrap"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "Gruntfile.js",
+    "karma.conf.js",
+    "package.json"
+  ],
+  "dependencies": {
+    "angular-bootstrap": ">=0.14.0"
+  },
+  "devDependencies": {
+    "angular-mocks": ">=1.4.0"
+  },
+  "_release": "1.3.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.3.2",
+    "commit": "6093a98f325fbb606325da92a32b74b84aee7254"
+  },
+  "_source": "https://github.com/dbtek/angular-aside.git",
+  "_target": "^1.3.2",
+  "_originalSource": "angular-aside",
+  "_direct": true
+}
--- a/vendor/assets/components/angular-aside/LICENSE
+++ b/vendor/assets/components/angular-aside/LICENSE
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 İsmail Demirbilek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/vendor/assets/components/angular-aside/README.md
+++ b/vendor/assets/components/angular-aside/README.md
@ -0,0 +1,55 @@
+angular-aside ![bower version](http://img.shields.io/bower/v/angular-aside.svg) [![npm version](https://badge.fury.io/js/angular-aside.svg)](https://www.npmjs.com/package/angular-aside)
+=============
+
+Off canvas side menu for use with ui-bootstrap 0.14+. Extends ui-bootstrap's `$uibModal` provider.
+
+:information_desk_person: Please use v1.2.x for ui-bootstrap versions 0.13 and below.
+
+###[Live Demo](http://plnkr.co/edit/G7vMSv?p=preview)
+
+##Install
+
+#### Bower:
+```bash
+ $ bower install angular-aside
+```
+Then, include css/js in html.
+
+#### NPM
+```bash
+ $ npm install angular-aside
+```
+
+##Usage
+
+```js
+ angular.module('myApp', ['ui.bootstrap', 'ngAside']);
+```
+
+```js
+angular.module('myApp')
+  .controller('MyController', function($scope, $aside) {
+    var asideInstance = $aside.open({
+      templateUrl: 'aside.html',
+      controller: 'AsideCtrl',
+      placement: 'left',
+      size: 'lg'
+    });
+  });
+```
+
+Supports all configuration that `$uibModal` has. Can be used with both `template` and `templateUrl`. For more info hit **Modal** section on [angular-ui bootstrap](http://angular-ui.github.io/bootstrap) documentation.
+
+
+##Additional Config
+- `placement` - Aside placement can be `'left'`, `'right'`, `'top'`, or `'bottom'`.
+
+
+##Credits
+- [Angular UI Bootstrap](angular-ui.github.io/bootstrap/)
+- [Animate.css](http://daneden.github.io/animate.css/)
+
+
+##Author
+
+İsmail Demirbilek ([@dbtek](https://twitter.com/dbtek))
--- a/vendor/assets/components/angular-aside/bower.json
+++ b/vendor/assets/components/angular-aside/bower.json
@ -0,0 +1,39 @@
+{
+  "name": "angular-aside",
+  "version": "1.3.2",
+  "homepage": "https://github.com/dbtek/angular-aside",
+  "author": {
+    "name": "İsmail Demirbilek",
+    "email": "ce.demirbilek@gmail.com"
+  },
+  "description": "Off canvas side menu to use with ui-bootstrap.",
+  "main": [
+    "dist/js/angular-aside.js",
+    "dist/css/angular-aside.css"
+  ],
+  "keywords": [
+    "aside",
+    "off",
+    "canvas",
+    "menu",
+    "ui",
+    "bootstrap"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "Gruntfile.js",
+    "karma.conf.js",
+    "package.json"
+  ],
+  "dependencies": {
+    "angular-bootstrap": ">=0.14.0"
+  },
+  "devDependencies": {
+    "angular-mocks": ">=1.4.0"
+  }
+}
--- a/vendor/assets/components/angular-aside/demo.html
+++ b/vendor/assets/components/angular-aside/demo.html
@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html ng-app="asideApp">
+  <head>
+    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <link rel="stylesheet" href="src/styles/animate.css"/>
+    <link rel="stylesheet" href="src/styles/aside.css"/>
+    <style type="text/css">
+      /* Styles go here */
+      body {
+        padding: 30px 15px 0;
+      }
+
+      #downloadbtn {
+        margin-bottom: 10px;
+      }
+
+      .about-links {
+        color: #95a5a6;
+      }
+      .about-links a {
+        border-bottom: 1px dotted;
+        text-decoration: none;
+        margin-right: 15px;
+      }
+
+      .about-links li {line-height: 30px;}
+      .about-links li:hover, .about-links li:hover a { color: #666; }
+      .about-links .love:hover i { color: #e74c3c; }
+      .about-links .prospectus:hover i { color: #f39c12; }
+      .about-links .cypher:hover i { color: #16a085; }
+      .about-links .lab:hover i { color: #8e44ad; }
+    </style>
+    <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
+    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js"></script>
+    <script src="dist/js/angular-aside.min.js"></script>
+    <script>
+      angular.module('asideApp', ['ui.bootstrap', 'ngAside'])
+        .controller('MainCtrl', function($scope, $aside) {
+          $scope.openAside = function(position) {
+            $aside.open({
+              templateUrl: 'aside.html',
+              placement: position,
+              backdrop: true,
+              controller: function($scope, $modalInstance) {
+                $scope.ok = function(e) {
+                  $modalInstance.close();
+                  e.stopPropagation();
+                };
+                $scope.cancel = function(e) {
+                  $modalInstance.dismiss();
+                  e.stopPropagation();
+                };
+              }
+            })
+          }
+        });
+    </script>
+    <script type="text/ng-template" id="aside.html">
+      <div class="modal-header">
+          <h3 class="modal-title">ngAside</h3>
+      </div>
+      <div class="modal-body">
+        Look im in aside.
+      </div>
+      <div class="modal-footer">
+          <button class="btn btn-primary" ng-click="ok($event)">OK</button>
+          <button class="btn btn-warning" ng-click="cancel($event)">Cancel</button>
+      </div>
+    </script>
+  </head>
+
+  <body ng-controller="MainCtrl">
+    <div class="container">
+      <div class="jumbotron panel panel-default">
+        <h1>Angular Aside</h1>
+        <p>
+          Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.
+        </p>
+        <p>
+          <a href="https://github.com/dbtek/angular-aside" class="btn btn-primary btn-lg" id="downloadbtn">
+            <span class="glyphicon glyphicon-download"></span> Download
+          </a>
+          <br />
+          <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://github.com/dbtek/angular-aside" data-via="dbtek">Tweet</a>
+          <iframe src="http://ghbtns.com/github-btn.html?user=dbtek&repo=angular-aside&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="107" height="20"></iframe>
+        </p>
+        <div>
+          <ul class="text-center about-links list-inline">
+            <li class="love">
+              made with <i class="fa fa-heart"></i> by <a href="http://twitter.com/dbtek" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'View twitter account']);">@dbtek</a>
+            </li>
+            <li class="lab">
+              <i class="fa fa-flask"></i>
+              <a href="https://github.com/dbtek/angular-aside">github project</a>
+            </li>
+            <li class="cypher">
+              <i class="fa fa-code"></i>
+              <a href="http://opensource.org/licenses/MIT">license: MIT</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="jumbotron panel panel-default">
+        <h2>Demo</h2>
+        <p>
+          <span class="pull-left">
+            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
+              <span class="glyphicon glyphicon-align-justify"></span> Left
+            </button>
+            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('top')">
+              Up <span class="glyphicon glyphicon-arrow-down"></span>
+            </button>
+          </span>
+          <span class="pull-right">
+            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('bottom')">
+              Down <span class="glyphicon glyphicon-arrow-up"></span>
+            </button>
+            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('right')">
+              Right <span class="glyphicon glyphicon-align-justify"></span>
+            </button>
+          </span>
+        </p>
+        <div class="clearfix"></div>
+        <br />
+        <!-- plunk-hr -->
+        <div class="text-center">
+          <ins class="adsbygoogle text-center"
+               style="display:inline-block;width:320px;height:100px"
+               data-ad-client="ca-pub-7616772085785107"
+               data-ad-slot="4180012826"></ins>
+        </div>
+      </div>
+    </div>
+    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+    <script>
+    (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-46512232-6', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+  </body>
+</html>
--- a/vendor/assets/components/angular-aside/dist/css/angular-aside.css
+++ b/vendor/assets/components/angular-aside/dist/css/angular-aside.css
@ -0,0 +1,421 @@
+/*!
+ * angular-aside - v1.3.2
+ * https://github.com/dbtek/angular-aside
+ * 2015-11-17
+ * Copyright (c) 2015 İsmail Demirbilek
+ * License: MIT
+ */
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInTop {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInTop {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInTop {
+  -webkit-animation-name: fadeInTop;
+  animation-name: fadeInTop;
+}
+
+@-webkit-keyframes fadeInBottom {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInBottom {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInBottom {
+  -webkit-animation-name: fadeInBottom;
+  animation-name: fadeInBottom;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+          animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+          animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+          animation-name: fadeOutUp;
+}
+
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+          animation-name: fadeOutDown;
+}
+/* Common */
+
+.ng-aside {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.ng-aside .modal-dialog {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+}
+
+.ng-aside.fade .modal-dialog {
+  -o-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -webkit-transition: none;
+  transition: none;
+  /*CSS transforms*/
+  -o-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -webkit-transform: none;
+  transform: none;
+}
+
+.ng-aside .modal-dialog .modal-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: none;
+  border-radius: 0;
+}
+
+/* Horizontal */
+
+.ng-aside.horizontal {
+  height: 100%;
+}
+
+.ng-aside.horizontal .modal-dialog .modal-content {
+  height: 100%;
+}
+
+.ng-aside.horizontal .modal-dialog {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+
+.modal-open .ng-aside.horizontal.left .modal-dialog {
+  animation: fadeOutLeft 250ms;
+  -webkit-animation: fadeOutLeft 250ms;
+  -moz-animation: fadeOutLeft 250ms;
+  -o-animation: fadeOutLeft 250ms;
+  -ms-animation: fadeOutLeft 250ms;
+}
+
+.ng-aside.horizontal.left.in .modal-dialog {
+  animation: fadeInLeft 400ms;
+  -webkit-animation: fadeInLeft 400ms;
+  -moz-animation: fadeInLeft 400ms;
+  -o-animation: fadeInLeft 400ms;
+  -ms-animation: fadeInLeft 400ms;
+}
+
+.ng-aside.horizontal.left .modal-dialog {
+  left: 0;
+}
+
+.ng-aside.horizontal.right .modal-dialog {
+  animation: fadeOutRight 400ms;
+  -webkit-animation: fadeOutRight 400ms;
+  -moz-animation: fadeOutRight 400ms;
+  -o-animation: fadeOutRight 400ms;
+  -ms-animation: fadeOutRight 400ms;
+}
+
+.ng-aside.horizontal.right.in .modal-dialog {
+  animation: fadeInRight 250ms;
+  -webkit-animation: fadeInRight 250ms;
+}
+
+.ng-aside.horizontal.right .modal-dialog {
+  right: 0;
+}
+
+/* Vertical */
+
+.ng-aside.vertical {
+  width: 100% !important;
+  overflow: hidden;
+}
+
+.ng-aside.vertical .modal-dialog {
+  left: 0;
+  right: 0;
+  width: 100% !important;
+}
+
+.ng-aside.vertical .modal-dialog .modal-content {
+  max-height: 400px;
+}
+
+.ng-aside.vertical.top .modal-dialog {
+  animation: fadeOutUp 250ms;
+  -webkit-animation: fadeOutUp 250ms;
+  -webkit-animation: fadeOutUp 250ms;
+  -moz-animation: fadeOutUp 250ms;
+  -o-animation: fadeOutUp 250ms;
+  -ms-animation: fadeOutUp 250ms;
+}
+
+.ng-aside.vertical.top.in .modal-dialog {
+  animation: fadeInTop 250ms;
+  -webkit-animation: fadeInTop 250ms;
+  -webkit-animation: fadeInTop 250ms;
+  -moz-animation: fadeInTop 250ms;
+  -o-animation: fadeInTop 250ms;
+  -ms-animation: fadeInTop 250ms;
+}
+
+.ng-aside.vertical.bottom .modal-dialog {
+  animation: fadeOutDown 250ms;
+  -webkit-animation: fadeOutDown 250ms;
+  -webkit-animation: fadeOutDown 250ms;
+  -moz-animation: fadeOutDown 250ms;
+  -o-animation: fadeOutDown 250ms;
+  -ms-animation: fadeOutDown 250ms;
+}
+.ng-aside.vertical.bottom.in .modal-dialog {
+  animation: fadeInBottom 250ms;
+  -webkit-animation: fadeInBottom 250ms;
+  -webkit-animation: fadeInBottom 250ms;
+  -moz-animation: fadeInBottom 250ms;
+  -o-animation: fadeInBottom 250ms;
+  -ms-animation: fadeInBottom 250ms;
+}
+
+.ng-aside.vertical.bottom .modal-dialog {
+  bottom: 0;
+}
+
+.ng-aside.vertical.top .modal-dialog {
+  top: 0;
+}
+
+.ng-aside.vertical .modal-dialog .modal-content {
+  width: 100%;
+}
--- a/vendor/assets/components/angular-aside/dist/css/angular-aside.min.css
+++ b/vendor/assets/components/angular-aside/dist/css/angular-aside.min.css
--- a/vendor/assets/components/angular-aside/dist/js/angular-aside.js
+++ b/vendor/assets/components/angular-aside/dist/js/angular-aside.js
@ -0,0 +1,60 @@
+
+/*!
+ * angular-aside - v1.3.2
+ * https://github.com/dbtek/angular-aside
+ * 2015-11-17
+ * Copyright (c) 2015 İsmail Demirbilek
+ * License: MIT
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * @ngdoc overview
+   * @name ngAside
+   * @description
+   * Main module for aside component.
+   * @function
+   * @author İsmail Demirbilek
+   */
+  angular.module('ngAside', ['ui.bootstrap.modal']);
+})();
+
+(function() {
+  'use strict';
+
+  angular.module('ngAside')
+    /**
+     * @ngdoc service
+     * @name ngAside.services:$aside
+     * @description
+     * Factory to create a uibModal instance to use it as aside. It simply wraps $uibModal by overriding open() method and sets a class on modal window.
+     * @function
+     */
+    .factory('$aside', ['$uibModal', function($uibModal) {
+      var defaults = this.defaults = {
+        placement: 'left'
+      };
+
+      var asideFactory = {
+        // override open method
+        open: function(config) {
+          var options = angular.extend({}, defaults, config);
+          // check placement is set correct
+          if(['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
+            options.placement = defaults.placement;
+          }
+          var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
+          // set aside classes
+          options.windowClass  = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
+          delete options.placement
+          return $uibModal.open(options);
+        }
+      };
+
+      // create $aside as extended $uibModal
+      var $aside = angular.extend({}, $uibModal, asideFactory);
+      return $aside;
+    }]);
+})();
--- a/vendor/assets/components/angular-aside/dist/js/angular-aside.min.js
+++ b/vendor/assets/components/angular-aside/dist/js/angular-aside.min.js
@ -0,0 +1,8 @@
+/*!
+ * angular-aside - v1.3.2
+ * https://github.com/dbtek/angular-aside
+ * 2015-11-17
+ * Copyright (c) 2015 İsmail Demirbilek
+ * License: MIT
+ */
+!function(){"use strict";angular.module("ngAside",["ui.bootstrap.modal"])}(),function(){"use strict";angular.module("ngAside").factory("$aside",["$uibModal",function(a){var b=this.defaults={placement:"left"},c={open:function(c){var d=angular.extend({},b,c);-1===["left","right","bottom","top"].indexOf(d.placement)&&(d.placement=b.placement);var e=-1===["left","right"].indexOf(d.placement)?"vertical":"horizontal";return d.windowClass="ng-aside "+e+" "+d.placement+(d.windowClass?" "+d.windowClass:""),delete d.placement,a.open(d)}},d=angular.extend({},a,c);return d}])}();
--- a/vendor/assets/components/angular-aside/index.js
+++ b/vendor/assets/components/angular-aside/index.js
@ -0,0 +1,2 @@
+require('./dist/js/angular-aside');
+module.exports = 'ngAside';
--- a/vendor/assets/components/angular-aside/src/scripts/app.js
+++ b/vendor/assets/components/angular-aside/src/scripts/app.js
@ -0,0 +1,13 @@
+(function() {
+  'use strict';
+
+  /**
+   * @ngdoc overview
+   * @name ngAside
+   * @description
+   * Main module for aside component.
+   * @function
+   * @author İsmail Demirbilek
+   */
+  angular.module('ngAside', ['ui.bootstrap.modal']);
+})();
--- a/vendor/assets/components/angular-aside/src/scripts/services/aside.js
+++ b/vendor/assets/components/angular-aside/src/scripts/services/aside.js
@ -0,0 +1,37 @@
+(function() {
+  'use strict';
+
+  angular.module('ngAside')
+    /**
+     * @ngdoc service
+     * @name ngAside.services:$aside
+     * @description
+     * Factory to create a uibModal instance to use it as aside. It simply wraps $uibModal by overriding open() method and sets a class on modal window.
+     * @function
+     */
+    .factory('$aside', function($uibModal) {
+      var defaults = this.defaults = {
+        placement: 'left'
+      };
+
+      var asideFactory = {
+        // override open method
+        open: function(config) {
+          var options = angular.extend({}, defaults, config);
+          // check placement is set correct
+          if(['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
+            options.placement = defaults.placement;
+          }
+          var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
+          // set aside classes
+          options.windowClass  = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
+          delete options.placement
+          return $uibModal.open(options);
+        }
+      };
+
+      // create $aside as extended $uibModal
+      var $aside = angular.extend({}, $uibModal, asideFactory);
+      return $aside;
+    });
+})();
--- a/vendor/assets/components/angular-aside/src/styles/animate.css
+++ b/vendor/assets/components/angular-aside/src/styles/animate.css
@ -0,0 +1,263 @@
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInTop {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInTop {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInTop {
+  -webkit-animation-name: fadeInTop;
+  animation-name: fadeInTop;
+}
+
+@-webkit-keyframes fadeInBottom {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInBottom {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInBottom {
+  -webkit-animation-name: fadeInBottom;
+  animation-name: fadeInBottom;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+          animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+          animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+          animation-name: fadeOutUp;
+}
+
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+          animation-name: fadeOutDown;
+}
--- a/vendor/assets/components/angular-aside/src/styles/aside.css
+++ b/vendor/assets/components/angular-aside/src/styles/aside.css
@ -0,0 +1,150 @@
+/* Common */
+
+.ng-aside {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.ng-aside .modal-dialog {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+}
+
+.ng-aside.fade .modal-dialog {
+  -o-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -webkit-transition: none;
+  transition: none;
+  /*CSS transforms*/
+  -o-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -webkit-transform: none;
+  transform: none;
+}
+
+.ng-aside .modal-dialog .modal-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: none;
+  border-radius: 0;
+}
+
+/* Horizontal */
+
+.ng-aside.horizontal {
+  height: 100%;
+}
+
+.ng-aside.horizontal .modal-dialog .modal-content {
+  height: 100%;
+}
+
+.ng-aside.horizontal .modal-dialog {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+
+.modal-open .ng-aside.horizontal.left .modal-dialog {
+  animation: fadeOutLeft 250ms;
+  -webkit-animation: fadeOutLeft 250ms;
+  -moz-animation: fadeOutLeft 250ms;
+  -o-animation: fadeOutLeft 250ms;
+  -ms-animation: fadeOutLeft 250ms;
+}
+
+.ng-aside.horizontal.left.in .modal-dialog {
+  animation: fadeInLeft 400ms;
+  -webkit-animation: fadeInLeft 400ms;
+  -moz-animation: fadeInLeft 400ms;
+  -o-animation: fadeInLeft 400ms;
+  -ms-animation: fadeInLeft 400ms;
+}
+
+.ng-aside.horizontal.left .modal-dialog {
+  left: 0;
+}
+
+.ng-aside.horizontal.right .modal-dialog {
+  animation: fadeOutRight 400ms;
+  -webkit-animation: fadeOutRight 400ms;
+  -moz-animation: fadeOutRight 400ms;
+  -o-animation: fadeOutRight 400ms;
+  -ms-animation: fadeOutRight 400ms;
+}
+
+.ng-aside.horizontal.right.in .modal-dialog {
+  animation: fadeInRight 250ms;
+  -webkit-animation: fadeInRight 250ms;
+}
+
+.ng-aside.horizontal.right .modal-dialog {
+  right: 0;
+}
+
+/* Vertical */
+
+.ng-aside.vertical {
+  width: 100% !important;
+  overflow: hidden;
+}
+
+.ng-aside.vertical .modal-dialog {
+  left: 0;
+  right: 0;
+  width: 100% !important;
+}
+
+.ng-aside.vertical .modal-dialog .modal-content {
+  max-height: 400px;
+}
+
+.ng-aside.vertical.top .modal-dialog {
+  animation: fadeOutUp 250ms;
+  -webkit-animation: fadeOutUp 250ms;
+  -webkit-animation: fadeOutUp 250ms;
+  -moz-animation: fadeOutUp 250ms;
+  -o-animation: fadeOutUp 250ms;
+  -ms-animation: fadeOutUp 250ms;
+}
+
+.ng-aside.vertical.top.in .modal-dialog {
+  animation: fadeInTop 250ms;
+  -webkit-animation: fadeInTop 250ms;
+  -webkit-animation: fadeInTop 250ms;
+  -moz-animation: fadeInTop 250ms;
+  -o-animation: fadeInTop 250ms;
+  -ms-animation: fadeInTop 250ms;
+}
+
+.ng-aside.vertical.bottom .modal-dialog {
+  animation: fadeOutDown 250ms;
+  -webkit-animation: fadeOutDown 250ms;
+  -webkit-animation: fadeOutDown 250ms;
+  -moz-animation: fadeOutDown 250ms;
+  -o-animation: fadeOutDown 250ms;
+  -ms-animation: fadeOutDown 250ms;
+}
+.ng-aside.vertical.bottom.in .modal-dialog {
+  animation: fadeInBottom 250ms;
+  -webkit-animation: fadeInBottom 250ms;
+  -webkit-animation: fadeInBottom 250ms;
+  -moz-animation: fadeInBottom 250ms;
+  -o-animation: fadeInBottom 250ms;
+  -ms-animation: fadeInBottom 250ms;
+}
+
+.ng-aside.vertical.bottom .modal-dialog {
+  bottom: 0;
+}
+
+.ng-aside.vertical.top .modal-dialog {
+  top: 0;
+}
+
+.ng-aside.vertical .modal-dialog .modal-content {
+  width: 100%;
+}