Split content handler. Added PageContentController

Leonardo Merlin
1 parent 432f8dc0
Showing 14 changed files with 298 additions and 57 deletions Show diff stats
src/app/components/programa/programa.directive.js
src/app/components/programa/programa.html
src/app/components/programa/programa.scss
src/app/components/programas/programas.scss
src/app/index.route.js
src/app/index.run.js
src/app/pages/article/article.service.js
src/app/pages/header/header.html
src/app/pages/header/header.scss
src/app/pages/programas/conheca-o-programa.html
src/app/pages/programas/programa.content.controller.js
src/app/pages/programas/programa.controller.js
src/app/pages/programas/programa.html
src/app/pages/programas/programas.scss
@@ -9,10 +9,11 @@
   function programaBox($rootScope) {
  
     /** @ngInject */
-    function ProgramaController($state, Slug, $log) {
+    function ProgramaController(ArticleService, $state, Slug, $log) {
       $log.debug('ProgramaController');
  
       var vm = this;
+      vm.ArticleService = ArticleService;
       vm.$state = $state;
       vm.Slug = Slug;
       vm.$log = $log;
@@ -27,6 +28,8 @@
         vm.program.slug = vm.Slug.slugify(vm.program.title);
       }
  
+      vm.displayType = vm.display;
+
       // if(vm.program.color && !vm.program.bgColor){
       //   // 15% more darker
       //   vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15);
@@ -79,10 +82,18 @@
     ProgramaController.prototype.showContent = function () {
       var vm = this;
  
-      vm.$log.info('showContent');
+      vm.$state.go('programa-conheca', {
+        slug: vm.program.slug
+      }, {
+        location: true
+      });
+    };
+
+    ProgramaController.prototype.showPreview = function () {
+      var vm = this;
+
       vm.$state.go('programa', {
-        slug: vm.program.slug,
-        program: vm.program
+        slug: vm.program.slug
       }, {
         location: true
       });
 <div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
-  <article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
+  <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
     <div>
       <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
       <div class="program-box--image-wrapper">
@@ -10,7 +10,7 @@
         <h1>{{::vm.program.title}}</h1>
       </div>
       <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
-      <div class="program-box--button">
+      <div class="button--themed">
         <button class="btn btn-block">
           Participe
         </button>
@@ -18,7 +18,7 @@
     </div>
   </article>
  
-  <article ng-if="vm.isDisplayPreview()" class="program-preview">
+  <article ng-if="vm.displayType == 'preview'" class="program-preview">
     <header class="program-banner">
       <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
       <div class="program-banner--strip">
@@ -26,5 +26,15 @@
         <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
       </div>
     </header>
+
+    <section class="call-to-action--section">
+      <div class="row">
+        <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
+          <div class="button--themed">
+            <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
+          </div>
+        </div>
+      </div>
+    </section>
   </article>
 </div>
@@ -4,6 +4,46 @@ $scale: 1.1;
 $time: .2s;
 $darken: 15%;
  
+// Commons
+.button--themed {
+    padding: $program-box-space;
+    .btn {
+        color: #fff;
+        font-weight: bold;
+        padding: 15px 0;
+        border-left: 0;
+        border-right: 0;
+        border-top: 0;
+        border-radius: 6px;
+
+        -webkit-transition: all $time ease-in-out;
+        -moz-transition: all $time ease-in-out;
+        -o-transition: all $time ease-in-out;
+        transition: all $time ease-in-out;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+                border-bottom: 3px solid darken($color, $darken);
+            }
+        }
+
+        &:hover,
+        &:focus {
+            @each $category, $color in $categories {
+                .#{$category} & {
+                    background-color: darken($color, $darken);
+                }
+            }
+        }
+
+        .contraste & {
+            color: #262626;
+            background-color: #fff;
+        }
+    }
+}
+
 .program-box {
     cursor: pointer;
     background-color: #fff;
@@ -110,45 +150,6 @@ $darken: 15%;
         p { margin: 0; }
     }
  
