Download as
Browse Code »

Commit d833a19e4abe3f6e2bde873dfe91eaaa5bc7741b

Authored by Leonardo Merlin
1 parent 55adca88
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

Small improvements at program-box

Showing 5 changed files with 74 additions and 39 deletions   Show diff stats
src/app/components/programa/programa.html
  Diff comments   View file @d833a19
... ... @@ -6,7 +6,9 @@
6 6 <!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
7 7 <div class="program-box--image" ng-style="{'background-image':'url( {{::vm.getImageUrl()}} )'}"></div>
8 8 </div>
9   - <h1 class="program-box--title">{{::vm.program.title}}</h1>
  9 + <div class="program-box--title">
  10 + <h1>{{::vm.program.title}}</h1>
  11 + </div>
10 12 <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
11 13 <div class="program-box--button">
12 14 <button class="btn btn-block">
... ...
src/app/components/programa/programa.scss
  Diff comments   View file @d833a19
1 1 // Variables
2 2 $program-box-space: 20px;
3 3 $scale: 1.1;
4   -$time: .3s;
  4 +$time: .2s;
5 5 $darken: 15%;
6 6  
7 7 // sandbox
... ... @@ -10,6 +10,8 @@ $darken: 15%;
10 10 background-color: #fff;
11 11 margin-top: $program-box-space;
12 12 margin-bottom: $program-box-space;
  13 + border-radius: 3px;
  14 + overflow: hidden;
13 15  
14 16 .contraste & {
15 17 color: #fff;
... ... @@ -39,10 +41,16 @@ $darken: 15%;
39 41 }
40 42  
41 43 &--title {
42   - font-size: 18px;
43   - font-weight: bold;
  44 +
44 45 padding: 0 $program-box-space;
45 46 margin: 0 0 10px 0;
  47 + h1 {
  48 + font-size: 18px;
  49 + font-weight: bold;
  50 + height: 60px;
  51 + display: table-cell;
  52 + vertical-align: middle;
  53 + }
46 54 }
47 55  
48 56 &--abstract {
... ... @@ -60,6 +68,11 @@ $darken: 15%;
60 68 border-top: 0;
61 69 border-radius: 6px;
62 70  
  71 + -webkit-transition: all $time ease-in-out;
  72 + -moz-transition: all $time ease-in-out;
  73 + -o-transition: all $time ease-in-out;
  74 + transition: all $time ease-in-out;
  75 +
63 76 @each $category, $color in $categories {
64 77 .#{$category} & {
65 78 background-color: $color;
... ... @@ -67,6 +80,15 @@ $darken: 15%;
67 80 }
68 81 }
69 82  
  83 + &:hover,
  84 + &:focus {
  85 + @each $category, $color in $categories {
  86 + .#{$category} & {
  87 + background-color: darken($color, $darken);
  88 + }
  89 + }
  90 + }
  91 +
70 92 .contraste & {
71 93 color: #262626;
72 94 background-color: #fff;
... ... @@ -97,10 +119,15 @@ $darken: 15%;
97 119 transition: all $time ease-in-out;
98 120 }
99 121  
100   - &:hover .program-box--image {
101   - -webkit-transform: scale($scale); /* prefixo para browsers webkit */
102   - -moz-transform: scale($scale); /* prefixo para browsers gecko */
103   - -o-transform: scale($scale); /* prefixo para opera */
104   - transform: scale($scale);
  122 + &:hover {
  123 + background-color: #d9d9d9;
  124 +
  125 + .program-box--image {
  126 + -webkit-transform: scale($scale); /* prefixo para browsers webkit */
  127 + -moz-transform: scale($scale); /* prefixo para browsers gecko */
  128 + -o-transform: scale($scale); /* prefixo para opera */
  129 + transform: scale($scale);
  130 + }
105 131 }
  132 +
106 133 }
... ...
src/app/partials/article/article.service.js
  Diff comments   View file @d833a19
... ... @@ -88,16 +88,16 @@
88 88 var darkFactor = 0.15;
89 89  
90 90 return function (data) {
91   - if(data.categories){
92   - var categories = data.categories;
93   -
94   - for (var i = categories.length - 1; i >= 0; i--) {
95   - var category = categories[i];
96   - if(category.color && !category.bgColor){
97   - category.colorDarker = window.ColorLuminance(category.color, 0.15);
98   - }
99   - };
100   - }
  91 + // if(data.article.categories){
  92 + // var categories = data.article.categories;
  93 +
  94 + // for (var i = categories.length - 1; i >= 0; i--) {
  95 + // var category = categories[i];
  96 + // if(category.color && !category.bgColor){
  97 + // category.colorDarker = $window.ColorLuminance(category.color, 0.15);
  98 + // }
  99 + // };
  100 + // }
101 101 cbSuccess(data);
102 102 };
103 103 }
... ...
src/app/partials/programas/programa.html
  Diff comments   View file @d833a19
1 1 <div class="container">
2 2  
3   - <div class="article-bar" ng-class="programa.program.categories[0].slug">
4   - <div class="navbar">
5   - <div class="navbar-header">
6   - <button class="article-bar--item btn btn-link" ng-click="programa.goBack()">
7   - <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
8   - <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
9   - Voltar
10   - </button>
11   - </div>
12   - <div class="navbar-left">
13   - <button class="article-bar--item btn btn-link">
14   - <span class="glyphicon glyphicon-refresh"></span>
15   - <span class="category-name">{{::programa.program.categories[0].name}}</span>
16   - </button>
17   - </div>
18   - <div class="navbar-right">
19   - <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="article-bar--item form-control">
20   - <option value="">-- Selectione um Tema --</option>
21   - </select>
  3 + <div class="row">
  4 + <div class="col-xs-12">
  5 + <div class="article-bar" ng-class="programa.program.categories[0].slug">
  6 + <div class="navbar">
  7 + <div class="navbar-header">
  8 + <button class="article-bar--item btn btn-link" ng-click="programa.goBack()">
  9 + <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
  10 + <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
  11 + Voltar
  12 + </button>
  13 + </div>
  14 + <div class="navbar-left">
  15 + <button class="article-bar--item btn btn-link">
  16 + <span class="glyphicon glyphicon-refresh"></span>
  17 + <span class="category-name">{{::programa.program.categories[0].name}}</span>
  18 + </button>
  19 + </div>
  20 + <div class="navbar-right">
  21 + <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="article-bar--item form-control">
  22 + <option value="">-- Selectione um Tema --</option>
  23 + </select>
  24 + </div>
  25 + </div>
22 26 </div>
23 27 </div>
24 28 </div>
... ...
src/app/partials/programas/programas.scss
  Diff comments   View file @d833a19
... ... @@ -9,7 +9,9 @@
9 9 margin: 8px 0;
10 10 }
11 11  
12   -
  12 + .navbar-right {
  13 + margin-right: 15px;
  14 + }
13 15  
14 16 @each $category, $color in $categories {
15 17 &.#{$category} {
... ...