Download as
Browse Code »

Commit d33b21cf018b87a7dc13be36ee80ea616a804a73

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

Sync

Showing 18 changed files with 217 additions and 197 deletions   Show diff stats
src/app/components/articleBar/articleBar.directive.js 0 → 100644
  Diff comments   View file @d33b21c
... ... @@ -0,0 +1,68 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('articleBar', articleBar);
  7 +
  8 + /** @ngInject */
  9 + function articleBar() {
  10 + var directive = {
  11 + restrict: 'E',
  12 + templateUrl: 'app/components/articleBar/articleBar.html',
  13 + scope: {
  14 + category: '=',
  15 + categories: '='
  16 + },
  17 + controller: ArticleBarController,
  18 + controllerAs: 'vm',
  19 + bindToController: true
  20 + };
  21 +
  22 + return directive;
  23 +
  24 + /** @ngInject */
  25 + function ArticleBarController($scope, $rootScope, $state, $log) {
  26 + $log.debug('ArticleBarController');
  27 +
  28 + var vm = this;
  29 +
  30 + vm.$scope = $scope;
  31 + vm.$rootScope = $rootScope;
  32 + vm.$state = $state;
  33 + vm.theme = 'blue';
  34 +
  35 + // if(!vm.category) {
  36 + // throw 'article bar without category';
  37 + // }
  38 +
  39 + // if(!vm.categories) {
  40 + // throw 'article bar without categories list';
  41 + // }
  42 +
  43 + vm.currentCategory = vm.category;
  44 +
  45 + vm.$scope.$watch('vm.currentCategory', function(newValue, oldValue){
  46 + if(newValue !== oldValue){
  47 + vm.$state.go('inicio', {
  48 + tema: newValue.slug
  49 + }, {
  50 + location: true
  51 + });
  52 + }
  53 + });
  54 +
  55 + vm.goBack = function (){
  56 + var vm = this;
  57 + var prevState = vm.$rootScope.$previousState;
  58 + if(prevState && prevState.state.name){
  59 + vm.$state.go(prevState.state.name, prevState.params);
  60 + } else {
  61 + vm.$state.go('inicio');
  62 + }
  63 + };
  64 + }
  65 +
  66 + }
  67 +
  68 +})();
... ...
src/app/components/articleBar/articleBar.html 0 → 100644
  Diff comments   View file @d33b21c
... ... @@ -0,0 +1,23 @@
  1 +<div class="article-bar" ng-class="vm.theme">
  2 + <div class="navbar">
  3 + <div class="navbar-header">
  4 + <button class="article-bar--item btn btn-link" ng-click="vm.goBack()">
  5 + <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
  6 + <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
  7 + Voltar
  8 + </button>
  9 + </div>
  10 + <div class="navbar-left" ng-if="vm.category">
  11 + <button class="article-bar--item article-bar--category-button btn btn-link">
  12 + <span class="icon" ng-class="'icon-tema-' + vm.category.slug"></span>
  13 + <span class="category-name">{{::vm.category.name}}</span>
  14 + </button>
  15 + </div>
  16 + <div class="navbar-right" ng-if="vm.categories">
  17 + <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
  18 + <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="vm.currentCategory" ng-options="category.name for category in vm.categories track by category.slug">
  19 + </select>
  20 + </div>
  21 + </div>
  22 + </div>
  23 +</div>
... ...
src/app/components/articleBar/articleBar.scss 0 → 100644
  Diff comments   View file @d33b21c
... ... @@ -0,0 +1,53 @@
  1 +.article-bar {
  2 + position: relative;
  3 + background-color: #0042b1;
  4 +
  5 + .btn {
  6 + color: #fff;
  7 + font-weight: bold;
  8 + }
  9 +
  10 + &--item {
  11 + margin: 8px 0;
  12 +
  13 + @media (max-width: $screen-xs) {
  14 + margin: 8px;
  15 + }
  16 +
  17 + }
  18 +
  19 + &--category-button {
  20 + position: relative;
  21 + width: 125px;
  22 + text-align: right;
  23 + margin-left: 10px;
  24 + font-size: 24px;
  25 + line-height: 20px;
  26 + font-family: 'Open Sans';
  27 +
  28 + .icon {
  29 + position: absolute;
  30 + top: -34px;
  31 + left: -34px;
  32 + transform: scale(.37);
  33 + }
  34 + }
  35 +
  36 + .navbar {
  37 + margin-bottom: 0;
  38 + }
  39 +
  40 + .navbar-right {
  41 + margin-right: 15px;
  42 + }
  43 +
  44 + @each $category, $color in $categories {
  45 + &.#{$category} {
  46 + background-color: $color;
  47 + }
  48 + }
  49 +
  50 + .contraste & {
  51 + background-color: #262626;
  52 + }
  53 +}
