From da022fa28e9388c486e5a17a828009728f53b39d Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Wed, 9 Sep 2015 14:32:36 -0300
Subject: [PATCH] Switch from table to pure css at event-list

---
 src/app/components/event-list/event-list.html | 64 ++++++++++++++++++++++++++++++----------------------------------
 src/app/components/event-list/event-list.scss | 14 ++++++--------
 src/app/layout.scss                           |  8 ++++++++
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/app/components/event-list/event-list.html b/src/app/components/event-list/event-list.html
index 7d3299c..217fad3 100644
--- a/src/app/components/event-list/event-list.html
+++ b/src/app/components/event-list/event-list.html
@@ -41,40 +41,36 @@
 
       <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed">
         <div class="event-list--table-wrapper">
-          <div class="table-responsive">
-            <table class="table event-list--table">
-              <!-- <thead></thead> -->
-              <tbody>
-                <tr ng-repeat="event in vm.events">
-                  <td width="50%">
-                    <span class="glyphicon glyphicon-calendar"></span>
-                    <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span>
-                    <span class="separator">-</span>
-                    <span class="glyphicon glyphicon-time"></span>
-                    <span class="time">{{event.start_date | date : "HH:mm"}}</span>
-                    <span class="separator">-</span>
-                    <span class="description">{{::event.title}}</span>
-                  </td>
-                  <td align="center">
-                    <span class="theme">{{::event.categories[0].name}}</span>
-                  </td>
-                  <td align="right">
-                    <div ng-if="event.followers_count > 0">
-                      <b>{{::event.followers_count}}</b>
-                      <br/>
-                      <span>Inscritos</span>
-                    </div>
-                  </td>
-                  <td align="left">
-                    <button type="button" class="btn color-theme-common-bg" ng-click="vm.subscribe(event.id)">
-                      Inscreva-se
-                      <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>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-              <!-- <tfooter></tfooter> -->
-            </table>
+          <div class="row row-level-1" ng-repeat="event in vm.events | orderBy:'start_date':false">
+            <div class="col-xs-12 col-sm-4 col-md-6 vcenter">
+              <span class="glyphicon glyphicon-calendar"></span>
+              <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span>
+              <span class="separator">-</span>
+              <span class="glyphicon glyphicon-time"></span>
+              <span class="time">{{event.start_date | date : "HH:mm"}}</span>
+              <span class="separator">-</span>
+              <span class="description">{{::event.title}}</span>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-3 text-center vcenter">
+              <span class="theme">{{::event.categories[0].name}}</span>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-3 text-right vcenter">
+              <div class="row">
+                <div class="col-xs-6 text-right">
+                  <div ng-if="event.followers_count > 0">
+                    <b>{{::event.followers_count}}</b>
+                    <br/>
+                    <span>Inscritos</span>
+                  </div>
+                </div>
+                <div class="col-xs-6">
+                  <button type="button" class="btn color-theme-common-bg" ng-click="vm.subscribe(event.id)">
+                    Inscreva-se
+                    <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>
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/app/components/event-list/event-list.scss b/src/app/components/event-list/event-list.scss
index fc25710..dcf7e22 100644
--- a/src/app/components/event-list/event-list.scss
+++ b/src/app/components/event-list/event-list.scss
@@ -103,9 +103,9 @@
         }
     }
 
-    .table-responsive {
+    .event-list--panel {
         width: 100%;
-        height: 280px;
+        height: 260px;
         overflow-y: scroll;
 
         .btn {
@@ -114,15 +114,13 @@
             font-weight: bold;
         }
 
-        tr > td {
+        .row-level-1 {
+            padding: 5px 0;
             border-top: 1px solid #ccc;
         }
-        tr:last-child > td {
-            border-bottom: 1px solid #ccc;
-        }
 
-        td {
-            vertical-align: middle;
+        .row-level-1:last-child {
+            border-bottom: 1px solid #ccc;
         }
     }
 
diff --git a/src/app/layout.scss b/src/app/layout.scss
index 86883cb..e98b45d 100644
--- a/src/app/layout.scss
+++ b/src/app/layout.scss
@@ -115,6 +115,14 @@
   }
 }
 
+.vcenter {
+    display: inline-block;
+    vertical-align: middle;
+    float: none;
+    margin-right: -2px;
+    margin-left: -2px;
+}
+
 .btn-submit {
     background-color: $defaultblue;
     color: #fff;
--
libgit2 0.21.2