From 120df2e7164e2093202be48904f98d34579d5665 Mon Sep 17 00:00:00 2001 From: Peng DU Date: Mon, 18 Jul 2016 16:31:14 +0200 Subject: [PATCH] add an aside for filter caldendar in mobile --- app/assets/javascripts/app.js.erb | 2 +- app/assets/javascripts/application.js.erb | 1 + .../javascripts/controllers/calendar.coffee | 76 +++- app/assets/stylesheets/app.colors.scss | 3 + app/assets/stylesheets/app.components.scss | 2 +- app/assets/stylesheets/app.layout.scss | 12 +- app/assets/stylesheets/app.utilities.scss | 1 + app/assets/stylesheets/application.scss.erb | 1 + .../templates/calendar/calendar.html.erb | 70 ++- app/assets/templates/calendar/filter.html.erb | 28 ++ bower.json | 3 +- config/locales/app.public.en.yml | 1 + config/locales/app.public.fr.yml | 1 + .../components/angular-aside/.bower.json | 49 ++ .../assets/components/angular-aside/LICENSE | 21 + .../assets/components/angular-aside/README.md | 55 +++ .../components/angular-aside/bower.json | 39 ++ .../assets/components/angular-aside/demo.html | 151 +++++++ .../angular-aside/dist/css/angular-aside.css | 421 ++++++++++++++++++ .../dist/css/angular-aside.min.css | 14 + .../angular-aside/dist/js/angular-aside.js | 60 +++ .../dist/js/angular-aside.min.js | 8 + .../assets/components/angular-aside/index.js | 2 + .../angular-aside/src/scripts/app.js | 13 + .../src/scripts/services/aside.js | 37 ++ .../angular-aside/src/styles/animate.css | 263 +++++++++++ .../angular-aside/src/styles/aside.css | 150 +++++++ 27 files changed, 1419 insertions(+), 65 deletions(-) create mode 100644 app/assets/templates/calendar/filter.html.erb create mode 100644 vendor/assets/components/angular-aside/.bower.json create mode 100644 vendor/assets/components/angular-aside/LICENSE create mode 100644 vendor/assets/components/angular-aside/README.md create mode 100644 vendor/assets/components/angular-aside/bower.json create mode 100644 vendor/assets/components/angular-aside/demo.html create mode 100644 vendor/assets/components/angular-aside/dist/css/angular-aside.css create mode 100644 vendor/assets/components/angular-aside/dist/css/angular-aside.min.css create mode 100644 vendor/assets/components/angular-aside/dist/js/angular-aside.js create mode 100644 vendor/assets/components/angular-aside/dist/js/angular-aside.min.js create mode 100644 vendor/assets/components/angular-aside/index.js create mode 100644 vendor/assets/components/angular-aside/src/scripts/app.js create mode 100644 vendor/assets/components/angular-aside/src/scripts/services/aside.js create mode 100644 vendor/assets/components/angular-aside/src/styles/animate.css create mode 100644 vendor/assets/components/angular-aside/src/styles/aside.css diff --git a/app/assets/javascripts/app.js.erb b/app/assets/javascripts/app.js.erb index 87dfc456e..8e293624d 100644 --- 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) { diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index f36dbf35d..d9f900521 100644 --- 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 diff --git a/app/assets/javascripts/controllers/calendar.coffee b/app/assets/javascripts/controllers/calendar.coffee index 0d145691e..16c1356aa 100644 --- 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())}" diff --git a/app/assets/stylesheets/app.colors.scss b/app/assets/stylesheets/app.colors.scss index 27dfac8fc..0b49e3b72 100644 --- 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; } diff --git a/app/assets/stylesheets/app.components.scss b/app/assets/stylesheets/app.components.scss index 562d1efec..317ec00fc 100644 --- a/app/assets/stylesheets/app.components.scss +++ b/app/assets/stylesheets/app.components.scss @@ -513,4 +513,4 @@ padding: 10px; z-index:10; border-radius: 3px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/app.layout.scss b/app/assets/stylesheets/app.layout.scss index 68850aa24..069e748f4 100644 --- a/app/assets/stylesheets/app.layout.scss +++ b/app/assets/stylesheets/app.layout.scss @@ -604,4 +604,14 @@ body.container{ display: inherit; text-align: center; height: 50px; -} \ No newline at end of file +} + +.calendar-filter { + h3 { + line-height: 2.1rem !important; + } +} + +.calendar-filter-aside { + padding: 20px; +} diff --git a/app/assets/stylesheets/app.utilities.scss b/app/assets/stylesheets/app.utilities.scss index b8c0e6aa5..9b12d7f1e 100644 --- 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; } } diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index 2ae151239..4cbd1ff78 100644 --- 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"; diff --git a/app/assets/templates/calendar/calendar.html.erb b/app/assets/templates/calendar/calendar.html.erb index 8f7364263..7e2775c9d 100644 --- a/app/assets/templates/calendar/calendar.html.erb +++ b/app/assets/templates/calendar/calendar.html.erb @@ -5,18 +5,18 @@ -
+

