Commit b3e32b039542e48796a5e56d87b1b3b6207ce11a

Authored by Leonardo Merlin
1 parent 936eb108

Small frontend improv

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