Commit d33b21cf018b87a7dc13be36ee80ea616a804a73
1 parent
e2f24bee
Exists in
master
and in
8 other branches
Sync
Showing
18 changed files
with
217 additions
and
197 deletions
Show diff stats
@@ -0,0 +1,68 @@ | @@ -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 | +})(); |
@@ -0,0 +1,23 @@ | @@ -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> |
@@ -0,0 +1,53 @@ | @@ -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
@@ -9,11 +9,12 @@ | @@ -9,11 +9,12 @@ | ||
9 | function programaBox($rootScope) { | 9 | function programaBox($rootScope) { |
10 | 10 | ||
11 | /** @ngInject */ | 11 | /** @ngInject */ |
12 | - function ProgramaController(ArticleService, $state, Slug, $log) { | 12 | + function ProgramaController(ArticleService, $scope, $state, Slug, $log) { |
13 | $log.debug('ProgramaController'); | 13 | $log.debug('ProgramaController'); |
14 | 14 | ||
15 | var vm = this; | 15 | var vm = this; |
16 | vm.ArticleService = ArticleService; | 16 | vm.ArticleService = ArticleService; |
17 | + vm.$scope = $scope; | ||
17 | vm.$state = $state; | 18 | vm.$state = $state; |
18 | vm.Slug = Slug; | 19 | vm.Slug = Slug; |
19 | vm.$log = $log; | 20 | vm.$log = $log; |
@@ -28,6 +29,17 @@ | @@ -28,6 +29,17 @@ | ||
28 | vm.program.slug = vm.Slug.slugify(vm.program.title); | 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 | vm.displayType = vm.display; | 43 | vm.displayType = vm.display; |
32 | 44 | ||
33 | // if(vm.program.color && !vm.program.bgColor){ | 45 | // if(vm.program.color && !vm.program.bgColor){ |
@@ -36,33 +48,6 @@ | @@ -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 | ProgramaController.prototype.isDisplay = function (display) { | 51 | ProgramaController.prototype.isDisplay = function (display) { |
67 | return this.display === display; | 52 | return this.display === display; |
68 | }; | 53 | }; |
@@ -75,10 +60,6 @@ | @@ -75,10 +60,6 @@ | ||
75 | return this.isDisplay('preview'); | 60 | return this.isDisplay('preview'); |
76 | }; | 61 | }; |
77 | 62 | ||
78 | - ProgramaController.prototype.isDisplayContent = function () { | ||
79 | - return this.isDisplay('content'); | ||
80 | - }; | ||
81 | - | ||
82 | ProgramaController.prototype.showContent = function () { | 63 | ProgramaController.prototype.showContent = function () { |
83 | var vm = this; | 64 | var vm = this; |
84 | 65 |
src/app/components/programa/programa.html
1 | -<div ng-if="vm.program" class="{{::vm.getCategorySlug()}}"> | 1 | +<div ng-if="vm.program" class="{{vm.category.slug}}"> |
2 | <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()"> | 2 | <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()"> |
3 | <div> | 3 | <div> |
4 | - <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2> | 4 | + <h2 class="program-box--category">{{vm.category.name}}</h2> |
5 | <div class="program-box--image-wrapper"> | 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 | </div> | 8 | </div> |
9 | <div class="program-box--title"> | 9 | <div class="program-box--title"> |
10 | <h1>{{::vm.program.title}}</h1> | 10 | <h1>{{::vm.program.title}}</h1> |
@@ -20,7 +20,7 @@ | @@ -20,7 +20,7 @@ | ||
20 | 20 | ||
21 | <article ng-if="vm.displayType == 'preview'" class="program-preview"> | 21 | <article ng-if="vm.displayType == 'preview'" class="program-preview"> |
22 | <header class="program-banner"> | 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 | <div class="program-banner--strip"> | 24 | <div class="program-banner--strip"> |
25 | <h1 class="program-banner--title">{{::vm.program.title}}</h1> | 25 | <h1 class="program-banner--title">{{::vm.program.title}}</h1> |
26 | <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p> | 26 | <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p> |
src/app/components/programas/programas.html
@@ -12,8 +12,7 @@ | @@ -12,8 +12,7 @@ | ||
12 | <span class="category-list--icon-circle" ng-class="category.slug"></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> | 13 | <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span> |
14 | <span class="category-list--label">{{::category.name}}</span> | 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 | </button> | 16 | </button> |
18 | </div> | 17 | </div> |
19 | </nav> | 18 | </nav> |
src/app/components/programas/programas.scss
@@ -67,6 +67,14 @@ | @@ -67,6 +67,14 @@ | ||
67 | transform: scale(0.35); | 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 | @each $category, $color in $categories { | 78 | @each $category, $color in $categories { |
71 | &.#{$category} { | 79 | &.#{$category} { |
72 | .list-group-item.active, | 80 | .list-group-item.active, |
src/app/index.scss
@@ -5,6 +5,7 @@ | @@ -5,6 +5,7 @@ | ||
5 | // $navbar-inverse-link-color: #5AADBB; | 5 | // $navbar-inverse-link-color: #5AADBB; |
6 | $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; | 6 | $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; |
7 | 7 | ||
8 | + | ||
8 | /** | 9 | /** |
9 | * Do not remove this comments bellow. It's the markers used by wiredep to inject | 10 | * Do not remove this comments bellow. It's the markers used by wiredep to inject |
10 | * sass dependencies when defined in the bower.json of your dependencies | 11 | * sass dependencies when defined in the bower.json of your dependencies |
src/app/pages/article/article.html
1 | <div class="container" role="main"> | 1 | <div class="container" role="main"> |
2 | - <span class="hide">{{::pageArticle.page}}</span> | 2 | + |
3 | + <article-bar></article-bar> | ||
3 | 4 | ||
4 | <div ng-if="pageArticle.loading"> | 5 | <div ng-if="pageArticle.loading"> |
5 | <div class="alert alert-info"> | 6 | <div class="alert alert-info"> |
src/app/pages/article/article.service.js
@@ -63,8 +63,11 @@ | @@ -63,8 +63,11 @@ | ||
63 | vm.getHome(function (data) { | 63 | vm.getHome(function (data) { |
64 | var mainArticle = data.article; | 64 | var mainArticle = data.article; |
65 | var programList = mainArticle.children; | 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 | for (var i = programList.length - 1; i >= 0; i--) { | 71 | for (var i = programList.length - 1; i >= 0; i--) { |
69 | var program = programList[i]; | 72 | var program = programList[i]; |
70 | 73 |
src/app/pages/inicio/inicio.controller.js
@@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
7 | .controller('InicioPageController', InicioPageController); | 7 | .controller('InicioPageController', InicioPageController); |
8 | 8 | ||
9 | /** @ngInject */ | 9 | /** @ngInject */ |
10 | - function InicioPageController(ArticleService, $sce, $log) { | 10 | + function InicioPageController(ArticleService, $rootScope, $sce, $log) { |
11 | var vm = this; | 11 | var vm = this; |
12 | 12 | ||
13 | // aliases | 13 | // aliases |
src/app/pages/inicio/inicio.html
@@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
18 | <div ng-if="pageInicio.loading && !pageInicio.error"> | 18 | <div ng-if="pageInicio.loading && !pageInicio.error"> |
19 | <div class="alert alert-info">Carregando conteúdo...</div> | 19 | <div class="alert alert-info">Carregando conteúdo...</div> |
20 | </div> | 20 | </div> |
21 | - | 21 | + |
22 | <div ng-if="pageInicio.error"> | 22 | <div ng-if="pageInicio.error"> |
23 | <div class="alert alert-danger">{{pageInicio.error}}</div> | 23 | <div class="alert alert-danger">{{pageInicio.error}}</div> |
24 | </div> | 24 | </div> |
@@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
26 | </div> | 26 | </div> |
27 | </section> | 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 | <div class="container"> | 30 | <div class="container"> |
31 | <programa-list article="pageInicio.article"></programa-list> | 31 | <programa-list article="pageInicio.article"></programa-list> |
32 | </div> | 32 | </div> |
src/app/pages/inicio/inicio.scss
src/app/pages/programas/conheca-o-programa.html
1 | <div class="container page--conheca-o-programa"> | 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 | </div> | 9 | </div> |
28 | 10 | ||
29 | - <div class="row"> | 11 | + <div ng-if="pageProgramaContent.program.body"> |
30 | <article class="program-content"> | 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 | <section ng-bind-html="pageProgramaContent.program.body"></section> | 14 | <section ng-bind-html="pageProgramaContent.program.body"></section> |
37 | </div> | 15 | </div> |
38 | </article> | 16 | </article> |
39 | - </div> | ||
40 | - <div class="row"> | ||
41 | <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug"> | 17 | <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug"> |
42 | <div class="col-sm-6" > | 18 | <div class="col-sm-6" > |
43 | <div class="button--themed"> | 19 | <div class="button--themed"> |
src/app/pages/programas/programa.content.controller.js
@@ -28,13 +28,15 @@ | @@ -28,13 +28,15 @@ | ||
28 | var slug = params.slug; | 28 | var slug = params.slug; |
29 | 29 | ||
30 | vm.program = null; | 30 | vm.program = null; |
31 | + vm.categories = null; | ||
31 | vm.currentCategory = null; | 32 | vm.currentCategory = null; |
32 | - vm.loadingContent = null; | ||
33 | - vm.error = null; | 33 | + vm.loading = true; |
34 | + vm.error = false; | ||
34 | 35 | ||
35 | vm.ArticleService.getHome(function(data){ | 36 | vm.ArticleService.getHome(function(data){ |
36 | vm.categories = data.article.categories; | 37 | vm.categories = data.article.categories; |
37 | }, function (error) { | 38 | }, function (error) { |
39 | + vm.error = error; | ||
38 | vm.$log.error(error); | 40 | vm.$log.error(error); |
39 | }); | 41 | }); |
40 | 42 | ||
@@ -42,16 +44,6 @@ | @@ -42,16 +44,6 @@ | ||
42 | vm.program = program; | 44 | vm.program = program; |
43 | vm.currentCategory = vm.program.categories[0]; | 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 | vm.loadContent(); | 47 | vm.loadContent(); |
56 | 48 | ||
57 | }, function (error) { | 49 | }, function (error) { |
@@ -64,29 +56,16 @@ | @@ -64,29 +56,16 @@ | ||
64 | ProgramaContentPageController.prototype.loadContent = function () { | 56 | ProgramaContentPageController.prototype.loadContent = function () { |
65 | var vm = this; | 57 | var vm = this; |
66 | 58 | ||
67 | - vm.loadingContent = true; | 59 | + vm.loading = true; |
68 | if(!vm.program.body){ | 60 | if(!vm.program.body){ |
69 | vm.ArticleService.getContentById(vm.program.id, function (data) { | 61 | vm.ArticleService.getContentById(vm.program.id, function (data) { |
70 | vm.program.body = data.article.body; | 62 | vm.program.body = data.article.body; |
71 | - vm.loadingContent = false; | 63 | + vm.loading = false; |
72 | }, function (error) { | 64 | }, function (error) { |
73 | - vm.loadingContent = false; | 65 | + vm.loading = false; |
74 | vm.error = error; | 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
@@ -28,12 +28,15 @@ | @@ -28,12 +28,15 @@ | ||
28 | var slug = params.slug; | 28 | var slug = params.slug; |
29 | 29 | ||
30 | vm.program = null; | 30 | vm.program = null; |
31 | + vm.categories = null; | ||
31 | vm.currentCategory = null; | 32 | vm.currentCategory = null; |
32 | - vm.loadingContent = null; | 33 | + vm.loading = true; |
34 | + vm.error = false; | ||
33 | 35 | ||
34 | vm.ArticleService.getHome(function(data){ | 36 | vm.ArticleService.getHome(function(data){ |
35 | vm.categories = data.article.categories; | 37 | vm.categories = data.article.categories; |
36 | }, function (error) { | 38 | }, function (error) { |
39 | + vm.error = error; | ||
37 | vm.$log.error(error); | 40 | vm.$log.error(error); |
38 | }); | 41 | }); |
39 | 42 | ||
@@ -41,52 +44,25 @@ | @@ -41,52 +44,25 @@ | ||
41 | vm.program = program; | 44 | vm.program = program; |
42 | vm.currentCategory = vm.program.categories[0]; | 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 | // load proposals | 47 | // load proposals |
55 | - // vm.ArticleService.getRandomProposals(program.id).then(function(proposal){ | 48 | + // vm.ArticleService.getRandomProposal(program.id, function(proposal){ |
56 | // vm.program.proposal = proposal; | 49 | // vm.program.proposal = proposal; |
57 | // }, function (error){ | 50 | // }, function (error){ |
58 | // vm.$log.error(error); | 51 | // vm.$log.error(error); |
59 | // }); | 52 | // }); |
60 | 53 | ||
61 | // load events | 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 | // vm.program.proposal = proposal; | 56 | // vm.program.proposal = proposal; |
71 | // }, function (error){ | 57 | // }, function (error){ |
72 | // vm.$log.error(error); | 58 | // vm.$log.error(error); |
73 | // }); | 59 | // }); |
74 | 60 | ||
75 | }, function (error) { | 61 | }, function (error) { |
62 | + vm.error = error; | ||
76 | vm.$log.error(error); | 63 | vm.$log.error(error); |
77 | vm.$log.info('Rollback to home page.'); | 64 | vm.$log.info('Rollback to home page.'); |
78 | vm.$state.go('inicio', {}, {location: true}); | 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
1 | <div class="container"> | 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 | </div> | 5 | </div> |
29 | 6 | ||
30 | <div ng-if="!pagePrograma.program"> | 7 | <div ng-if="!pagePrograma.program"> |
31 | <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div> | 8 | <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div> |
32 | </div> | 9 | </div> |
33 | 10 | ||
34 | - <div ng-if="pagePrograma.program"> | 11 | + <div ng-if="pagePrograma.program && pagePrograma.categories"> |
35 | <programa-box program="pagePrograma.program" display="'preview'"></programa-box> | 12 | <programa-box program="pagePrograma.program" display="'preview'"></programa-box> |
36 | </div> | 13 | </div> |
37 | </div> | 14 | </div> |
src/app/pages/programas/programas.scss
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 | .program--aside { | 1 | .program--aside { |
36 | margin-top: 20px; | 2 | margin-top: 20px; |
3 | + padding-top: 20px; | ||
4 | + | ||
5 | + .button--themed { | ||
6 | + padding-top: 0; | ||
7 | + } | ||
37 | } | 8 | } |
38 | 9 |