Download as
Browse Code »

Commit fab8ed52b2bb320c7ec7666017bc7d2a6721adc1

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

Better box image display.

Showing 2 changed files with 15 additions and 2 deletions   Show diff stats
src/app/components/programa/programa.html
  Diff comments   View file @fab8ed5
... ... @@ -3,7 +3,8 @@
3 3 <div class="program-box {{::vm.getCategorySlug()}}">
4 4 <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
5 5 <div class="program-box--image-wrapper">
6   - <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
  6 + <!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
  7 + <div class="program-box--image" ng-style="{'background-image':'url( {{::vm.getImageUrl()}} )'}"></div>
7 8 </div>
8 9 <h1 class="program-box--title">{{::vm.program.title}}</h1>
9 10 <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
... ...
src/app/components/programa/programa.scss
  Diff comments   View file @fab8ed5
... ... @@ -2,6 +2,7 @@
2 2 $program-box-space: 20px;
3 3 $scale: 1.1;
4 4 $time: .3s;
  5 +$darken: 15%;
5 6  
6 7 // sandbox
7 8 .program-box {
... ... @@ -52,10 +53,16 @@ $time: .3s;
52 53 .btn {
53 54 color: #fff;
54 55 font-weight: bold;
  56 + padding: 15px 0;
  57 + border-left: 0;
  58 + border-right: 0;
  59 + border-top: 0;
  60 + border-radius: 6px;
55 61  
56 62 @each $category, $color in $categories {
57 63 .#{$category} & {
58 64 background-color: $color;
  65 + border-bottom: 3px solid darken($color, $darken);
59 66 }
60 67 }
61 68  
... ... @@ -73,11 +80,16 @@ $time: .3s;
73 80 // height: 170px;
74 81  
75 82 overflow: hidden;
76   - text-align: center;
  83 + // text-align: center;
77 84 min-height: 170px;
78 85 }
79 86  
80 87 &--image {
  88 + min-height: 170px;
  89 + background-position: center;
  90 + background-size: cover;
  91 + background-repeat: no-repeat;
  92 +
81 93 -webkit-transition: all $time ease-in-out;
82 94 -moz-transition: all $time ease-in-out;
83 95 -o-transition: all $time ease-in-out;
... ...