... ...
src/app/components/programa/programa.directive.js
  Diff comments   View file @d33b21c
... ... @@ -9,11 +9,12 @@
9 9 function programaBox($rootScope) {
10 10  
11 11 /** @ngInject */
12   - function ProgramaController(ArticleService, $state, Slug, $log) {
  12 + function ProgramaController(ArticleService, $scope, $state, Slug, $log) {
13 13 $log.debug('ProgramaController');
14 14  
15 15 var vm = this;
16 16 vm.ArticleService = ArticleService;
  17 + vm.$scope = $scope;
17 18 vm.$state = $state;
18 19 vm.Slug = Slug;
19 20 vm.$log = $log;
... ... @@ -28,6 +29,17 @@
28 29 vm.program.slug = vm.Slug.slugify(vm.program.title);
29 30 }
30 31  
  32 + if(!vm.category){
  33 + vm.category = vm.program.categories[0];
  34 + }
  35 +
  36 + if(!vm.banner){
  37 + vm.banner = {
  38 + src: $rootScope.basePath + vm.program.image.url,
  39 + alt: 'Imagem de destaque do programa'
  40 + };
  41 + }
  42 +
31 43 vm.displayType = vm.display;
32 44  
33 45 // if(vm.program.color && !vm.program.bgColor){
... ... @@ -36,33 +48,6 @@
36 48 // }
37 49 };
38 50  
39   - ProgramaController.prototype.getCategory = function () {
40   - var vm = this;
41   -
42   - return vm.program.categories[0];
43   - };
44   -
45   - ProgramaController.prototype.getCategoryName = function () {
46   - return this.getCategory().name;
47   - };
48   -
49   - ProgramaController.prototype.getCategorySlug = function () {
50   - return this.getCategory().slug;
51   - };
52   -
53   - ProgramaController.prototype.getImageUrl = function () {
54   - var vm = this;
55   -
56   - return $rootScope.basePath + vm.program.image.url;
57   - };
58   -
59   - ProgramaController.prototype.getImageAlt = function () {
60   - var vm = this;
61   -
62   - vm.$log.warn('image is not accessible.');
63   - return 'TODO: create image alt on server-side.';
64   - };
65   -
66 51 ProgramaController.prototype.isDisplay = function (display) {
67 52 return this.display === display;
68 53 };
... ... @@ -75,10 +60,6 @@
75 60 return this.isDisplay('preview');
76 61 };
77 62  
78   - ProgramaController.prototype.isDisplayContent = function () {
79   - return this.isDisplay('content');
80   - };
81   -
82 63 ProgramaController.prototype.showContent = function () {
83 64 var vm = this;
84 65  
... ...
src/app/components/programa/programa.html
  Diff comments   View file @d33b21c
1   -<div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
  1 +<div ng-if="vm.program" class="{{vm.category.slug}}">
2 2 <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
3 3 <div>
4   - <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
  4 + <h2 class="program-box--category">{{vm.category.name}}</h2>
5 5 <div class="program-box--image-wrapper">
6   - <!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
7   - <div class="program-box--image" ng-style="{'background-image':'url( {{::vm.getImageUrl()}} )'}"></div>
  6 + <!-- <img class="program-box--image img-responsive" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}" /> -->
  7 + <div class="program-box--image" ng-style="{'background-image':'url( {{vm.banner.src}} )'}"></div>
8 8 </div>
9 9 <div class="program-box--title">
10 10 <h1>{{::vm.program.title}}</h1>
... ... @@ -20,7 +20,7 @@
20 20  
21 21 <article ng-if="vm.displayType == 'preview'" class="program-preview">
22 22 <header class="program-banner">
23   - <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
  23 + <img class="program-banner--image" ng-src="{{vm.banner.src}}" alt="{{vm.banner.alt}}">
24 24 <div class="program-banner--strip">
25 25 <h1 class="program-banner--title">{{::vm.program.title}}</h1>
26 26 <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
... ...
src/app/components/programas/programas.html
  Diff comments   View file @d33b21c
