Download as
Browse Code »

Commit 36b6847cc8cd81ddf0e7850e2077b47c97b09647

Authored by Leonardo Merlin
1 parent 8142d936
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

Update: program page - sync.

Showing 12 changed files with 253 additions and 36 deletions   Show diff stats
src/app/components/article-box/article-box.scss
  Diff comments   View file @36b6847
@@ -129,6 +129,10 @@ $article-box-space: 20px; @@ -129,6 +129,10 @@ $article-box-space: 20px;
129 transition: all $time ease-in-out; 129 transition: all $time ease-in-out;
130 } 130 }
131 131
  132 + .button--themed {
  133 + padding: 20px;
  134 + }
  135 +
132 &:hover { 136 &:hover {
133 background-color: #d9d9d9; 137 background-color: #d9d9d9;
134 138
src/app/components/article-content/article-content.directive.js
View file @8142d93
src/app/components/article-content/article-content.scss
View file @8142d93
@@ -1,15 +0,0 @@ @@ -1,15 +0,0 @@
1 -.article-content {  
2 - h2 {  
3 - font-size: 38px;  
4 - font-weight: 500;  
5 - margin-bottom: 40px;  
6 - padding-bottom: 20px;  
7 -  
8 - small {  
9 - display: block;  
10 - font-size: 16px;  
11 - padding-top: 5px;  
12 - text-transform: none;  
13 - }  
14 - }  
15 -}  
src/app/components/category-list/category-list.scss
  Diff comments   View file @36b6847
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 top: 10px; 37 top: 10px;
38 left: 10px; 38 left: 10px;
39 // border: 1px solid #fff; 39 // border: 1px solid #fff;
40 - border-radius: 48px; 40 + border-radius: 100%;
41 41
42 -webkit-transition: -webkit-transform 0.2s ease-in-out; 42 -webkit-transition: -webkit-transform 0.2s ease-in-out;
43 -moz-transition: -moz-transform 0.2s ease-in-out; 43 -moz-transition: -moz-transform 0.2s ease-in-out;
src/app/components/proposal-ranking/proposal-ranking.directive.js 0 → 100644
  Diff comments   View file @36b6847
@@ -0,0 +1,59 @@ @@ -0,0 +1,59 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('proposalRanking', proposalRanking);
  7 +
  8 + /** @ngInject */
  9 + function proposalRanking($rootScope) {
  10 +
  11 + /** @ngInject */
  12 + function ProposalRankingController(ArticleService, $scope, $log) {
  13 + $log.debug('ProposalRankingController');
  14 +
  15 + var vm = this;
  16 + vm.ArticleService = ArticleService;
  17 + vm.$scope = $scope;
  18 + vm.$log = $log;
  19 +
  20 + vm.init();
  21 + }
  22 +
  23 + ProposalRankingController.prototype.init = function () {
  24 + // initial values
  25 + var vm = this;
  26 +
  27 + vm.loadData();
  28 + };
  29 +
  30 + ProposalRankingController.prototype.loadData = function () {
  31 + // async values
  32 + // var vm = this;
  33 +
  34 + };
  35 +
  36 + ProposalRankingController.prototype.showProposals = function () {
  37 + var vm = this;
  38 +
  39 + // notify parents
  40 + vm.$scope.$emit('see-proposals');
  41 + };
  42 +
  43 + var directive = {
  44 + restrict: 'E',
  45 + templateUrl: 'app/components/proposal-ranking/proposal-ranking.html',
  46 + scope: {
  47 + limit: '=',
  48 + display: '='
  49 + },
  50 + controller: ProposalRankingController,
  51 + controllerAs: 'vm',
  52 + bindToController: true
  53 + };
  54 +
  55 +
  56 + return directive;
  57 + }
  58 +
  59 +})();
src/app/components/proposal-ranking/proposal-ranking.html 0 → 100644
  Diff comments   View file @36b6847
@@ -0,0 +1,27 @@ @@ -0,0 +1,27 @@
  1 +<div class="proposal-ranking">
  2 + <div class="proposal-ranking--carousel">
  3 + <div class="proposal-ranking--carousel-top color-theme-bg">
  4 + <div class="proposal-ranking--carousel-position">
  5 + <span>1º</span>
  6 + <span>Lugar</span>
  7 + </div>
  8 + <div class="proposal-ranking--carousel-triggers">
  9 + <ul class="list-inline">
  10 + <li class="active"></li>
  11 + <li></li>
  12 + <li></li>
  13 + </ul>
  14 + </div>
  15 + </div>
  16 + <div class="proposal-ranking--carousel-middle">
  17 + <div class="content">
  18 + <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>
  19 + </div>
  20 + </div>
  21 + <div class="proposal-ranking--carousel-bottom color-theme-common-bg" ng-click="vm.showProposals()">
  22 + <div class="proposal-ranking--carousel-icon">
  23 + <span class="glyphicon glyphicon-chevron-down"></span>
  24 + </div>
  25 + </div>
  26 + </div>
  27 +</div>
