Download as
Browse Code »

Commit b3e32b039542e48796a5e56d87b1b3b6207ce11a

Authored by Leonardo Merlin
1 parent 936eb108
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

Small frontend improv

Showing 5 changed files with 36 additions and 13 deletions   Show diff stats
src/app/components/programa/programa.scss
  Diff comments   View file @b3e32b0
1 1 // Variables
2   -$program-box-padding: 20px;
  2 +$program-box-space: 20px;
3 3 $scale: 1.1;
4 4 $time: .3s;
5 5  
... ... @@ -7,7 +7,7 @@ $time: .3s;
7 7 .program-box {
8 8 cursor: pointer;
9 9 background-color: #fff;
10   - margin-bottom: $program-box-padding;
  10 + margin-bottom: $program-box-space;
11 11  
12 12 .contraste & {
13 13 color: #fff;
... ... @@ -22,7 +22,7 @@ $time: .3s;
22 22 display: block;
23 23 height: 30px;
24 24 margin: 0;
25   - padding: 5px $program-box-padding;
  25 + padding: 5px $program-box-space;
26 26 color: #ffffff;
27 27  
28 28 @each $category, $color in $categories {
... ... @@ -39,15 +39,16 @@ $time: .3s;
39 39 &--title {
40 40 font-size: 18px;
41 41 font-weight: bold;
42   - padding: 0 $program-box-padding;
  42 + padding: 0 $program-box-space;
  43 + margin: 0 0 10px 0;
43 44 }
44 45  
45 46 &--abstract {
46   - padding: 0 $program-box-padding;
  47 + padding: 0 $program-box-space;
47 48 }
48 49  
49 50 &--button {
50   - padding: $program-box-padding;
  51 + padding: $program-box-space;
51 52 .btn {
52 53 color: #fff;
53 54 font-weight: bold;
... ... @@ -73,6 +74,7 @@ $time: .3s;
73 74  
74 75 overflow: hidden;
75 76 text-align: center;
  77 + min-height: 170px;
76 78 }
77 79  
78 80 &--image {
... ...
src/app/components/programas/programas.directive.js
  Diff comments   View file @b3e32b0
... ... @@ -106,7 +106,7 @@
106 106 vm.categoryFilter = category;
107 107 }else{
108 108 // already selected. Unselect.
109   - vm.showAll();
  109 + vm.showAll($event);
110 110 }
111 111 };
112 112  
... ...
src/app/components/programas/programas.html
  Diff comments   View file @b3e32b0
... ... @@ -34,11 +34,13 @@
34 34 <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
35 35 <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
36 36  
37   - <select class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
  37 + <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
  38 + <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
38 39 <option value="">-- Filtrar por tema --</option>
39   - </select>
  40 + </select> -->
40 41  
41   - <select class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
  42 + <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
  43 + <select id="selectOrderBy" name="selectOrderBy" class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
42 44 <option value="">-- Ordernar por: --</option>
43 45 </select>
44 46  
... ... @@ -56,7 +58,7 @@
56 58 </aside>
57 59 </div>
58 60 <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query | limitTo:vm.limitTo as results">
59   - <programa-box program="program" display="'box'" class="col-sm-12 col-md-6"></programa-box>
  61 + <programa-box program="program" display="'box'" class="col-xs-12 col-sm-6"></programa-box>
60 62 <div ng-if="$odd" class="clearfix"></div>
61 63 </div>
62 64 <div class="animate-repeat" ng-if="results.length == 0">
... ...
src/app/partials/programas/programa.html
  Diff comments   View file @b3e32b0
1 1 <div class="container">
2 2  
3   - <div class="article-bar">
  3 + <div class="article-bar" ng-class="programa.program.categories[0].slug">
4 4 <div class="navbar">
5 5 <div class="navbar-header">
6 6 <button class="btn btn-link" ng-click="programa.goBack()">
... ... @@ -12,7 +12,7 @@
12 12 <div class="navbar-left">
13 13 <button class="btn btn-link">
14 14 <span class="glyphicon glyphicon-refresh"></span>
15   - <span class="category-name">{{programa.program.categories[0].name}}</span>
  15 + <span class="category-name">{{::programa.program.categories[0].name}}</span>
16 16 </button>
17 17 </div>
18 18 <div class="navbar-right">
... ...
src/app/partials/programas/programas.scss 0 → 100644
  Diff comments   View file @b3e32b0
... ... @@ -0,0 +1,19 @@
  1 +.article-bar {
  2 +
  3 + .btn {
  4 + color: #fff;
  5 + font-weight: bold;
  6 + }
  7 +
  8 + @each $category, $color in $categories {
  9 + &.#{$category} {
  10 + background-color: $color;
  11 + }
  12 + }
  13 +
  14 + .contraste & {
  15 + background-color: #262626;
  16 + }
  17 +}
  18 +
  19 +
... ...