Commit 8a9c29fb1a2aba064ae2657bb35d208b8cb174bb
1 parent
fbc2b3c7
Exists in
master
and in
8 other branches
add theme color by category on category-list--item
Showing
3 changed files
with
33 additions
and
19 deletions
Show diff stats
src/app/components/programas/programas.directive.js
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | function programaList() { |
10 | 10 | |
11 | 11 | /** @ngInject */ |
12 | - function ProgramaListController($scope, $location, $filter, $anchorScroll, $log) { | |
12 | + function ProgramaListController($scope, $element, $location, $filter, $log) { | |
13 | 13 | $log.debug('ProgramaListController'); |
14 | 14 | |
15 | 15 | // alias |
... | ... | @@ -17,10 +17,11 @@ |
17 | 17 | |
18 | 18 | // dependencies |
19 | 19 | vm.$scope = $scope; |
20 | + vm.$element = $element; | |
20 | 21 | vm.$location = $location; |
21 | 22 | vm.$filter = $filter; |
22 | - vm.$anchorScroll = $anchorScroll; | |
23 | 23 | vm.$log = $log; |
24 | + vm.defaultLimit = 6; | |
24 | 25 | |
25 | 26 | // initialization |
26 | 27 | vm.init(); |
... | ... | @@ -47,15 +48,14 @@ |
47 | 48 | |
48 | 49 | // Add initial values for the filter |
49 | 50 | vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null; |
50 | - vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : 4; | |
51 | + vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit; | |
51 | 52 | vm.categoryFilter = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null; |
52 | 53 | vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null; |
53 | 54 | vm.reverse = (vm.search && vm.search.reverso) ? true : false; |
54 | 55 | |
55 | - if(!angular.equals({}, vm.search)){ | |
56 | - vm.$location.hash('lista-de-programas'); | |
57 | - vm.$anchorScroll(); | |
58 | - console.log('scrolled'); | |
56 | + if (!angular.equals({}, vm.search)) { | |
57 | + var $el = vm.$element; | |
58 | + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow'); | |
59 | 59 | } |
60 | 60 | |
61 | 61 | // update window location params |
... | ... | @@ -66,7 +66,7 @@ |
66 | 66 | }); |
67 | 67 | |
68 | 68 | vm.$scope.$watch('vm.limitTo', function(newValue, oldValue){ |
69 | - vm.search.limite = (newValue && newValue !== 4) ? newValue : null; | |
69 | + vm.search.limite = (newValue && newValue !== vm.defaultLimit) ? newValue : null; | |
70 | 70 | vm.$location.search('limite', vm.search.limite); |
71 | 71 | vm.filtredProgramList = vm.getFiltredPrograms(); |
72 | 72 | }); |
... | ... | @@ -95,7 +95,7 @@ |
95 | 95 | var vm = this; |
96 | 96 | |
97 | 97 | vm.query = null; |
98 | - vm.limitTo = 4; | |
98 | + vm.limitTo = vm.defaultLimit; | |
99 | 99 | vm.categoryFilter = null; |
100 | 100 | vm.orderCriteria = null; |
101 | 101 | }; |
... | ... | @@ -154,7 +154,7 @@ |
154 | 154 | var orderBy = vm.$filter('orderBy'); |
155 | 155 | var limitTo = vm.$filter('limitTo'); |
156 | 156 | var limit = vm.limitTo ? vm.limitTo : 4; |
157 | - | |
157 | + | |
158 | 158 | if(categoryFilter){ |
159 | 159 | output = _filterByCategory(output, categoryFilter); |
160 | 160 | } |
... | ... | @@ -188,8 +188,8 @@ |
188 | 188 | break; |
189 | 189 | } |
190 | 190 | |
191 | - output = limitTo(output, limit); | |
192 | - | |
191 | + output = limitTo(output, limit); | |
192 | + | |
193 | 193 | return output; |
194 | 194 | }; |
195 | 195 | |
... | ... | @@ -216,21 +216,21 @@ |
216 | 216 | resultByCategory[prop] = shuffle(categoryWithPrograms); |
217 | 217 | } |
218 | 218 | } |
219 | - | |
219 | + | |
220 | 220 | // Concat all into result array |
221 | 221 | // > while has program at Lists on resultByCategory |
222 | 222 | var hasProgram = true; |
223 | 223 | while (hasProgram) { |
224 | - | |
224 | + | |
225 | 225 | var foundProgram = false; |
226 | 226 | // each categoryList with array of program |
227 | 227 | for (var prop in resultByCategory){ |
228 | - | |
228 | + | |
229 | 229 | if( resultByCategory.hasOwnProperty( prop ) ) { |
230 | 230 | var categoryWithPrograms = resultByCategory[prop]; |
231 | - | |
231 | + | |
232 | 232 | if (categoryWithPrograms.length > 0 ) { |
233 | - var pivotProgram = categoryWithPrograms.pop(); | |
233 | + var pivotProgram = categoryWithPrograms.pop(); | |
234 | 234 | result.push(pivotProgram); |
235 | 235 | foundProgram = true; |
236 | 236 | } |
... | ... | @@ -286,7 +286,7 @@ |
286 | 286 | |
287 | 287 | var out = []; |
288 | 288 | |
289 | - | |
289 | + | |
290 | 290 | |
291 | 291 | return out; |
292 | 292 | } | ... | ... |
src/app/components/programas/programas.html
... | ... | @@ -3,7 +3,7 @@ |
3 | 3 | <div class="category-list"> |
4 | 4 | <nav class="navigation"> |
5 | 5 | <h3 class="title"><b>Programas</b> por Tema</h3> |
6 | - <div class="list-group category-list"> | |
6 | + <div class="list-group category-list" ng-class="vm.categoryFilter.slug"> | |
7 | 7 | <button type="button" class="list-group-item category-item" |
8 | 8 | ng-repeat="category in vm.categories" |
9 | 9 | ng-class="{active: vm.categoryFilter.slug === category.slug}" | ... | ... |
src/app/components/programas/programas.scss
... | ... | @@ -11,4 +11,18 @@ |
11 | 11 | top: 2px; |
12 | 12 | } |
13 | 13 | } |
14 | + | |
15 | +} | |
16 | + | |
17 | +.category-list { | |
18 | + | |
19 | + @each $category, $color in $categories { | |
20 | + &.#{$category} { | |
21 | + .list-group-item.active, | |
22 | + .list-group-item.active:hover, | |
23 | + .list-group-item.active:focus { | |
24 | + background-color: $color; | |
25 | + } | |
26 | + } | |
27 | + } | |
14 | 28 | } | ... | ... |