Commit 95ba77865bca9997223fd883aa4d232b82e3a956

Authored by Leonardo Merlin
1 parent 8a9c29fb

Add icons with spire. Using css3 transform scale.

Showing 84 changed files with 331 additions and 245 deletions   Show diff stats
gulp/images.js 0 → 100644
... ... @@ -0,0 +1,21 @@
  1 +'use strict';
  2 +
  3 +var path = require('path');
  4 +var gulp = require('gulp');
  5 +var conf = require('./conf');
  6 +
  7 +var gulpif = require('gulp-if');
  8 +var sprity = require('sprity');
  9 +
  10 +gulp.task('sprites', function () {
  11 + var src = path.join(conf.paths.src, '/assets/images/icons/*.png');
  12 + var destCss = path.join(conf.paths.tmp, '/serve/app/');
  13 + var destImg = path.join(conf.paths.tmp, '/serve/assets/images/icons');
  14 +
  15 + return sprity.src({
  16 + src: src,
  17 + style: 'sprite.css',
  18 + cssPath: '../assets/images/icons/'
  19 + })
  20 + .pipe(gulpif('*.png', gulp.dest(destImg), gulp.dest(destCss)));
  21 +});
... ...
gulp/inject.js
... ... @@ -9,7 +9,7 @@ var $ = require('gulp-load-plugins')();
9 9 var wiredep = require('wiredep').stream;
10 10 var _ = require('lodash');
11 11  
12   -gulp.task('inject', ['scripts', 'styles'], function () {
  12 +gulp.task('inject', ['scripts', 'styles', 'sprites'], function () {
13 13 var injectStyles = gulp.src([
14 14 path.join(conf.paths.tmp, '/serve/app/**/*.css'),
15 15 path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
... ...
gulp/watch.js
... ... @@ -25,6 +25,16 @@ gulp.task('watch', ['inject'], function () {
25 25 }
26 26 });
27 27  
  28 + gulp.watch([
  29 + path.join(conf.paths.src, '/assets/images/icons/*.png')
  30 + ], function(event) {
  31 + if(isOnlyChange(event)) {
  32 + gulp.start('sprites');
  33 + } else {
  34 + gulp.start('inject');
  35 + }
  36 + });
  37 +
28 38 gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
29 39 if(isOnlyChange(event)) {
30 40 gulp.start('scripts');
... ...
package.json
... ... @@ -32,7 +32,7 @@
32 32 "gulp-sass": "~2.0.1",
33 33 "gulp-angular-filesort": "~1.1.1",
34 34 "main-bower-files": "~2.8.0",
35   - "merge-stream": "~0.1.7",
  35 + "merge-stream": "^1.0.0",
36 36 "jshint-stylish": "~2.0.0",
37 37 "wiredep": "~2.2.2",
38 38 "karma": "~0.12.36",
... ... @@ -47,7 +47,9 @@
47 47 "http-proxy-middleware": "~0.0.5",
48 48 "chalk": "~1.0.0",
49 49 "uglify-save-license": "~0.4.1",
50   - "wrench": "~1.5.8"
  50 + "wrench": "~1.5.8",
  51 + "gulp-if": "^1.2.5",
  52 + "sprity": "^1.0.7"
51 53 },
52 54 "engines": {
53 55 "node": ">=0.10.0"
... ...
src/app/components/navbar/navbar.directive.js
... ... @@ -11,7 +11,7 @@
11 11 restrict: 'E',
12 12 templateUrl: 'app/components/navbar/navbar.html',
13 13 scope: {
14   - creationDate: '='
  14 + creationDate: '='
15 15 },
16 16 controller: NavbarController,
17 17 controllerAs: 'vm',
... ... @@ -23,11 +23,15 @@
23 23 /** @ngInject */
24 24 function NavbarController($log) {
25 25 $log.debug('NavbarController');
26   - // var vm = this;
27 26  
28   - // "vm.creation" is avaible by directive option "bindToController: true"
29   - // vm.relativeDate = moment(vm.creationDate).fromNow();
  27 + var vm = this;
  28 +
  29 + vm.scrollTo = function(hash) {
  30 + var $el = angular.element('#' + hash);
  31 + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
  32 + };
30 33 }
  34 +
31 35 }
32 36  
33 37 })();
... ...
src/app/components/navbar/navbar.html
1   -<nav class="navbar navbar-static-top">
  1 +<nav class="header-navbar navbar navbar-static-top">
2 2 <div class="container-fluid">
3 3 <div class="navbar-header">
4 4 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
... ... @@ -16,7 +16,7 @@
16 16 <div id="navbar-collapse" class="collapse navbar-collapse">
17 17 <ul class="nav navbar-nav">
18 18 <li><a ui-sref="sobre">Sobre</a></li>
19   - <li><a ui-sref="programas">Programas</a></li>
  19 + <li><a ui-sref="inicio({'#':'lista-de-programas'})" ng-click="vm.scrollTo('lista-de-programas')">Programas</a></li>
20 20 <!-- <li><a ui-sref="ranking">Ranking</a></li> -->
21 21 <!-- <li><a ui-sref="duvidas">Dúvidas</a></li> -->
22 22 <!-- <li><a ui-sref="respostas">Respostas</a></li> -->
... ...
src/app/components/navbar/navbar.scss
1   -.navbar-brand {
2   - height: auto;
3   -}
  1 +.header-navbar {
4 2  
5   -.navbar-nav > li > a {
6   - padding-top: 30px;
7   - padding-bottom: 30px;
8   -}
  3 + .navbar-brand {
  4 + height: auto;
  5 + }
  6 +
  7 + .navbar-nav a {
  8 + padding-top: 30px;
  9 + padding-bottom: 30px;
  10 + text-transform: uppercase;
  11 + color: #03316f;
  12 +
  13 + -webkit-transition: all 0.2s ease-in-out;
  14 + -moz-transition: all 0.2s ease-in-out;
  15 + -o-transition: all 0.2s ease-in-out;
  16 + transition: all 0.2s ease-in-out;
  17 +
  18 + .contraste & {
  19 + color: #fff;
  20 + }
  21 + }
9 22  
10   -.navbar-toggle .icon-bar {
11   - background-color: #333;
  23 + .navbar-toggle .icon-bar {
  24 + background-color: #333;
  25 + }
12 26 }
... ...
src/app/components/programas/programas.directive.js
... ... @@ -27,10 +27,10 @@
27 27 vm.init();
28 28 }
29 29  
30   - ProgramaListController.prototype.init = function () {
  30 + ProgramaListController.prototype.init = function() {
31 31 var vm = this;
32 32  
33   - if(!vm.article){
  33 + if (!vm.article) {
34 34 vm.$log.warn('no article to display. Tip: use a ng-if before use this directive');
35 35 return;
36 36 }
... ... @@ -38,9 +38,9 @@
38 38 vm.categories = vm.article.categories;
39 39 vm.programs = vm.article.children;
40 40 vm.orderCriteries = [
41   - { label: 'Aleatório', name: 'aleatorio' },
42 41 { label: 'Título', name: 'titulo' },
43   - { label: 'Tema', name: 'tema' }
  42 + { label: 'Tema', name: 'tema' },
  43 + { label: 'Aleatório', name: 'aleatorio' }
44 44 ];
45 45  
46 46 vm.filtredProgramList = vm.getFiltredPrograms();
... ... @@ -59,31 +59,31 @@
59 59 }
60 60  
61 61 // update window location params
62   - vm.$scope.$watch('vm.query', function(newValue, oldValue){
  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 65 vm.filtredProgramList = vm.getFiltredPrograms();
66 66 });
67 67  
68   - vm.$scope.$watch('vm.limitTo', function(newValue, oldValue){
  68 + vm.$scope.$watch('vm.limitTo', function(newValue/*, oldValue*/) {
69 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 });
73 73  
74   - vm.$scope.$watch('vm.categoryFilter', function(newValue, oldValue){
  74 + vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) {
75 75 vm.search.tema = newValue ? newValue.slug : null;
76 76 vm.$location.search('tema', vm.search.tema);
77 77 vm.filtredProgramList = vm.getFiltredPrograms();
78 78 });
79 79  
80   - vm.$scope.$watch('vm.orderCriteria', function(newValue, oldValue){
  80 + vm.$scope.$watch('vm.orderCriteria', function(newValue/*, oldValue*/) {
81 81 vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
82 82 vm.$location.search('ordem', vm.search.ordem);
83 83 vm.filtredProgramList = vm.getFiltredPrograms();
84 84 });
85 85  
86   - vm.$scope.$watch('vm.reverse', function(newValue, oldValue){
  86 + vm.$scope.$watch('vm.reverse', function(newValue/*, oldValue*/) {
87 87 vm.search.reverso = newValue ? newValue : null;
88 88 vm.$location.search('reverso', vm.search.reverso);
89 89 vm.filtredProgramList = vm.getFiltredPrograms();
... ... @@ -91,7 +91,7 @@
91 91  
92 92 };
93 93  
94   - ProgramaListController.prototype.resetFilterValues = function () {
  94 + ProgramaListController.prototype.resetFilterValues = function() {
95 95 var vm = this;
96 96  
97 97 vm.query = null;
... ... @@ -100,40 +100,41 @@
100 100 vm.orderCriteria = null;
101 101 };
102 102  
103   - ProgramaListController.prototype.getIconClasses = function (category) {
  103 + ProgramaListController.prototype.getIconClasses = function(category) {
104 104 var vm = this;
105 105  
106 106 vm.$log.debug('[TODO] getIconClasses of category:', category);
107 107 return 'glyphicon glyphicon-exclamation-sign';
108 108 };
109 109  
110   - ProgramaListController.prototype.getCategoryBySlug = function (categorySlug) {
  110 + ProgramaListController.prototype.getCategoryBySlug = function(categorySlug) {
111 111 var vm = this;
112 112 var result = null;
113 113  
114   - angular.forEach(vm.categories, function (value, key){
115   - if(value.slug === categorySlug){
  114 + angular.forEach(vm.categories, function(value, key) {
  115 + if (value.slug === categorySlug) {
116 116 result = value;
117 117 }
118   - })
  118 + });
  119 +
119 120 return result;
120   - }
  121 + };
121 122  
122   - ProgramaListController.prototype.filterByCategory = function (category, $event) {
  123 + ProgramaListController.prototype.filterByCategory = function(category, $event) {
123 124 var vm = this;
124 125  
125 126 $event.stopPropagation();
126 127  
127   - if(category !== vm.categoryFilter){
  128 + if (category !== vm.categoryFilter) {
128 129  
129 130 // selected new filter
130 131 vm.categoryFilter = category;
131   - }else{
  132 + } else {
132 133 vm.categoryFilter = null;
133 134 }
134 135 };
135 136  
136   - ProgramaListController.prototype.showAll = function ($event) {
  137 + ProgramaListController.prototype.showAll = function($event) {
137 138 var vm = this;
138 139  
139 140 $event.stopPropagation();
... ... @@ -142,7 +143,7 @@
142 143 vm.limitTo = vm.programs.length;
143 144 };
144 145  
145   - ProgramaListController.prototype.getFiltredPrograms = function () {
  146 + ProgramaListController.prototype.getFiltredPrograms = function() {
146 147 var vm = this;
147 148  
148 149 var input = vm.programs;
... ... @@ -155,15 +156,15 @@
155 156 var limitTo = vm.$filter('limitTo');
156 157 var limit = vm.limitTo ? vm.limitTo : 4;
157 158  
158   - if(categoryFilter){
  159 + if (categoryFilter) {
159 160 output = _filterByCategory(output, categoryFilter);
160 161 }
161 162  
162   - if(query){
  163 + if (query) {
163 164 output = filter(output, query, false);
164 165 }
165 166  
166   - switch(orderCriteria.name) {
  167 + switch (orderCriteria.name) {
167 168 case 'titulo':
168 169 output = orderBy(output, 'title', vm.reverse);
169 170 break;
... ... @@ -171,21 +172,23 @@
171 172 output = orderBy(output, 'categories[0].name', vm.reverse);
172 173 break;
173 174 case 'more_participants':
174   - $log.info('Criteria not handled yet: ', orderCriteria);
  175 + vm.$log.info('Criteria not handled yet: ', orderCriteria);
175 176 break;
176 177 case 'aleatorio':
177   - default:
178 178 // shuffling
179   - // if(!vm._isShuffled){
180   - output = vm.filterShuffle(output);
  179 + // if (!vm._isShuffled){
  180 + output = vm.filterShuffle(output);
181 181 // vm._isShuffled = true;
182 182 // }
183 183  
184   - if(vm.reverse){
  184 + if (vm.reverse) {
185 185 output = output.slice().reverse();
186 186 }
187 187  
188 188 break;
  189 + default:
  190 + vm.$log.warn('Criteria not matched: ', orderCriteria);
  191 + break;
189 192 }
190 193  
191 194 output = limitTo(output, limit);
... ... @@ -193,7 +196,7 @@
193 196 return output;
194 197 };
195 198  
196   - ProgramaListController.prototype.filterShuffle = function (input) {
  199 + ProgramaListController.prototype.filterShuffle = function(input) {
197 200 var result = [];
198 201 var resultByCategory = {};
199 202  
... ... @@ -202,7 +205,7 @@
202 205 var program = input[i];
203 206 var categorySlug = program.categories[0].slug;
204 207  
205   - if(!resultByCategory[categorySlug]){
  208 + if (!resultByCategory[categorySlug]) {
206 209 resultByCategory[categorySlug] = [];
207 210 }
208 211  
... ... @@ -210,9 +213,11 @@
210 213 }
211 214  
212 215 // shuffle each array
213   - for (var prop in resultByCategory){
214   - if( resultByCategory.hasOwnProperty( prop ) ) {
215   - var categoryWithPrograms = resultByCategory[prop];
  216 + var prop = null;
  217 + var categoryWithPrograms = null;
  218 + for (prop in resultByCategory) {
  219 + if (resultByCategory.hasOwnProperty(prop)) {
  220 + categoryWithPrograms = resultByCategory[prop];
216 221 resultByCategory[prop] = shuffle(categoryWithPrograms);
217 222 }
218 223 }
... ... @@ -224,12 +229,14 @@
224 229  
225 230 var foundProgram = false;
226 231 // each categoryList with array of program
227   - for (var prop in resultByCategory){
  232 + prop = null;
  233 + categoryWithPrograms = null;
  234 + for (prop in resultByCategory) {
228 235  
229   - if( resultByCategory.hasOwnProperty( prop ) ) {
230   - var categoryWithPrograms = resultByCategory[prop];
  236 + if (resultByCategory.hasOwnProperty(prop)) {
  237 + categoryWithPrograms = resultByCategory[prop];
231 238  
232   - if (categoryWithPrograms.length > 0 ) {
  239 + if (categoryWithPrograms.length > 0) {
233 240 var pivotProgram = categoryWithPrograms.pop();
234 241 result.push(pivotProgram);
235 242 foundProgram = true;
... ... @@ -237,13 +244,13 @@
237 244 }
238 245 }
239 246  
240   - if(!foundProgram){
  247 + if (!foundProgram) {
241 248 hasProgram = false;
242 249 }
243 250 }
244 251  
245 252 return result;
246   - }
  253 + };
247 254  
248 255 var directive = {
249 256 restrict: 'E',
... ... @@ -259,10 +266,10 @@
259 266 return directive;
260 267 }
261 268  
262   - function _filterByCategory (input, category){
  269 + function _filterByCategory (input, category) {
263 270 input = input || [];
264 271  
265   - if(!category){
  272 + if (!category) {
266 273 // no filter
267 274 return input;
268 275 }
... ... @@ -270,7 +277,7 @@
270 277 var out = [];
271 278 for (var i = 0; i < input.length; i++) {
272 279 var program = input[i];
273   - if(program.categories[0].slug === category.slug){
  280 + if (program.categories[0].slug === category.slug) {
274 281 out.push(program);
275 282 }
276 283 }
... ... @@ -278,19 +285,6 @@
278 285 return out;
279 286 }
280 287  
281   - function _filterByCriteria (input, criteria, reverse){
282   - var vm = this;
283   - input = input || [];
284   - criteria = criteria || {};
285   - reverse = reverse || false;
286   -
287   - var out = [];
288   -
289   -
290   -
291   - return out;
292   - }
293   -
294 288 // -> Fisher–Yates shuffle algorithm
295 289 function shuffle (array) {
296 290 var currentIndex = array.length, temporaryValue, randomIndex ;
... ... @@ -311,5 +305,4 @@
311 305 return array;
312 306 }
313 307  
314   -
315 308 })();
... ...
src/app/components/programas/programas.html
... ... @@ -2,15 +2,16 @@
2 2 <div class="col-sm-3">
3 3 <div class="category-list">
4 4 <nav class="navigation">
5   - <h3 class="title"><b>Programas</b> por Tema</h3>
  5 + <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
6 6 <div class="list-group category-list" ng-class="vm.categoryFilter.slug">
7   - <button type="button" class="list-group-item category-item"
  7 + <button type="button" class="list-group-item category-list--item"
8 8 ng-repeat="category in vm.categories"
9 9 ng-class="{active: vm.categoryFilter.slug === category.slug}"
10 10 ng-click="vm.filterByCategory(category, $event)">
11 11  
12   - <span ng-class="[category.iconClass]"></span>
13   - <span>{{::category.name}}</span>
  12 + <span class="category-list--icon-circle" ng-class="category.slug"></span>
  13 + <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
  14 + <span class="category-list--label">{{::category.name}}</span>
14 15 <span class="glyphicon glyphicon-chevron-right pull-right"></span>
15 16  
16 17 </button>
... ... @@ -44,15 +45,15 @@
44 45 <option value="">-- Ordernar por: --</option>
45 46 </select>
46 47  
47   - <div class="checkbox">
  48 + <!-- <div class="checkbox">
48 49 <label>
49 50 <input type="checkbox" ng-model="vm.reverse">
50 51 Reverso
51 52 </label>
52   - </div>
  53 + </div> -->
53 54  
54   - <input id="programListLimit" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
55   - <label for="programListLimit" class="control-label">Limite</label>
  55 + <!-- <input id="programListLimit" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
  56 + <label for="programListLimit" class="control-label">Limite</label> -->
56 57  
57 58 </div>
58 59 </aside>
... ...
src/app/components/programas/programas.scss
1 1 .program-list {
  2 + .header {
  3 + position: relative;
  4 + height: 40px;
  5 + margin-bottom: 10px;
2 6  
3   - .header {
4   - position: relative;
5   - height: 40px;
6   - margin-bottom: 10px;
7   -
8   - button {
9   - position: absolute;
10   - right: 0;
11   - top: 2px;
  7 + button {
  8 + position: absolute;
  9 + right: 0;
  10 + top: 2px;
  11 + }
12 12 }
13   - }
14   -
15 13 }
16 14  
17 15 .category-list {
  16 + &--title {
  17 + color: #ffffff;
  18 + font-size: 16px;
  19 + margin: 0;
  20 + padding: 20px;
  21 + background-color: #484848;
  22 + border-top-left-radius: 5px;
  23 + border-top-right-radius: 5px;
  24 + overflow: hidden;
  25 + }
  26 +
  27 +
  28 + &--group {
  29 + }
  30 +
  31 + &--item {
  32 + position: relative;
  33 + text-transform: uppercase;
  34 + font-weight: bold;
  35 + padding: 0;
  36 + height: 68px;
  37 + display: table-cell;
  38 + vertical-align: middle;
  39 + }
  40 +
  41 + &--label {
  42 + margin-left: 70px;
  43 + margin-right: 30px;
  44 + display: inline-block;
  45 + }
  46 +
  47 + &--icon-circle {
  48 + width: 48px;
  49 + height: 48px;
  50 + position: absolute;
  51 + top: 10px;
  52 + left: 10px;
  53 + border: 1px solid #fff;
  54 + border-radius: 48px;
  55 +
  56 + @each $category, $color in $categories {
  57 + &.#{$category} {
  58 + background-color: $color;
  59 + }
  60 + }
  61 + }
  62 +
  63 + .category-list--icon {
  64 + position: absolute;
  65 + top: -16px;
  66 + left: -14px;
  67 + transform: scale(0.4);
  68 + }
18 69  
19 70 @each $category, $color in $categories {
20 71 &.#{$category} {
... ...
src/app/index.route.js
... ... @@ -45,18 +45,6 @@
45 45 'footer': { templateUrl: 'app/partials/footer/footer.html' }
46 46 }
47 47 })
48   - .state('programas', {
49   - url: '/programas',
50   - views: {
51   - 'header': { templateUrl: 'app/partials/header/header.html' },
52   - 'main': {
53   - templateUrl: 'app/partials/programas/programas.html',
54   - controller: 'ProgramasController',
55   - controllerAs: 'programas'
56   - },
57   - 'footer': { templateUrl: 'app/partials/footer/footer.html' }
58   - }
59   - })
60 48 .state('programa', {
61 49 url: '/programa/:slug',
62 50 views: {
... ...
src/app/index.run.js
... ... @@ -12,11 +12,12 @@
12 12 .run(runBlock);
13 13  
14 14 /** @ngInject */
15   - function runAuth($rootScope, $cookies, USER_ROLES, AUTH_EVENTS, AuthService, $log){
  15 + function runAuth($rootScope, $cookies, USER_ROLES, AUTH_EVENTS, AuthService, $log) {
16 16  
17 17 // Listner url/state changes, and check permission
18   - $rootScope.$on('$stateChangeStart', function (event, next) {
19   - if(!next.data || !next.data.authorizedRoles){
  18 + $rootScope.$on('$stateChangeStart', function(event, next) {
  19 +
  20 + if (!next.data || !next.data.authorizedRoles) {
20 21 $log.debug('public url/state');
21 22 return;
22 23 }
... ... @@ -42,32 +43,34 @@
42 43 /** @ngInject */
43 44 function runAccessibility($rootScope, $timeout, $cookies, $log) {
44 45  
45   - var contrast = $cookies.get('dialoga_contraste') === "true";
  46 + var contrast = $cookies.get('dialoga_contraste') === 'true';
46 47 adjustContrast(contrast);
47 48  
48   - function adjustContrast(state){
  49 + function adjustContrast(state) {
49 50 var bodyEl = angular.element(document).find('body');
50 51 angular.element(bodyEl).toggleClass('contraste', !!state);
51 52 }
52 53  
53   - $rootScope.toggleContrast = function () {
  54 + $rootScope.toggleContrast = function() {
54 55 contrast = !contrast;
55 56 $cookies.put('dialoga_contraste', contrast);
56 57 adjustContrast(contrast);
57 58 };
58 59  
59   - $rootScope.focusMainContent = function ($event) {
  60 + $rootScope.focusMainContent = function($event) {
60 61  
61 62 // prevent skip link from redirecting
62 63 if ($event) { $event.preventDefault(); }
63 64  
64 65 var mainContentArea = document.querySelector('[role="main"]');
65 66  
66   - if ( mainContentArea ) {
67   - $timeout(function(){
68   - mainContentArea.focus();
69   - },90);
70   - }else{
  67 + if (mainContentArea) {
  68 + $timeout(function() {
  69 + var $el = angular.element(mainContentArea);
  70 +
  71 + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
  72 + }, 90);
  73 + } else {
71 74 $log.warn('role="main" not found.');
72 75 }
73 76 };
... ... @@ -76,42 +79,45 @@
76 79 }
77 80  
78 81 /** @ngInject */
79   - function runHistory($rootScope, $log) {
  82 + function runHistory($rootScope) {
80 83 $rootScope.$on('$stateChangeSuccess', function(event, toState, toStateParams, fromState, fromStateParams) {
81 84 $rootScope.$previousState = { state: fromState, params: fromStateParams};
82 85 });
83 86 }
84 87  
85 88 /** @ngInject */
86   - function runPath($rootScope, api, $log) {
87   - var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test(window.location.href));
  89 + function runPath($rootScope, api, $window, $log) {
  90 + var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test($window.location.href));
88 91 $rootScope.basePath = isProduction ? api.hostProd : api.hostHom;
89 92  
90 93 $log.debug('runPath end.');
91 94 }
92 95  
93 96 /** @ngInject */
94   - function runColorUtils($log) {
95   -
96   - window.ColorLuminance = function (hex, lum) {
  97 + function runColorUtils($window) {
  98 +
  99 + $window.ColorLuminance = function(hex, lum) {
97 100  
98 101 // validate hex string
99 102 hex = String(hex).replace(/[^0-9a-f]/gi, '');
100 103 if (hex.length < 6) {
101   - hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
  104 + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
102 105 }
103 106 lum = lum || 0;
104 107  
105 108 // convert to decimal and change luminosity
106   - var rgb = "#", c, i;
  109 + var rgb = '#';
  110 + var c;
  111 + var i;
  112 +
107 113 for (i = 0; i < 3; i++) {
108   - c = parseInt(hex.substr(i*2,2), 16);
  114 + c = parseInt(hex.substr(i * 2, 2), 16);
109 115 c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
110   - rgb += ("00"+c).substr(c.length);
  116 + rgb += ('00' + c).substr(c.length);
111 117 }
112 118  
113 119 return rgb;
114   - }
  120 + };
115 121 }
116 122  
117 123 /** @ngInject */
... ...
src/app/index.scss
... ... @@ -28,6 +28,21 @@ $categories-descriptions: (saude: &quot;Saúde é direito de todos e dever do Estado.
28 28  
29 29 body {
30 30 // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  31 + &.contraste {
  32 + color: #fff;
  33 + background-color: #000;
  34 +
  35 + a,
  36 + .btn {
  37 + color: #fff;
  38 + background-color: #000;
  39 + }
  40 +
  41 + .skip-links a:focus {
  42 + background-color: #000 !important;
  43 + border-color: #fff;
  44 + }
  45 + }
31 46 }
32 47  
33 48  
... ...
src/app/partials/article/article.controller.js
... ... @@ -23,12 +23,13 @@
23 23  
24 24 vm.page = vm.$state.current.name;
25 25 vm.article = null;
26   - switch(vm.page){
  26 + vm.loading = true;
  27 + switch (vm.page){
27 28 case 'sobre':
28   - vm.ArticleService.getAbout(handleSuccess);
  29 + vm.ArticleService.getAbout(handleSuccess, handleError);
29 30 break;
30 31 case 'termos-de-uso':
31   - vm.ArticleService.getTerms(handleSuccess);
  32 + vm.ArticleService.getTerms(handleSuccess, handleError);
32 33 break;
33 34 default:
34 35 vm.$log.warn('Page not handled:', vm.page);
... ... @@ -36,8 +37,14 @@
36 37 }
37 38  
38 39 function handleSuccess (data) {
  40 + vm.loading = false;
39 41 vm.article = data.article;
40 42 // vm.article.body = vm.$sce.trustAsHtml(vm.article.body);
41 43 }
  44 +
  45 + function handleError (error) {
  46 + vm.loading = false;
  47 + vm.error = error;
  48 + }
42 49 };
43 50 })();
... ...
src/app/partials/article/article.html
1 1 <div class="container" role="main">
2 2 <span class="hide">{{::article.page}}</span>
  3 +
  4 + <div ng-if="article.loading">
  5 + <div class="alert alert-info">
  6 + Carregando conteúdo...
  7 + </div>
  8 + </div>
  9 +
  10 + <div ng-if="article.error">
  11 + <div class="alert alert-info">
  12 + Erro ao carregar conteúdo.
  13 + </div>
  14 + </div>
  15 +
3 16 <div ng-if="article.article">
4 17 <article>
5 18 <header>
... ...
src/app/partials/auth/auth.scss
1   -.btn-social {
2   - color: #fff;
3   - font-weight: bold;
4   -
5   - &:hover,
6   - &:focus {color: #fff;}
7   -
8   - &.btn-facebook {
9   - background-color: #33477a;
10   - &:hover,
11   - &:focus {background-color: #304373; }
12   - &:active {background-color: #33477a; }
13   - }
14   - &.btn-google-plus {
15   - background-color: #b92d25;
16   - &:hover,
17   - &:focus {background-color: #b12b23; }
18   - &:active {background-color: #b92d25; }
19   - }
20   -}
  1 +.auth-content{
21 2  
22   -.glyphicon {
23   - &.icon-white {
24   - fill: white;
25   - }
26   -}
  3 + .btn-social {
  4 + color: #fff;
  5 + font-weight: bold;
  6 +
  7 + &:hover,
  8 + &:focus {color: #fff;}
  9 +
  10 + &.btn-facebook {
  11 + background-color: #33477a;
  12 + &:hover,
  13 + &:focus {background-color: #304373; }
  14 + &:active {background-color: #33477a; }
  15 + }
  16 + &.btn-google-plus {
  17 + background-color: #b92d25;
  18 + &:hover,
  19 + &:focus {background-color: #b12b23; }
  20 + &:active {background-color: #b92d25; }
  21 + }
  22 + }
  23 +
  24 + .btn {
  25 + .contraste & {
  26 + color: #fff;
  27 + }
  28 + }
  29 + .btn-primary {
  30 + .contraste & {
  31 + background-color: #262626;
  32 + border-color: #666;
  33 + }
  34 + }
  35 +
  36 + .glyphicon {
  37 + &.icon-white {
  38 + fill: white;
  39 + }
  40 + }
  41 +
  42 + .separator-or {
  43 + border-top: 2px solid #d8d8d8;
  44 + text-align: center;
  45 + font-weight: bold;
  46 +
  47 + &:after {
  48 + content: "ou";
  49 + position: absolute;
  50 + top: 4px;
  51 + left: 50%;
  52 + margin-left: -26px;
  53 + font-size: 30px;
  54 + line-height: 30px;
  55 + padding: 0 0.25em;
  56 + background: $gray;
27 57  
28   -.separator-or {
29   - border-top: 2px solid #d8d8d8;
30   - text-align: center;
31   - font-weight: bold;
32   -
33   - &:after {
34   - content: "ou";
35   - position: absolute;
36   - top: 4px;
37   - left: 50%;
38   - margin-left: -26px;
39   - font-size: 30px;
40   - line-height: 30px;
41   - padding: 0 0.25em;
42   - background: $gray;
43   - }
  58 + .contraste & {
  59 + background: #000;
  60 + }
  61 + }
  62 + }
44 63 }
... ...
src/app/partials/auth/signin.html
1   -<section role="main" class="section-gray">
  1 +<section role="main" class="section-gray auth-content">
2 2 <div class="container">
3 3 <div class="row">
4 4 <div class="col-sm-8 col-sm-offset-2">
... ...
src/app/partials/auth/signup.html
  1 +<!-- Facebook -->
  2 +<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M18 32L12 32 12 16l-4 0 0-5.5 4 0 0-3.2C12 2.7 13.2 0 18.5 0l4.4 0 0 5.5 -2.8 0c-2.1 0-2.2 0.8-2.2 2.2l0 2.8 5 0 -0.6 5.5L18 16 18 32z"/></svg> -->
  3 +<!-- Twitter -->
  4 +<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M32 6.1c-1.2 0.5-2.4 0.9-3.8 1 1.4-0.8 2.4-2.1 2.9-3.6 -1.3 0.8-2.7 1.3-4.2 1.6 -1.2-1.3-2.9-2.1-4.8-2.1 -3.6 0-6.6 2.9-6.6 6.6 0 0.5 0.1 1 0.2 1.5 -5.5-0.3-10.3-2.9-13.5-6.9 -0.6 1-0.9 2.1-0.9 3.3 0 2.3 1.2 4.3 2.9 5.5 -1.1 0-2.1-0.3-3-0.8 0 0 0 0.1 0 0.1 0 3.2 2.3 5.8 5.3 6.4 -0.6 0.2-1.1 0.2-1.7 0.2 -0.4 0-0.8 0-1.2-0.1 0.8 2.6 3.3 4.5 6.1 4.6 -2.2 1.8-5.1 2.8-8.2 2.8 -0.5 0-1.1 0-1.6-0.1 2.9 1.9 6.4 3 10.1 3 12.1 0 18.7-10 18.7-18.7 0-0.3 0-0.6 0-0.8C30 8.5 31.1 7.4 32 6.1z"/></svg> -->
  5 +<!-- Google Plus -->
  6 +<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M17.5 2c0 0-6.3 0-8.4 0C5.3 2 1.8 4.8 1.8 8.1c0 3.4 2.6 6.1 6.4 6.1 0.3 0 0.5 0 0.8 0 -0.2 0.5-0.4 1-0.4 1.6 0 0.9 0.5 1.7 1.1 2.3 -0.5 0-0.9 0-1.5 0C3.6 18.1 0 21.1 0 24.1c0 3 3.9 4.9 8.6 4.9 5.3 0 8.2-3 8.2-6 0-2.4-0.7-3.9-2.9-5.4 -0.8-0.5-2.2-1.8-2.2-2.6 0-0.9 0.3-1.3 1.6-2.4 1.4-1.1 2.4-2.6 2.4-4.4 0-2.1-0.9-4.2-2.7-4.8l2.7 0L17.5 2zM14.5 22.5c0.1 0.3 0.1 0.6 0.1 0.9 0 2.4-1.6 4.4-6.1 4.4 -3.2 0-5.5-2-5.5-4.5 0-2.4 2.9-4.4 6.1-4.4 0.8 0 1.4 0.1 2.1 0.3C12.9 20.4 14.2 21.1 14.5 22.5zM9.4 13.4c-2.2-0.1-4.2-2.4-4.6-5.2 -0.4-2.8 1.1-5 3.2-4.9 2.2 0.1 4.2 2.3 4.6 5.2C13 11.2 11.6 13.4 9.4 13.4zM26 8L26 2 24 2 24 8 18 8 18 10 24 10 24 16 26 16 26 10 32 10 32 8z"/></svg> -->
  7 +
1 8 <section>
2 9 <div class="container">
3 10 <div class="row">
... ... @@ -8,7 +15,7 @@
8 15 </div>
9 16 </div>
10 17 </section>
11   -<section role="main" class="section-gray">
  18 +<section role="main" class="section-gray auth-content">
12 19 <div class="container">
13 20 <div class="row">
14 21 <div class="col-sm-8 col-sm-offset-2">
... ... @@ -18,9 +25,6 @@
18 25 <span class="glyphicon icon-facebook icon-white" aria-hidden="true">
19 26 <!-- Facebook -->
20 27 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M18 32L12 32 12 16l-4 0 0-5.5 4 0 0-3.2C12 2.7 13.2 0 18.5 0l4.4 0 0 5.5 -2.8 0c-2.1 0-2.2 0.8-2.2 2.2l0 2.8 5 0 -0.6 5.5L18 16 18 32z"/></svg>
21   -
22   - <!-- Twitter -->
23   - <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M32 6.1c-1.2 0.5-2.4 0.9-3.8 1 1.4-0.8 2.4-2.1 2.9-3.6 -1.3 0.8-2.7 1.3-4.2 1.6 -1.2-1.3-2.9-2.1-4.8-2.1 -3.6 0-6.6 2.9-6.6 6.6 0 0.5 0.1 1 0.2 1.5 -5.5-0.3-10.3-2.9-13.5-6.9 -0.6 1-0.9 2.1-0.9 3.3 0 2.3 1.2 4.3 2.9 5.5 -1.1 0-2.1-0.3-3-0.8 0 0 0 0.1 0 0.1 0 3.2 2.3 5.8 5.3 6.4 -0.6 0.2-1.1 0.2-1.7 0.2 -0.4 0-0.8 0-1.2-0.1 0.8 2.6 3.3 4.5 6.1 4.6 -2.2 1.8-5.1 2.8-8.2 2.8 -0.5 0-1.1 0-1.6-0.1 2.9 1.9 6.4 3 10.1 3 12.1 0 18.7-10 18.7-18.7 0-0.3 0-0.6 0-0.8C30 8.5 31.1 7.4 32 6.1z"/></svg> -->
24 28 </span>
25 29 <span class="text">
26 30 Conectar pelo Facebook
... ... @@ -30,7 +34,7 @@
30 34 <div class="col-sm-6">
31 35 <button type="button" class="btn btn-lg btn-block btn-social btn-google-plus">
32 36 <span class="glyphicon icon-google-plus icon-white" aria-hidden="true">
33   - <!-- Google + -->
  37 + <!-- Google Plus -->
34 38 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M17.5 2c0 0-6.3 0-8.4 0C5.3 2 1.8 4.8 1.8 8.1c0 3.4 2.6 6.1 6.4 6.1 0.3 0 0.5 0 0.8 0 -0.2 0.5-0.4 1-0.4 1.6 0 0.9 0.5 1.7 1.1 2.3 -0.5 0-0.9 0-1.5 0C3.6 18.1 0 21.1 0 24.1c0 3 3.9 4.9 8.6 4.9 5.3 0 8.2-3 8.2-6 0-2.4-0.7-3.9-2.9-5.4 -0.8-0.5-2.2-1.8-2.2-2.6 0-0.9 0.3-1.3 1.6-2.4 1.4-1.1 2.4-2.6 2.4-4.4 0-2.1-0.9-4.2-2.7-4.8l2.7 0L17.5 2zM14.5 22.5c0.1 0.3 0.1 0.6 0.1 0.9 0 2.4-1.6 4.4-6.1 4.4 -3.2 0-5.5-2-5.5-4.5 0-2.4 2.9-4.4 6.1-4.4 0.8 0 1.4 0.1 2.1 0.3C12.9 20.4 14.2 21.1 14.5 22.5zM9.4 13.4c-2.2-0.1-4.2-2.4-4.6-5.2 -0.4-2.8 1.1-5 3.2-4.9 2.2 0.1 4.2 2.3 4.6 5.2C13 11.2 11.6 13.4 9.4 13.4zM26 8L26 2 24 2 24 8 18 8 18 10 24 10 24 16 26 16 26 10 32 10 32 8z"/></svg>
35 39 </span>
36 40 <span class="text">
... ...
src/app/partials/header/header.controller.js
... ... @@ -1,16 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .controller('HeaderController', HeaderController);
7   -
8   - /** @ngInject */
9   - function HeaderController($log) {
10   - var vm = this;
11   -
12   - vm.$log = $log;
13   - vm.$log.debug('HeaderController');
14   - }
15   -
16   -})();
src/app/partials/header/header.html
1   -<header class="container" ng-controller="HeaderController as header">
  1 +<header class="container">
2 2  
3 3 <div class="row">
4 4 <div class="accessibility-wrapper">
... ...
src/app/partials/inicio/inicio.controller.js
... ... @@ -18,7 +18,7 @@
18 18 vm.init();
19 19 vm.$log.debug('InicioController');
20 20 }
21   -
  21 +
22 22 InicioController.prototype.init = function() {
23 23 var vm = this;
24 24  
... ...
src/app/partials/programas/programas.controller.js
... ... @@ -1,24 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .controller('ProgramasController', ProgramasController);
7   -
8   - /** @ngInject */
9   - function ProgramasController(ArticleService, $log) {
10   - $log.debug('ProgramasController');
11   -
12   - var vm = this;
13   -
14   - vm.ArticleService = ArticleService;
15   - vm.$log = $log;
16   -
17   - vm.init();
18   - }
19   -
20   - ProgramasController.prototype.init = function () {
21   -
22   - vm.programaList = [];
23   - };
24   -})();
src/app/partials/programas/programas.controller.spec.js
... ... @@ -1,15 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - describe('controllers', function(){
5   -
6   - beforeEach(module('dialoga'));
7   -
8   - // it('should define more than 5 awesome things', inject(function($controller) {
9   - // var vm = $controller('SobreController');
10   -
11   - // // expect(angular.isArray(vm.awesomeThings)).toBeTruthy();
12   - // // expect(vm.awesomeThings.length > 5).toBeTruthy();
13   - // }));
14   - });
15   -})();
src/app/partials/programas/programas.html
... ... @@ -1,8 +0,0 @@
1   -<div class="container">
2   -
3   - <h1>Programas:</h1>
4   - <div ng-repeat="programa in programas.programaList">
5   - <programa-box programa="programa"></programa-box>
6   - </div>
7   -
8   -</div>
src/assets/images/angular.png

13.2 KB

src/assets/images/bootstrap.png

12.6 KB

src/assets/images/browsersync.png

11.3 KB

src/assets/images/gulp.png

10.4 KB

src/assets/images/icons/feedback-login-success-blue.png 0 → 100644

4.29 KB

src/assets/images/icons/feedback-login-success-green.png 0 → 100644

4.4 KB

src/assets/images/icons/feedback-login-success-red.png 0 → 100644

4.33 KB

src/assets/images/icons/feedback-login-success-yellow.png 0 → 100644

3.86 KB

src/assets/images/icons/feedback-proposal-sent-blue.png 0 → 100644

3.53 KB

src/assets/images/icons/feedback-proposal-sent-green.png 0 → 100644

3.63 KB

src/assets/images/icons/feedback-proposal-sent-red.png 0 → 100644

3.53 KB

src/assets/images/icons/feedback-proposal-sent-yellow.png 0 → 100644

3.15 KB

src/assets/images/icons/feedback-user-created.png 0 → 100644

3.2 KB

src/assets/images/icons/social-facebook-contraste.png 0 → 100644

1.34 KB

src/assets/images/icons/social-facebook-disabled.png 0 → 100644

15.2 KB

src/assets/images/icons/social-facebook.png 0 → 100644

1.52 KB

src/assets/images/icons/social-google-plus-contraste.png 0 → 100644

1.77 KB

src/assets/images/icons/social-google-plus-disabled.png 0 → 100644

15.5 KB

src/assets/images/icons/social-google-plus.png 0 → 100644

1.93 KB

src/assets/images/icons/social-twitter-contraste.png 0 → 100644

1.43 KB

src/assets/images/icons/social-twitter-disabled.png 0 → 100644

15.4 KB

src/assets/images/icons/social-twitter.png 0 → 100644

1.72 KB

src/assets/images/icons/social-whatsapp-contraste.png 0 → 100644

2.02 KB

src/assets/images/icons/social-whatsapp-disabled.png 0 → 100644

15.7 KB

src/assets/images/icons/social-whatsapp.png 0 → 100644

2.17 KB

src/assets/images/icons/tema-cidadania-contraste.png 0 → 100755

2.05 KB

src/assets/images/icons/tema-cidadania.png 0 → 100644

1.63 KB

src/assets/images/icons/tema-cidades-contraste.png 0 → 100755

2.04 KB

src/assets/images/icons/tema-cidades.png 0 → 100644

1.59 KB

src/assets/images/icons/tema-cultura-contraste.png 0 → 100644

1.37 KB

src/assets/images/icons/tema-cultura.png 0 → 100644

1.19 KB

src/assets/images/icons/tema-desenvolvimento-social-contraste.png 0 → 100755

2.56 KB

src/assets/images/icons/tema-desenvolvimento-social.png 0 → 100644

2.3 KB

src/assets/images/icons/tema-educacao-contraste.png 0 → 100755

2.99 KB

src/assets/images/icons/tema-educacao.png 0 → 100644

3.2 KB

src/assets/images/icons/tema-esporte-contraste.png 0 → 100755

1.78 KB

src/assets/images/icons/tema-esporte.png 0 → 100644

1.13 KB

src/assets/images/icons/tema-gestao-contraste.png 0 → 100755

2.4 KB

src/assets/images/icons/tema-gestao.png 0 → 100644

2.1 KB

src/assets/images/icons/tema-infra-contraste.png 0 → 100755

1.77 KB

src/assets/images/icons/tema-infra.png 0 → 100644

1.17 KB

src/assets/images/icons/tema-meio-ambiente-contraste.png 0 → 100755

1.83 KB

src/assets/images/icons/tema-meio-ambiente.png 0 → 100644

1.2 KB

src/assets/images/icons/tema-reducao-da-pobreza-contraste.png 0 → 100755

3.32 KB

src/assets/images/icons/tema-reducao-da-pobreza.png 0 → 100644

2.94 KB

src/assets/images/icons/tema-saude-contraste.png 0 → 100755

2.48 KB

src/assets/images/icons/tema-saude.png 0 → 100644

2.19 KB

src/assets/images/icons/tema-seguranca-publica.png 0 → 100644

2.86 KB

src/assets/images/icons/temaseguranca-publica-contraste.png 0 → 100644

2.95 KB

src/assets/images/icons/user-contraste.png 0 → 100644

1.16 KB

src/assets/images/icons/user.png 0 → 100644

1.23 KB

src/assets/images/icons/vote-down.png 0 → 100644

2.03 KB

src/assets/images/icons/vote-up.png 0 → 100644

1.94 KB

src/assets/images/jasmine.png

15.5 KB

src/assets/images/karma.png

9.89 KB

src/assets/images/node-sass.png

4.85 KB

src/assets/images/protractor.png

9.95 KB

src/assets/images/yeoman.png

13.2 KB

src/assets/images/youtube-background.webp
No preview for this file type
src/index.html
... ... @@ -20,11 +20,12 @@
20 20 <!-- css files will be automatically insert here -->
21 21 <!-- endinject -->
22 22 <!-- endbuild -->
  23 + <link rel="stylesheet" href="/app/sprite.css">
23 24 </head>
24 25 <body ng-cloak>
25 26  
26 27 <div class="skip-links">
27   - <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="focusMainContent($event)">Ir para o conteúdo principal</a>
  28 + <a href="#content" class="sr-only sr-only-focusable btn btn-link" tabindex="0" ng-click="focusMainContent($event)">Ir para o conteúdo principal</a>
28 29 </div>
29 30  
30 31 <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
... ...