Download as
Browse Code »

Commit 2824da3cc9120d1636abb848fa27725a7f9243f4

Authored by Leonardo Merlin
1 parent ed62c87e
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Add a initial content section of programs (home)

Showing 18 changed files with 162 additions and 33 deletions   Show diff stats
@@ -24,7 +24,7 @@ exports.paths = { @@ -24,7 +24,7 @@ exports.paths = {
24 * to inject css preprocessor deps and js files in karma 24 * to inject css preprocessor deps and js files in karma
25 */ 25 */
26 exports.wiredep = { 26 exports.wiredep = {
27 - exclude: [/jquery/, /bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/], 27 + exclude: [/bootstrap\.css/],
28 directory: 'bower_components' 28 directory: 'bower_components'
29 }; 29 };
30 30
src/app/components/navbar/navbar.html
  Diff comments   View file @2824da3
1 <nav class="navbar navbar-static-top"> 1 <nav class="navbar navbar-static-top">
2 <div class="container-fluid"> 2 <div class="container-fluid">
3 <div class="navbar-header"> 3 <div class="navbar-header">
  4 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
  5 + <span class="sr-only">Alternar menu de navegação</span>
  6 + <span class="icon-bar"></span>
  7 + <span class="icon-bar"></span>
  8 + <span class="icon-bar"></span>
  9 + </button>
4 <a class="navbar-brand" ui-sref="inicio"> 10 <a class="navbar-brand" ui-sref="inicio">
5 <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" /> 11 <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
6 <!-- <span class="glyphicon glyphicon-home"></span> Início --> 12 <!-- <span class="glyphicon glyphicon-home"></span> Início -->
7 </a> 13 </a>
8 </div> 14 </div>
9 15
10 - <div class="collapse navbar-collapse"> 16 + <div id="navbar-collapse" class="collapse navbar-collapse">
11 <ul class="nav navbar-nav"> 17 <ul class="nav navbar-nav">
12 <li><a ui-sref="sobre">Sobre</a></li> 18 <li><a ui-sref="sobre">Sobre</a></li>
13 <li><a ui-sref="programas">Programas</a></li> 19 <li><a ui-sref="programas">Programas</a></li>
src/app/components/navbar/navbar.scss
  Diff comments   View file @2824da3
@@ -6,3 +6,7 @@ @@ -6,3 +6,7 @@
6 padding-top: 30px; 6 padding-top: 30px;
7 padding-bottom: 30px; 7 padding-bottom: 30px;
8 } 8 }
  9 +
  10 +.navbar-toggle .icon-bar {
  11 + background-color: #333;
  12 +}
src/app/components/programa/programa.directive.js
  Diff comments   View file @2824da3
