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 62 vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
63 63 vm.search.filtro = newValue ? newValue : null;
64 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 70 vm.filtredProgramList = vm.getFiltredPrograms();
66 71 });
67 72  
... ... @@ -74,6 +79,9 @@
74 79 vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) {
75 80 vm.search.tema = newValue ? newValue.slug : null;
76 81 vm.$location.search('tema', vm.search.tema);
  82 + if(vm.search.tema){
  83 + vm.limitTo = vm.programs.length;
  84 + }
77 85 vm.filtredProgramList = vm.getFiltredPrograms();
78 86 });
79 87  
... ...
src/app/components/programas/programas.html
  Diff comments   View file @f293f0e
1 1 <div id="lista-de-programas" class="row">
2   - <div class="col-sm-3">
  2 + <div class="col-sm-4">
3 3 <div class="category-list">
4 4 <nav class="navigation">
5 5 <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
... ... @@ -19,10 +19,10 @@
19 19 </div>
20 20 </div>
21 21  
22   - <div class="col-sm-9">
  22 + <div class="col-sm-8">
23 23 <article class="program-list">
24 24 <header class="header">
25   - <h2>Programas</h2>
  25 + <h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
26 26 <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
27 27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
28 28 </button>
... ...
src/app/components/programas/programas.scss
  Diff comments   View file @f293f0e
... ... @@ -13,7 +13,7 @@
13 13 }
14 14  
15 15 .category-list {
16   - &--title {
  16 + .category-list--title {
17 17 color: #ffffff;
18 18 font-size: 16px;
19 19 margin: 0;
... ... @@ -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 32 position: relative;
33 33 text-transform: uppercase;
34 34 font-weight: bold;
35 35 padding: 0;
36 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 41 margin-left: 70px;
43 42 margin-right: 30px;
44 43 display: inline-block;
  44 + z-index: 99999;
45 45 }
46 46  
47 47 &--icon-circle {
... ... @@ -50,9 +50,26 @@
50 50 position: absolute;
51 51 top: 10px;
52 52 left: 10px;
53   - border: 1px solid #fff;
  53 + // border: 1px solid #fff;
54 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 73 @each $category, $color in $categories {
57 74 &.#{$category} {
58 75 background-color: $color;
... ... @@ -75,13 +92,19 @@
75 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 }
... ...