From 0c7d6a011aec682d3cdb58c36d22003816f7abcc Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Fri, 28 Aug 2015 13:33:21 -0300
Subject: [PATCH] Update: program page - sync (2)

---
 README.md                                                          |  14 ++++++++++++++
 src/app/components/a11y-bar/a11y-bar.html                          |   8 ++++----
 src/app/components/article-grid/article-grid.html                  |   2 +-
 src/app/components/proposal-ranking/proposal-ranking-carousel.scss |  77 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/components/proposal-ranking/proposal-ranking-list.scss     |  82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/components/proposal-ranking/proposal-ranking.directive.js  |  59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 src/app/components/proposal-ranking/proposal-ranking.html          |  71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------
 src/app/components/proposal-ranking/proposal-ranking.scss          |  14 --------------
 src/app/components/proposal-related/proposal-related.directive.js  |   0
 src/app/components/proposal-related/proposal-related.html          |   0
 src/app/components/proposal-related/proposal-related.scss          |   0
 src/app/components/proposal-stats/proposal-stats.directive.js      |  54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/components/proposal-stats/proposal-stats.html              |  14 ++++++++++++++
 src/app/index.run.js                                               |  44 ++++++++++++++++++++------------------------
 src/app/index.scss                                                 |  13 ++++++-------
 src/app/pages/footer/footer.html                                   |   3 ++-
 src/app/pages/header/header.html                                   |   2 +-
 src/app/pages/programas/programa-content.controller.js             |  29 +++++++++++++++++++----------
 src/app/pages/programas/programa.html                              | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------
 src/app/pages/programas/programas.scss                             |   8 +++++++-
 20 files changed, 492 insertions(+), 137 deletions(-)
 create mode 100644 src/app/components/proposal-ranking/proposal-ranking-carousel.scss
 create mode 100644 src/app/components/proposal-ranking/proposal-ranking-list.scss
 delete mode 100644 src/app/components/proposal-ranking/proposal-ranking.scss
 create mode 100644 src/app/components/proposal-related/proposal-related.directive.js
 create mode 100644 src/app/components/proposal-related/proposal-related.html
 create mode 100644 src/app/components/proposal-related/proposal-related.scss
 create mode 100644 src/app/components/proposal-stats/proposal-stats.directive.js
 create mode 100644 src/app/components/proposal-stats/proposal-stats.html

diff --git a/README.md b/README.md
index 7784325..f02d391 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 # Dialoga App
 
+Start development:
+
+```bash
+# dev with no proxy (local data)
+gulp serve
+json-server data.js -p 9000 -w data.js
+
+# dev with proxy to hom server
+gulp serve --target="http://hom.login.dialoga.gov.br"
+
+# dev with proxy to production server
+gulp serve --target="http://login.dialoga.gov.br"
+```
+
 # Project Decisions
 
 - [generator-gulp-angular](https://github.com/Swiip/generator-gulp-angular)
diff --git a/src/app/components/a11y-bar/a11y-bar.html b/src/app/components/a11y-bar/a11y-bar.html
index ec8325e..59acb13 100644
--- a/src/app/components/a11y-bar/a11y-bar.html
+++ b/src/app/components/a11y-bar/a11y-bar.html
@@ -4,25 +4,25 @@
       <div class="col-sm-6">
         <ul class="skip-links list-inline list-unstyled">
           <li>
-            <a accesskey="1" href="#content" id="skip-to-content" ng-click="skipToContent($event)">
+            <a accesskey="1" href="#content" id="skip-to-content" ng-click="focusOn('#content', $event)">
               Ir para o conteúdo
               <span>1</span>
             </a>
           </li>
           <li>
-            <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="skipToNavigation($event)">
+            <a accesskey="2" href="#navigation" id="skip-to-navigation" ng-click="focusOn('#navigation', $event)">
               Ir para o menu
               <span>2</span>
             </a>
           </li>
           <li>
-            <a accesskey="3" href="#search" id="skip-to-search" ng-click="skipToSearch($event)">
+            <a accesskey="3" href="#search" id="skip-to-search" ng-click="focusOn('#search', $event)">
               Ir para a busca
               <span>3</span>
             </a>
           </li>
           <li>
-            <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="skipToFooter($event)">
+            <a accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)">
               Ir para o rodapé
               <span>4</span>
             </a>
