Commit 8015cdf21dde1b50513a90480cb7250523810159
1 parent
c4eb4fda
Exists in
master
and in
8 other branches
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
... | ... | @@ -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
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
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 { | ... | ... |