Commit a0d254fa48faa3599f70925cc99975fc28d3091c
1 parent
8cbe7ec1
Exists in
master
and in
8 other branches
Fix event-list styles
Showing
2 changed files
with
32 additions
and
43 deletions
Show diff stats
src/app/components/event-list/event-list.html
... | ... | @@ -11,10 +11,11 @@ |
11 | 11 | Agenda <b>Dialoga Brasil</b> |
12 | 12 | </h1> |
13 | 13 | </div> |
14 | - <div class="col-sm-6"> | |
14 | + <div class="col-sm-6 text-right"> | |
15 | 15 | <h2 class="event-bar--trigger-toggle text-right"> |
16 | 16 | <span><b>18</b> bate papos <b>agendados</b></span> |
17 | - <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | |
17 | + <span ng-if="vm.isCollapsed" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | |
18 | + <span ng-if="!vm.isCollapsed" class="glyphicon glyphicon-menu-up" aria-hidden="true"></span> | |
18 | 19 | </h2> |
19 | 20 | </div> |
20 | 21 | </div> |
... | ... | @@ -25,20 +26,6 @@ |
25 | 26 | |
26 | 27 | <section class="section-table"> |
27 | 28 | <div class="container"> |
28 | - <!-- <div class="event-tab--trigger" ng-show="vm.isCollapsed" ng-click="vm.toggleView()"> | |
29 | - <div class="event-tab--header"> | |
30 | - <div class="event-tab--icon"> | |
31 | - <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> | |
32 | - </div> | |
33 | - <div class="event-tab--title">Bate-Papo com ministr@s</div> | |
34 | - </div> | |
35 | - <button class="btn btn-link event-tab--button"> | |
36 | - <span class="event-tab--total-scheduled">18</span> | |
37 | - <span>bate-papos agendados</span> | |
38 | - <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> | |
39 | - </button> | |
40 | - </div> --> | |
41 | - | |
42 | 29 | <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed"> |
43 | 30 | <div class="event-list--table-wrapper"> |
44 | 31 | <div class="row row-level-1" ng-repeat="event in vm.events | orderBy:'start_date':false"> | ... | ... |
src/app/components/event-list/event-list.scss
... | ... | @@ -10,18 +10,36 @@ |
10 | 10 | } |
11 | 11 | |
12 | 12 | .event-list--panel { |
13 | - height: 310px; | |
14 | - padding: 0px; | |
15 | - margin: 20px 0; | |
16 | - line-height: 20px; | |
13 | + width: 100%; | |
14 | + height: 240px; | |
15 | + margin: 8px 0; | |
16 | + padding: 0 20px; | |
17 | + overflow-x: hidden; | |
18 | + overflow-y: scroll; | |
17 | 19 | transition: .3s linear all; |
18 | - overflow: hidden; | |
19 | 20 | |
20 | 21 | &.ng-hide { |
21 | 22 | height: 0; |
22 | 23 | line-height: 0; |
23 | 24 | } |
24 | 25 | |
26 | + .btn { | |
27 | + color: #e1e1e1; | |
28 | + text-transform: uppercase; | |
29 | + font-weight: bold; | |
30 | + } | |
31 | + | |
32 | + .row-level-1 { | |
33 | + height: 48px; | |
34 | + line-height: 30px; | |
35 | + padding: 5px 0; | |
36 | + border-bottom: 1px solid #ccc; | |
37 | + } | |
38 | + | |
39 | + .row-level-1:last-child { | |
40 | + border-bottom: none; | |
41 | + } | |
42 | + | |
25 | 43 | // .event-list--header { |
26 | 44 | // border-bottom: 1px solid #333333; |
27 | 45 | // } |
... | ... | @@ -61,10 +79,7 @@ |
61 | 79 | line-height: 20px; |
62 | 80 | cursor: pointer; |
63 | 81 | |
64 | - -webkit-transition: -webkit-transform 0.3s linear all; | |
65 | - -moz-transition: -moz-transform 0.3s linear all; | |
66 | - -o-transition: -o-transform 0.3s linear all; | |
67 | - transition: transform 0.3s linear all; | |
82 | + transition: all 0.3s linear all; | |
68 | 83 | |
69 | 84 | overflow: hidden; |
70 | 85 | z-index: 100; |
... | ... | @@ -96,32 +111,19 @@ |
96 | 111 | } |
97 | 112 | |
98 | 113 | &-toggle { |
114 | + display: inline-block; | |
115 | + text-transform: uppercase; | |
116 | + font-size: 16px; | |
117 | + | |
99 | 118 | .glyphicon { |
100 | 119 | position: relative; |
101 | 120 | top: 5px; |
121 | + font-size: 30px; | |
102 | 122 | } |
103 | 123 | } |
104 | 124 | } |
105 | 125 | |
106 | 126 | .event-list--panel { |
107 | - width: 100%; | |
108 | - height: 260px; | |
109 | - overflow-y: scroll; | |
110 | - | |
111 | - .btn { | |
112 | - color: #e1e1e1; | |
113 | - text-transform: uppercase; | |
114 | - font-weight: bold; | |
115 | - } | |
116 | - | |
117 | - .row-level-1 { | |
118 | - padding: 5px 0; | |
119 | - border-top: 1px solid #ccc; | |
120 | - } | |
121 | - | |
122 | - .row-level-1:last-child { | |
123 | - border-bottom: 1px solid #ccc; | |
124 | - } | |
125 | 127 | } |
126 | 128 | |
127 | 129 | .event-tab--icon { | ... | ... |