Download as
Browse Code »

Commit 917e0a1526b9f726d13bd90472a0ab596cbb3fb7

Authored by Leonardo Merlin
1 parent 2a43dc19
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

Set colors by category

Showing 6 changed files with 113 additions and 60 deletions   Show diff stats
src/app/components/programa/programa.directive.js
  Diff comments   View file @917e0a1
... ... @@ -55,6 +55,22 @@
55 55 return 'TODO: create image alt on server-side.';
56 56 };
57 57  
  58 + ProgramaController.prototype.isDisplay = function (display) {
  59 + return this.display === display;
  60 + };
  61 +
  62 + ProgramaController.prototype.isDisplayBox = function () {
  63 + return this.isDisplay('box');
  64 + };
  65 +
  66 + ProgramaController.prototype.isDisplayPreview = function () {
  67 + return this.isDisplay('preview');
  68 + };
  69 +
  70 + ProgramaController.prototype.isDisplayContent = function () {
  71 + return this.isDisplay('content');
  72 + };
  73 +
58 74 ProgramaController.prototype.showContent = function () {
59 75 var vm = this;
60 76  
... ... @@ -71,7 +87,8 @@
71 87 restrict: 'E',
72 88 templateUrl: 'app/components/programa/programa.html',
73 89 scope: {
74   - program: '='
  90 + program: '=',
  91 + display: '='
75 92 },
76 93 controller: ProgramaController,
77 94 controllerAs: 'vm',
... ...
src/app/components/programa/programa.html
  Diff comments   View file @917e0a1
1   -<article class="program-box {{::vm.getCategorySlug()}}" ng-if="vm.program" ng-click="vm.showContent()">
2   - <h2 class="category-name">{{::vm.getCategoryName()}}</h2>
3   - <div class="image-wrapper">
4   - <img class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
5   - </div>
6   - <h1 class="program-title">{{::vm.program.title}}</h1>
7   - <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
8   -</article>
  1 +<div ng-if="vm.program">
  2 + <article ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
  3 + <div class="program-box {{::vm.getCategorySlug()}}">
  4 + <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
  5 + <div class="program-box--image-wrapper">
  6 + <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
  7 + </div>
  8 + <h1 class="program-box--title">{{::vm.program.title}}</h1>
  9 + <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
  10 + <div class="program-box--button">
  11 + <button class="btn btn-block">
  12 + Participe
  13 + </button>
  14 + </div>
  15 + </div>
  16 + </article>
  17 +
  18 + <article ng-if="vm.isDisplayPreview()">
  19 + <header class="program-banner">
  20 + <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
  21 + <div class="program-banner--strip">
  22 + <h1 class="program-banner--title">{{::vm.program.title}}</h1>
  23 + <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
  24 + </div>
  25 + </header>
  26 + </article>
  27 +</div>
... ...
src/app/components/programa/programa.scss
  Diff comments   View file @917e0a1
1 1 // Variables
  2 +$program-box-padding: 20px;
2 3 $scale: 1.1;
3 4 $time: .3s;
4 5  
5 6 // sandbox
6 7 .program-box {
7 8 cursor: pointer;
8   - .category-name {
  9 + background-color: #fff;
  10 + margin-bottom: $program-box-padding;
  11 +
  12 + .contraste & {
  13 + color: #fff;
  14 + background-color: #262626;
  15 + }
  16 +
  17 + &--category {
9 18 font-size: 14px;
10 19 font-weight: bold;
11   - line-height: 30px;
  20 + text-transform: uppercase;
  21 + line-height: 22px;
12 22 display: block;
13 23 height: 30px;
14   - margin-bottom: 0;
  24 + margin: 0;
  25 + padding: 5px $program-box-padding;
15 26 color: #ffffff;
16   - background-color: #000000;
  27 +
  28 + @each $category, $color in $categories {
  29 + .#{$category} & {
  30 + background-color: $color;
  31 + }
  32 + }
  33 +
  34 + .contraste & {
  35 + background-color: #262626;
  36 + }
17 37 }
18   - .image-wrapper {
  38 +
  39 + &--title {
  40 + font-size: 18px;
  41 + font-weight: bold;
  42 + padding: 0 $program-box-padding;
  43 + }
  44 +
  45 + &--abstract {
  46 + padding: 0 $program-box-padding;
  47 + }
  48 +
  49 + &--button {
  50 + padding: $program-box-padding;
  51 + .btn {
  52 + color: #fff;
  53 + font-weight: bold;
  54 +
  55 + @each $category, $color in $categories {
  56 + .#{$category} & {
  57 + background-color: $color;
  58 + }
  59 + }
  60 +
  61 + .contraste & {
  62 + color: #262626;
  63 + background-color: #fff;
  64 + }
  65 + }
  66 + }
  67 +
  68 + &--image-wrapper {
19 69 position: relative;
20 70 // width: 100%;
21 71 // width: 370px;
... ... @@ -24,13 +74,15 @@ $time: .3s;
24 74 overflow: hidden;
25 75 text-align: center;
26 76 }
27   - .img-responsive {
  77 +
  78 + &--image {
28 79 -webkit-transition: all $time ease-in-out;
29 80 -moz-transition: all $time ease-in-out;
30 81 -o-transition: all $time ease-in-out;
31 82 transition: all $time ease-in-out;
32 83 }
33   - &:hover .img-responsive {
  84 +
  85 + &:hover .program-box--image {
34 86 -webkit-transform: scale($scale); /* prefixo para browsers webkit */
35 87 -moz-transform: scale($scale); /* prefixo para browsers gecko */
36 88 -o-transform: scale($scale); /* prefixo para opera */
... ...
src/app/components/programas/programas.html
  Diff comments   View file @917e0a1
... ... @@ -56,7 +56,7 @@
56 56 </aside>
57 57 </div>
58 58 <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query | limitTo:vm.limitTo as results">
59   - <programa-box program="program" class="col-sm-12 col-md-6"></programa-box>
  59 + <programa-box program="program" display="'box'" class="col-sm-12 col-md-6"></programa-box>
60 60 <div ng-if="$odd" class="clearfix"></div>
61 61 </div>
62 62 <div class="animate-repeat" ng-if="results.length == 0">
... ...
src/app/index.scss
  Diff comments   View file @917e0a1
... ... @@ -20,42 +20,17 @@ $gray: #f1f1f1;
20 20  
21 21 // -------------
22 22  
  23 +// 1.4 - dicionarios
  24 +$categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738);
  25 +$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.", cultura: "O que nos singulariza no conjunto das nações é, em última instância, nossa cultura. É por ela que nos identificamos como brasileiros de norte a sul deste país. Uma grande nação precisa ter um desenvolvimento cultural à altura de sua grandeza, contemplando as dimensões simbólica, econômica e cidadã da cultura, que são parte central do projeto de um país democrático e plural. A pluralidade é nossa singularidade.");
23 26  
24 27 // -------------
25   -// Paleta de Cores
26   -// -------------
27   -$cinza1: #f1f1f1;
28   -$cinza2: #eaeaea;
29   -$cinza3: #dadada;
30   -$cinza4: #989898;
31   -$cinza5: #606060;
32   -$cinza6: #484848;
33   -
34   -
35   -// -------------
36   -// Tipografia
37   -// -------------
38   -// $open-sans-regular:
39   -// $open-sans-bold:
40   -$titulo1-size: 32pt;
41   -$titulo1-line-height: 36pt;
42 28  
43   -$titulo2-size: 26pt;
44   -$titulo2-line-height: 30pt;
45   -
46   -$titulo3-size: 22pt;
47   -$titulo3-line-height: 26pt;
48   -
49   -$titulo4-size: 18pt;
50   -$titulo4-line-height: 22pt;
51   -
52   -$titulo5-size: 14pt;
53   -$titulo5-line-height: 18pt;
  29 +body {
  30 + // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  31 +}
54 32  
55   -$paragraph-size: 12pt;
56   -$paragraph-line-height: 16pt;
57 33  
58   -// -------------
59 34 .skip-links a:focus {
60 35 background-color: #fff !important;
61 36 opacity: 1;
... ...
src/app/partials/programas/programa.html
  Diff comments   View file @917e0a1
... ... @@ -12,7 +12,7 @@
12 12 <div class="navbar-left">
13 13 <button class="btn btn-link">
14 14 <span class="glyphicon glyphicon-refresh"></span>
15   - <span>{{programa.program.categories[0].name}}</span>
  15 + <span class="category-name">{{programa.program.categories[0].name}}</span>
16 16 </button>
17 17 </div>
18 18 <div class="navbar-right">
... ... @@ -28,17 +28,7 @@
28 28 </div>
29 29  
30 30 <div ng-if="programa.program">
31   - <article>
32   - <header class="program-banner">
33   - <img class="program-banner--image" ng-src="{{programa.program.image.url}}" alt="Imagem de apresentação do progama.">
34   - <div class="program-banner--strip">
35   - <h1 class="program-banner--title">{{::programa.program.title}}</h1>
36   - <p class="program-banner--abstract" ng-bind-html="programa.program.abstract"></p>
37   - </div>
38   -
39   - </header>
40   -
41   - </article>
  31 + <programa-box program="programa.program" display="'preview'"></programa-box>
42 32 </div>
43 33 <div id="content" ng-bind-html="programa.program.body"></div>
44 34 </div>
... ...