Proposal header

Caio Almeida
1 parent 820e8f31
Showing 5 changed files with 82 additions and 12 deletions Show diff stats
images/arrow.png
images/white-alpha.png
index.html
js/handlebars-helpers.js
sass/_proposal_detail.scss
@@ -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>
@@ -42,3 +42,7 @@ Handlebars.registerHelper(&#39;proposal_detail&#39;, function(proposals, options) {
   }
   return ret;
 });
+
+Handlebars.registerHelper('replace', function(string, to_replace, replacement) {
+  return (string || '').replace(new RegExp(to_replace, 'g'), replacement);
+});
@@ -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;
	@@ -42,3 +42,7 @@ Handlebars.registerHelper('proposal_detail', function(proposals, options) {		@@ -42,3 +42,7 @@ Handlebars.registerHelper('proposal_detail', function(proposals, options) {
42	}	42	}
43	return ret;	43	return ret;
44	});	44	});
		45	+
		46	+Handlebars.registerHelper('replace', function(string, to_replace, replacement) {
		47	+ return (string \|\| '').replace(new RegExp(to_replace, 'g'), replacement);
		48	+});
	@@ -11,7 +11,7 @@		@@ -11,7 +11,7 @@
11	text-transform: uppercase;	11	text-transform: uppercase;
12	padding: 15px 35px;	12	padding: 15px 35px;
13	margin: 0;	13	margin: 0;
14	- width: 20%;	14	+ width: 30%;
15	display: inline-block;	15	display: inline-block;
16	span {	16	span {
17	padding-left: 40px;	17	padding-left: 40px;
	@@ -28,26 +28,88 @@		@@ -28,26 +28,88 @@
28	.categories {	28	.categories {
29	select {	29	select {
30	height: 57px;	30	height: 57px;
31	- width: 70%;	31	+ width: 60%;
32	margin: 0;	32	margin: 0;
33	text-transform: uppercase;	33	text-transform: uppercase;
34	border: 0;	34	border: 0;
35	background: #EEEFF1;	35	background: #EEEFF1;
36	float: right;	36	float: right;
37	}	37	}
		38	+
		39	+ .proposal-header {
		40	+ position: relative;
		41	+
		42	+ .title, .abstract p, .show_body a {
		43	+ position: absolute;
		44	+ right: 0;
		45	+ color: #fff;
		46	+ width: 50%;
		47	+ vertical-align: middle;
		48	+ }
		49	+
		50	+ .title {
		51	+ padding: 20px 20px 5px 20px;
		52	+ text-transform: uppercase;
		53	+ bottom: 60px;
		54	+ font-size: 32px;
		55	+ }
		56	+
		57	+ .abstract p {
		58	+ padding: 5px 20px 20px 20px;
		59	+ bottom: 40px;
		60	+ font-size: 14px;
		61	+ text-align: left;
		62	+ }
		63	+
		64	+ .show_body a {
		65	+ display: inline-block;
		66	+ width: 30%;
		67	+ right: 20%;
		68	+ bottom: 0;
		69	+ margin: 0;
		70	+ font-size: 16px;
		71	+ font-weight: bold;
		72	+ padding: 18px 20px;
		73	+ text-decoration: none;
		74	+ overflow: hidden;
		75	+ }
		76	+ }
38	}	77	}
39		78
40	@each $category, $color in $categories {	79	@each $category, $color in $categories {
41	.#{$category}{	80	.#{$category}{
		81	+ .proposal-header {
		82	+ .title {
		83	+ background: $color;
		84	+ }
		85	+ .abstract p {
		86	+ background: $color;
		87	+ }
		88	+ .show_body a {
		89	+ background: $color url(images/white-alpha.png);
		90	+
		91	+ span {
		92	+ display: inline-block;
		93	+ height: 60px;
		94	+ width: 66px;
		95	+ position: absolute;
		96	+ right: 0;
		97	+ top: 0;
		98	+ background: $color url(images/arrow.png) top right no-repeat;
		99	+ }
		100	+ }
		101	+ }
42	ul{	102	ul{
43	padding: 0px;	103	padding: 0px;
44	}	104	}
45	.abstract{	105	.abstract{
46	- text-align: center;
47	color: #083e87;	106	color: #083e87;
48	- font-weight: bold;
49	- font-style: italic;
50	- margin: 50px 40px 30px 40px;	107	+ width: 100%;
		108	+ margin: 20px 0;
		109	+
		110	+ img {
		111	+ width: 100%;
		112	+ }
51	}	113	}
52	.body{	114	.body{
53	margin-bottom: 20px;	115	margin-bottom: 20px;