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 29 <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed">
30 30 <div class="event-list--table-wrapper">
31 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 43 <span class="description">{{::event.title}}</span>
40 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 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 49 <div class="row">
46 50 <div class="col-xs-6 text-right" ng-class="{'col-xs-12': event.isOld}">
47 51 <div ng-if="event.followers_count > 50">
... ... @@ -62,5 +66,17 @@
62 66 </div>
63 67 </div>
64 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 81 </section>
66 82 </div>
... ...
src/app/components/event-list/event-list.scss
  Diff comments   View file @cd9dd7a
... ... @@ -30,7 +30,7 @@
30 30 }
31 31  
32 32 .row-level-1 {
33   - height: 48px;
  33 + // height: 48px;
34 34 line-height: 30px;
35 35 padding: 5px 0;
36 36 border-bottom: 1px solid #ccc;
... ... @@ -40,25 +40,11 @@
40 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 50 &--table{
... ... @@ -105,6 +91,7 @@
105 91  
106 92 .icon-circle {
107 93 font-size: 28px;
  94 + line-height: 33px;
108 95 border-radius: 100%;
109 96 padding: 8px 8px 8px 10px;
110 97 background-color: #fff;
... ... @@ -124,6 +111,9 @@
124 111 }
125 112  
126 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 119 .event-tab--icon {
... ... @@ -141,4 +131,18 @@
141 131 width: 100%;
142 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 }
... ...