-    &--button {
-        padding: $program-box-space;
-        .btn {
-            color: #fff;
-            font-weight: bold;
-            padding: 15px 0;
-            border-left: 0;
-            border-right: 0;
-            border-top: 0;
-            border-radius: 6px;
-
-            -webkit-transition: all $time ease-in-out;
-            -moz-transition: all $time ease-in-out;
-            -o-transition: all $time ease-in-out;
-            transition: all $time ease-in-out;
-
-            @each $category, $color in $categories {
-                .#{$category} & {
-                    background-color: $color;
-                    border-bottom: 3px solid darken($color, $darken);
-                }
-            }
-
-            &:hover,
-            &:focus {
-                @each $category, $color in $categories {
-                    .#{$category} & {
-                        background-color: darken($color, $darken);
-                    }
-                }
-            }
-
-            .contraste & {
-                color: #262626;
-                background-color: #fff;
-            }
-        }
-    }
-
     &--image-wrapper {
         position: relative;
         // width: 100%;
@@ -231,4 +232,31 @@ $darken: 15%;
     .program-banner--abstract {
         padding-bottom: 10px;
     }
+
+    .button--themed {
+        .btn {
+            font-size: 38px;
+
+            @media (max-width: $screen-sm){
+                font-size: 20px;
+            }
+        }
+    }
+}
+
+
+.program-content {
+    h2 {
+        font-size: 38px;
+        font-weight: 500;
+        margin-bottom: 40px;
+        padding-bottom: 20px;
+
+        small {
+            display: block;
+            font-size: 16px;
+            padding-top: 5px;
+            text-transform: none;
+        }
+    }
 }
@@ -64,7 +64,7 @@
         position: absolute;
         top: -16px;
         left: -14px;
-        transform: scale(0.4);
+        transform: scale(0.35);
     }
  
     @each $category, $color in $categories {
@@ -57,6 +57,18 @@
           'footer': { templateUrl: 'app/pages/footer/footer.html' }
         }
       })