diff --git a/src/app/components/article-grid/article-grid.html b/src/app/components/article-grid/article-grid.html
index e12c382..7399ae1 100644
--- a/src/app/components/article-grid/article-grid.html
+++ b/src/app/components/article-grid/article-grid.html
@@ -2,7 +2,7 @@
   <header class="header">
     <h2>Conheça os programas <span class="small">({{vm.filtredArticleList.length}}/{{vm.articles.length}})</span></h2>
     <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
-      <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{vm.articles.length}} programas
+      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{vm.articles.length}} programas
     </button>
   </header>
   <div>
diff --git a/src/app/components/proposal-ranking/proposal-ranking-carousel.scss b/src/app/components/proposal-ranking/proposal-ranking-carousel.scss
new file mode 100644
index 0000000..5663233
--- /dev/null
+++ b/src/app/components/proposal-ranking/proposal-ranking-carousel.scss
@@ -0,0 +1,77 @@
+.proposal-ranking {
+    // both: carousel and list
+}
+
+.proposal-ranking--carousel {
+    background-color: #f1f1f1;
+
+    &-top {
+        position: relative;
+        color: #fff;
+        font-weight: bold;
+        font-size: 18px;
+        padding: 5px 10px;
+
+
+        &-triggers {
+            position: absolute;
+            right: 5px;
+            top: 5px;
+
+            li {
+                border: 1px solid #fff;
+                border-radius: 100%;
+                width: 15px;
+                height: 15px;
+                margin-right: 5px;
+
+                cursor: pointer;
+
+                &.active {
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+
+    &-middle {
+        position: relative;
+        padding: 25px 30px;
+
+        .content {
+            position: relative;
+            z-index: 2;
+        }
+
+        &-watermark {
+            position: absolute;
+            bottom: 1px;
+            left: -5px;
+            color: #ddd;
+            font-size: 150px;
+            font-weight: bold;
+            line-height: 116px;
+            z-index: 1;
+
+        }
+    }
+
+    &-bottom {
+        position: relative;
+        color: #fff;
+        padding: 10px;
+        font-weight: bold;
+        cursor: pointer;
+        z-index: 10;
+
+        &-icon {
+            .glyphicon {
+                position: relative;
+                top: -2px;
+                background-color: #fff;
+                padding: 6px 5px 5px 6px;
+                border-radius: 100%;
+            }
+        }
+    }
+}
diff --git a/src/app/components/proposal-ranking/proposal-ranking-list.scss b/src/app/components/proposal-ranking/proposal-ranking-list.scss
new file mode 100644
index 0000000..d688224
--- /dev/null
+++ b/src/app/components/proposal-ranking/proposal-ranking-list.scss
@@ -0,0 +1,82 @@
+.proposal-ranking {
+    // both: carousel and list
+}
+
+.proposal-ranking--list {
+    table {
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    thead {
+        th{
+            color: #fff;
+            background-color: #606060;
+            &:first-child {
+                background-color: #484848;
+                text-align: right;
+                width: 160px;
+                padding-right: 20px;
+            }
+        }
+
+        .btn-question {
+            color: #484848;
+            background-color: #fff;
+            display: inline-block;
+            text-align: center;
+            width: 22px;
+            height: 22px;
+            margin-left: 10px;
+            padding: 0;
+            border-radius: 100%;
+        }
+
+        .popover {
+            color: #484848;
+        }
+    }
+
+    tbody {
+        tr {
+            background-color: #fff;
+        }
+
+        td {
+            &:first-child {
+                font-size: 22px;
+                font-weight: bold;
+                padding: 0;
+                text-align: right;
+            }
+        }
+
+        .position {
+            display: block;
+            width: 100%;
+            margin: 20px 0;
+            padding: 5px 20px;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+
+    // override bootstrap
+    .table-striped > tbody > tr:nth-of-type(odd) {
+        // impar
+        background-color: #eaeaea;
+
+        .position {
+            background-color: #fff;
+        }
+    }
+
+    .table-striped > tbody > tr:nth-of-type(even) {
+        // par
+        background-color: #fff;
+
+        .position {
+            background-color: #eaeaea;
+        }
+    }
+}
diff --git a/src/app/components/proposal-ranking/proposal-ranking.directive.js b/src/app/components/proposal-ranking/proposal-ranking.directive.js
index e3985c6..decbe93 100644
--- a/src/app/components/proposal-ranking/proposal-ranking.directive.js
+++ b/src/app/components/proposal-ranking/proposal-ranking.directive.js
@@ -6,15 +6,17 @@
     .directive('proposalRanking', proposalRanking);
 
   /** @ngInject */
-  function proposalRanking($rootScope) {
+  function proposalRanking() {
 
     /** @ngInject */
-    function ProposalRankingController(ArticleService, $scope, $log) {
+    function ProposalRankingController(ArticleService, $scope, $element, $timeout, $log) {
       $log.debug('ProposalRankingController');
 
       var vm = this;
       vm.ArticleService = ArticleService;
       vm.$scope = $scope;
+      vm.$element = $element;
+      vm.$timeout = $timeout;
       vm.$log = $log;
 
       vm.init();
@@ -24,27 +26,74 @@
       // initial values
       var vm = this;
 
+      vm.activeIndex = 1;
+      vm.attachedPopover = false;
+      vm.loading = false;
+
+      if(!angular.isNumber(vm.limit)){
+        vm.limit = parseInt(vm.limit);
+      }
+
       vm.loadData();
     };
 
     ProposalRankingController.prototype.loadData = function () {
       // async values
-      // var vm = this;
+      var vm = this;
+
+      vm.loading = true;
+
+      // simulate delay
+      vm.$timeout(function(){
+        vm.loading = false;
+      }, 2000);
+    };
+
+    ProposalRankingController.prototype.switchProposal = function (index) {
+      var vm = this;
 
+      if(index > 0 && index <= limit) {
+        vm.activeIndex = index;
+      }else{
+        vm.$log.warn('[switchProposal] "index" not handled:', index);
+      }
     };
 
     ProposalRankingController.prototype.showProposals = function () {
       var vm = this;
 
-      // notify parents
+      // notify parents - handled by parents
       vm.$scope.$emit('see-proposals');
     };
 
+    ProposalRankingController.prototype.showPopover = function ($event) {
+      var vm = this;
+
+      $event.stopPropagation();
+
+      var target = $event.target;
+      var elPopover = angular.element(target);
+
+      if(!vm.attachedPopover){
+        elPopover.popover({
+          html: true,
+          placement: 'top',
+          animation: true,
+          title: 'Regra de posição das propostas',
+          content: '<p>É calculada pelo saldo de interações das propostas (curtidas - não curtidas) dividido pela diferença de exibições entre elas.</p><p>O objetivo dessa correção é compensar o saldo de interações e a diferença de exibições das propostas que não tiveram muitas oportunidades de visualização ou das propostas que tiveram mais oportunidades de visualização que a média.</p><p>Com essa correção, é possível comparar propostas que entraram em diferentes momentos, durante todo o período da consulta.</p>'
+        });
+        vm.attachedPopover = true;
+      }
+
+
+      elPopover.popover('toggle');
+    };
+
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/proposal-ranking/proposal-ranking.html',
       scope: {
-        limit: '=',
+        limit: '&',
         display: '='
       },
       controller: ProposalRankingController,
diff --git a/src/app/components/proposal-ranking/proposal-ranking.html b/src/app/components/proposal-ranking/proposal-ranking.html
index 97f188f..db59312 100644
--- a/src/app/components/proposal-ranking/proposal-ranking.html
+++ b/src/app/components/proposal-ranking/proposal-ranking.html
@@ -1,15 +1,16 @@
 <div class="proposal-ranking">
-  <div class="proposal-ranking--carousel">
+
+  <div class="proposal-ranking--carousel" ng-if="vm.display==='carousel'">
     <div class="proposal-ranking--carousel-top color-theme-bg">
       <div class="proposal-ranking--carousel-position">
         <span>1º</span>
         <span>Lugar</span>
       </div>
-      <div class="proposal-ranking--carousel-triggers">
+      <div class="proposal-ranking--carousel-top-triggers">
         <ul class="list-inline">
-          <li class="active"></li>
-          <li></li>
-          <li></li>
+          <li ng-class="{'active': vm.activeIndex === 1}" ng-click="vm.switchProposal(1)"></li>
+          <li ng-class="{'active': vm.activeIndex === 2}" ng-click="vm.switchProposal(2)"></li>
+          <li ng-class="{'active': vm.activeIndex === 3}" ng-click="vm.switchProposal(3)"></li>
         </ul>
       </div>
     </div>
@@ -17,11 +18,67 @@
       <div class="content">
         <p>Lorem ipsum dolor sit amet, an qui alia constituam. Forensibus scripserit pri at, sit et dolorum ancillae. Ad sea quas utamur salutandi, illud veritus propriae mea ut. Ius no timeam intellegat liberavisse, eum suscipit pertinax ad. Illum graeci postulant et pro, at clita facete quo, cibo liber ad pri.</p>
       </div>
+      <div class="proposal-ranking--carousel-middle-watermark"><span>1º</span></div>
     </div>
     <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
-      <div class="proposal-ranking--carousel-icon">
-        <span class="glyphicon glyphicon-chevron-down"></span>
+      <div class="proposal-ranking--carousel-bottom-icon">
+        <span>Veja as propostas mais vortadas</span>
+        <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
       </div>
     </div>
   </div>
+
+  <div class="proposal-ranking--list" ng-if="vm.display==='list'">
+
+    <div class="table-responsive" ng-if="vm.loading">
+      <div class="table-responsive">Carregando...</div>
+    </div>
+    <div class="table-responsive" ng-if="!vm.loading">
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>
+              Colocação
+              <button type="button" class="btn btn-link btn-question" ng-click="vm.showPopover($event)">?</button>
+            </th>
+            <th>123 PROPOSTAS</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="color-theme-fg">
+              <span class="position">1º</span>
+            </td>
+            <td>
+              <div class="row">
+                <div class="col-xs-12">Conteúdo</div>
+                <div class="col-md-6">
+                  <button type="button" class="btn btn-link">
+                    Avalie esta proposta
+                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+                    <!-- <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> -->
+                  </button>
+                </div>
+                <div class="col-md-6">
+                  <proposal-ranking views="'1'"></proposal-ranking>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="color-theme-fg">
+              <span class="position">2º</span>
+            </td>
+            <td>
+              <div class="row">
+                <div class="col-xs-12">Conteúdo</div>
+                <div class="col-md-6">Avalie esta proposta</div>
+                <div class="col-md-6">[STATS]</div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/proposal-ranking/proposal-ranking.scss b/src/app/components/proposal-ranking/proposal-ranking.scss
deleted file mode 100644
index f497d2e..0000000
--- a/src/app/components/proposal-ranking/proposal-ranking.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.proposal-ranking {
-    // both: carousel and list
-}
-
-.proposal-ranking--carousel {
-    background-color: #eee;
-
-    .proposal-ranking--carousel-top {
-        color: #fff;
-        font-weight: bold;
-        font-size: 18px;
-        padding: 5px 10px;
-    }
-}
diff --git a/src/app/components/proposal-related/proposal-related.directive.js b/src/app/components/proposal-related/proposal-related.directive.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/components/proposal-related/proposal-related.directive.js
diff --git a/src/app/components/proposal-related/proposal-related.html b/src/app/components/proposal-related/proposal-related.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/components/proposal-related/proposal-related.html
diff --git a/src/app/components/proposal-related/proposal-related.scss b/src/app/components/proposal-related/proposal-related.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/components/proposal-related/proposal-related.scss
diff --git a/src/app/components/proposal-stats/proposal-stats.directive.js b/src/app/components/proposal-stats/proposal-stats.directive.js
new file mode 100644
index 0000000..2380e3e
--- /dev/null
+++ b/src/app/components/proposal-stats/proposal-stats.directive.js
@@ -0,0 +1,54 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('dialoga')
+    .directive('proposalStats', proposalStats);
+
+  /** @ngInject */
+  function proposalStats() {
+
+    /** @ngInject */
+    function ProposalStatsController($log) {
+      $log.debug('ProposalStatsController');
+
+      var vm = this;
+      vm.$log = $log;
+
+      vm.init();
+    }
+
+    ProposalStatsController.prototype.init = function () {
+      // initial values
+      var vm = this;
+
+      vm.views = vm.views ? parseInt(vm.views) : 0;
+      vm.up = vm.up ? parseInt(vm.up) : 0;
+      vm.down = vm.down ? parseInt(vm.down) : 0;
+
+      vm.loadData();
+    };
+
+    ProposalStatsController.prototype.loadData = function () {
+      // async values
+      // var vm = this;
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/proposal-stats/proposal-stats.html',
+      scope: {
+        views: '&',
+        up: '&',
+        down: '&'
+      },
+      controller: ProposalStatsController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+
+    return directive;
+  }
+
+})();
diff --git a/src/app/components/proposal-stats/proposal-stats.html b/src/app/components/proposal-stats/proposal-stats.html
new file mode 100644
index 0000000..f2718d1
--- /dev/null
+++ b/src/app/components/proposal-stats/proposal-stats.html
@@ -0,0 +1,14 @@
+<ul class="list-inline">
+  <li>
+    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+    <span>{{vm.views}}</span>
+  </li>
+  <li>
+    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+    <span>{{vm.up}}</span>
+  </li>
+  <li>
+    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+    <span>{{vm.down}}</span>
+  </li>
+</ul>
diff --git a/src/app/index.run.js b/src/app/index.run.js
index 03de84b..ba2e2f7 100644
--- a/src/app/index.run.js
+++ b/src/app/index.run.js
@@ -52,23 +52,6 @@
       angular.element(bodyEl).toggleClass('contraste', !!state);
     }
 
-    $rootScope.skipToContent = function() {
-      angular.element('#content').attr('tabIndex', -1).focus();
-    };
-
-    $rootScope.skipToNavigation = function() {
-      angular.element('#navigation').attr('tabIndex', -1).focus();
-    };
-
-    $rootScope.skipToSearch = function() {
-      // angular.element('#search').attr('tabIndex', -1).focus();
-      angular.element('#articleQueryFilter').attr('tabIndex', -1).focus();
-    };
-
-    $rootScope.skipToFooter = function() {
-      angular.element('#footer').attr('tabIndex', -1).focus();
-    };
-
     $rootScope.actionContrast = function() {
       // toggle contrast
       contrast = !contrast;
@@ -76,24 +59,37 @@
       adjustContrast(contrast);
     };
 
-    $rootScope.focusMainContent = function($event) {
+    $rootScope.focusOn = function(elId, $event) {
+      var el = angular.element(elId);
+      $rootScope.scrollTo(el, $event);
+      el.attr('tabIndex', -1).focus();
+    };
 
-      // prevent skip link from redirecting
-      if ($event) { $event.preventDefault(); }
+    $rootScope.focusMainContent = function($event) {
 
       var mainContentArea = document.querySelector('[role="main"]');
 
       if (mainContentArea) {
         $timeout(function() {
-          var $el = angular.element(mainContentArea);
-
-          angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
-        }, 90);
+          $rootScope.scrollTo(mainContentArea, $event);
+        }, 90); // force queue
       } else {
         $log.warn('role="main" not found.');
       }
     };
 
+    $rootScope.scrollTo = function(target, $event) {
+
+      // prevent skip link from redirecting
+      if ($event) { $event.preventDefault(); }
+
+      if(angular.isString(target)){
+        target = angular.element(target);
+      }
+
+      angular.element('body').animate({scrollTop: target.offset().top}, 'fast');
+    };
+
     $log.debug('[RUN] Accessibility end.');
   }
 
diff --git a/src/app/index.scss b/src/app/index.scss
index 46436cf..a079195 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -140,16 +140,15 @@ body {
 // Theme
 @each $category, $color in $categories {
     .#{$category} {
-        .color-theme-fg {
-            color: $color;
-        }
-
-        .color-theme-bg {
-            background-color: $color;
-        }
+        .color-theme-fg { color: $color; }
+        .color-theme-bg { background-color: $color;}
     }
 }
 
+$common-color: #5E739E;
+.color-theme-common-fg {color: $common-color; }
+.color-theme-common-bg {background-color: $common-color; }
+
 
 // Hack to fix "Barra do Brasil"
 #barra-brasil .brasil-flag {
diff --git a/src/app/pages/footer/footer.html b/src/app/pages/footer/footer.html
index 198ad27..6817d1a 100644
--- a/src/app/pages/footer/footer.html
+++ b/src/app/pages/footer/footer.html
@@ -3,7 +3,8 @@
   	<div class="row">
   	  <div class="col-xs-12 text-center">
   	    <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a>
-  	  </div>
+        <a href="#header" class="pull-right" ng-click="scrollTo('#header')">Voltar para o topo</a>
+      </div>
   	</div>
   </div>
 </div>
diff --git a/src/app/pages/header/header.html b/src/app/pages/header/header.html
index ca45574..1f448be 100644
--- a/src/app/pages/header/header.html
+++ b/src/app/pages/header/header.html
@@ -1,4 +1,4 @@
-<header class="container">
+<header id="header" class="container">
 
   <div class="row">
     <div class="col-sm-12">
diff --git a/src/app/pages/programas/programa-content.controller.js b/src/app/pages/programas/programa-content.controller.js
index 9fa3431..a47a186 100644
--- a/src/app/pages/programas/programa-content.controller.js
+++ b/src/app/pages/programas/programa-content.controller.js
@@ -21,7 +21,7 @@
     vm.init();
   }
 
-  ProgramaContentPageController.prototype.init = function () {
+  ProgramaContentPageController.prototype.init = function() {
     var vm = this;
 
     var params = vm.$state.params;
@@ -33,18 +33,19 @@
     vm.slug = params.slug;
 
     vm.loadData();
+    vm.attachListeners();
   };
 
-  ProgramaContentPageController.prototype.loadData = function () {
+  ProgramaContentPageController.prototype.loadData = function() {
     var vm = this;
 
-    vm.ArticleService.getArticleBySlug(vm.slug, function(article){
+    vm.ArticleService.getArticleBySlug(vm.slug, function(article) {
       vm.article = article;
       vm.category = vm.article.categories[0];
 
       vm.$rootScope.contentTitle = vm.article.title;
 
-      if(!vm.banner){
+      if (!vm.banner) {
         vm.banner = {
           src: vm.$rootScope.basePath + vm.article.image.url,
           alt: 'Imagem de destaque do conteúdo'
@@ -53,22 +54,30 @@
 
       vm.loadContent();
 
-    }, function (error) {
+    }, function(error) {
       vm.$log.error(error);
       vm.$log.info('Rollback to home page.');
       vm.$state.go('inicio', {}, {location: true});
     });
   };
 
-  ProgramaContentPageController.prototype.loadContent = function () {
+  ProgramaContentPageController.prototype.attachListeners = function() {
+    var vm = this;
+
+    vm.$scope.$on('see-proposals', function() {
+      vm.$log.warn('TODO: handle see proposals / ranking');
+    });
+  };
+
+  ProgramaContentPageController.prototype.loadContent = function() {
     var vm = this;
 
     vm.loading = true;
-    if(!vm.article.body){
-      vm.ArticleService.getContentById(vm.article.id, function (data) {
+    if (!vm.article.body) {
+      vm.ArticleService.getContentById(vm.article.id, function(data) {
         vm.article.body = data.article.body;
         vm.loading = false;
-      }, function (error) {
+      }, function(error) {
         vm.loading = false;
         vm.error = error;
       });
@@ -76,7 +85,7 @@
     vm.loading = false;
   };
 
-  ProgramaContentPageController.prototype.makeProposal = function () {
+  ProgramaContentPageController.prototype.makeProposal = function() {
     var vm = this;
 
     vm.$log.warn('Not implemented yet: "makeProposal"');
diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html
index 1d08091..1b0f434 100644
--- a/src/app/pages/programas/programa.html
+++ b/src/app/pages/programas/programa.html
@@ -1,81 +1,92 @@
-<div class="container page--conheca-o-programa">
-  <div ng-if="pageProgramaContent.article && pageProgramaContent.article.title">
-    <div ncy-breadcrumb></div>
-  </div>
+<div class="page--conheca-o-programa">
+  <section>
+    <div class="container">
+      <div ng-if="pageProgramaContent.article && pageProgramaContent.article.title">
+        <div ncy-breadcrumb></div>
+      </div>
+    </div>
+  </section>
 
-  <div ng-if="!pageProgramaContent.article.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>
+  <section>
+    <div class="container">
+      <div ng-if="!pageProgramaContent.article.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>
+  </section>
 
   <div ng-if="pageProgramaContent.article.body" ng-class="pageProgramaContent.category.slug">
-    <article class="program-preview">
-      <div class="row">
-        <div class="col-md-12">
-          <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
-        </div>
-        <div class="col-md-8">
-          <div class="program-preview--box">
-            <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
-            <div class="program-preview--box--content-wrapper">
-              <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
-                <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>
-              </div>
-              <div class="program-preview--abstract color-theme-fg">
-                <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>
-              </div>
-              <div class="program-preview--abstract-details">
-                <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
-              </div>
-              <div class="program-preview--share">
-                <ul class="list-inline">
-                  <li>Compartilhe este programa:</li>
-                  <li><social-share class="program-preview--share-directive"></social-share></li>
-                </ul>
-              </div>
-              <div class="program-preview--make-proposal">
-                <div class="row">
-                  <div class="col-sm-6">
-                    <div class="button--themed">
-                      <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
+    <section>
+      <div class="container">
+        <article class="program-preview">
+          <div class="row">
+            <div class="col-md-12">
+              <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
+            </div>
+            <div class="col-md-8">
+              <div class="program-preview--box">
+                <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
+                <div class="program-preview--box--content-wrapper">
+                  <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
+                    <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>
+                  </div>
+                  <div class="program-preview--abstract color-theme-fg">
+                    <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>
+                  </div>
+                  <div class="program-preview--abstract-details">
+                    <p>Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.</p>
+                  </div>
+                  <div class="program-preview--share">
+                    <ul class="list-inline">
+                      <li>Compartilhe este programa:</li>
+                      <li><social-share class="program-preview--share-directive"></social-share></li>
+                    </ul>
+                  </div>
+                  <div class="program-preview--make-proposal">
+                    <div class="row">
+                      <div class="col-sm-6">
+                        <div class="button--themed">
+                          <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div class="col-md-4">
-          <div class="row">
-            <div class="col-xs-12">
-              <h3 class="color-theme-fg">Propostas mais votadas</h3>
-              <proposal-ranking limit="3" display="carousel"></proposal-ranking>
-            </div>
-            <div class="col-xs-12">
-              <h3 class="color-theme-fg">Propostas nesse programa</h3>
-              <proposal-related article="pageProgramaContent.article"></proposal-related>
+            <div class="col-md-4">
+              <div class="row">
+                <div class="col-xs-12">
+                  <h3 class="color-theme-fg">Propostas mais votadas</h3>
+                  <proposal-ranking limit="'3'" display="'carousel'"></proposal-ranking>
+                </div>
+                <div class="col-xs-12">
+                  <h3 class="color-theme-fg">Propostas nesse programa</h3>
+                  <proposal-related article="pageProgramaContent.article"></proposal-related>
+                </div>
+              </div>
             </div>
           </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="proposal-ranking-section">
+      <div class="container">
+        <div class="proposal-ranking-section-header">
+          <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>
+        </div>
+        <div class="proposal-ranking-section-table">
+          <proposal-ranking limit="'5'" display="'list'"></proposal-ranking>
         </div>
       </div>
-    </article>
+    </section>
+
     <article class="program-content">
       <div class="row">
         <section ng-bind-html="pageProgramaContent.article.body"></section>
       </div>
     </article>
-    <aside class="program--aside"ng-class="pageProgramaContent.article.categories[0].slug">
-      <div class="col-sm-6" >
-        <div class="button--themed">
-          <button class="btn btn-block" ng-click="pageProgramaContent.goToPreview()">
-            <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
-            Participe
-          </button>
-        </div>
-      </div>
-      <div class="col-sm-6">
-        <social-share></social-share>
-      </div>
-    </aside>
   </div>
 </div>
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss
index 0d7712f..85639e0 100644
--- a/src/app/pages/programas/programas.scss
+++ b/src/app/pages/programas/programas.scss
@@ -11,7 +11,7 @@
 
     .program-preview--box {
         position: relative;
-        background: #eee;
+        background: #f1f1f1;
     }
 
     .program-preview--banner {
@@ -55,4 +55,10 @@
     h3 {
         margin-top: 0;
     }
+
+}
+
+.proposal-ranking-section {
+    background-color: #f1f1f1;
+    margin: 30px 0;
 }
--
libgit2 0.21.2