From fab8ed52b2bb320c7ec7666017bc7d2a6721adc1 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@gmail.com>
Date: Tue, 18 Aug 2015 23:36:14 -0300
Subject: [PATCH] Better box image display.

---
 src/app/components/programa/programa.html |  3 ++-
 src/app/components/programa/programa.scss | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/components/programa/programa.html b/src/app/components/programa/programa.html
index 05cd79b..1eb0876 100644
--- a/src/app/components/programa/programa.html
+++ b/src/app/components/programa/programa.html
@@ -3,7 +3,8 @@
     <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()}}" />
+        <!-- <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> -->
+        <div class="program-box--image" ng-style="{'background-image':'url( {{::vm.getImageUrl()}} )'}"></div>
       </div>
       <h1 class="program-box--title">{{::vm.program.title}}</h1>
       <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
diff --git a/src/app/components/programa/programa.scss b/src/app/components/programa/programa.scss
index e0c4c98..a3f7330 100644
--- a/src/app/components/programa/programa.scss
+++ b/src/app/components/programa/programa.scss
@@ -2,6 +2,7 @@
 $program-box-space: 20px;
 $scale: 1.1;
 $time: .3s;
+$darken: 15%;
 
 // sandbox
 .program-box {
@@ -52,10 +53,16 @@ $time: .3s;
         .btn {
             color: #fff;
             font-weight: bold;
+            padding: 15px 0;
+            border-left: 0;
+            border-right: 0;
+            border-top: 0;
+            border-radius: 6px;
 
             @each $category, $color in $categories {
                 .#{$category} & {
                     background-color: $color;
+                    border-bottom: 3px solid darken($color, $darken);
                 }
             }
 
@@ -73,11 +80,16 @@ $time: .3s;
         // height: 170px;
 
         overflow: hidden;
-        text-align: center;
+        // text-align: center;
         min-height: 170px;
     }
 
     &--image {
+        min-height: 170px;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+
         -webkit-transition: all $time ease-in-out;
         -moz-transition: all $time ease-in-out;
         -o-transition: all $time ease-in-out;
--
libgit2 0.21.2