@@ -15,14 +15,16 @@ @@ -15,14 +15,16 @@
15 var vm = this; 15 var vm = this;
16 16
17 $log.debug('this.programa', vm.programa); 17 $log.debug('this.programa', vm.programa);
18 - vm.proposal = vm.programa; 18 + vm.program = vm.programa;
19 } 19 }
20 20
21 ProgramaController.prototype.getCategory = function () { 21 ProgramaController.prototype.getCategory = function () {
22 - return this.proposal.categories[0]; 22 + // return this.program.categories[0];
  23 + return 'category-object';
23 }; 24 };
24 ProgramaController.prototype.getCategoryName = function () { 25 ProgramaController.prototype.getCategoryName = function () {
25 - return this.getCategory().name; 26 + // return this.getCategory().name;
  27 + return 'category-name';
26 }; 28 };
27 29
28 ProgramaController.prototype.getImageUrl = function () { 30 ProgramaController.prototype.getImageUrl = function () {
@@ -33,7 +35,7 @@ @@ -33,7 +35,7 @@
33 }; 35 };
34 36
35 ProgramaController.prototype.showContent = function () { 37 ProgramaController.prototype.showContent = function () {
36 - $log.debug('TODO: showContent()'); 38 + $log.debug('TODO: showContent()', this.program);
37 }; 39 };
38 40
39 var directive = { 41 var directive = {
src/app/components/programa/programa.html
  Diff comments   View file @2824da3
1 -<div class="programa-box" ng-if="vm.proposal" ng-click="vm.showContent()"> 1 +<div class="programa-box" ng-if="vm.program" ng-click="vm.showContent()">
2 <div class="category">{{::vm.getCategoryName()}}</div> 2 <div class="category">{{::vm.getCategoryName()}}</div>
3 <div class="image-wrapper"> 3 <div class="image-wrapper">
4 <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> 4 <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
src/app/components/programa/programa.scss
  Diff comments   View file @2824da3
@@ -9,7 +9,7 @@ $time: 0.3s; @@ -9,7 +9,7 @@ $time: 0.3s;
9 .image-wrapper { 9 .image-wrapper {
10 position: relative; 10 position: relative;
11 // width: 100%; 11 // width: 100%;
12 - width: 370px; 12 + // width: 370px;
13 // height: 170px; 13 // height: 170px;
14 background-color: red; 14 background-color: red;
15 overflow: hidden; 15 overflow: hidden;
src/app/components/programas/programas.directive.js 0 → 100644
  Diff comments   View file @2824da3
@@ -0,0 +1,63 @@ @@ -0,0 +1,63 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('programaList', programaList);
  7 +
  8 + /** @ngInject */
  9 + function programaList($log) {
  10 +
  11 + /** @ngInject */
  12 + function ProgramaListController() {
  13 + $log.debug('ProgramaListController');
  14 +
  15 + var vm = this;
  16 + vm.filter = false;
  17 + vm.categories = [
  18 + {
  19 + name: 'Saúde',
  20 + slug: 'saude'
  21 + },
  22 + {
  23 + name: 'Educação',
  24 + slug: 'educacao'
  25 + }
  26 + ];
  27 +
  28 + for (var i = vm.categories.length - 1; i >= 0; i--) {
  29 + var category = vm.categories[i];
  30 + category.iconClass = vm.getIconClasses(category);
  31 + };
  32 + }
  33 +
  34 + ProgramaListController.prototype.getIconClasses = function (tema) {
  35 + return 'glyphicon glyphicon-exclamation-sign';
  36 + };
  37 +
  38 + ProgramaListController.prototype.filterByTema = function (tema) {
  39 + this.filter = tema.slug;
  40 + $log.debug('[TODO] Filterting by tema:', this.filter);
  41 + };
  42 + ProgramaListController.prototype.showAll = function () {
  43 + this.filter = null;
  44 + $log.debug('[TODO] Filterting by tema:', this.filter);
  45 + };
  46 +
  47 + var directive = {
  48 + restrict: 'E',
  49 + templateUrl: 'app/components/programas/programas.html',
  50 + scope: {
  51 + programas: '=programas',
  52 + temas: '=temas'
  53 + },
  54 + controller: ProgramaListController,
  55 + controllerAs: 'vm',
  56 + bindToController: true
  57 + };
  58 +
  59 +
  60 + return directive;
  61 + }
  62 +
  63 +})();
src/app/components/programas/programas.html 0 → 100644
  Diff comments   View file @2824da3
@@ -0,0 +1,33 @@ @@ -0,0 +1,33 @@
  1 +<div class="row">
  2 + <div class="col-sm-3">
  3 + <div class="category-list">
  4 + <aside class="navigation">
  5 + <h3 class="title"><b>Programas</b> por Tema</h3>
  6 + <div class="list-group category-list">
  7 + <button type="button" class="list-group-item category-item" ng-repeat="tema in vm.categories" ng-click="vm.filterByTema(tema)">
  8 + <span ng-class="[tema.iconClass]"></span>
  9 + <span>{{::tema.name}}</span>
  10 + <span class="glyphicon glyphicon-chevron-right pull-right"></span>
  11 + </button>
  12 + </div>
  13 + </aside>
  14 + </div>
  15 + </div>
  16 +
  17 + <div class="col-sm-9">
  18 + <div class="program-list">
  19 + <div class="header">
  20 + <h2>Programas</h2>
  21 + <button type="button" ng-click="vm.showAll()" class="btn btn-link">
  22 + <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
  23 + </button>
  24 + </div>
  25 + <div class="row">
  26 + <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
  27 + <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
  28 + <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
  29 + <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
  30 + </div>
  31 + </div>
  32 + </div>
  33 +</div>
src/app/components/programas/programas.scss 0 → 100644
  Diff comments   View file @2824da3
@@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
  1 +.program-list {
  2 +
  3 + .header {
  4 + position: relative;
  5 + height: 40px;
  6 + margin-bottom: 10px;
  7 +
  8 + button {
  9 + position: absolute;
  10 + right: 0;
  11 + top: 2px;
  12 + }
  13 + }
  14 +}
src/app/index.constants.js
  Diff comments   View file @2824da3
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 } 12 }
13 }) 13 })
14 .constant('Modernizr', Modernizr) 14 .constant('Modernizr', Modernizr)
  15 + .constant('jQuery', jQuery)
