Download as
Browse Code »

Commit cd9dd7a8b18a80aae6b46ef97c429b0ac73ce8c6

Authored by Leonardo Merlin
1 parent a0d254fa
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Fix styles at event-list

Showing 2 changed files with 50 additions and 30 deletions   Show diff stats
src/app/components/event-list/event-list.html
  Diff comments   View file @cd9dd7a
@@ -29,19 +29,23 @@ @@ -29,19 +29,23 @@
29 <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed"> 29 <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed">
30 <div class="event-list--table-wrapper"> 30 <div class="event-list--table-wrapper">
31 <div class="row row-level-1" ng-repeat="event in vm.events | orderBy:'start_date':false"> 31 <div class="row row-level-1" ng-repeat="event in vm.events | orderBy:'start_date':false">
32 - <div class="col-xs-12 col-sm-4 col-md-6 vcenter">  
33 - <span class="glyphicon glyphicon-calendar"></span>  
34 - <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span>  
35 - <span class="separator">-</span>  
36 - <span class="glyphicon glyphicon-time"></span>  
37 - <span class="time">{{event.start_date | date : "HH:mm"}}</span>  
38 - <span class="separator">-</span> 32 + <div class="col-xs-12 col-sm-4 col-md-3 vcenter">
  33 + <span class="date-wrapper">
  34 + <span class="glyphicon glyphicon-calendar"></span>
  35 + <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span>
  36 + </span>
  37 + <span class="time-wrapper">
  38 + <span class="glyphicon glyphicon-time"></span>
  39 + <span class="time">{{event.start_date | date : "HH:mm"}}</span>
  40 + </span>
  41 + </div>
  42 + <div class="col-xs-12 col-sm-4 col-md-5 vcenter">
39 <span class="description">{{::event.title}}</span> 43 <span class="description">{{::event.title}}</span>
40 </div> 44 </div>
41 - <div class="col-xs-12 col-sm-4 col-md-3 text-center vcenter"> 45 + <!-- <div class="col-xs-12 col-sm-4 col-md-3 text-center vcenter">
42 <span class="theme">{{::event.categories[0].name}}</span> 46 <span class="theme">{{::event.categories[0].name}}</span>
43 - </div>  
44 - <div class="col-xs-12 col-sm-4 col-md-3 text-right vcenter" style="padding-right: 20px;"> 47 + </div> -->
  48 + <div class="col-xs-12 col-sm-4 col-md-4 text-right vcenter" style="padding-right: 20px;">
45 <div class="row"> 49 <div class="row">
46 <div class="col-xs-6 text-right" ng-class="{'col-xs-12': event.isOld}"> 50 <div class="col-xs-6 text-right" ng-class="{'col-xs-12': event.isOld}">
47 <div ng-if="event.followers_count > 50"> 51 <div ng-if="event.followers_count > 50">
@@ -62,5 +66,17 @@ @@ -62,5 +66,17 @@
62 </div> 66 </div>
63 </div> 67 </div>
64 </div> 68 </div>
  69 + <div class="visible-xs" ng-show="!vm.isCollapsed">
  70 + <div class="minimize color-theme-common-bg" ng-click="vm.toggleView()">
  71 + <div class="row">
  72 + <div class="col-xs-6">
  73 + <button type="button" class="btn btn-link" ng-click="">MINIMIZAR</button>
  74 + </div>
  75 + <div class="col-xs-5 text-right">
  76 + <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
  77 + </div>
  78 + </div>
  79 + </div>
  80 + </div>
65 </section> 81 </section>
66 </div> 82 </div>
src/app/components/event-list/event-list.scss
  Diff comments   View file @cd9dd7a
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 } 30 }
31 31
32 .row-level-1 { 32 .row-level-1 {
33 - height: 48px; 33 + // height: 48px;
34 line-height: 30px; 34 line-height: 30px;
35 padding: 5px 0; 35 padding: 5px 0;
36 border-bottom: 1px solid #ccc; 36 border-bottom: 1px solid #ccc;
@@ -40,25 +40,11 @@ @@ -40,25 +40,11 @@
40 border-bottom: none; 40 border-bottom: none;
41 } 41 }
42 42
43 - // .event-list--header {  
44 - // border-bottom: 1px solid #333333;  
45 - // }  
46 -  
47 - // .event-list--icon {  
48 - // font-size: 25px;  
49 - // display: inline-block;  
50 - // }  
51 -  
52 - // .event-list--title {  
53 - // margin: 0 10px;  
54 - // display: inline-block;  
55 - // }  
56 -  
57 - // .event-list--minimize {  
58 - // display: inline-block;  
59 - // float: right;  
60 - // width: 100px;  
61 - // } 43 +
  44 + @media screen and (max-width: $screen-sm) {
  45 + height: auto;
  46 + overflow: visible;
  47 + }
62 } 48 }
63 49
64 &--table{ 50 &--table{
@@ -105,6 +91,7 @@ @@ -105,6 +91,7 @@
105 91
106 .icon-circle { 92 .icon-circle {
107 font-size: 28px; 93 font-size: 28px;
  94 + line-height: 33px;
108 border-radius: 100%; 95 border-radius: 100%;
109 padding: 8px 8px 8px 10px; 96 padding: 8px 8px 8px 10px;
110 background-color: #fff; 97 background-color: #fff;
@@ -124,6 +111,9 @@ @@ -124,6 +111,9 @@
124 } 111 }
125 112
126 .event-list--panel { 113 .event-list--panel {
  114 + .date-wrapper {margin-left: 16px; }
  115 + .time-wrapper {margin-left: 22px; }
  116 + // .description {margin-left: 22px; }
127 } 117 }
128 118
129 .event-tab--icon { 119 .event-tab--icon {
@@ -141,4 +131,18 @@ @@ -141,4 +131,18 @@
141 width: 100%; 131 width: 100%;
142 white-space: normal; 132 white-space: normal;
143 } 133 }
  134 +
  135 + .minimize {
  136 + cursor: pointer;
  137 +
  138 + .btn,
  139 + .glyphicon {
  140 + color: #fff;
  141 + font-weight: bold;
  142 + }
  143 +
  144 + .glyphicon {
  145 + line-height: 32px;
  146 + }
  147 + }
144 } 148 }