From b12e2aaaa6032bc30d86927d9960b9174c7ecaa8 Mon Sep 17 00:00:00 2001
From: Caio SBA <caiosba@gmail.com>
Date: Fri, 17 Apr 2015 22:56:05 -0300
Subject: [PATCH] Proposal header

---
 images/arrow.png           | Bin 0 -> 729 bytes
 images/white-alpha.png     | Bin 0 -> 178 bytes
 index.html                 | 16 ++++++++++------
 js/handlebars-helpers.js   |  4 ++++
 sass/_proposal_detail.scss | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 5 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 images/arrow.png
 create mode 100644 images/white-alpha.png

diff --git a/images/arrow.png b/images/arrow.png
new file mode 100644
index 0000000..640937d
Binary files /dev/null and b/images/arrow.png differ
diff --git a/images/white-alpha.png b/images/white-alpha.png
new file mode 100644
index 0000000..7c500be
Binary files /dev/null and b/images/white-alpha.png differ
diff --git a/index.html b/index.html
index b7fa577..7556283 100644
--- a/index.html
+++ b/index.html
@@ -72,13 +72,17 @@
                 </li>
               {{/each}}
             </ul>
-            <div class='abstract'>
-              <img src="{{../host}}{{image.url}}"/>
+            
+            <div class='proposal-header'>
+              <div class='abstract'>
+                <img src="{{../host}}{{image.url}}"/>
+              </div>
+              <div class='title'>{{title}}</div>
+              <div class='abstract'>{{{abstract}}}</div>
+              <div class='show_body'><a href='#'>Conheça o Programa<span></span></a></div>
             </div>
-            <div class='title'>{{title}}</div>
-            <div class='abstract'>{{{abstract}}}</div>
-            <div class='show_body'><a href='#'>Conheça o Programa</a></div>
-            <div class='body hide'>{{body}}</div>
+
+            <div class='body hide'>{{replace body '<[^>]+>' ''}}</div>
             <div class='make-proposal-container'>
               <div class='make-proposal'>
                 <div class='container-title'>Faça Uma Proposta</div>
diff --git a/js/handlebars-helpers.js b/js/handlebars-helpers.js
index 9932b48..574b0e9 100644
--- a/js/handlebars-helpers.js
+++ b/js/handlebars-helpers.js
@@ -42,3 +42,7 @@ Handlebars.registerHelper('proposal_detail', function(proposals, options) {
   }
   return ret;
 });
+
+Handlebars.registerHelper('replace', function(string, to_replace, replacement) {
+  return (string || '').replace(new RegExp(to_replace, 'g'), replacement);
+});
diff --git a/sass/_proposal_detail.scss b/sass/_proposal_detail.scss
index c70414c..f81a6e1 100644
--- a/sass/_proposal_detail.scss
+++ b/sass/_proposal_detail.scss
@@ -11,7 +11,7 @@
       text-transform: uppercase;
       padding: 15px 35px;
       margin: 0;
-      width: 20%;
+      width: 30%;
       display: inline-block;
       span {
         padding-left: 40px;
@@ -28,26 +28,88 @@
   .categories {
     select {
       height: 57px;
-      width: 70%;
+      width: 60%;
       margin: 0;
       text-transform: uppercase;
       border: 0;
       background: #EEEFF1;
       float: right;
     }
+
+    .proposal-header {
+      position: relative;
+
+      .title, .abstract p, .show_body a {
+        position: absolute;
+        right: 0;
+        color: #fff;
+        width: 50%;
+        vertical-align: middle;
+      }
+
+      .title {
+        padding: 20px 20px 5px 20px;
+        text-transform: uppercase;
+        bottom: 60px;
+        font-size: 32px;
+      }
+
+      .abstract p {
+        padding: 5px 20px 20px 20px;
+        bottom: 40px;
+        font-size: 14px;
+        text-align: left;
+      }
+
+      .show_body a {
+        display: inline-block;
+        width: 30%;
+        right: 20%;
+        bottom: 0;
+        margin: 0;
+        font-size: 16px;
+        font-weight: bold;
+        padding: 18px 20px;
+        text-decoration: none;
+        overflow: hidden;
+      }
+    }
   }
 
   @each $category, $color in $categories {
     .#{$category}{
+      .proposal-header {
+        .title {
+          background: $color;
+        }
+        .abstract p {
+          background: $color;
+        }
+        .show_body a {
+          background: $color url(images/white-alpha.png);
+
+          span {
+            display: inline-block;
+            height: 60px;
+            width: 66px;
+            position: absolute;
+            right: 0;
+            top: 0;
+            background: $color url(images/arrow.png) top right no-repeat;
+          }
+        }
+      }
       ul{
         padding: 0px;
       }
       .abstract{
-        text-align: center;
         color: #083e87;
-        font-weight: bold;
-        font-style: italic;
-        margin: 50px 40px 30px 40px;
+        width: 100%;
+        margin: 20px 0;
+
+        img {
+          width: 100%;
+        }
       }
       .body{
         margin-bottom: 20px;
--
libgit2 0.21.2