Download as
Browse Code »

Commit 0606c9a0d2ac9a92c8c39b650a389ad9752a6727

Authored by Leonardo Merlin
1 parent 538151d7
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 CSSComb and make some improv at directives

Showing 8 changed files with 133 additions and 60 deletions   Show diff stats
.csscomb.json 0 → 100644
  Diff comments   View file @0606c9a
@@ -0,0 +1,18 @@ @@ -0,0 +1,18 @@
  1 +{
  2 + "always-semicolon": true,
  3 + "block-indent": 4,
  4 + "color-case": "lower",
  5 + "color-shorthand": false,
  6 + "element-case": "lower",
  7 + "eof-newline": true,
  8 + "exclude": ["node_modules/**", "bower_components/**"],
  9 + "leading-zero": false,
  10 + "space-after-combinator": 1,
  11 + "space-between-declarations": "\n",
  12 + "space-after-opening-brace": "\n",
  13 + "space-after-selector-delimiter": "\n",
  14 + "space-before-closing-brace": "\n",
  15 + "space-before-colon": "",
  16 + "space-before-combinator": 1,
  17 + "space-before-opening-brace": 1
  18 +}
@@ -11,3 +11,6 @@ insert_final_newline = true @@ -11,3 +11,6 @@ insert_final_newline = true
11 11
12 [*.md] 12 [*.md]
13 trim_trailing_whitespace = false 13 trim_trailing_whitespace = false
  14 +
  15 +[*.{sass,scss}]
  16 +indent_size = 4
src/app/components/programa/programa.directive.js
  Diff comments   View file @0606c9a
