Commit d33b21cf018b87a7dc13be36ee80ea616a804a73

Authored by Leonardo Merlin
1 parent e2f24bee

Sync

src/app/components/articleBar/articleBar.directive.js 0 → 100644
@@ -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 +})();
src/app/components/articleBar/articleBar.html 0 → 100644
@@ -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>
src/app/components/articleBar/articleBar.scss 0 → 100644
@@ -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
@@ -7,6 +7,10 @@ @@ -7,6 +7,10 @@
7 } 7 }
8 } 8 }
9 9
  10 +.section-space-up {
  11 + padding-top: 30px;
  12 +}
  13 +
10 .video-wrapper { 14 .video-wrapper {
11 margin-bottom: 30px; 15 margin-bottom: 30px;
12 } 16 }
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