Download as
Browse Code »

Commit f293f0e729b9899fdb0a4f93a350a58bf28fea52

Authored by Leonardo Merlin
2 parents c04cbc8f 3761f0cb
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

Merge branch 'merlin' of gitlab.com:participa/discussion-app into merlin

Showing 3 changed files with 49 additions and 18 deletions   Show diff stats
src/app/components/programas/programas.directive.js
  Diff comments   View file @f293f0e
@@ -62,6 +62,11 @@ @@ -62,6 +62,11 @@
62 vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) { 62 vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
63 vm.search.filtro = newValue ? newValue : null; 63 vm.search.filtro = newValue ? newValue : null;
64 vm.$location.search('filtro', vm.search.filtro); 64 vm.$location.search('filtro', vm.search.filtro);
  65 + if(vm.search.filtro){
  66 + vm.limitTo = vm.programs.length;
  67 + }else{
  68 + vm.limitTo = vm.defaultLimit;
  69 + }
65 vm.filtredProgramList = vm.getFiltredPrograms(); 70 vm.filtredProgramList = vm.getFiltredPrograms();
66 }); 71 });
67 72
@@ -74,6 +79,9 @@ @@ -74,6 +79,9 @@
74 vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) { 79 vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) {
75 vm.search.tema = newValue ? newValue.slug : null; 80 vm.search.tema = newValue ? newValue.slug : null;
76 vm.$location.search('tema', vm.search.tema); 81 vm.$location.search('tema', vm.search.tema);
  82 + if(vm.search.tema){
  83 + vm.limitTo = vm.programs.length;
  84 + }
77 vm.filtredProgramList = vm.getFiltredPrograms(); 85 vm.filtredProgramList = vm.getFiltredPrograms();
78 }); 86 });
79 87
src/app/components/programas/programas.html
  Diff comments   View file @f293f0e
1 <div id="lista-de-programas" class="row"> 1 <div id="lista-de-programas" class="row">
2 - <div class="col-sm-3"> 2 + <div class="col-sm-4">
3 <div class="category-list"> 3 <div class="category-list">
4 <nav class="navigation"> 4 <nav class="navigation">
5 <h3 class="category-list--title"><b>Programas</b> por Tema</h3> 5 <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
@@ -19,10 +19,10 @@ @@ -19,10 +19,10 @@
19 </div> 19 </div>
20 </div> 20 </div>
21 21
22 - <div class="col-sm-9"> 22 + <div class="col-sm-8">
23 <article class="program-list"> 23 <article class="program-list">
24 <header class="header"> 24 <header class="header">
25 - <h2>Programas</h2> 25 + <h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
26 <button type="button" class="btn btn-link" ng-click="vm.showAll($event)"> 26 <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas 27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
28 </button> 28 </button>
src/app/components/programas/programas.scss
  Diff comments   View file @f293f0e
@@ -13,7 +13,7 @@ @@ -13,7 +13,7 @@
13 } 13 }
14 14
15 .category-list { 15 .category-list {
16 - &--title { 16 + .category-list--title {
17 color: #ffffff; 17 color: #ffffff;
18 font-size: 16px; 18 font-size: 16px;
19 margin: 0; 19 margin: 0;
@@ -25,23 +25,23 @@ @@ -25,23 +25,23 @@
25 } 25 }
26 26
27 27
28 - &--group { 28 + .category-list--group {
29 } 29 }
30 30
31 - &--item { 31 + .category-list--item {
32 position: relative; 32 position: relative;
33 text-transform: uppercase; 33 text-transform: uppercase;
34 font-weight: bold; 34 font-weight: bold;
35 padding: 0; 35 padding: 0;
36 height: 68px; 36 height: 68px;
37 - display: table-cell;  
38 - vertical-align: middle; 37 + overflow: hidden;
39 } 38 }
40 39
41 - &--label { 40 + .category-list--label {
42 margin-left: 70px; 41 margin-left: 70px;
43 margin-right: 30px; 42 margin-right: 30px;
44 display: inline-block; 43 display: inline-block;
  44 + z-index: 99999;
45 } 45 }
46 46
47 &--icon-circle { 47 &--icon-circle {
@@ -50,9 +50,26 @@ @@ -50,9 +50,26 @@
50 position: absolute; 50 position: absolute;
51 top: 10px; 51 top: 10px;
52 left: 10px; 52 left: 10px;
53 - border: 1px solid #fff; 53 + // border: 1px solid #fff;
54 border-radius: 48px; 54 border-radius: 48px;
55 55
  56 + -webkit-transition: -webkit-transform 0.2s ease-in-out;
  57 + -moz-transition: -moz-transform 0.2s ease-in-out;
  58 + -o-transition: -o-transform 0.2s ease-in-out;
  59 + transition: transform 0.2s ease-in-out;
  60 +
  61 + // -webkit-transition: all 0.2s ease-in-out;
  62 + // -moz-transition: all 0.2s ease-in-out;
  63 + // -o-transition: all 0.2s ease-in-out;
  64 + // transition: all 0.2s ease-in-out;
  65 +
  66 + z-index: 0;
  67 +
  68 + .active & {
  69 + transform: scale(15);
  70 + z-index: -1;
  71 + }
  72 +
56 @each $category, $color in $categories { 73 @each $category, $color in $categories {
57 &.#{$category} { 74 &.#{$category} {
58 background-color: $color; 75 background-color: $color;
@@ -75,13 +92,19 @@ @@ -75,13 +92,19 @@
75 transform: scale(1.4); 92 transform: scale(1.4);
76 } 93 }
77 94
78 - @each $category, $color in $categories {  
79 - &.#{$category} {  
80 - .list-group-item.active,  
81 - .list-group-item.active:hover,  
82 - .list-group-item.active:focus {  
83 - background-color: $color;  
84 - }  
85 - } 95 + .list-group-item.active,
  96 + .list-group-item.active:hover,
  97 + .list-group-item.active:focus {
  98 + background-color: #f5f5f5;
86 } 99 }
  100 +
  101 + // @each $category, $color in $categories {
  102 + // &.#{$category} {
  103 + // .list-group-item.active,
  104 + // .list-group-item.active:hover,
  105 + // .list-group-item.active:focus {
  106 + // background-color: $color;
  107 + // }
  108 + // }
  109 + // }
87 } 110 }