... ... @@ -12,8 +12,7 @@
12 12 <span class="category-list--icon-circle" ng-class="category.slug"></span>
13 13 <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
14 14 <span class="category-list--label">{{::category.name}}</span>
15   - <span class="glyphicon glyphicon-chevron-right pull-right"></span>
16   -
  15 + <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
17 16 </button>
18 17 </div>
19 18 </nav>
... ...
src/app/components/programas/programas.scss
  Diff comments   View file @d33b21c
... ... @@ -67,6 +67,14 @@
67 67 transform: scale(0.35);
68 68 }
69 69  
  70 + .category-list--icon--right {
  71 + position: absolute;
  72 + right: 9px;
  73 + top: 50%;
  74 + margin-top: -9px;
  75 + transform: scale(1.4);
  76 + }
  77 +
70 78 @each $category, $color in $categories {
71 79 &.#{$category} {
72 80 .list-group-item.active,
... ...
src/app/index.scss
  Diff comments   View file @d33b21c
... ... @@ -5,6 +5,7 @@
5 5 // $navbar-inverse-link-color: #5AADBB;
6 6 $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
7 7  
  8 +
8 9 /**
9 10 * Do not remove this comments bellow. It's the markers used by wiredep to inject
10 11 * sass dependencies when defined in the bower.json of your dependencies
... ...
src/app/pages/article/article.html
  Diff comments   View file @d33b21c
1 1 <div class="container" role="main">
2   - <span class="hide">{{::pageArticle.page}}</span>
  2 +
  3 + <article-bar></article-bar>
3 4  
4 5 <div ng-if="pageArticle.loading">
5 6 <div class="alert alert-info">
... ...
src/app/pages/article/article.service.js
  Diff comments   View file @d33b21c
... ... @@ -63,8 +63,11 @@
63 63 vm.getHome(function (data) {
64 64 var mainArticle = data.article;
65 65 var programList = mainArticle.children;
66   - var result = null;
  66 + var categories = mainArticle.categories;
  67 +
  68 + $rootScope._CATEGORIES = $rootScope._CATEGORIES ? $rootScope._CATEGORIES : categories;
67 69  
  70 + var result = null;
68 71 for (var i = programList.length - 1; i >= 0; i--) {
69 72 var program = programList[i];
70 73  
... ...
src/app/pages/inicio/inicio.controller.js
  Diff comments   View file @d33b21c
... ... @@ -7,7 +7,7 @@
7 7 .controller('InicioPageController', InicioPageController);
8 8  
9 9 /** @ngInject */
10   - function InicioPageController(ArticleService, $sce, $log) {
  10 + function InicioPageController(ArticleService, $rootScope, $sce, $log) {
11 11 var vm = this;
12 12  
13 13 // aliases
... ...
src/app/pages/inicio/inicio.html
  Diff comments   View file @d33b21c
... ... @@ -18,7 +18,7 @@
18 18 <div ng-if="pageInicio.loading && !pageInicio.error">
19 19 <div class="alert alert-info">Carregando conteúdo...</div>
20 20 </div>
21   -
  21 +
22 22 <div ng-if="pageInicio.error">
23 23 <div class="alert alert-danger">{{pageInicio.error}}</div>
24 24 </div>
... ... @@ -26,7 +26,7 @@
26 26 </div>
27 27 </section>
28 28  
29   -<section class="section-gray" ng-if="pageInicio.article">
  29 +<section class="section-gray section-space-up" ng-if="pageInicio.article">
30 30 <div class="container">
31 31 <programa-list article="pageInicio.article"></programa-list>
32 32 </div>
... ...
src/app/pages/inicio/inicio.scss
  Diff comments   View file @d33b21c
... ... @@ -7,6 +7,10 @@
7 7 }
8 8 }
9 9  
  10 +.section-space-up {
  11 + padding-top: 30px;
  12 +}
  13 +
10 14 .video-wrapper {
11 15 margin-bottom: 30px;
12 16 }
... ...
src/app/pages/programas/conheca-o-programa.html
  Diff comments   View file @d33b21c
1 1 <div class="container page--conheca-o-programa">
2   - <div class="row">
3   - <div class="col-xs-12">
4   - <div class="article-bar" ng-class="pageProgramaContent.program.categories[0].slug">
5   - <div class="navbar">
6   - <div class="navbar-header">
7   - <button class="article-bar--item btn btn-link" ng-click="pageProgramaContent.goBack()">
8   - <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
9   - <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
10   - Voltar
11   - </button>
12   - </div>
13   - <div class="navbar-left">
14   - <button class="article-bar--item btn btn-link">
15   - <span class="glyphicon glyphicon-refresh"></span>
16   - <span class="category-name">{{::pageProgramaContent.program.categories[0].name}}</span>
17   - </button>
18   - </div>
19   - <div class="navbar-right" ng-if="pageProgramaContent.categories">
20   - <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
21   - <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="pageProgramaContent.currentCategory" ng-options="category.name for category in pageProgramaContent.categories track by category.slug">
22   - </select>
23   - </div>
24   - </div>
25   - </div>
26   - </div>
  2 + <div ng-if="pageProgramaContent.program && pageProgramaContent.categories">
  3 + <article-bar category="pageProgramaContent.program.categories[0]" categories="pageProgramaContent.categories"></article-bar>
  4 + </div>
  5 +
  6 + <div ng-if="!pageProgramaContent.program.body">
  7 + <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
  8 + <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
27 9 </div>
28 10  
29   - <div class="row">
  11 + <div ng-if="pageProgramaContent.program.body">
30 12 <article class="program-content">
31   - <div ng-if="!pageProgramaContent.program.body">
32   - <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
33   - <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
34   - </div>
35   - <div ng-if="pageProgramaContent.program.body">
  13 + <div>
36 14 <section ng-bind-html="pageProgramaContent.program.body"></section>
37 15 </div>
38 16 </article>
39   - </div>
40   - <div class="row">
41 17 <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
42 18 <div class="col-sm-6" >
43 19 <div class="button--themed">
... ...
src/app/pages/programas/programa.content.controller.js
  Diff comments   View file @d33b21c
... ... @@ -28,13 +28,15 @@
28 28 var slug = params.slug;
29 29  
30 30 vm.program = null;
  31 + vm.categories = null;
31 32 vm.currentCategory = null;
32   - vm.loadingContent = null;
33   - vm.error = null;
  33 + vm.loading = true;
  34 + vm.error = false;
34 35  
35 36 vm.ArticleService.getHome(function(data){
36 37 vm.categories = data.article.categories;
37 38 }, function (error) {
  39 + vm.error = error;
38 40 vm.$log.error(error);
39 41 });
40 42  
... ... @@ -42,16 +44,6 @@
42 44 vm.program = program;
43 45 vm.currentCategory = vm.program.categories[0];
44 46  
45   - vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){
46   - if(newValue !== oldValue){
47   - vm.$state.go('inicio', {
48   - tema: newValue.slug
49   - }, {
50   - location: true
51   - });
52   - }
53   - });
54   -
55 47 vm.loadContent();
56 48  
57 49 }, function (error) {
... ... @@ -64,29 +56,16 @@
64 56 ProgramaContentPageController.prototype.loadContent = function () {
65 57 var vm = this;
66 58  
67   - vm.loadingContent = true;
  59 + vm.loading = true;
68 60 if(!vm.program.body){
69 61 vm.ArticleService.getContentById(vm.program.id, function (data) {
70 62 vm.program.body = data.article.body;
71   - vm.loadingContent = false;
  63 + vm.loading = false;
72 64 }, function (error) {
73   - vm.loadingContent = false;
  65 + vm.loading = false;
74 66 vm.error = error;
75 67 });
76 68 }
77   - vm.loadingContent = false;
78   - };
79   -
80   - ProgramaContentPageController.prototype.goBack = function () {
81   - var vm = this;
82   -
83   - var prevState = vm.$rootScope.$previousState;
84   - if(prevState && prevState.state.name){
85   - vm.$state.go(prevState.state.name, prevState.params);
86   - } else {
87   - vm.$state.go('programa', {
88   - slug: vm.program.slug
89   - });
90   - }
  69 + vm.loading = false;
91 70 };
92 71 })();
... ...
src/app/pages/programas/programa.controller.js
  Diff comments   View file @d33b21c
