From 42d628afea6ee56d4b7f3cae1304da4a49385e44 Mon Sep 17 00:00:00 2001
From: teles <josetelesmaciel@gmail.com>
Date: Sun, 6 Mar 2016 10:47:34 -0300
Subject: [PATCH] closes #24 - transforma o jumbotron em uma diretiva

---
 .../jumbotron/directives/jumbotron.directive.js  | 16 ++++++++++++++++
 src/js/components/jumbotron/jumbotron.module.js  |  6 ++++++
 .../jumbotron/templates/jumbotron.template.html  | 13 +++++++++++++
 .../views/home/templates/home-list.template.html | 15 +--------------
 src/styl/module/input-box.styl                   |  4 ++++
 5 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 src/js/components/jumbotron/directives/jumbotron.directive.js
 create mode 100644 src/js/components/jumbotron/jumbotron.module.js
 create mode 100644 src/js/components/jumbotron/templates/jumbotron.template.html

diff --git a/src/js/components/jumbotron/directives/jumbotron.directive.js b/src/js/components/jumbotron/directives/jumbotron.directive.js
new file mode 100644
index 0000000..9da6ddf
--- /dev/null
+++ b/src/js/components/jumbotron/directives/jumbotron.directive.js
@@ -0,0 +1,16 @@
+(function(){
+    'use strict';
+
+    angular.module('guest-post.jumbotron').directive('jumbotron', jumbotronDirective);
+
+    function jumbotronDirective(){
+        var directive = {
+            restrict: 'E',
+            templateUrl: '/js/components/jumbotron/templates/jumbotron.template.html',
+            scope: {},
+            replace: true
+        };
+        return directive;
+    }
+
+})();
diff --git a/src/js/components/jumbotron/jumbotron.module.js b/src/js/components/jumbotron/jumbotron.module.js
new file mode 100644
index 0000000..615b186
--- /dev/null
+++ b/src/js/components/jumbotron/jumbotron.module.js
@@ -0,0 +1,6 @@
+(function(){
+    'use strict';
+
+    angular.module('guest-post.jumbotron', []);
+    GUEST.angularDependencies.push('guest-post.jumbotron');
+})();
diff --git a/src/js/components/jumbotron/templates/jumbotron.template.html b/src/js/components/jumbotron/templates/jumbotron.template.html
new file mode 100644
index 0000000..63b5312
--- /dev/null
+++ b/src/js/components/jumbotron/templates/jumbotron.template.html
@@ -0,0 +1,13 @@
+<header class="jumbotron">
+    <div class="jumbotron__content">
+        <h1 class="jumbotron__title">Blogs que aceitam guest post</h1>
+        <h2 class='jumbotron__subtitle'>
+            Mais de 150 blogs sobre assuntos variados que aceitam posts de convidados.
+        </h2>
+        <a href="/sobre" class="jumbotron__main-link">Conheça nossa proposta.</a></h2>
+        <span class="input-box input-box--is-extra-large">
+            <input type="text" placeholder="Encontre um blog" class='input-box__input'>
+            <i class="fa fa-search input-box__icon"></i>
+        </span>
+    </div>
+</header>
\ No newline at end of file
diff --git a/src/js/views/home/templates/home-list.template.html b/src/js/views/home/templates/home-list.template.html
index 4635199..e506605 100644
--- a/src/js/views/home/templates/home-list.template.html
+++ b/src/js/views/home/templates/home-list.template.html
@@ -1,18 +1,5 @@
 <div>
-    <header class="jumbotron">
-        <div class="jumbotron__content">
-            <h1 class="jumbotron__title">Blogs que aceitam guest post</h1>
-            <h2 class='jumbotron__subtitle'>
-                Mais de 150 blogs sobre assuntos variados que aceitam posts de convidados.
-            </h2>
-            <a href="/sobre" class="jumbotron__main-link">Conheça nossa proposta.</a></h2>
-            <span class="input-box input-box--is-extra-large">
-                <input type="text" placeholder="Encontre um blog" class='input-box__input'>
-                <i class="fa fa-search input-box__icon"></i>
-            </span>
-        </div>
-    </header>
-
+    <jumbotron></jumbotron>
     <img src="images/animat-essential/search/animat-search-color.gif" ng-if='vc.isLoadingPromise'>
     <div class="blog-box-flex-list">
         <blog-box blog='blog.json' ng-repeat='blog in vc.blogs' class="blog-box-flex-item"></blog-box>
diff --git a/src/styl/module/input-box.styl b/src/styl/module/input-box.styl
index 6bb8b9a..7caeee5 100644
--- a/src/styl/module/input-box.styl
+++ b/src/styl/module/input-box.styl
@@ -22,6 +22,10 @@
             color: #d8d8d8
             font-size: 13px
 
+        &:active,
+        &:focus
+            box-shadow: 0 0 3px rgb(28, 131, 176)
+
     &__icon
         color: #ff5858
         cursor: pointer