Download as
Browse Code »

Commit 3761f0cb8e80088e8b5df1ff2a437356980cadae

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

Add some animations at category list menu

Showing 3 changed files with 44 additions and 11 deletions   Show diff stats
src/app/components/programas/programas.directive.js
  Diff comments   View file @3761f0c
... ... @@ -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 @3761f0c
... ... @@ -22,7 +22,7 @@
22 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 @3761f0c
... ... @@ -34,23 +34,42 @@
34 34 font-weight: bold;
35 35 padding: 0;
36 36 height: 68px;
  37 + overflow: hidden;
37 38 }
38 39  
39 40 .category-list--label {
40 41 margin-left: 70px;
41 42 margin-right: 30px;
42 43 display: inline-block;
  44 + z-index: 99999;
43 45 }
44 46  
45   - .category-list--icon-circle {
  47 + &--icon-circle {
46 48 width: 48px;
47 49 height: 48px;
48 50 position: absolute;
49 51 top: 10px;
50 52 left: 10px;
51   - border: 1px solid #fff;
  53 + // border: 1px solid #fff;
52 54 border-radius: 48px;
53 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 +
54 73 @each $category, $color in $categories {
55 74 &.#{$category} {
56 75 background-color: $color;
... ... @@ -73,13 +92,19 @@
73 92 transform: scale(1.4);
74 93 }
75 94  
76   - @each $category, $color in $categories {
77   - &.#{$category} {
78   - .list-group-item.active,
79   - .list-group-item.active:hover,
80   - .list-group-item.active:focus {
81   - background-color: $color;
82   - }
83   - }
  95 + .list-group-item.active,
  96 + .list-group-item.active:hover,
  97 + .list-group-item.active:focus {
  98 + background-color: #f5f5f5;
84 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 + // }
85 110 }
... ...