+      .state('programa-conheca', {
+        url: '/programa/:slug/conheca-o-programa',
+        views: {
+          'header': { templateUrl: 'app/pages/header/header.html' },
+          'main': {
+            templateUrl: 'app/pages/programas/conheca-o-programa.html',
+            controller: 'ProgramaContentPageController',
+            controllerAs: 'pageProgramaContent'
+          },
+          'footer': { templateUrl: 'app/pages/footer/footer.html' }
+        }
+      })
       .state('sobre', {
         url: '/sobre',
         views: {
@@ -18,7 +18,7 @@
     $rootScope.$on('$stateChangeStart', function(event, next) {
  
       if (!next.data || !next.data.authorizedRoles) {
-        $log.debug('public url/state');
+        $log.debug('runAuth: public url/state');
         return;
       }
  
@@ -22,6 +22,7 @@
       getTerms: getTerms,
       getArticleById: getArticleById,
       getArticleBySlug: getArticleBySlug,
+      getContentById: getContentById,
       setHomeAbstract: setHomeAbstract,
       getHomeAbstract: getHomeAbstract
     };
@@ -85,6 +86,12 @@
       }, cbError);
     }
  
+    function getContentById (contentId, cbSuccess, cbError) {
+      return getArticleById(contentId, {
+        fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic'
+      }, cbSuccess, cbError);
+    }
+
     function getHome (cbSuccess, cbError) {
       return getArticleById(idArticleHome, {
         fields: 'id,children,categories,abstract,title,image,url,setting,position',
 <header class="container">
  
   <div class="row">
-    <div class="accessibility-wrapper">
-      <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
-        <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
-      </button>
+    <div class="col-sm-12">
  
-      <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
-        <span class="glyphicon glyphicon-user"></span>
-        Entrar
-      </button>
+      <div class="accessibility-wrapper">
+        <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
+          <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
+        </button>
+
+        <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
+          <span class="icon icon-user"></span>
+          Entrar
+        </button>
+      </div>
     </div>
   </div>
  
@@ -0,0 +1,16 @@
+.accessibility-wrapper {
+    .icon-user {
+        display: inline-block;
+        vertical-align: middle;
+        width: 26px;
+        height: 26px;
+        border: 1px solid #ccc;
+        border-radius: 100%;
+        background-position: 1px 0px;
+
+        .contraste & {
+            // XXX: chage for dinamic handler
+            background-position: -0px -24px;
+        }
+    }
+}
@@ -0,0 +1,55 @@
+<div class="container page--conheca-o-programa">
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="article-bar" ng-class="pageProgramaContent.program.categories[0].slug">
+        <div class="navbar">
+          <div class="navbar-header">
+            <button class="article-bar--item btn btn-link" ng-click="pageProgramaContent.goBack()">
+              <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
+              <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
+              Voltar
+            </button>
+          </div>
+          <div class="navbar-left">
+            <button class="article-bar--item btn btn-link">
+              <span class="glyphicon glyphicon-refresh"></span>
+              <span class="category-name">{{::pageProgramaContent.program.categories[0].name}}</span>
+            </button>
+          </div>
+          <div class="navbar-right" ng-if="pageProgramaContent.categories">
+            <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
+            <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">
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <article class="program-content">
+      <div ng-if="!pageProgramaContent.program.body">
+        <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
+        <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
+      </div>
+      <div ng-if="pageProgramaContent.program.body">
+        <section ng-bind-html="pageProgramaContent.program.body"></section>
+      </div>
+    </article>
+  </div>
+  <div class="row">
+    <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
+      <div class="col-sm-6" >
+        <div class="button--themed">
+          <button class="btn btn-block" ng-click="pageProgramaContent.goBack()">
+            <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
+            Participe
+          </button>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <social-share display="'full'"></social-share>
+      </div>
+    </aside>
+  </div>
+</div>
@@ -0,0 +1,92 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .controller('ProgramaContentPageController', ProgramaContentPageController);
+
+  /** @ngInject */
+  function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
+    $log.debug('ProgramaContentPageController');
+
+    var vm = this;
+
+    vm.ArticleService = ArticleService;
+    vm.$state = $state;
+    vm.$location = $location;
+    vm.$scope = $scope;
+    vm.$rootScope = $rootScope;
+    vm.$log = $log;
+
+    vm.init();
+  }
+
+  ProgramaContentPageController.prototype.init = function () {
+    var vm = this;
+
+    var params = vm.$state.params;
+    var slug = params.slug;
+
+    vm.program = null;
+    vm.currentCategory = null;
+    vm.loadingContent = null;
+    vm.error = null;
+
+    vm.ArticleService.getHome(function(data){
+      vm.categories = data.article.categories;
+    }, function (error) {
+      vm.$log.error(error);
+    });
+
+    vm.ArticleService.getArticleBySlug(slug, function(program){
+      vm.program = program;
+      vm.currentCategory = vm.program.categories[0];
+
+      vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){
+        if(newValue !== oldValue){
+          vm.$state.go('inicio', {
+            tema: newValue.slug
+          }, {
+            location: true
+          });
+        }
+      });
+
+      vm.loadContent();
+
+    }, function (error) {
+      vm.$log.error(error);
+      vm.$log.info('Rollback to home page.');
+      vm.$state.go('inicio', {}, {location: true});
+    });
+  };
+
+  ProgramaContentPageController.prototype.loadContent = function () {
+    var vm = this;
+
+    vm.loadingContent = true;
+    if(!vm.program.body){
+      vm.ArticleService.getContentById(vm.program.id, function (data) {
+        vm.program.body = data.article.body;
+        vm.loadingContent = false;
+      }, function (error) {
+        vm.loadingContent = false;
+        vm.error = error;
+      });
+    }
+    vm.loadingContent = false;
+  };
+
+  ProgramaContentPageController.prototype.goBack = function () {
+    var vm = this;
+
+    var prevState = vm.$rootScope.$previousState;
+    if(prevState && prevState.state.name){
+      vm.$state.go(prevState.state.name, prevState.params);
+    } else {
+      vm.$state.go('programa', {
+        slug: vm.program.slug
+      });
+    }
+  };
+})();
@@ -29,6 +29,7 @@
  
     vm.program = null;
     vm.currentCategory = null;