... ... @@ -28,12 +28,15 @@
28 28 var slug = params.slug;
29 29  
30 30 vm.program = null;
  31 + vm.categories = null;
31 32 vm.currentCategory = null;
32   - vm.loadingContent = null;
  33 + vm.loading = true;
  34 + vm.error = false;
33 35  
34 36 vm.ArticleService.getHome(function(data){
35 37 vm.categories = data.article.categories;
36 38 }, function (error) {
  39 + vm.error = error;
37 40 vm.$log.error(error);
38 41 });
39 42  
... ... @@ -41,52 +44,25 @@
41 44 vm.program = program;
42 45 vm.currentCategory = vm.program.categories[0];
43 46  
44   - vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){
45   - if(newValue !== oldValue){
46   - vm.$state.go('inicio', {
47   - tema: newValue.slug
48   - }, {
49   - location: true
50   - });
51   - }
52   - });
53   -
54 47 // load proposals
55   - // vm.ArticleService.getRandomProposals(program.id).then(function(proposal){
  48 + // vm.ArticleService.getRandomProposal(program.id, function(proposal){
56 49 // vm.program.proposal = proposal;
57 50 // }, function (error){
58 51 // vm.$log.error(error);
59 52 // });
60 53  
61 54 // load events
62   - // vm.ArticleService.getEvents(program.id).then(function(proposal){
63   - // vm.program.proposal = proposal;
64   - // }, function (error){
65   - // vm.$log.error(error);
66   - // });
67   -
68   - // load body content
69   - // vm.ArticleService.getBodyContent(program.id).then(function(proposal){
  55 + // vm.ArticleService.getEvents(program.id, function(proposal){