@@ -29,9 +29,11 @@ @@ -29,9 +29,11 @@
29 }; 29 };
30 30
31 ProgramaController.prototype.getCategoryName = function () { 31 ProgramaController.prototype.getCategoryName = function () {
32 - var vm = this; 32 + return this.getCategory().name;
  33 + };
33 34
34 - return vm.getCategory().name; 35 + ProgramaController.prototype.getCategorySlug = function () {
  36 + return this.getCategory().slug;
35 }; 37 };
36 38
37 ProgramaController.prototype.getImageUrl = function () { 39 ProgramaController.prototype.getImageUrl = function () {
src/app/components/programa/programa.html
  Diff comments   View file @0606c9a
1 -<div class="program-box" ng-if="vm.program" ng-click="vm.showContent()">  
2 - <div class="category">{{::vm.getCategoryName()}}</div> 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"> 3 <div class="image-wrapper">
4 - <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> 4 + <img class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
5 </div> 5 </div>
6 - <div class="program-title">{{::vm.program.title}}</div> 6 + <h1 class="program-title">{{::vm.program.title}}</h1>
7 <div class="program-abstract" ng-bind-html="vm.program.abstract"></div> 7 <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
8 -</div> 8 +</article>
src/app/components/programa/programa.scss
  Diff comments   View file @0606c9a
1 // Variables 1 // Variables
2 $scale: 1.1; 2 $scale: 1.1;
3 -$time: 0.3s; 3 +$time: .3s;
4 4
5 // sandbox 5 // sandbox
6 .program-box { 6 .program-box {
7 - cursor: pointer; 7 + cursor: pointer;
  8 + .category-name {
  9 + font-size: 14px;
  10 + font-weight: bold;
  11 + line-height: 30px;
  12 + display: block;
  13 + height: 30px;
  14 + margin-bottom: 0;
  15 + color: #ffffff;
  16 + background-color: #000000;
  17 + }
  18 + .image-wrapper {
  19 + position: relative;
  20 + // width: 100%;
  21 + // width: 370px;
  22 + // height: 170px;
8 23
9 - .category {  
10 - display: block;  
11 - height: 30px;  
12 - line-height: 30px;  
13 - }  
14 -  
15 - .image-wrapper {  
16 - position: relative;  
17 - // width: 100%;  
18 - // width: 370px;  
19 - // height: 170px;  
20 - overflow: hidden;  
21 - text-align: center;  
22 - }  
23 -  
24 - .img-responsive {  
25 - -webkit-transition: all $time ease-in-out;  
26 - -moz-transition: all $time ease-in-out;  
27 - -o-transition: all $time ease-in-out;  
28 - transition: all $time ease-in-out;  
29 - }  
30 -  
31 - &:hover .img-responsive {  
32 - -webkit-transform: scale($scale); /* prefixo para browsers webkit */  
33 - -moz-transform: scale($scale); /* prefixo para browsers gecko */  
34 - -o-transform: scale($scale); /* prefixo para opera */  
35 - transform: scale($scale);  
36 - } 24 + overflow: hidden;
  25 + text-align: center;
  26 + }
  27 + .img-responsive {
  28 + -webkit-transition: all $time ease-in-out;
  29 + -moz-transition: all $time ease-in-out;
  30 + -o-transition: all $time ease-in-out;
  31 + transition: all $time ease-in-out;
  32 + }
  33 + &:hover .img-responsive {
  34 + -webkit-transform: scale($scale); /* prefixo para browsers webkit */
  35 + -moz-transform: scale($scale); /* prefixo para browsers gecko */
  36 + -o-transform: scale($scale); /* prefixo para opera */
  37 + transform: scale($scale);
  38 + }
37 } 39 }
src/app/components/programas/programas.directive.js
  Diff comments   View file @0606c9a
@@ -37,18 +37,19 @@ @@ -37,18 +37,19 @@
37 vm.categories = vm.article.categories; 37 vm.categories = vm.article.categories;
38 vm.programs = vm.article.children; 38 vm.programs = vm.article.children;
39 vm.filtredProgramList = []; 39 vm.filtredProgramList = [];
40 -  
41 - vm.search = vm.$location.search();  
42 - vm.query = vm.search ? vm.search.filtro : null;  
43 - vm.limitTo = vm.search ? vm.search.limite : 4;  
44 - vm.categoryFilter = vm.search ? vm.filterByCategorySlug(vm.search.tema) : null;  
45 - vm.categoryOptions = null;  
46 vm.orderCriteries = [ 40 vm.orderCriteries = [
47 { label: 'Título', name: 'title' }, 41 { label: 'Título', name: 'title' },
48 - { label: 'Tema', name: 'category' },  
49 - { label: 'Mais participações', name: 'more_participants' } 42 + { label: 'Tema', name: 'category' }
  43 + // , { label: 'Mais participações', name: 'more_participants' }
50 ]; 44 ];
51 45
  46 + vm.search = vm.$location.search();
  47 +
  48 + // Add initial values for the filter
  49 + vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
  50 + vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : 4;
  51 + vm.categoryFilter = (vm.search && vm.search.tema) ? vm.filterByCategorySlug(vm.search.tema) : null;
  52 +
52 // update window location params 53 // update window location params
53 vm.$scope.$watch('vm.query', function(newValue, oldValue){ 54 vm.$scope.$watch('vm.query', function(newValue, oldValue){
54 vm.search.filtro = newValue; 55 vm.search.filtro = newValue;
@@ -67,6 +68,14 @@ @@ -67,6 +68,14 @@
67 68
68 }; 69 };
69 70
  71 + ProgramaListController.prototype.resetFilterValues = function () {
  72 + var vm = this;
  73 +
  74 + vm.query = null;
  75 + vm.limitTo = 4;
  76 + vm.categoryFilter = null;
  77 + };
  78 +
70 ProgramaListController.prototype.getIconClasses = function (category) { 79 ProgramaListController.prototype.getIconClasses = function (category) {
71 var vm = this; 80 var vm = this;
72 81
@@ -86,10 +95,13 @@ @@ -86,10 +95,13 @@
86 return result; 95 return result;
87 } 96 }
88 97
89 - ProgramaListController.prototype.filterByCategory = function (category) { 98 + ProgramaListController.prototype.filterByCategory = function (category, $event) {
90 var vm = this; 99 var vm = this;
91 100
  101 + $event.stopPropagation();
  102 +
92 if(category !== vm.categoryFilter){ 103 if(category !== vm.categoryFilter){
  104 +
93 // selected new filter 105 // selected new filter
94 vm.categoryFilter = category; 106 vm.categoryFilter = category;
95 }else{ 107 }else{
@@ -98,12 +110,12 @@ @@ -98,12 +110,12 @@
98 } 110 }
99 }; 111 };
100 112
101 - ProgramaListController.prototype.showAll = function () { 113 + ProgramaListController.prototype.showAll = function ($event) {
102 var vm = this; 114 var vm = this;
103 115
104 - vm.query = null;  
105 - vm.categoryFilter = null;  
106 - vm.$log.debug('[TODO] showAll, no filter? ', vm.categoryFilter); 116 + $event.stopPropagation();
  117 +
  118 + vm.resetFilterValues();
107 }; 119 };
108 120
109 // function ProgramaListLinker (scope, element, attrs) { 121 // function ProgramaListLinker (scope, element, attrs) {
src/app/components/programas/programas.html
  Diff comments   View file @0606c9a
1 <div class="row"> 1 <div class="row">
2 <div class="col-sm-3"> 2 <div class="col-sm-3">
3 <div class="category-list"> 3 <div class="category-list">
4 - <aside class="navigation"> 4 + <nav class="navigation">
5 <h3 class="title"><b>Programas</b> por Tema</h3> 5 <h3 class="title"><b>Programas</b> por Tema</h3>
6 <div class="list-group category-list"> 6 <div class="list-group category-list">
7 <button type="button" class="list-group-item category-item" 7 <button type="button" class="list-group-item category-item"
8 ng-repeat="category in vm.categories" 8 ng-repeat="category in vm.categories"
9 ng-class="{active: vm.categoryFilter.slug === category.slug}" 9 ng-class="{active: vm.categoryFilter.slug === category.slug}"
10 - ng-click="vm.filterByCategory(category)"> 10 + ng-click="vm.filterByCategory(category, $event)">
11 11
12 <span ng-class="[category.iconClass]"></span> 12 <span ng-class="[category.iconClass]"></span>
13 <span>{{::category.name}}</span> 13 <span>{{::category.name}}</span>
@@ -15,21 +15,21 @@ @@ -15,21 +15,21 @@
15 15
16 </button> 16 </button>
17 </div> 17 </div>
18 - </aside> 18 + </nav>
19 </div> 19 </div>
20 </div> 20 </div>
21 21
22 <div class="col-sm-9"> 22 <div class="col-sm-9">
23 - <div class="program-list">  
24 - <div class="header"> 23 + <article class="program-list">
  24 + <header class="header">
25 <h2>Programas</h2> 25 <h2>Programas</h2>
26 - <button type="button" class="btn btn-link" ng-click="vm.showAll()"> 26 + <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas 27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
28 </button> 28 </button>
29 - </div> 29 + </header>
30 <div> 30 <div>
31 <div class="col-sm-12"> 31 <div class="col-sm-12">
32 - <div class="form-inline"> 32 + <aside class="form-inline">
33 <div class="form-group"> 33 <div class="form-group">
34 <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label> 34 <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
35 <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" > 35 <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 <label for="programListLimit" class="control-label">Limite</label> 53 <label for="programListLimit" class="control-label">Limite</label>
54 54
55 </div> 55 </div>
56 - </div> 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" class="col-sm-12 col-md-6"></programa-box>
@@ -63,6 +63,6 @@ @@ -63,6 +63,6 @@
63 Nenhum programa encontrado. 63 Nenhum programa encontrado.
64 </div> 64 </div>
65 </div> 65 </div>
66 - </div> 66 + </article>
67 </div> 67 </div>
68 </div> 68 </div>
src/app/index.scss
  Diff comments   View file @0606c9a
@@ -20,6 +20,42 @@ $gray: #f1f1f1; @@ -20,6 +20,42 @@ $gray: #f1f1f1;
20 20
21 // ------------- 21 // -------------
22 22
  23 +
  24 +// -------------
  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 +
  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;
  54 +
  55 +$paragraph-size: 12pt;
  56 +$paragraph-line-height: 16pt;
  57 +
  58 +// -------------
23 .skip-links a:focus { 59 .skip-links a:focus {
24 background-color: #fff !important; 60 background-color: #fff !important;
25 opacity: 1; 61 opacity: 1;