Download as
Browse Code »

Commit 773c5c4743f331fcaecbea0fcaa54bd800d63973

Authored by Leonardo Merlin
1 parent dbafb5a8
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

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
  Diff comments   View file @773c5c4
... ... @@ -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 }
... ...
src/app/components/event-list/event-list.directive.js 0 → 100644
  Diff comments   View file @773c5c4
... ... @@ -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 +})();
... ...
src/app/components/event-list/event-list.html 0 → 100644
  Diff comments   View file @773c5c4
... ... @@ -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>
... ...
src/app/components/event-list/event-list.scss 0 → 100644
  Diff comments   View file @773c5c4
... ... @@ -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
  Diff comments   View file @773c5c4
... ... @@ -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
  Diff comments   View file @773c5c4
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">
... ...
src/app/pages/inicio/inicio.scss
  Diff comments   View file @773c5c4
... ... @@ -12,7 +12,7 @@
12 12 }
13 13  
14 14 .video-wrapper {
15   - margin-bottom: 30px;
  15 + // margin-bottom: 30px;
16 16 }
17 17  
18 18 .video-player {
... ...