Commit 773c5c4743f331fcaecbea0fcaa54bd800d63973
1 parent
dbafb5a8
Exists in
master
and in
8 other branches
Add: Component Event - Sync
Showing
7 changed files
with
200 additions
and
24 deletions
Show diff stats
src/app/components/article-preview/article-preview.scss
... | ... | @@ -87,5 +87,25 @@ |
87 | 87 | } |
88 | 88 | } |
89 | 89 | |
90 | + .row-height { | |
91 | + border-spacing: 20px; | |
92 | + } | |
93 | + | |
94 | + .col-height { | |
90 | 95 | |
96 | + border: 1px solid #000; | |
97 | + border-radius: 3px; | |
98 | + | |
99 | + @each $category, $color in $categories { | |
100 | + .#{$category} & { | |
101 | + border-color: $color; | |
102 | + } | |
103 | + } | |
104 | + | |
105 | + @media (max-width: $screen-sm){ | |
106 | + display: block; | |
107 | + border: none; | |
108 | + } | |
109 | + | |
110 | + } | |
91 | 111 | } | ... | ... |
... | ... | @@ -0,0 +1,54 @@ |
1 | +(function() { | |
2 | + 'use strict'; | |
3 | + | |
4 | + angular | |
5 | + .module('dialoga') | |
6 | + .directive('eventList', eventList); | |
7 | + | |
8 | + /** @ngInject */ | |
9 | + function eventList() { | |
10 | + /** @ngInject */ | |
11 | + function EventListController($scope, $rootScope, $state, $log) { | |
12 | + $log.debug('EventListController'); | |
13 | + | |
14 | + var vm = this; | |
15 | + | |
16 | + vm.$scope = $scope; | |
17 | + vm.$rootScope = $rootScope; | |
18 | + vm.$state = $state; | |
19 | + vm.$log = $log; | |
20 | + | |
21 | + vm.init(); | |
22 | + } | |
23 | + | |
24 | + EventListController.prototype.init = function () { | |
25 | + var vm = this; | |
26 | + | |
27 | + vm.eventList = []; | |
28 | + vm.isListVisible = false; | |
29 | + }; | |
30 | + | |
31 | + EventListController.prototype.toggleView = function () { | |
32 | + var vm = this; | |
33 | + | |
34 | + if(vm.isListVisible) { | |
35 | + // animate hide | |
36 | + } else { | |
37 | + // animate show | |
38 | + } | |
39 | + | |
40 | + vm.isListVisible = !vm.isListVisible; | |
41 | + }; | |
42 | + | |
43 | + var directive = { | |
44 | + restrict: 'E', | |
45 | + templateUrl: 'app/components/event-list/event-list.html', | |
46 | + controller: EventListController, | |
47 | + controllerAs: 'eventListCtrl', | |
48 | + bindToController: true | |
49 | + }; | |
50 | + | |
51 | + return directive; | |
52 | + | |
53 | + } | |
54 | +})(); | ... | ... |
... | ... | @@ -0,0 +1,35 @@ |
1 | +<div class="event-list"> | |
2 | + <div class="event-tab--trigger" ng-click="eventListCtrl.toggleView()"> | |
3 | + <div class="event-tab--header"> | |
4 | + <div class="event-tab--icon"> | |
5 | + <span class="glyphicon glyphicon-calendar" arria-hidden="true"></span> | |
6 | + </div> | |
7 | + <div class="event-tab--title">Bate-Papo com ministr@s</div> | |
8 | + </div> | |
9 | + <button class="btn btn-link event-tab--button"> | |
10 | + <span>18 bate-papos agendados</span> | |
11 | + <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> | |
12 | + </button> | |
13 | + </div> | |
14 | + | |
15 | + <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible"> | |
16 | + <div class="event-list--header"> | |
17 | + <div class="event-list--icon"> | |
18 | + <div class="glyphicon glyphicon-calendar" aria-hidden="true"></div> | |
19 | + </div> | |
20 | + <h2 class="event-list--title"> | |
21 | + Bate-papo com ministr@s | |
22 | + </h2> | |
23 | + <div class="event-list--minimize"> | |
24 | + <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()"> | |
25 | + <span>Minimizar</span> | |
26 | + <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> | |
27 | + </button> | |
28 | + </div> | |
29 | + </div> | |
30 | + <div class="event-list--table-wrapper"> | |
31 | + <table class="event-list--table"> | |
32 | + </table> | |
33 | + </div> | |
34 | + </div> | |
35 | +</div> | ... | ... |
... | ... | @@ -0,0 +1,68 @@ |
1 | +.event-list { | |
2 | + position: relative; | |
3 | + background-color: #eee; | |
4 | + | |
5 | + .event-list--panel { | |
6 | + height: 400px; | |
7 | + border: 1px solid #333; | |
8 | + padding: 20px; | |
9 | + | |
10 | + -webkit-transition: 0.5s linear all; | |
11 | + -moz-transition: 0.5s linear all; | |
12 | + -o-transition: 0.5s linear all; | |
13 | + transition: 0.5s linear all; | |
14 | + | |
15 | + &.ng-hide { | |
16 | + height: 0px; | |
17 | + } | |
18 | + | |
19 | + .event-list--header { | |
20 | + border-bottom: 1px solid #333; | |
21 | + } | |
22 | + | |
23 | + .event-list--icon { | |
24 | + font-size: 25px; | |
25 | + display: inline-block; | |
26 | + } | |
27 | + | |
28 | + .event-list--title { | |
29 | + margin: 0 10px; | |
30 | + display: inline-block; | |
31 | + } | |
32 | + | |
33 | + .event-list--minimize { | |
34 | + display: inline-block; | |
35 | + float: right; | |
36 | + width: 100px; | |
37 | + } | |
38 | + } | |
39 | + | |
40 | + .event-tab--trigger { | |
41 | + $event-tab-height: 130px; | |
42 | + width: 150px; | |
43 | + height: $event-tab-height; | |
44 | + position: absolute; | |
45 | + right: 0; | |
46 | + top: -$event-tab-height; | |
47 | + padding: 5px; | |
48 | + background-color: #eee; | |
49 | + border: 1px solid #333; | |
50 | + | |
51 | + text-align: center; | |
52 | + } | |
53 | + | |
54 | + .event-tab--icon { | |
55 | + font-size: 25px; | |
56 | + } | |
57 | + .event-tab--title { | |
58 | + font-weight: bold; | |
59 | + } | |
60 | + | |
61 | + .event-tab--button { | |
62 | + font-size: 12px; | |
63 | + margin: 10px 0 0 0; | |
64 | + padding: 0; | |
65 | + width: 100%; | |
66 | + white-space: normal; | |
67 | + } | |
68 | +} | ... | ... |
src/app/layout.scss
... | ... | @@ -3,7 +3,6 @@ |
3 | 3 | table-layout: fixed; |
4 | 4 | height: 100%; |
5 | 5 | width: 100%; |
6 | - border-spacing: 20px; | |
7 | 6 | |
8 | 7 | @media (max-width: $screen-sm) { |
9 | 8 | display: block; |
... | ... | @@ -23,20 +22,10 @@ |
23 | 22 | float: none; |
24 | 23 | height: 100%; |
25 | 24 | vertical-align: top; |
25 | +} | |
26 | 26 | |
27 | - border: 1px solid #000; | |
28 | - border-radius: 3px; | |
29 | - | |
30 | - @each $category, $color in $categories { | |
31 | - .#{$category} & { | |
32 | - border-color: $color; | |
33 | - } | |
34 | - } | |
35 | - | |
36 | - @media (max-width: $screen-sm){ | |
37 | - display: block; | |
38 | - border: none; | |
39 | - } | |
27 | +.col-height--align-bottom { | |
28 | + vertical-align: bottom; | |
40 | 29 | } |
41 | 30 | |
42 | 31 | .inside { | ... | ... |
src/app/pages/inicio/inicio.html
1 | -<section class="container video-wrapper" role="main"> | |
2 | - <div class="video-player js-youtube"> | |
3 | - <div class="embed-responsive embed-responsive-16by9"> | |
4 | - <div class="js-iframe" ng-show="pageInicio.content" ng-bind-html="pageInicio.content"></div> | |
5 | - <div class="video-background" ng-click="pageInicio.showVideo()"> | |
6 | - <div class="video-thumbnail" style="background-image:url(/assets/images/youtube-background.png)"></div> | |
7 | - <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil"> | |
8 | - <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg> | |
9 | - </button> | |
1 | +<section class="container" role="main"> | |
2 | + <div class="row"> | |
3 | + <div class="col-sm-10 col-sm-offset-1"> | |
4 | + <div class="video-wrapper"> | |
5 | + <div class="video-player js-youtube"> | |
6 | + <div class="embed-responsive embed-responsive-16by9"> | |
7 | + <div class="js-iframe" ng-show="pageInicio.content" ng-bind-html="pageInicio.content"></div> | |
8 | + <div class="video-background" ng-click="pageInicio.showVideo()"> | |
9 | + <div class="video-thumbnail" style="background-image:url(/assets/images/youtube-background.png)"></div> | |
10 | + <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil"> | |
11 | + <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg> | |
12 | + </button> | |
13 | + </div> | |
14 | + </div> | |
15 | + </div> | |
10 | 16 | </div> |
11 | 17 | </div> |
12 | 18 | </div> |
19 | + <!-- <div class="js-event-wrapper hide" ng-show="inicio.eventListIsVisible"> --> | |
20 | + <div class="js-event-wrapper"> | |
21 | + <event-list></event-list> | |
22 | + </div> | |
13 | 23 | </section> |
14 | 24 | |
15 | 25 | <section class="info-section" ng-if="pageInicio.loading || pageInicio.error"> | ... | ... |