src/app/components/proposal-ranking/proposal-ranking.scss 0 → 100644
  Diff comments   View file @36b6847
@@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
  1 +.proposal-ranking {
  2 + // both: carousel and list
  3 +}
  4 +
  5 +.proposal-ranking--carousel {
  6 + background-color: #eee;
  7 +
  8 + .proposal-ranking--carousel-top {
  9 + color: #fff;
  10 + font-weight: bold;
  11 + font-size: 18px;
  12 + padding: 5px 10px;
  13 + }
  14 +}
src/app/index.run.js
  Diff comments   View file @36b6847
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 .run(runHistory) 9 .run(runHistory)
10 .run(runPath) 10 .run(runPath)
11 .run(runColorUtils) 11 .run(runColorUtils)
  12 + .run(runUtils)
12 .run(runBlock); 13 .run(runBlock);
13 14
14 /** @ngInject */ 15 /** @ngInject */
@@ -147,6 +148,13 @@ @@ -147,6 +148,13 @@
147 } 148 }
148 149
149 /** @ngInject */ 150 /** @ngInject */
  151 + function runUtils($rootScope) {
  152 + $rootScope.stripHtml = function (text) {
  153 + return String(text).replace(/<[^>]+>/gm, '');
  154 + };
  155 + }
  156 +
  157 + /** @ngInject */
150 function runBlock($log) { 158 function runBlock($log) {
151 $log.debug('[RUN] Block end.'); 159 $log.debug('[RUN] Block end.');
152 } 160 }
src/app/index.scss
  Diff comments   View file @36b6847