+    vm.loadingContent = null;
  
     vm.ArticleService.getHome(function(data){
       vm.categories = data.article.categories;
@@ -34,6 +34,5 @@
   <div ng-if="pagePrograma.program">
     <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
   </div>
-  <div id="content" ng-bind-html="pagePrograma.program.body"></div>
 </div>
  
@@ -7,6 +7,10 @@
  
     &--item {
         margin: 8px 0;
+
+        @media (max-width: $screen-xs) {
+            margin: 8px;
+        }
     }
  
     .navbar {
@@ -28,4 +32,7 @@
     }
 }
  
+.program--aside {
+    margin-top: 20px;
+}
...	...	@@ -9,10 +9,11 @@
9	9	function programaBox($rootScope) {
10	10
11	11	/** @ngInject */
12		- function ProgramaController($state, Slug, $log) {
	12	+ function ProgramaController(ArticleService, $state, Slug, $log) {
13	13	$log.debug('ProgramaController');
14	14
15	15	var vm = this;
	16	+ vm.ArticleService = ArticleService;
16	17	vm.$state = $state;
17	18	vm.Slug = Slug;
18	19	vm.$log = $log;
...	...	@@ -27,6 +28,8 @@
27	28	vm.program.slug = vm.Slug.slugify(vm.program.title);
28	29	}
29	30
	31	+ vm.displayType = vm.display;
	32	+
30	33	// if(vm.program.color && !vm.program.bgColor){
31	34	// // 15% more darker
32	35	// vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15);
...	...	@@ -79,10 +82,18 @@
79	82	ProgramaController.prototype.showContent = function () {
80	83	var vm = this;
81	84
82		- vm.$log.info('showContent');
	85	+ vm.$state.go('programa-conheca', {
	86	+ slug: vm.program.slug
	87	+ }, {
	88	+ location: true
	89	+ });
	90	+ };
	91	+
	92	+ ProgramaController.prototype.showPreview = function () {
	93	+ var vm = this;
	94	+
83	95	vm.$state.go('programa', {
84		- slug: vm.program.slug,
85		- program: vm.program
	96	+ slug: vm.program.slug
86	97	}, {
87	98	location: true
88	99	});
...	...
1	1	<div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
2		- <article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
	2	+ <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
3	3	<div>
4	4	<h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
5	5	<div class="program-box--image-wrapper">
...	...	@@ -10,7 +10,7 @@
10	10	<h1>{{::vm.program.title}}</h1>
11	11	</div>
12	12	<div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
13		- <div class="program-box--button">
	13	+ <div class="button--themed">
14	14	<button class="btn btn-block">
15	15	Participe
16	16	</button>
...	...	@@ -18,7 +18,7 @@
18	18	</div>
19	19	</article>
20	20
21		- <article ng-if="vm.isDisplayPreview()" class="program-preview">
	21	+ <article ng-if="vm.displayType == 'preview'" class="program-preview">
22	22	<header class="program-banner">
23	23	<img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
24	24	<div class="program-banner--strip">
...	...	@@ -26,5 +26,15 @@
26	26	<p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
27	27	</div>
28	28	</header>
	29	+
	30	+ <section class="call-to-action--section">
	31	+ <div class="row">
	32	+ <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
	33	+ <div class="button--themed">
	34	+ <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+ </section>
29	39	</article>
30	40	</div>
...	...
...	...	@@ -4,6 +4,46 @@ $scale: 1.1;
4	4	$time: .2s;
5	5	$darken: 15%;
6	6
	7	+// Commons
	8	+.button--themed {
	9	+ padding: $program-box-space;
	10	+ .btn {
	11	+ color: #fff;
	12	+ font-weight: bold;
	13	+ padding: 15px 0;
	14	+ border-left: 0;
	15	+ border-right: 0;
	16	+ border-top: 0;
	17	+ border-radius: 6px;
	18	+
	19	+ -webkit-transition: all $time ease-in-out;
	20	+ -moz-transition: all $time ease-in-out;
	21	+ -o-transition: all $time ease-in-out;
	22	+ transition: all $time ease-in-out;
	23	+
	24	+ @each $category, $color in $categories {
	25	+ .#{$category} & {
	26	+ background-color: $color;
	27	+ border-bottom: 3px solid darken($color, $darken);
	28	+ }
	29	+ }
	30	+
	31	+ &:hover,
	32	+ &:focus {
	33	+ @each $category, $color in $categories {
	34	+ .#{$category} & {
	35	+ background-color: darken($color, $darken);
	36	+ }
	37	+ }
	38	+ }
	39	+
	40	+ .contraste & {
	41	+ color: #262626;
	42	+ background-color: #fff;
	43	+ }
	44	+ }
	45	+}
	46	+
7	47	.program-box {
8	48	cursor: pointer;
9	49	background-color: #fff;
...	...	@@ -110,45 +150,6 @@ $darken: 15%;
110	150	p { margin: 0; }
111	151	}
112	152
113		- &--button {
114		- padding: $program-box-space;
115		- .btn {
116		- color: #fff;
117		- font-weight: bold;
118		- padding: 15px 0;
119		- border-left: 0;
120		- border-right: 0;
121		- border-top: 0;
122		- border-radius: 6px;
123		-
124		- -webkit-transition: all $time ease-in-out;
125		- -moz-transition: all $time ease-in-out;
126		- -o-transition: all $time ease-in-out;
127		- transition: all $time ease-in-out;
128		-
129		- @each $category, $color in $categories {
130		- .#{$category} & {
131		- background-color: $color;
132		- border-bottom: 3px solid darken($color, $darken);
133		- }
134		- }
135		-
136		- &:hover,
137		- &:focus {
138		- @each $category, $color in $categories {
139		- .#{$category} & {
140		- background-color: darken($color, $darken);
141		- }
142		- }
143		- }
144		-
145		- .contraste & {
146		- color: #262626;
147		- background-color: #fff;
148		- }
149		- }
150		- }
151		-
152	153	&--image-wrapper {
153	154	position: relative;
154	155	// width: 100%;
...	...	@@ -231,4 +232,31 @@ $darken: 15%;
231	232	.program-banner--abstract {
232	233	padding-bottom: 10px;
233	234	}
	235	+
	236	+ .button--themed {
	237	+ .btn {
	238	+ font-size: 38px;
	239	+
	240	+ @media (max-width: $screen-sm){
	241	+ font-size: 20px;
	242	+ }
	243	+ }
	244	+ }
	245	+}
	246	+
	247	+
	248	+.program-content {
	249	+ h2 {
	250	+ font-size: 38px;
	251	+ font-weight: 500;
	252	+ margin-bottom: 40px;
	253	+ padding-bottom: 20px;
	254	+
	255	+ small {
	256	+ display: block;
	257	+ font-size: 16px;
	258	+ padding-top: 5px;
	259	+ text-transform: none;
	260	+ }
	261	+ }
234	262	}
...	...
...	...	@@ -64,7 +64,7 @@
64	64	position: absolute;
65	65	top: -16px;
66	66	left: -14px;
67		- transform: scale(0.4);
	67	+ transform: scale(0.35);