70 56 // vm.program.proposal = proposal;
71 57 // }, function (error){
72 58 // vm.$log.error(error);
73 59 // });
74 60  
75 61 }, function (error) {
  62 + vm.error = error;
76 63 vm.$log.error(error);
77 64 vm.$log.info('Rollback to home page.');
78 65 vm.$state.go('inicio', {}, {location: true});
79 66 });
80 67 };
81   -
82   - ProgramaPageController.prototype.goBack = function () {
83   - var vm = this;
84   -
85   - var prevState = vm.$rootScope.$previousState;
86   - if(prevState && prevState.state.name){
87   - vm.$state.go(prevState.state.name, prevState.params);
88   - } else {
89   - vm.$state.go('inicio');
90   - }
91   - };
92 68 })();
... ...
src/app/pages/programas/programa.html
  Diff comments   View file @d33b21c
1 1 <div class="container">
2 2  
3   - <div class="row">
4   - <div class="col-xs-12">
5   - <div class="article-bar" ng-class="pagePrograma.program.categories[0].slug">
6   - <div class="navbar">
7   - <div class="navbar-header">
8   - <button class="article-bar--item btn btn-link" ng-click="pagePrograma.goBack()">
9   - <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
10   - <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
11   - Voltar
12   - </button>
13   - </div>
14   - <div class="navbar-left">
15   - <button class="article-bar--item btn btn-link">
16   - <span class="glyphicon glyphicon-refresh"></span>
17   - <span class="category-name">{{::pagePrograma.program.categories[0].name}}</span>
18   - </button>
19   - </div>
20   - <div class="navbar-right" ng-if="pagePrograma.categories">
21   - <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
22   - <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="pagePrograma.currentCategory" ng-options="category.name for category in pagePrograma.categories track by category.slug">
23   - </select>
24   - </div>
25   - </div>
26   - </div>
27   - </div>
  3 + <div ng-if="pagePrograma.program && pagePrograma.categories">
  4 + <article-bar category="pagePrograma.program.categories[0]" categories="pagePrograma.categories"></article-bar>
28 5 </div>
29 6  
30 7 <div ng-if="!pagePrograma.program">
31 8 <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div>
32 9 </div>
33 10  
34   - <div ng-if="pagePrograma.program">
  11 + <div ng-if="pagePrograma.program && pagePrograma.categories">
35 12 <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
36 13 </div>
37 14 </div>
... ...
src/app/pages/programas/programas.scss
  Diff comments   View file @d33b21c
1   -.article-bar {
2   -
3   - .btn {
4   - color: #fff;
5   - font-weight: bold;
6   - }
7   -
8   - &--item {
9   - margin: 8px 0;
10   -
11   - @media (max-width: $screen-xs) {
12   - margin: 8px;
13   - }
14   - }
15   -
16   - .navbar {
17   - margin-bottom: 0;
18   - }
19   -
20   - .navbar-right {
21   - margin-right: 15px;
22   - }
23   -
24   - @each $category, $color in $categories {
25   - &.#{$category} {
26   - background-color: $color;
27   - }
28   - }
29   -
30   - .contraste & {
31   - background-color: #262626;
32   - }
33   -}
34   -
35 1 .program--aside {
36 2 margin-top: 20px;
  3 + padding-top: 20px;
  4 +
  5 + .button--themed {
  6 + padding-top: 0;
  7 + }
37 8 }
38 9  
... ...