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 129 transition: all $time ease-in-out;
130 130 }
131 131  
  132 + .button--themed {
  133 + padding: 20px;
  134 + }
  135 +
132 136 &:hover {
133 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   -.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 37 top: 10px;
38 38 left: 10px;
39 39 // border: 1px solid #fff;
40   - border-radius: 48px;
  40 + border-radius: 100%;
41 41  
42 42 -webkit-transition: -webkit-transform 0.2s ease-in-out;
43 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 @@
  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 @@
  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 @@
  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 9 .run(runHistory)
10 10 .run(runPath)
11 11 .run(runColorUtils)
  12 + .run(runUtils)
12 13 .run(runBlock);
13 14  
14 15 /** @ngInject */
... ... @@ -147,6 +148,13 @@
147 148 }
148 149  
149 150 /** @ngInject */
  151 + function runUtils($rootScope) {
  152 + $rootScope.stripHtml = function (text) {
  153 + return String(text).replace(/<[^>]+>/gm, '');
  154 + };
  155 + }
  156 +
  157 + /** @ngInject */
150 158 function runBlock($log) {
151 159 $log.debug('[RUN] Block end.');
152 160 }
... ...
src/app/index.scss
  Diff comments   View file @36b6847
... ... @@ -49,7 +49,7 @@ body {
49 49  
50 50 // Commons
51 51 .button--themed {
52   - padding: 20px;
  52 + // padding: 20px;
53 53 .btn {
54 54 color: #fff;
55 55 font-weight: bold;
... ... @@ -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 154 // Hack to fix "Barra do Brasil"
136 155 #barra-brasil .brasil-flag {
137 156 height: 33px !important;
... ...
src/app/pages/programas/programa-content.controller.js
  Diff comments   View file @36b6847
... ... @@ -25,25 +25,31 @@
25 25 var vm = this;
26 26  
27 27 var params = vm.$state.params;
28   - var slug = params.slug;
29 28  
30 29 vm.article = null;
31   - vm.categories = null;
32   - vm.currentCategory = null;
  30 + vm.category = null;
33 31 vm.loading = true;
34 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 42 vm.article = article;
  43 + vm.category = vm.article.categories[0];
  44 +
45 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 54 vm.loadContent();
49 55  
... ... @@ -70,13 +76,9 @@
70 76 vm.loading = false;
71 77 };
72 78  
73   - ProgramaContentPageController.prototype.goToPreview = function () {
  79 + ProgramaContentPageController.prototype.makeProposal = function () {
74 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 8 <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
9 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 62 <article class="program-content">
13   - <div>
  63 + <div class="row">
14 64 <section ng-bind-html="pageProgramaContent.article.body"></section>
15 65 </div>
16 66 </article>
... ...
src/app/pages/programas/programas.scss
  Diff comments   View file @36b6847
... ... @@ -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 +}
... ...