68	68	}
69	69
70	70	@each $category, $color in $categories {
...	...
...	...	@@ -57,6 +57,18 @@
57	57	'footer': { templateUrl: 'app/pages/footer/footer.html' }
58	58	}
59	59	})
	60	+ .state('programa-conheca', {
	61	+ url: '/programa/:slug/conheca-o-programa',
	62	+ views: {
	63	+ 'header': { templateUrl: 'app/pages/header/header.html' },
	64	+ 'main': {
	65	+ templateUrl: 'app/pages/programas/conheca-o-programa.html',
	66	+ controller: 'ProgramaContentPageController',
	67	+ controllerAs: 'pageProgramaContent'
	68	+ },
	69	+ 'footer': { templateUrl: 'app/pages/footer/footer.html' }
	70	+ }
	71	+ })
60	72	.state('sobre', {
61	73	url: '/sobre',
62	74	views: {
...	...
...	...	@@ -18,7 +18,7 @@
18	18	$rootScope.$on('$stateChangeStart', function(event, next) {
19	19
20	20	if (!next.data \|\| !next.data.authorizedRoles) {
21		- $log.debug('public url/state');
	21	+ $log.debug('runAuth: public url/state');
22	22	return;
23	23	}
24	24
...	...
...	...	@@ -22,6 +22,7 @@
22	22	getTerms: getTerms,
23	23	getArticleById: getArticleById,
24	24	getArticleBySlug: getArticleBySlug,
	25	+ getContentById: getContentById,
25	26	setHomeAbstract: setHomeAbstract,
26	27	getHomeAbstract: getHomeAbstract
27	28	};
...	...	@@ -85,6 +86,12 @@
85	86	}, cbError);
86	87	}
87	88
	89	+ function getContentById (contentId, cbSuccess, cbError) {
	90	+ return getArticleById(contentId, {
	91	+ fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic'
	92	+ }, cbSuccess, cbError);
	93	+ }
	94	+
88	95	function getHome (cbSuccess, cbError) {
89	96	return getArticleById(idArticleHome, {
90	97	fields: 'id,children,categories,abstract,title,image,url,setting,position',
...	...
1	1	<header class="container">
2	2
3	3	<div class="row">
4		- <div class="accessibility-wrapper">
5		- <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
6		- <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
7		- </button>
	4	+ <div class="col-sm-12">
8	5
9		- <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
10		- <span class="glyphicon glyphicon-user"></span>
11		- Entrar
12		- </button>
	6	+ <div class="accessibility-wrapper">
	7	+ <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
	8	+ <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
	9	+ </button>
	10	+
	11	+ <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
	12	+ <span class="icon icon-user"></span>
	13	+ Entrar
	14	+ </button>
	15	+ </div>
13	16	</div>
14	17	</div>
15	18
...	...
...	...	@@ -0,0 +1,16 @@
	1	+.accessibility-wrapper {
	2	+ .icon-user {
	3	+ display: inline-block;
	4	+ vertical-align: middle;
	5	+ width: 26px;
	6	+ height: 26px;
	7	+ border: 1px solid #ccc;
	8	+ border-radius: 100%;
	9	+ background-position: 1px 0px;
	10	+
	11	+ .contraste & {
	12	+ // XXX: chage for dinamic handler
	13	+ background-position: -0px -24px;
	14	+ }
	15	+ }
	16	+}
...	...
...	...	@@ -0,0 +1,55 @@
	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>
	27	+ </div>
	28	+
	29	+ <div class="row">
	30	+ <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">
	36	+ <section ng-bind-html="pageProgramaContent.program.body"></section>
	37	+ </div>
	38	+ </article>
	39	+ </div>
	40	+ <div class="row">
	41	+ <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
	42	+ <div class="col-sm-6" >
	43	+ <div class="button--themed">
	44	+ <button class="btn btn-block" ng-click="pageProgramaContent.goBack()">
	45	+ <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
	46	+ Participe
	47	+ </button>
	48	+ </div>
	49	+ </div>
	50	+ <div class="col-sm-6">
	51	+ <social-share display="'full'"></social-share>
	52	+ </div>
	53	+ </aside>
	54	+ </div>
	55	+</div>
...	...