Download as
Browse Code »

Commit b12e2aaaa6032bc30d86927d9960b9174c7ecaa8

Authored by Caio Almeida
1 parent 820e8f31
Exists in master and in 11 other branches build, build2, capa, captcha, contigency_plan_recaptcha, jasmine-testing, make_harder_to_vote_twice, production, refactory-sass, session_cookie, staging

Proposal header

Showing 5 changed files with 82 additions and 12 deletions   Show diff stats
images/arrow.png 0 → 100644
View file @b12e2aa

729 Bytes
images/white-alpha.png 0 → 100644
View file @b12e2aa

178 Bytes
index.html
  Diff comments   View file @b12e2aa
... ... @@ -72,13 +72,17 @@
72 72 </li>
73 73 {{/each}}
74 74 </ul>
75   - <div class='abstract'>
76   - <img src="{{../host}}{{image.url}}"/>
  75 +
  76 + <div class='proposal-header'>
  77 + <div class='abstract'>
  78 + <img src="{{../host}}{{image.url}}"/>
  79 + </div>
  80 + <div class='title'>{{title}}</div>
  81 + <div class='abstract'>{{{abstract}}}</div>
  82 + <div class='show_body'><a href='#'>Conheça o Programa<span></span></a></div>
77 83 </div>
78   - <div class='title'>{{title}}</div>
79   - <div class='abstract'>{{{abstract}}}</div>
80   - <div class='show_body'><a href='#'>Conheça o Programa</a></div>
81   - <div class='body hide'>{{body}}</div>
  84 +
  85 + <div class='body hide'>{{replace body '<[^>]+>' ''}}</div>
82 86 <div class='make-proposal-container'>
83 87 <div class='make-proposal'>
84 88 <div class='container-title'>Faça Uma Proposta</div>
... ...
js/handlebars-helpers.js
  Diff comments   View file @b12e2aa
... ... @@ -42,3 +42,7 @@ Handlebars.registerHelper(&#39;proposal_detail&#39;, function(proposals, options) {
42 42 }
43 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 +});
... ...
sass/_proposal_detail.scss
  Diff comments   View file @b12e2aa
... ... @@ -11,7 +11,7 @@
11 11 text-transform: uppercase;
12 12 padding: 15px 35px;
13 13 margin: 0;
14   - width: 20%;
  14 + width: 30%;
15 15 display: inline-block;
16 16 span {
17 17 padding-left: 40px;
... ... @@ -28,26 +28,88 @@
28 28 .categories {
29 29 select {
30 30 height: 57px;
31   - width: 70%;
  31 + width: 60%;
32 32 margin: 0;
33 33 text-transform: uppercase;
34 34 border: 0;
35 35 background: #EEEFF1;
36 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 79 @each $category, $color in $categories {
41 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 102 ul{
43 103 padding: 0px;
44 104 }
45 105 .abstract{
46   - text-align: center;
47 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 114 .body{
53 115 margin-bottom: 20px;
... ...