closes #24 - transforma o jumbotron em uma diretiva

iloveblogs · Mar 6, 2016 · 42d628a · 42d628a
1 parent b151cb3
commit 42d628a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 14 deletions.
diff --git a/src/js/components/jumbotron/directives/jumbotron.directive.js 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
@@ -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
@@ -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>
diff --git 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
@@ -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