Download as
Browse Code »

Commit 8015cdf21dde1b50513a90480cb7250523810159

Authored by Leonardo Merlin
1 parent c4eb4fda
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 (initial commit)

Showing 3 changed files with 112 additions and 24 deletions   Show diff stats
src/app/components/event-list/event-list.directive.js
  Diff comments   View file @8015cdf
@@ -30,14 +30,13 @@ @@ -30,14 +30,13 @@
30 30
31 EventListController.prototype.toggleView = function () { 31 EventListController.prototype.toggleView = function () {
32 var vm = this; 32 var vm = this;
  33 + vm.isListVisible = !vm.isListVisible;
  34 + };
33 35
34 - if(vm.isListVisible) {  
35 - // animate hide  
36 - } else {  
37 - // animate show  
38 - } 36 + EventListController.prototype.subscribe = function (data) {
  37 + var vm = this;
39 38
40 - vm.isListVisible = !vm.isListVisible; 39 + vm.$log.debug('data', data);
41 }; 40 };
42 41
43 var directive = { 42 var directive = {
src/app/components/event-list/event-list.html
  Diff comments   View file @8015cdf
1 <div class="event-list"> 1 <div class="event-list">
2 - <div class="event-tab--trigger" ng-click="eventListCtrl.toggleView()"> 2 + <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()">
3 <div class="event-tab--header"> 3 <div class="event-tab--header">
4 <div class="event-tab--icon"> 4 <div class="event-tab--icon">
5 <span class="glyphicon glyphicon-calendar" arria-hidden="true"></span> 5 <span class="glyphicon glyphicon-calendar" arria-hidden="true"></span>
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 </div> 8 </div>
9 <button class="btn btn-link event-tab--button"> 9 <button class="btn btn-link event-tab--button">
10 <span>18 bate-papos agendados</span> 10 <span>18 bate-papos agendados</span>
11 - <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 11 + <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
12 </button> 12 </button>
13 </div> 13 </div>
14 14
@@ -23,13 +23,88 @@ @@ -23,13 +23,88 @@
23 <div class="event-list--minimize"> 23 <div class="event-list--minimize">
24 <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()"> 24 <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()">
25 <span>Minimizar</span> 25 <span>Minimizar</span>
26 - <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> 26 + <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
27 </button> 27 </button>
28 </div> 28 </div>
29 </div> 29 </div>
30 <div class="event-list--table-wrapper"> 30 <div class="event-list--table-wrapper">
31 - <table class="event-list--table">  
32 - </table> 31 + <div class="table-responsive">
  32 + <table class="table event-list--table">
  33 + <!-- <thead></thead> -->
  34 + <tbody>
  35 + <tr>
  36 + <td>
  37 + <span class="date">dd/mm/aaaa</span>
  38 + <span class="separator">-</span>
  39 + <span class="time">HH:mm</span>
  40 + <span class="separator">-</span>
  41 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  42 + <button type="button" class="btn" ng-click="eventListCtrl.subscribe('EVENT_ID')">
  43 + Inscreva-se
  44 + <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span>
  45 + </button>
  46 + <span class="subscribers">123 inscritos</span>
  47 + </td>
  48 + </tr>
  49 + <tr>
  50 + <td>
  51 + <span class="date">dd/mm/aaaa</span>
  52 + <span class="separator">-</span>
  53 + <span class="time">HH:mm</span>
  54 + <span class="separator">-</span>
  55 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  56 + <button type="button" class="btn">Inscreva-se</button>
  57 + <span class="subscribers">123 inscritos</span>
  58 + </td>
  59 + </tr>
  60 + <tr>
  61 + <td>
  62 + <span class="date">dd/mm/aaaa</span>
  63 + <span class="separator">-</span>
  64 + <span class="time">HH:mm</span>
  65 + <span class="separator">-</span>
  66 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  67 + <button type="button" class="btn">Inscreva-se</button>
  68 + <span class="subscribers">123 inscritos</span>
  69 + </td>
  70 + </tr>
  71 + <tr>
  72 + <td>
  73 + <span class="date">dd/mm/aaaa</span>
  74 + <span class="separator">-</span>
  75 + <span class="time">HH:mm</span>
  76 + <span class="separator">-</span>
  77 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  78 + <button type="button" class="btn">Inscreva-se</button>
  79 + <span class="subscribers">123 inscritos</span>
  80 + </td>
  81 + </tr>
  82 + <tr>
  83 + <td>
  84 + <span class="date">dd/mm/aaaa</span>
  85 + <span class="separator">-</span>
  86 + <span class="time">HH:mm</span>
  87 + <span class="separator">-</span>
  88 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  89 + <button type="button" class="btn">Inscreva-se</button>
  90 + <span class="subscribers">123 inscritos</span>
  91 + </td>
  92 + </tr>
  93 + <tr>
  94 + <td>
  95 + <span class="date">dd/mm/aaaa</span>
  96 + <span class="separator">-</span>
  97 + <span class="time">HH:mm</span>
  98 + <span class="separator">-</span>
  99 + <span class="description">Mais médicos, Segurança Nacional, SAMU</span>
  100 + <button type="button" class="btn">Inscreva-se</button>
  101 + <span class="subscribers">123 inscritos</span>
  102 + </td>
  103 + </tr>
  104 + </tbody>
  105 + <!-- <tfooter></tfooter> -->
  106 + </table>
  107 + </div>
33 </div> 108 </div>
34 </div> 109 </div>
35 </div> 110 </div>
src/app/components/event-list/event-list.scss
  Diff comments   View file @8015cdf
1 .event-list { 1 .event-list {
2 position: relative; 2 position: relative;
3 - background-color: #eee; 3 + background-color: #eeeeee;
4 4
5 .event-list--panel { 5 .event-list--panel {
6 - height: 400px;  
7 - border: 1px solid #333; 6 + height: 310px;
  7 + border: 1px solid #333333;
8 padding: 20px; 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; 9 + margin: 20px 0;
  10 + line-height: 20px;
  11 + transition: .3s linear all;
14 12
15 &.ng-hide { 13 &.ng-hide {
16 height: 0px; 14 height: 0px;
  15 + line-height: 0px;
17 } 16 }
18 17
19 .event-list--header { 18 .event-list--header {
20 - border-bottom: 1px solid #333; 19 + border-bottom: 1px solid #333333;
21 } 20 }
22 21
23 .event-list--icon { 22 .event-list--icon {
@@ -43,12 +42,27 @@ @@ -43,12 +42,27 @@
43 height: $event-tab-height; 42 height: $event-tab-height;
44 position: absolute; 43 position: absolute;
45 right: 0; 44 right: 0;
46 - top: -$event-tab-height; 45 + top: $event-tab-height * (-1);
47 padding: 5px; 46 padding: 5px;
48 - background-color: #eee;  
49 - border: 1px solid #333;  
50 - 47 + background-color: #eeeeee;
  48 + border: 1px solid #333333;
51 text-align: center; 49 text-align: center;
  50 + line-height: 20px;
  51 + cursor: pointer;
  52 + transition: .3s linear all;
  53 + overflow: hidden;
  54 + z-index: 100;
  55 +
  56 + &.ng-hide {
  57 + height: 0px;
  58 + line-height: 0px;
  59 + top: -1px;
  60 + }
  61 + }
  62 +
  63 + .table-responsive {
  64 + height: 250px;
  65 + overflow-y: scroll;
52 } 66 }
53 67
54 .event-tab--icon { 68 .event-tab--icon {