{{ 'calendar' }}

-
-
- {{ 'trainings' }} - {{ 'machines' }} - {{ 'events' }} -
+
@@ -24,47 +24,39 @@
+ -
+
-
+
+ + + diff --git a/app/assets/templates/calendar/filter.html.erb b/app/assets/templates/calendar/filter.html.erb new file mode 100644 index 000000000..cea225689 --- /dev/null +++ b/app/assets/templates/calendar/filter.html.erb @@ -0,0 +1,28 @@ +
+
+

{{ 'trainings' }}

+ +
+
+ {{::t.name}} + +
+
+
+
+

{{ 'machines' }}

+ +
+
+ {{::m.name}} + +
+
+
+

{{ 'events' }}

+ +
+
+

{{ 'show_no_disponible' }}

+ +
diff --git a/bower.json b/bower.json index 2065c2514..d245b9573 100644 --- 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", diff --git a/config/locales/app.public.en.yml b/config/locales/app.public.en.yml index e32e9c825..908f8b33d 100644 --- 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" diff --git a/config/locales/app.public.fr.yml b/config/locales/app.public.fr.yml index fbfb2a3c1..b94f3675f 100644 --- 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" diff --git a/vendor/assets/components/angular-aside/.bower.json b/vendor/assets/components/angular-aside/.bower.json new file mode 100644 index 000000000..7d913ae77 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/vendor/assets/components/angular-aside/LICENSE b/vendor/assets/components/angular-aside/LICENSE new file mode 100644 index 000000000..cbc9d516a --- /dev/null +++ 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. diff --git a/vendor/assets/components/angular-aside/README.md b/vendor/assets/components/angular-aside/README.md new file mode 100644 index 000000000..9d8d409a1 --- /dev/null +++ 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)) diff --git a/vendor/assets/components/angular-aside/bower.json b/vendor/assets/components/angular-aside/bower.json new file mode 100644 index 000000000..9188c82ad --- /dev/null +++ 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" + } +} diff --git a/vendor/assets/components/angular-aside/demo.html b/vendor/assets/components/angular-aside/demo.html new file mode 100644 index 000000000..fb750378f --- /dev/null +++ b/vendor/assets/components/angular-aside/demo.html @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + +
+
+

Angular Aside

+

+ Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider. +

+

+ + Download + +
+ + +

+
+ +
+
+
+

Demo

+

+ + + + + + + + +

+
+
+ +
+ +
+
+
+ + + + + + diff --git a/vendor/assets/components/angular-aside/dist/css/angular-aside.css b/vendor/assets/components/angular-aside/dist/css/angular-aside.css new file mode 100644 index 000000000..65542643e --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/vendor/assets/components/angular-aside/dist/css/angular-aside.min.css b/vendor/assets/components/angular-aside/dist/css/angular-aside.min.css new file mode 100644 index 000000000..d0ad03900 --- /dev/null +++ b/vendor/assets/components/angular-aside/dist/css/angular-aside.min.css @@ -0,0 +1,14 @@ +/*! + * 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}.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;-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}.ng-aside.horizontal,.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}.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%} \ No newline at end of file diff --git a/vendor/assets/components/angular-aside/dist/js/angular-aside.js b/vendor/assets/components/angular-aside/dist/js/angular-aside.js new file mode 100644 index 000000000..55770eb77 --- /dev/null +++ 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; + }]); +})(); diff --git a/vendor/assets/components/angular-aside/dist/js/angular-aside.min.js b/vendor/assets/components/angular-aside/dist/js/angular-aside.min.js new file mode 100644 index 000000000..2b68bd060 --- /dev/null +++ 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}])}(); \ No newline at end of file diff --git a/vendor/assets/components/angular-aside/index.js b/vendor/assets/components/angular-aside/index.js new file mode 100644 index 000000000..c2c62b874 --- /dev/null +++ b/vendor/assets/components/angular-aside/index.js @@ -0,0 +1,2 @@ +require('./dist/js/angular-aside'); +module.exports = 'ngAside'; \ No newline at end of file diff --git a/vendor/assets/components/angular-aside/src/scripts/app.js b/vendor/assets/components/angular-aside/src/scripts/app.js new file mode 100644 index 000000000..8825914eb --- /dev/null +++ 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']); +})(); diff --git a/vendor/assets/components/angular-aside/src/scripts/services/aside.js b/vendor/assets/components/angular-aside/src/scripts/services/aside.js new file mode 100644 index 000000000..456e5270b --- /dev/null +++ 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; + }); +})(); diff --git a/vendor/assets/components/angular-aside/src/styles/animate.css b/vendor/assets/components/angular-aside/src/styles/animate.css new file mode 100644 index 000000000..41c6d05cd --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/vendor/assets/components/angular-aside/src/styles/aside.css b/vendor/assets/components/angular-aside/src/styles/aside.css new file mode 100644 index 000000000..5820485c3 --- /dev/null +++ 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%; +} \ No newline at end of file