@@ -49,7 +49,7 @@ body { @@ -49,7 +49,7 @@ body {
49 49
50 // Commons 50 // Commons
51 .button--themed { 51 .button--themed {
52 - padding: 20px; 52 + // padding: 20px;
53 .btn { 53 .btn {
54 color: #fff; 54 color: #fff;
55 font-weight: bold; 55 font-weight: bold;
@@ -132,6 +132,25 @@ body { @@ -132,6 +132,25 @@ body {
132 } 132 }
133 } 133 }
134 134
  135 +.icon-wrapper-rounded {
  136 + padding: 3px;
  137 + border-radius: 100%;
  138 +}
  139 +
  140 +// Theme
  141 +@each $category, $color in $categories {
  142 + .#{$category} {
  143 + .color-theme-fg {
  144 + color: $color;
  145 + }
  146 +
  147 + .color-theme-bg {
  148 + background-color: $color;
  149 + }
  150 + }
  151 +}
  152 +
  153 +
135 // Hack to fix "Barra do Brasil" 154 // Hack to fix "Barra do Brasil"
136 #barra-brasil .brasil-flag { 155 #barra-brasil .brasil-flag {
137 height: 33px !important; 156 height: 33px !important;
src/app/pages/programas/programa-content.controller.js
  Diff comments   View file @36b6847
@@ -25,25 +25,31 @@ @@ -25,25 +25,31 @@
25 var vm = this; 25 var vm = this;
26 26
27 var params = vm.$state.params; 27 var params = vm.$state.params;
28 - var slug = params.slug;  
29 28
30 vm.article = null; 29 vm.article = null;
31 - vm.categories = null;  
32 - vm.currentCategory = null; 30 + vm.category = null;
33 vm.loading = true; 31 vm.loading = true;
34 vm.error = false; 32 vm.error = false;
  33 + vm.slug = params.slug;
35 34
36 - vm.ArticleService.getCategories(function(categories){  
37 - vm.categories = categories;  
38 - }, function (error) {  
39 - vm.error = error;  
40 - vm.$log.error(error);  
41 - }); 35 + vm.loadData();
  36 + };
42 37
43 - vm.ArticleService.getArticleBySlug(slug, function(article){ 38 + ProgramaContentPageController.prototype.loadData = function () {
  39 + var vm = this;
  40 +
  41 + vm.ArticleService.getArticleBySlug(vm.slug, function(article){
44 vm.article = article; 42 vm.article = article;
  43 + vm.category = vm.article.categories[0];
  44 +
45 vm.$rootScope.contentTitle = vm.article.title; 45 vm.$rootScope.contentTitle = vm.article.title;
46 - vm.currentCategory = vm.article.categories[0]; 46 +
  47 + if(!vm.banner){
  48 + vm.banner = {
  49 + src: vm.$rootScope.basePath + vm.article.image.url,
  50 + alt: 'Imagem de destaque do conteúdo'
  51 + };
  52 + }
47 53
48 vm.loadContent(); 54 vm.loadContent();
49 55
@@ -70,13 +76,9 @@ @@ -70,13 +76,9 @@
70 vm.loading = false; 76 vm.loading = false;
71 }; 77 };
72 78
73 - ProgramaContentPageController.prototype.goToPreview = function () { 79 + ProgramaContentPageController.prototype.makeProposal = function () {
74 var vm = this; 80 var vm = this;
75 81
76 - vm.$state.go('programa', {  
77 - slug: vm.article.slug  
78 - }, {  
79 - location: true  
80 - }); 82 + vm.$log.warn('Not implemented yet: "makeProposal"');
81 }; 83 };
82 })(); 84 })();
src/app/pages/programas/programa.html
  Diff comments   View file @36b6847
@@ -8,9 +8,59 @@ @@ -8,9 +8,59 @@
8 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div> 8 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
9 </div> 9 </div>
10 10
11 - <div ng-if="pageProgramaContent.article.body"> 11 + <div ng-if="pageProgramaContent.article.body" ng-class="pageProgramaContent.category.slug">
  12 + <article class="program-preview">
  13 + <div class="row">
  14 + <div class="col-md-12">
  15 + <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
  16 + </div>
  17 + <div class="col-md-8">
  18 + <div class="program-preview--box">
  19 + <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pageProgramaContent.banner.src}} )'}"></div>
  20 + <div class="program-preview--box--content-wrapper">
  21 + <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pageProgramaContent.category.slug">
  22 + <span class="icon" ng-class="'icon-tema-' + pageProgramaContent.category.slug"></span>
  23 + </div>
  24 + <div class="program-preview--abstract color-theme-fg">
  25 + <h2>{{::stripHtml(pageProgramaContent.article.abstract)}}</h2>
  26 + </div>
  27 + <div class="program-preview--abstract-details">
  28 + <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>
  29 + </div>
  30 + <div class="program-preview--share">
  31 + <ul class="list-inline">
  32 + <li>Compartilhe este programa:</li>
  33 + <li><social-share class="program-preview--share-directive"></social-share></li>
  34 + </ul>
  35 + </div>
  36 + <div class="program-preview--make-proposal">
  37 + <div class="row">
  38 + <div class="col-sm-6">
  39 + <div class="button--themed">
  40 + <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
  41 + </div>
  42 + </div>
  43 + </div>
  44 + </div>
  45 + </div>
  46 + </div>
  47 + </div>
  48 + <div class="col-md-4">
  49 + <div class="row">
  50 + <div class="col-xs-12">
  51 + <h3 class="color-theme-fg">Propostas mais votadas</h3>
  52 + <proposal-ranking limit="3" display="carousel"></proposal-ranking>
  53 + </div>
  54 + <div class="col-xs-12">
  55 + <h3 class="color-theme-fg">Propostas nesse programa</h3>
  56 + <proposal-related article="pageProgramaContent.article"></proposal-related>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + </div>
  61 + </article>
12 <article class="program-content"> 62 <article class="program-content">
13 - <div> 63 + <div class="row">
14 <section ng-bind-html="pageProgramaContent.article.body"></section> 64 <section ng-bind-html="pageProgramaContent.article.body"></section>
15 </div> 65 </div>
16 </article> 66 </article>
src/app/pages/programas/programas.scss
  Diff comments   View file @36b6847
@@ -7,3 +7,52 @@ @@ -7,3 +7,52 @@
7 } 7 }
8 } 8 }
9 9
  10 +.program-preview {
  11 +
  12 + .program-preview--box {
  13 + position: relative;
  14 + background: #eee;
  15 + }
  16 +
  17 + .program-preview--banner {
  18 + width: 100%;
  19 + height: 400px;
  20 +
  21 + background-position: center;
  22 + background-size: cover;
  23 + background-repeat: no-repeat;
  24 + }
  25 +
  26 + .program-preview--icon {
  27 + $icon-size: 98px;
  28 + $icon-scale: 0.7;
  29 + position: absolute;
  30 + top: (-1) * ($icon-size / 2);
  31 + left: 40px;
  32 +
  33 + width: $icon-size * $icon-scale + 20px;
  34 + height: $icon-size * $icon-scale + 20px;
  35 +
  36 + .icon {
  37 + display: block;
  38 + position: relative;
  39 + top: -8px;
  40 + left: -6px;
  41 + transform: scale($icon-scale);
  42 + }
  43 + }
  44 +
  45 + .program-preview--box--content-wrapper {
  46 + padding: 40px;
  47 + position: relative;
  48 + }
  49 +
  50 + h2,
  51 + h3{
  52 + font-weight: bold;
  53 + }
  54 +
  55 + h3 {
  56 + margin-top: 0;
  57 + }
  58 +}