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 @@
  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 +}
... ...
.editorconfig
  Diff comments   View file @0606c9a
... ... @@ -11,3 +11,6 @@ insert_final_newline = true
11 11  
12 12 [*.md]
13 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 29 };
30 30  
31 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 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 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 5 </div>
6   - <div class="program-title">{{::vm.program.title}}</div>
  6 + <h1 class="program-title">{{::vm.program.title}}</h1>
7 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 1 // Variables
2 2 $scale: 1.1;
3   -$time: 0.3s;
  3 +$time: .3s;
4 4  
5 5 // sandbox
6 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 37 vm.categories = vm.article.categories;
38 38 vm.programs = vm.article.children;
39 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 40 vm.orderCriteries = [
47 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 53 // update window location params
53 54 vm.$scope.$watch('vm.query', function(newValue, oldValue){
54 55 vm.search.filtro = newValue;
... ... @@ -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 79 ProgramaListController.prototype.getIconClasses = function (category) {
71 80 var vm = this;
72 81  
... ... @@ -86,10 +95,13 @@
86 95 return result;
87 96 }
88 97  
89   - ProgramaListController.prototype.filterByCategory = function (category) {
  98 + ProgramaListController.prototype.filterByCategory = function (category, $event) {
90 99 var vm = this;
91 100  
  101 + $event.stopPropagation();
  102 +
92 103 if(category !== vm.categoryFilter){
  104 +
93 105 // selected new filter
94 106 vm.categoryFilter = category;
95 107 }else{
... ... @@ -98,12 +110,12 @@
98 110 }
99 111 };
100 112  
101   - ProgramaListController.prototype.showAll = function () {
  113 + ProgramaListController.prototype.showAll = function ($event) {
102 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 121 // function ProgramaListLinker (scope, element, attrs) {
... ...
src/app/components/programas/programas.html
  Diff comments   View file @0606c9a
1 1 <div class="row">
2 2 <div class="col-sm-3">
3 3 <div class="category-list">
4   - <aside class="navigation">
  4 + <nav class="navigation">
5 5 <h3 class="title"><b>Programas</b> por Tema</h3>
6 6 <div class="list-group category-list">
7 7 <button type="button" class="list-group-item category-item"
8 8 ng-repeat="category in vm.categories"
9 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 12 <span ng-class="[category.iconClass]"></span>
13 13 <span>{{::category.name}}</span>
... ... @@ -15,21 +15,21 @@
15 15  
16 16 </button>
17 17 </div>
18   - </aside>
  18 + </nav>
19 19 </div>
20 20 </div>
21 21  
22 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 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 27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
28 28 </button>
29   - </div>
  29 + </header>
30 30 <div>
31 31 <div class="col-sm-12">
32   - <div class="form-inline">
  32 + <aside class="form-inline">
33 33 <div class="form-group">
34 34 <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
35 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 53 <label for="programListLimit" class="control-label">Limite</label>
54 54  
55 55 </div>
56   - </div>
  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 59 <programa-box program="program" class="col-sm-12 col-md-6"></programa-box>
... ... @@ -63,6 +63,6 @@
63 63 Nenhum programa encontrado.
64 64 </div>
65 65 </div>
66   - </div>
  66 + </article>
67 67 </div>
68 68 </div>
... ...
src/app/index.scss
  Diff comments   View file @0606c9a
... ... @@ -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 59 .skip-links a:focus {
24 60 background-color: #fff !important;
25 61 opacity: 1;
... ...