Small improvements at program-box

Leonardo Merlin
1 parent 55adca88
Showing 5 changed files with 74 additions and 39 deletions Show diff stats
src/app/components/programa/programa.html
src/app/components/programa/programa.scss
src/app/partials/article/article.service.js
src/app/partials/programas/programa.html
src/app/partials/programas/programas.scss
@@ -6,7 +6,9 @@
         <!-- <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--title">
+        <h1>{{::vm.program.title}}</h1>
+      </div>
       <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
       <div class="program-box--button">
         <button class="btn btn-block">
 // Variables
 $program-box-space: 20px;
 $scale: 1.1;
-$time: .3s;
+$time: .2s;
 $darken: 15%;
 // sandbox
@@ -10,6 +10,8 @@ $darken: 15%;
     background-color: #fff;
     margin-top: $program-box-space;
     margin-bottom: $program-box-space;
+    border-radius: 3px;
+    overflow: hidden;
     .contraste & {
         color: #fff;
@@ -39,10 +41,16 @@ $darken: 15%;
     }
     &--title {
-        font-size: 18px;
-        font-weight: bold;
+
         padding: 0 $program-box-space;
         margin: 0 0 10px 0;
+        h1 {
+            font-size: 18px;
+            font-weight: bold;
+            height: 60px;
+            display: table-cell;
+            vertical-align: middle;
+        }
     }
     &--abstract {
@@ -60,6 +68,11 @@ $darken: 15%;
             border-top: 0;
             border-radius: 6px;
+            -webkit-transition: all $time ease-in-out;
+            -moz-transition: all $time ease-in-out;
+            -o-transition: all $time ease-in-out;
+            transition: all $time ease-in-out;
+
             @each $category, $color in $categories {
                 .#{$category} & {
                     background-color: $color;
@@ -67,6 +80,15 @@ $darken: 15%;
                 }
             }
+            &:hover,
+            &:focus {
+                @each $category, $color in $categories {
+                    .#{$category} & {
+                        background-color: darken($color, $darken);
+                    }
+                }
+            }
+
             .contraste & {
                 color: #262626;
                 background-color: #fff;
@@ -97,10 +119,15 @@ $darken: 15%;
         transition: all $time ease-in-out;
     }
-    &:hover .program-box--image {
-        -webkit-transform: scale($scale); /* prefixo para browsers webkit */
-        -moz-transform: scale($scale); /* prefixo para browsers gecko */
-        -o-transform: scale($scale); /* prefixo para opera */
-        transform: scale($scale);
+    &:hover {
+        background-color: #d9d9d9;
+
+        .program-box--image {
+            -webkit-transform: scale($scale); /* prefixo para browsers webkit */
+            -moz-transform: scale($scale); /* prefixo para browsers gecko */
+            -o-transform: scale($scale); /* prefixo para opera */
+            transform: scale($scale);
+        }
     }
+
 }
@@ -88,16 +88,16 @@
       var darkFactor = 0.15;
       return function (data) {
-        if(data.categories){
-          var categories = data.categories;
-
-          for (var i = categories.length - 1; i >= 0; i--) {
-            var category = categories[i];
-            if(category.color && !category.bgColor){
-              category.colorDarker = window.ColorLuminance(category.color, 0.15);
-            }
-          };
-        }
+        // if(data.article.categories){
+        //   var categories = data.article.categories;
+
+        //   for (var i = categories.length - 1; i >= 0; i--) {
+        //     var category = categories[i];
+        //     if(category.color && !category.bgColor){
+        //       category.colorDarker = $window.ColorLuminance(category.color, 0.15);
+        //     }
+        //   };
+        // }
         cbSuccess(data);
       };
     }
 <div class="container">
-  <div class="article-bar" ng-class="programa.program.categories[0].slug">
-    <div class="navbar">
-      <div class="navbar-header">
-        <button class="article-bar--item btn btn-link" ng-click="programa.goBack()">
-          <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
-          <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
-          Voltar
-        </button>
-      </div>
-      <div class="navbar-left">
-        <button class="article-bar--item btn btn-link">
-          <span class="glyphicon glyphicon-refresh"></span>
-          <span class="category-name">{{::programa.program.categories[0].name}}</span>
-        </button>
-      </div>
-      <div class="navbar-right">
-        <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="article-bar--item form-control">
-          <option value="">-- Selectione um Tema --</option>
-        </select>
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="article-bar" ng-class="programa.program.categories[0].slug">
+        <div class="navbar">
+          <div class="navbar-header">
+            <button class="article-bar--item btn btn-link" ng-click="programa.goBack()">
+              <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
+              <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
+              Voltar
+            </button>
+          </div>
+          <div class="navbar-left">
+            <button class="article-bar--item btn btn-link">
+              <span class="glyphicon glyphicon-refresh"></span>
+              <span class="category-name">{{::programa.program.categories[0].name}}</span>
+            </button>
+          </div>
+          <div class="navbar-right">
+            <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="article-bar--item form-control">
+              <option value="">-- Selectione um Tema --</option>
+            </select>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -9,7 +9,9 @@
         margin: 8px 0;
     }
-
+    .navbar-right {
+        margin-right: 15px;
+    }
     @each $category, $color in $categories {
         &.#{$category} {