From cd9dd7a8b18a80aae6b46ef97c429b0ac73ce8c6 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Mon, 14 Sep 2015 15:24:28 -0300
Subject: [PATCH] Fix styles at event-list

---
 src/app/components/event-list/event-list.html | 36 ++++++++++++++++++++++++++----------
 src/app/components/event-list/event-list.scss | 44 ++++++++++++++++++++++++--------------------
 2 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/app/components/event-list/event-list.html b/src/app/components/event-list/event-list.html
index 0f9e4e1..275120a 100644
--- a/src/app/components/event-list/event-list.html
+++ b/src/app/components/event-list/event-list.html
@@ -29,19 +29,23 @@
       <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed">
         <div class="event-list--table-wrapper">
           <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>
+            <div class="col-xs-12 col-sm-4 col-md-3 vcenter">
+              <span class="date-wrapper">
+                <span class="glyphicon glyphicon-calendar"></span>
+                <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span>
+              </span>
+              <span class="time-wrapper">
+                <span class="glyphicon glyphicon-time"></span>
+                <span class="time">{{event.start_date | date : "HH:mm"}}</span>
+              </span>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-5 vcenter">
               <span class="description">{{::event.title}}</span>
             </div>
-            <div class="col-xs-12 col-sm-4 col-md-3 text-center vcenter">
+            <!-- <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" style="padding-right: 20px;">
+            </div> -->
+            <div class="col-xs-12 col-sm-4 col-md-4 text-right vcenter" style="padding-right: 20px;">
               <div class="row">
                 <div class="col-xs-6 text-right" ng-class="{'col-xs-12': event.isOld}">
                   <div ng-if="event.followers_count > 50">
@@ -62,5 +66,17 @@
         </div>
       </div>
     </div>
+    <div class="visible-xs" ng-show="!vm.isCollapsed">
+      <div class="minimize color-theme-common-bg" ng-click="vm.toggleView()">
+        <div class="row">
+          <div class="col-xs-6">
+            <button type="button" class="btn btn-link" ng-click="">MINIMIZAR</button>
+          </div>
+          <div class="col-xs-5 text-right">
+            <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 </div>
diff --git a/src/app/components/event-list/event-list.scss b/src/app/components/event-list/event-list.scss
index 3141e97..44bf4c5 100644
--- a/src/app/components/event-list/event-list.scss
+++ b/src/app/components/event-list/event-list.scss
@@ -30,7 +30,7 @@
         }
 
         .row-level-1 {
-            height: 48px;
+            // height: 48px;
             line-height: 30px;
             padding: 5px 0;
             border-bottom: 1px solid #ccc;
@@ -40,25 +40,11 @@
             border-bottom: none;
         }
 
-        // .event-list--header {
-        //     border-bottom: 1px solid #333333;
-        // }
-
-        // .event-list--icon {
-        //     font-size: 25px;
-        //     display: inline-block;
-        // }
-
-        // .event-list--title {
-        //     margin: 0 10px;
-        //     display: inline-block;
-        // }
-
-        // .event-list--minimize {
-        //     display: inline-block;
-        //     float: right;
-        //     width: 100px;
-        // }
+
+        @media screen and (max-width: $screen-sm) {
+            height: auto;
+            overflow: visible;
+        }
     }
 
     &--table{
@@ -105,6 +91,7 @@
 
         .icon-circle {
             font-size: 28px;
+            line-height: 33px;
             border-radius: 100%;
             padding: 8px 8px 8px 10px;
             background-color: #fff;
@@ -124,6 +111,9 @@
     }
 
     .event-list--panel {
+        .date-wrapper {margin-left: 16px; }
+        .time-wrapper {margin-left: 22px; }
+        // .description {margin-left: 22px; }
     }
 
     .event-tab--icon {
@@ -141,4 +131,18 @@
         width: 100%;
         white-space: normal;
     }
+
+    .minimize {
+        cursor: pointer;
+
+        .btn,
+        .glyphicon {
+            color: #fff;
+            font-weight: bold;
+        }
+
+        .glyphicon {
+            line-height: 32px;
+        }
+    }
 }
--
libgit2 0.21.2