Set colors by category

Leonardo Merlin
1 parent 2a43dc19
Showing 6 changed files with 113 additions and 60 deletions Show diff stats
src/app/components/programa/programa.directive.js
src/app/components/programa/programa.html
src/app/components/programa/programa.scss
src/app/components/programas/programas.html
src/app/index.scss
src/app/partials/programas/programa.html
@@ -55,6 +55,22 @@
       return 'TODO: create image alt on server-side.';
     };
+    ProgramaController.prototype.isDisplay = function (display) {
+      return this.display === display;
+    };
+
+    ProgramaController.prototype.isDisplayBox = function () {
+      return this.isDisplay('box');
+    };
+
+    ProgramaController.prototype.isDisplayPreview = function () {
+      return this.isDisplay('preview');
+    };
+
+    ProgramaController.prototype.isDisplayContent = function () {
+      return this.isDisplay('content');
+    };
+
     ProgramaController.prototype.showContent = function () {
       var vm = this;
@@ -71,7 +87,8 @@
       restrict: 'E',
       templateUrl: 'app/components/programa/programa.html',
       scope: {
-        program: '='
+        program: '=',
+        display: '='
       },
       controller: ProgramaController,
       controllerAs: 'vm',
-<article class="program-box {{::vm.getCategorySlug()}}" ng-if="vm.program" ng-click="vm.showContent()">
-  <h2 class="category-name">{{::vm.getCategoryName()}}</h2>
-  <div class="image-wrapper">
-    <img class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
-  </div>
-  <h1 class="program-title">{{::vm.program.title}}</h1>
-  <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
-</article>
+<div ng-if="vm.program">
+  <article ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
+    <div class="program-box {{::vm.getCategorySlug()}}">
+      <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
+      <div class="program-box--image-wrapper">
+        <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
+      </div>
+      <h1 class="program-box--title">{{::vm.program.title}}</h1>
+      <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
+      <div class="program-box--button">
+        <button class="btn btn-block">
+          Participe
+        </button>
+      </div>
+    </div>
+  </article>
+
+  <article ng-if="vm.isDisplayPreview()">
+    <header class="program-banner">
+      <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
+      <div class="program-banner--strip">
+        <h1 class="program-banner--title">{{::vm.program.title}}</h1>
+        <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
+      </div>
+    </header>
+  </article>
+</div>
 // Variables
+$program-box-padding: 20px;
 $scale: 1.1;
 $time: .3s;
 // sandbox
 .program-box {
     cursor: pointer;
-    .category-name {
+    background-color: #fff;
+    margin-bottom: $program-box-padding;
+
+    .contraste & {
+        color: #fff;
+        background-color: #262626;
+    }
+
+    &--category {
         font-size: 14px;
         font-weight: bold;
-        line-height: 30px;
+        text-transform: uppercase;
+        line-height: 22px;
         display: block;
         height: 30px;
-        margin-bottom: 0;
+        margin: 0;
+        padding: 5px $program-box-padding;
         color: #ffffff;
-        background-color: #000000;
+
+        @each $category, $color in $categories {
+            .#{$category} & {
+                background-color: $color;
+            }
+        }
+
+        .contraste & {
+            background-color: #262626;
+        }
     }
-    .image-wrapper {
+
+    &--title {
+        font-size: 18px;
+        font-weight: bold;
+        padding: 0 $program-box-padding;
+    }
+
+    &--abstract {
+        padding: 0 $program-box-padding;
+    }
+
+    &--button {
+        padding: $program-box-padding;
+        .btn {
+            color: #fff;
+            font-weight: bold;
+
+            @each $category, $color in $categories {
+                .#{$category} & {
+                    background-color: $color;
+                }
+            }
+
+            .contraste & {
+                color: #262626;
+                background-color: #fff;
+            }
+        }
+    }
+
+    &--image-wrapper {
         position: relative;
         // width: 100%;
         // width: 370px;
@@ -24,13 +74,15 @@ $time: .3s;
         overflow: hidden;
         text-align: center;
     }
-    .img-responsive {
+
+    &--image {
         -webkit-transition: all $time ease-in-out;
         -moz-transition: all $time ease-in-out;
         -o-transition: all $time ease-in-out;
         transition: all $time ease-in-out;
     }
-    &:hover .img-responsive {
+
+    &:hover .program-box--image {
         -webkit-transform: scale($scale); /* prefixo para browsers webkit */
         -moz-transform: scale($scale); /* prefixo para browsers gecko */
         -o-transform: scale($scale); /* prefixo para opera */
@@ -56,7 +56,7 @@
           </aside>
         </div>
         <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query | limitTo:vm.limitTo as results">
-          <programa-box program="program" class="col-sm-12 col-md-6"></programa-box>
+          <programa-box program="program" display="'box'" class="col-sm-12 col-md-6"></programa-box>
           <div ng-if="$odd" class="clearfix"></div>
         </div>
         <div class="animate-repeat" ng-if="results.length == 0">
@@ -20,42 +20,17 @@ $gray: #f1f1f1;
 // -------------
+//   1.4 - dicionarios
+$categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738);
+$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.");
 // -------------
-// Paleta de Cores
-// -------------
-$cinza1: #f1f1f1;
-$cinza2: #eaeaea;
-$cinza3: #dadada;
-$cinza4: #989898;
-$cinza5: #606060;
-$cinza6: #484848;
-
-
-// -------------
-// Tipografia
-// -------------
-// $open-sans-regular:
-// $open-sans-bold:
-$titulo1-size: 32pt;
-$titulo1-line-height: 36pt;
-$titulo2-size: 26pt;
-$titulo2-line-height: 30pt;
-
-$titulo3-size: 22pt;
-$titulo3-line-height: 26pt;
-
-$titulo4-size: 18pt;
-$titulo4-line-height: 22pt;
-
-$titulo5-size: 14pt;
-$titulo5-line-height: 18pt;
+body {
+    // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
-$paragraph-size: 12pt;
-$paragraph-line-height: 16pt;
-// -------------
 .skip-links a:focus {
   background-color: #fff !important;
   opacity: 1;
@@ -12,7 +12,7 @@
       <div class="navbar-left">
         <button class="btn btn-link">
           <span class="glyphicon glyphicon-refresh"></span>
-          <span>{{programa.program.categories[0].name}}</span>
+          <span class="category-name">{{programa.program.categories[0].name}}</span>
         </button>
       </div>
       <div class="navbar-right">
@@ -28,17 +28,7 @@
   </div>
   <div ng-if="programa.program">
-    <article>
-      <header class="program-banner">
-        <img class="program-banner--image" ng-src="{{programa.program.image.url}}" alt="Imagem de apresentação do progama.">
-        <div class="program-banner--strip">
-          <h1 class="program-banner--title">{{::programa.program.title}}</h1>
-          <p class="program-banner--abstract" ng-bind-html="programa.program.abstract"></p>
-        </div>
-
-      </header>
-
-    </article>
+    <programa-box program="programa.program" display="'preview'"></programa-box>
   </div>
   <div id="content" ng-bind-html="programa.program.body"></div>
 </div>
	@@ -55,6 +55,22 @@		@@ -55,6 +55,22 @@
55	return 'TODO: create image alt on server-side.';	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	ProgramaController.prototype.showContent = function () {	74	ProgramaController.prototype.showContent = function () {
59	var vm = this;	75	var vm = this;
60		76
	@@ -71,7 +87,8 @@		@@ -71,7 +87,8 @@
71	restrict: 'E',	87	restrict: 'E',
72	templateUrl: 'app/components/programa/programa.html',	88	templateUrl: 'app/components/programa/programa.html',
73	scope: {	89	scope: {
74	- program: '='	90	+ program: '=',
		91	+ display: '='
75	},	92	},
76	controller: ProgramaController,	93	controller: ProgramaController,
77	controllerAs: 'vm',	94	controllerAs: 'vm',
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>
1	// Variables	1	// Variables
		2	+$program-box-padding: 20px;
2	$scale: 1.1;	3	$scale: 1.1;
3	$time: .3s;	4	$time: .3s;
4		5
5	// sandbox	6	// sandbox
6	.program-box {	7	.program-box {
7	cursor: pointer;	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	font-size: 14px;	18	font-size: 14px;
10	font-weight: bold;	19	font-weight: bold;
11	- line-height: 30px;	20	+ text-transform: uppercase;
		21	+ line-height: 22px;
12	display: block;	22	display: block;
13	height: 30px;	23	height: 30px;
14	- margin-bottom: 0;	24	+ margin: 0;
		25	+ padding: 5px $program-box-padding;
15	color: #ffffff;	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	position: relative;	69	position: relative;
20	// width: 100%;	70	// width: 100%;
21	// width: 370px;	71	// width: 370px;
	@@ -24,13 +74,15 @@ $time: .3s;		@@ -24,13 +74,15 @@ $time: .3s;
24	overflow: hidden;	74	overflow: hidden;
25	text-align: center;	75	text-align: center;
26	}	76	}
27	- .img-responsive {	77	+
		78	+ &--image {
28	-webkit-transition: all $time ease-in-out;	79	-webkit-transition: all $time ease-in-out;
29	-moz-transition: all $time ease-in-out;	80	-moz-transition: all $time ease-in-out;
30	-o-transition: all $time ease-in-out;	81	-o-transition: all $time ease-in-out;
31	transition: all $time ease-in-out;	82	transition: all $time ease-in-out;
32	}	83	}
33	- &:hover .img-responsive {	84	+
		85	+ &:hover .program-box--image {
34	-webkit-transform: scale($scale); /* prefixo para browsers webkit */	86	-webkit-transform: scale($scale); /* prefixo para browsers webkit */
35	-moz-transform: scale($scale); /* prefixo para browsers gecko */	87	-moz-transform: scale($scale); /* prefixo para browsers gecko */
36	-o-transform: scale($scale); /* prefixo para opera */	88	-o-transform: scale($scale); /* prefixo para opera */
	@@ -56,7 +56,7 @@		@@ -56,7 +56,7 @@
56	</aside>	56	</aside>
57	</div>	57	</div>
58	<div ng-repeat="program in vm.programs \| filterByCategory:vm.categoryFilter \| filterByCriteria:vm.orderCriteria:orderReverse \| filter:vm.query \| limitTo:vm.limitTo as results">	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	<div ng-if="$odd" class="clearfix"></div>	60	<div ng-if="$odd" class="clearfix"></div>
61	</div>	61	</div>
62	<div class="animate-repeat" ng-if="results.length == 0">	62	<div class="animate-repeat" ng-if="results.length == 0">
	@@ -20,42 +20,17 @@ $gray: #f1f1f1;		@@ -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	.skip-links a:focus {	34	.skip-links a:focus {
60	background-color: #fff !important;	35	background-color: #fff !important;
61	opacity: 1;	36	opacity: 1;