From 773c5c4743f331fcaecbea0fcaa54bd800d63973 Mon Sep 17 00:00:00 2001 From: Leonardo Merlin Date: Tue, 25 Aug 2015 23:02:43 -0300 Subject: [PATCH] Add: Component Event - Sync --- src/app/components/article-preview/article-preview.scss | 20 ++++++++++++++++++++ src/app/components/event-list/event-list.directive.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/event-list/event-list.html | 35 +++++++++++++++++++++++++++++++++++ src/app/components/event-list/event-list.scss | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/layout.scss | 17 +++-------------- src/app/pages/inicio/inicio.html | 28 +++++++++++++++++++--------- src/app/pages/inicio/inicio.scss | 2 +- 7 files changed, 200 insertions(+), 24 deletions(-) create mode 100644 src/app/components/event-list/event-list.directive.js create mode 100644 src/app/components/event-list/event-list.html create mode 100644 src/app/components/event-list/event-list.scss diff --git a/src/app/components/article-preview/article-preview.scss b/src/app/components/article-preview/article-preview.scss index 530b3b0..78cccce 100644 --- a/src/app/components/article-preview/article-preview.scss +++ b/src/app/components/article-preview/article-preview.scss @@ -87,5 +87,25 @@ } } + .row-height { + border-spacing: 20px; + } + + .col-height { + border: 1px solid #000; + border-radius: 3px; + + @each $category, $color in $categories { + .#{$category} & { + border-color: $color; + } + } + + @media (max-width: $screen-sm){ + display: block; + border: none; + } + + } } diff --git a/src/app/components/event-list/event-list.directive.js b/src/app/components/event-list/event-list.directive.js new file mode 100644 index 0000000..5458301 --- /dev/null +++ b/src/app/components/event-list/event-list.directive.js @@ -0,0 +1,54 @@ +(function() { + 'use strict'; + + angular + .module('dialoga') + .directive('eventList', eventList); + + /** @ngInject */ + function eventList() { + /** @ngInject */ + function EventListController($scope, $rootScope, $state, $log) { + $log.debug('EventListController'); + + var vm = this; + + vm.$scope = $scope; + vm.$rootScope = $rootScope; + vm.$state = $state; + vm.$log = $log; + + vm.init(); + } + + EventListController.prototype.init = function () { + var vm = this; + + vm.eventList = []; + vm.isListVisible = false; + }; + + EventListController.prototype.toggleView = function () { + var vm = this; + + if(vm.isListVisible) { + // animate hide + } else { + // animate show + } + + vm.isListVisible = !vm.isListVisible; + }; + + var directive = { + restrict: 'E', + templateUrl: 'app/components/event-list/event-list.html', + controller: EventListController, + controllerAs: 'eventListCtrl', + bindToController: true + }; + + return directive; + + } +})(); diff --git a/src/app/components/event-list/event-list.html b/src/app/components/event-list/event-list.html new file mode 100644 index 0000000..6f42e7d --- /dev/null +++ b/src/app/components/event-list/event-list.html @@ -0,0 +1,35 @@ +
+
+
+
+ +
+
Bate-Papo com ministr@s
+
+ +
+ +
+
+
+ +
+

+ Bate-papo com ministr@s +

+
+ +
+
+
+ +
+
+
+
diff --git a/src/app/components/event-list/event-list.scss b/src/app/components/event-list/event-list.scss new file mode 100644 index 0000000..76140d1 --- /dev/null +++ b/src/app/components/event-list/event-list.scss @@ -0,0 +1,68 @@ +.event-list { + position: relative; + background-color: #eee; + + .event-list--panel { + height: 400px; + border: 1px solid #333; + padding: 20px; + + -webkit-transition: 0.5s linear all; + -moz-transition: 0.5s linear all; + -o-transition: 0.5s linear all; + transition: 0.5s linear all; + + &.ng-hide { + height: 0px; + } + + .event-list--header { + border-bottom: 1px solid #333; + } + + .event-list--icon { + font-size: 25px; + display: inline-block; + } + + .event-list--title { + margin: 0 10px; + display: inline-block; + } + + .event-list--minimize { + display: inline-block; + float: right; + width: 100px; + } + } + + .event-tab--trigger { + $event-tab-height: 130px; + width: 150px; + height: $event-tab-height; + position: absolute; + right: 0; + top: -$event-tab-height; + padding: 5px; + background-color: #eee; + border: 1px solid #333; + + text-align: center; + } + + .event-tab--icon { + font-size: 25px; + } + .event-tab--title { + font-weight: bold; + } + + .event-tab--button { + font-size: 12px; + margin: 10px 0 0 0; + padding: 0; + width: 100%; + white-space: normal; + } +} diff --git a/src/app/layout.scss b/src/app/layout.scss index d8a54b4..1b95f90 100644 --- a/src/app/layout.scss +++ b/src/app/layout.scss @@ -3,7 +3,6 @@ table-layout: fixed; height: 100%; width: 100%; - border-spacing: 20px; @media (max-width: $screen-sm) { display: block; @@ -23,20 +22,10 @@ float: none; height: 100%; vertical-align: top; +} - border: 1px solid #000; - border-radius: 3px; - - @each $category, $color in $categories { - .#{$category} & { - border-color: $color; - } - } - - @media (max-width: $screen-sm){ - display: block; - border: none; - } +.col-height--align-bottom { + vertical-align: bottom; } .inside { diff --git a/src/app/pages/inicio/inicio.html b/src/app/pages/inicio/inicio.html index dfd3afb..c5cf8b2 100644 --- a/src/app/pages/inicio/inicio.html +++ b/src/app/pages/inicio/inicio.html @@ -1,15 +1,25 @@ -
-
-
-
-
-
- +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
diff --git a/src/app/pages/inicio/inicio.scss b/src/app/pages/inicio/inicio.scss index 9b9d76e..a76bb92 100644 --- a/src/app/pages/inicio/inicio.scss +++ b/src/app/pages/inicio/inicio.scss @@ -12,7 +12,7 @@ } .video-wrapper { - margin-bottom: 30px; + // margin-bottom: 30px; } .video-player { -- libgit2 0.21.2