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 30  
31 31 EventListController.prototype.toggleView = function () {
32 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 42 var directive = {
... ...
src/app/components/event-list/event-list.html
  Diff comments   View file @8015cdf
1 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 3 <div class="event-tab--header">
4 4 <div class="event-tab--icon">
5 5 <span class="glyphicon glyphicon-calendar" arria-hidden="true"></span>
... ... @@ -8,7 +8,7 @@
8 8 </div>
9 9 <button class="btn btn-link event-tab--button">
10 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 12 </button>
13 13 </div>
14 14  
... ... @@ -23,13 +23,88 @@
23 23 <div class="event-list--minimize">
24 24 <button type="button" class="btn btn-link" ng-click="eventListCtrl.toggleView()">
25 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 27 </button>
28 28 </div>
29 29 </div>
30 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 108 </div>
34 109 </div>
35 110 </div>
... ...
src/app/components/event-list/event-list.scss
  Diff comments   View file @8015cdf
1 1 .event-list {
2 2 position: relative;
3   - background-color: #eee;
  3 + background-color: #eeeeee;
4 4  
5 5 .event-list--panel {
6   - height: 400px;
7   - border: 1px solid #333;
  6 + height: 310px;
  7 + border: 1px solid #333333;
8 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 13 &.ng-hide {
16 14 height: 0px;
  15 + line-height: 0px;
17 16 }
18 17  
19 18 .event-list--header {
20   - border-bottom: 1px solid #333;
  19 + border-bottom: 1px solid #333333;
21 20 }
22 21  
23 22 .event-list--icon {
... ... @@ -43,12 +42,27 @@
43 42 height: $event-tab-height;
44 43 position: absolute;
45 44 right: 0;
46   - top: -$event-tab-height;
  45 + top: $event-tab-height * (-1);
47 46 padding: 5px;
48   - background-color: #eee;
49   - border: 1px solid #333;
50   -
  47 + background-color: #eeeeee;
  48 + border: 1px solid #333333;
51 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 68 .event-tab--icon {
... ...