15 // .constant('key', value) 16 // .constant('key', value)
16 ; 17 ;
17 18
src/app/index.scss
  Diff comments   View file @2824da3
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 * If you want to override some bootstrap variables, you have to change values here. 2 * If you want to override some bootstrap variables, you have to change values here.
3 * The list of variables are listed here bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss 3 * The list of variables are listed here bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss
4 */ 4 */
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 /**
@@ -19,20 +19,6 @@ $icon-font-path: &quot;../../bower_components/bootstrap-sass-official/assets/fonts/bo @@ -19,20 +19,6 @@ $icon-font-path: &quot;../../bower_components/bootstrap-sass-official/assets/fonts/bo
19 padding: 0.2em 0; 19 padding: 0.2em 0;
20 } 20 }
21 21
22 -$barra-theme: ("green": #00420c, "yellow": #2c66ce, "blue": #0042b1);  
23 -  
24 -.skip-links a:focus {  
25 - background-color: #fff !important;  
26 - opacity: 1;  
27 - z-index: 2;  
28 -}  
29 -  
30 -#footer-brasil {  
31 - background: none repeat scroll 0% 0% map-get($barra-theme, "blue");  
32 - padding: 1em 0px;  
33 - max-width: 100%;  
34 -}  
35 -  
36 /** 22 /**
37 * Do not remove this comments bellow. It's the markers used by gulp-inject to inject 23 * Do not remove this comments bellow. It's the markers used by gulp-inject to inject
38 * all your sass files automatically 24 * all your sass files automatically
src/app/partials/footer/footer.html
  Diff comments   View file @2824da3
1 -<div class="container"> 1 +<div id="footer" class="container">
2 <div class="row"> 2 <div class="row">
3 <div class="col-xs-12 text-center"> 3 <div class="col-xs-12 text-center">
4 - <a ui-sref="termos-de-uso">Termos de uso</a> 4 + <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a>
5 </div> 5 </div>
6 </div> 6 </div>
7 </div> 7 </div>
src/app/partials/footer/footer.scss 0 → 100644
  Diff comments   View file @2824da3
@@ -0,0 +1,11 @@ @@ -0,0 +1,11 @@
  1 +$barra-theme: ("green": #00420c, "yellow": #2c66ce, "blue": #0042b1);
  2 +
  3 +#footer-brasil {
  4 + background: none repeat scroll 0% 0% map-get($barra-theme, "blue");
  5 + padding: 1em 0px;
  6 + max-width: 100%;
  7 +}
  8 +
  9 +#footer {
  10 + margin: 10px 0;
  11 +}
src/app/partials/header/header.html
  Diff comments   View file @2824da3
1 <header class="container" ng-controller="HeaderController as header"> 1 <header class="container" ng-controller="HeaderController as header">
2 2
3 <div class="skip-links"> 3 <div class="skip-links">
4 - <a href="#content" class="sr-only" tabindex="0" ng-click="header.focusMainContent($event)">Ir para o conteúdo</a> 4 + <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="header.focusMainContent($event)">Ir para o conteúdo principal</a>
5 </div> 5 </div>
6 6
7 <div class="row"> 7 <div class="row">
src/app/partials/header/header.scss 0 → 100644
  Diff comments   View file @2824da3
@@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
  1 +.skip-links a:focus {
  2 + background-color: #fff !important;
  3 + opacity: 1;
  4 + z-index: 2;
  5 +}
src/app/partials/inicio/inicio.controller.js
  Diff comments   View file @2824da3
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 .controller('InicioController', InicioController); 6 .controller('InicioController', InicioController);
7 7
8 /** @ngInject */ 8 /** @ngInject */
9 - function InicioController(ArticleService, $log) { 9 + function InicioController(ArticleService, $sce, $log) {
10 $log.debug('InicioController'); 10 $log.debug('InicioController');
11 11
12 var vm = this; 12 var vm = this;
@@ -14,12 +14,10 @@ @@ -14,12 +14,10 @@
14 14
15 $log.log('ArticleService', ArticleService); 15 $log.log('ArticleService', ArticleService);
16 16
17 - // ArticleService.getList().then(function(articles){  
18 vm.loading = true; 17 vm.loading = true;
19 ArticleService.getHome().then(function(homeArticle){ 18 ArticleService.getHome().then(function(homeArticle){
20 - $log.log('ArticleService.getList().then() homeArticle.article', homeArticle.article);  
21 -  
22 vm.article = homeArticle.article; 19 vm.article = homeArticle.article;
  20 + vm.article.abstract = $sce.trustAsHtml(vm.article.abstract);
23 vm.loading = false; 21 vm.loading = false;
24 }, function () { 22 }, function () {
25 $log.error('error'); 23 $log.error('error');
src/app/partials/inicio/inicio.html
  Diff comments   View file @2824da3
1 -<div class="container">  
2 - Início  
3 -</div> 1 +<section class="container">
  2 + <div class="embed-responsive embed-responsive-16by9" ng-bind-html="inicio.article.abstract"></div>
  3 +</section>
  4 +<section class="container-fluid section-programas">
  5 + <programa-list></programa-list>
  6 +</section>
src/app/partials/inicio/inicio.scss 0 → 100644
  Diff comments   View file @2824da3
@@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
  1 +.section-programas {
  2 + background-color: #f1f1f1;
  3 +}