Commit da022fa28e9388c486e5a17a828009728f53b39d
1 parent
a813f8e0
Exists in
master
and in
8 other branches
Switch from table to pure css at event-list
Showing
3 changed files
with
44 additions
and
42 deletions
Show diff stats
src/app/components/event-list/event-list.html
| ... | ... | @@ -41,40 +41,36 @@ |
| 41 | 41 | |
| 42 | 42 | <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed"> |
| 43 | 43 | <div class="event-list--table-wrapper"> |
| 44 | - <div class="table-responsive"> | |
| 45 | - <table class="table event-list--table"> | |
| 46 | - <!-- <thead></thead> --> | |
| 47 | - <tbody> | |
| 48 | - <tr ng-repeat="event in vm.events"> | |
| 49 | - <td width="50%"> | |
| 50 | - <span class="glyphicon glyphicon-calendar"></span> | |
| 51 | - <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span> | |
| 52 | - <span class="separator">-</span> | |
| 53 | - <span class="glyphicon glyphicon-time"></span> | |
| 54 | - <span class="time">{{event.start_date | date : "HH:mm"}}</span> | |
| 55 | - <span class="separator">-</span> | |
| 56 | - <span class="description">{{::event.title}}</span> | |
| 57 | - </td> | |
| 58 | - <td align="center"> | |
| 59 | - <span class="theme">{{::event.categories[0].name}}</span> | |
| 60 | - </td> | |
| 61 | - <td align="right"> | |
| 62 | - <div ng-if="event.followers_count > 0"> | |
| 63 | - <b>{{::event.followers_count}}</b> | |
| 64 | - <br/> | |
| 65 | - <span>Inscritos</span> | |
| 66 | - </div> | |
| 67 | - </td> | |
| 68 | - <td align="left"> | |
| 69 | - <button type="button" class="btn color-theme-common-bg" ng-click="vm.subscribe(event.id)"> | |
| 70 | - Inscreva-se | |
| 71 | - <span class="sr-only">no bate-papo com (ministro) no dia {event.start_date | date : "dd/MM/yyyy"}} as {{event.start_date | date : "HH:mm"}} horas</span> | |
| 72 | - </button> | |
| 73 | - </td> | |
| 74 | - </tr> | |
| 75 | - </tbody> | |
| 76 | - <!-- <tfooter></tfooter> --> | |
| 77 | - </table> | |
| 44 | + <div class="row row-level-1" ng-repeat="event in vm.events | orderBy:'start_date':false"> | |
| 45 | + <div class="col-xs-12 col-sm-4 col-md-6 vcenter"> | |
| 46 | + <span class="glyphicon glyphicon-calendar"></span> | |
| 47 | + <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span> | |
| 48 | + <span class="separator">-</span> | |
| 49 | + <span class="glyphicon glyphicon-time"></span> | |
| 50 | + <span class="time">{{event.start_date | date : "HH:mm"}}</span> | |
| 51 | + <span class="separator">-</span> | |
| 52 | + <span class="description">{{::event.title}}</span> | |
| 53 | + </div> | |
| 54 | + <div class="col-xs-12 col-sm-4 col-md-3 text-center vcenter"> | |
| 55 | + <span class="theme">{{::event.categories[0].name}}</span> | |
| 56 | + </div> | |
| 57 | + <div class="col-xs-12 col-sm-4 col-md-3 text-right vcenter"> | |
| 58 | + <div class="row"> | |
| 59 | + <div class="col-xs-6 text-right"> | |
| 60 | + <div ng-if="event.followers_count > 0"> | |
| 61 | + <b>{{::event.followers_count}}</b> | |
| 62 | + <br/> | |
| 63 | + <span>Inscritos</span> | |
| 64 | + </div> | |
| 65 | + </div> | |
| 66 | + <div class="col-xs-6"> | |
| 67 | + <button type="button" class="btn color-theme-common-bg" ng-click="vm.subscribe(event.id)"> | |
| 68 | + Inscreva-se | |
| 69 | + <span class="sr-only">no bate-papo com (ministro) no dia {event.start_date | date : "dd/MM/yyyy"}} as {{event.start_date | date : "HH:mm"}} horas</span> | |
| 70 | + </button> | |
| 71 | + </div> | |
| 72 | + </div> | |
| 73 | + </div> | |
| 78 | 74 | </div> |
| 79 | 75 | </div> |
| 80 | 76 | </div> | ... | ... |
src/app/components/event-list/event-list.scss
| ... | ... | @@ -103,9 +103,9 @@ |
| 103 | 103 | } |
| 104 | 104 | } |
| 105 | 105 | |
| 106 | - .table-responsive { | |
| 106 | + .event-list--panel { | |
| 107 | 107 | width: 100%; |
| 108 | - height: 280px; | |
| 108 | + height: 260px; | |
| 109 | 109 | overflow-y: scroll; |
| 110 | 110 | |
| 111 | 111 | .btn { |
| ... | ... | @@ -114,15 +114,13 @@ |
| 114 | 114 | font-weight: bold; |
| 115 | 115 | } |
| 116 | 116 | |
| 117 | - tr > td { | |
| 117 | + .row-level-1 { | |
| 118 | + padding: 5px 0; | |
| 118 | 119 | border-top: 1px solid #ccc; |
| 119 | 120 | } |
| 120 | - tr:last-child > td { | |
| 121 | - border-bottom: 1px solid #ccc; | |
| 122 | - } | |
| 123 | 121 | |
| 124 | - td { | |
| 125 | - vertical-align: middle; | |
| 122 | + .row-level-1:last-child { | |
| 123 | + border-bottom: 1px solid #ccc; | |
| 126 | 124 | } |
| 127 | 125 | } |
| 128 | 126 | ... | ... |
src/app/layout.scss
| ... | ... | @@ -115,6 +115,14 @@ |
| 115 | 115 | } |
| 116 | 116 | } |
| 117 | 117 | |
| 118 | +.vcenter { | |
| 119 | + display: inline-block; | |
| 120 | + vertical-align: middle; | |
| 121 | + float: none; | |
| 122 | + margin-right: -2px; | |
| 123 | + margin-left: -2px; | |
| 124 | +} | |
| 125 | + | |
| 118 | 126 | .btn-submit { |
| 119 | 127 | background-color: $defaultblue; |
| 120 | 128 | color: #fff; | ... | ... |