Download as
Browse Code »

Commit a5950e444f56ccd4907ce2f19265e23688938080

Authored by Augusto dos Anjos Almeida
1 parent 877a7645
Exists in refactory-sass

refactory

Showing 4 changed files with 324 additions and 196 deletions   Show diff stats
index.html
  Diff comments   View file @a5950e4
  1 +<!DOCTYPE html>
1 2 <html lang="pt-br">
2 3 <head>
3 4 <meta charset="utf-8" />
... ... @@ -114,7 +115,7 @@
114 115 </ul>
115 116 </nav>
116 117  
117   - <div id="proposal-categories">
  118 + <article id="proposal-categories">
118 119 <div id="proposal-categories-container">
119 120 <nav>
120 121 <ul>
... ... @@ -127,12 +128,12 @@
127 128 </ul>
128 129 </nav>
129 130 {{#each article.categories}}
130   - <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
  131 + <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide proposal-container" data-category="{{slug}}">
131 132 <div class="header">
132 133 <div class="name">{{name}}</div>
133 134 <div class="description"></div>
134 135 </div>
135   - <ul class="proposal-list">
  136 + <ul class="proposal-list row">
136 137 {{#list_proposal ../article.children category=slug}}
137 138 {{#link title id}}{{/link}}
138 139 {{/list_proposal}}
... ... @@ -140,19 +141,19 @@
140 141 </section>
141 142 {{/each}}
142 143 </div>
143   - </div>
  144 + </article>
144 145  
145   - <div id="proposal-group" class="hide">
  146 + <article id="proposal-group" class="hide">
146 147 <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
147 148 <div id="search-input-container">
148 149 <input placeholder="palavra chave" id="search-input" type="text" name="search" />
149 150 </div>
150   - <ul>
  151 + <ul class="proposal-list row">
151 152 {{#list_proposal article.children}}
152 153 {{#link title id}}{{/link}}
153 154 {{/list_proposal}}
154 155 </ul>
155   - </div>
  156 + </article>
156 157  
157 158 {{#each article.children}}
158 159 {{!-- <div class="container"> --}}
... ... @@ -204,7 +205,7 @@
204 205  
205 206 <div class="row">
206 207 <div class="make-proposal-container col-sm-6">
207   - <div class="make-proposal box">
  208 + <section class="make-proposal box box-propostas">
208 209 <div class="container-title box-title">Faça Uma Proposta</div>
209 210 <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
210 211 <div class="info">Esta consulta termina em julho de 2015. Até lá, todas as propostas serão lidas e as cinco mais pontuadas em cada programa receberão resposta oficial do governo.</div>
... ... @@ -225,23 +226,23 @@
225 226 <a href="#">Faça nova proposta</a>
226 227 </div>
227 228 <div class="clearfix"></div>
228   - </div>
  229 + </section>
229 230 </div>
230 231 <div class="support-proposal-container col-sm-6">
231   - <div class="support-proposal box box-center">
  232 + <section class="support-proposal box box-propostas box-center">
232 233 <div class="container-title box-title"> Apoie outras propostas</div>
233 234 <div class="random-proposal"></div>
234 235 <div class="loading">Carregando...</div>
235 236 <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
236   - </div>
  237 + </section>
237 238 </div>
238 239 </div>
239 240  
240   - <div class="results-container hide box"></div>
  241 + <div class="results-container hide boxbox-propostas "></div>
241 242  
242 243 <div class="row">
243   - <div class="talk-proposal-container col-sm-12">
244   - <div class="talk-proposal box">
  244 + <section class="talk-proposal-container col-sm-12">
  245 + <div class="talk-proposal box box-propostas">
245 246 <div class="container-title box-title">Bate-papo com os ministros</div>
246 247 <p>Confira as datas e horários:</p>
247 248 <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
... ... @@ -267,7 +268,7 @@
267 268 </li>
268 269 </ul>
269 270 </div>
270   - </div>
  271 + </section>
271 272 </div>
272 273  
273 274 </div>
... ...
js/handlebars-helpers.js
  Diff comments   View file @a5950e4
... ... @@ -19,11 +19,11 @@ define([&#39;handlebars&#39;], function(Handlebars){
19 19 for(var i=0, j=proposals.length; i<j; i++) {
20 20 var proposal = proposals[i];
21 21  
22   - element = '<li class="proposal-item">' +
23   - '<a href="#/programas/'+proposal.id+'" data-target="proposal-item-'+proposal.id+'" class="proposal-link">' +
24   - '<div class="item">' +
  22 + element = '<li class="proposal-item col-sm-6">' +
  23 + '<a href="#/programas/'+proposal.id+'" data-target="proposal-item-'+proposal.id+'" class="proposal-link box">' +
  24 + '<div class="box-header item">' +
25 25 '' + proposal.title;
26   - category = "<ul class='category'>";
  26 + category = "<ul class='category box-category'>";
27 27  
28 28  
29 29 for(var x=0, y=proposal.categories.length; x<y; x++) {
... ...
novo.css
  Diff comments   View file @a5950e4
... ... @@ -34,6 +34,139 @@ h4 {
34 34 .container, .row {
35 35 margin-bottom: 20px; }
36 36  
  37 +.button {
  38 + background-color: #000;
  39 + border-radius: 5px;
  40 + color: #fff;
  41 + cursor: pointer;
  42 + display: block;
  43 + font-size: 14px;
  44 + font-weight: 400;
  45 + padding: 20px 0;
  46 + text-align: center;
  47 + text-transform: uppercase;
  48 + transition: all 200ms; }
  49 + .button:hover {
  50 + background-color: #333333;
  51 + text-decoration: none; }
  52 + .button:hover, .button:focus {
  53 + color: #fff; }
  54 + .button-send span {
  55 + padding-left: 30px;
  56 + background-image: url(images/airplane.png);
  57 + background-position: left center;
  58 + background-repeat: no-repeat; }
  59 + .button-participe .fa {
  60 + margin-right: 10px; }
  61 +
  62 +.btn {
  63 + background-color: #fff;
  64 + border-radius: 0;
  65 + border: 1px solid #ccc;
  66 + color: #000;
  67 + line-height: 3.1;
  68 + font-size: 14px;
  69 + padding: 6px 12px; }
  70 +
  71 +#proposal-categories, #proposal-group {
  72 + border-bottom: 1px solid #000;
  73 + border-left: 1px solid #000;
  74 + border-right: 1px solid #000;
  75 + padding: 20px 20px 0; }
  76 + #proposal-categories ul, #proposal-group ul {
  77 + list-style: none;
  78 + padding-left: 0; }
  79 +
  80 +.proposal-container {
  81 + background-color: #ccc;
  82 + border-radius: 5px;
  83 + padding-bottom: 10px;
  84 + padding-left: 20px;
  85 + padding-right: 20px;
  86 + padding-top: 20px; }
  87 + .proposal-container .name {
  88 + color: #000;
  89 + border-bottom: 1px solid #000;
  90 + font-family: asap, sans;
  91 + font-size: 24px;
  92 + font-weight: 700;
  93 + padding-bottom: 15px; }
  94 +.proposal-list {
  95 + list-style: none;
  96 + padding-left: 0; }
  97 +.proposal-group ul {
  98 + list-style: none;
  99 + padding-left: 0; }
  100 +
  101 +.box {
  102 + background-color: #fff;
  103 + border: 1px solid gray;
  104 + border-radius: 5px;
  105 + color: #000;
  106 + display: block;
  107 + height: 200px;
  108 + margin-top: 30px;
  109 + padding: 20px;
  110 + transition: all 200ms; }
  111 + .box:hover {
  112 + background-color: #e6e6e6;
  113 + color: #000;
  114 + text-decoration: none; }
  115 + .box p {
  116 + border-bottom: 1px dotted #000;
  117 + font-family: asap, sans;
  118 + font-size: 14px;
  119 + font-weight: 400;
  120 + padding-bottom: 15px; }
  121 + .box-propostas {
  122 + height: 500px;
  123 + border: 1px solid;
  124 + margin-bottom: 10px;
  125 + padding: 20px;
  126 + position: relative; }
  127 + .box-header {
  128 + font-family: asap, sans;
  129 + font-size: 24px;
  130 + font-weight: 700; }
  131 + .box-category {
  132 + font-size: 16px;
  133 + font-weight: 700;
  134 + list-style: none;
  135 + padding-left: 0; }
  136 + .box-category li {
  137 + background-color: #000;
  138 + color: #fff;
  139 + display: inline-block;
  140 + padding-bottom: 5px;
  141 + padding-left: 30px;
  142 + padding-right: 10px;
  143 + padding-top: 5px; }
  144 + .box-title {
  145 + font-size: 38px;
  146 + font-weight: 400;
  147 + margin-bottom: 20px; }
  148 + .box-subtitle {
  149 + font-size: 24px;
  150 + font-weight: 700;
  151 + line-height: 1.2;
  152 + margin-bottom: 20px; }
  153 + .box-footer, .box-bottom {
  154 + position: absolute;
  155 + bottom: 40px;
  156 + margin-left: -30%;
  157 + left: 50%;
  158 + width: 60%; }
  159 + .box-bottom {
  160 + bottom: 10px;
  161 + color: #000;
  162 + font-size: 14px;
  163 + font-weight: 700;
  164 + text-align: center; }
  165 + .box-bottom:hover, .box-bottom:focus {
  166 + color: #000; }
  167 + .box-center {
  168 + text-align: center; }
  169 +
37 170 .select {
38 171 background-color: #000;
39 172 margin-bottom: 10px; }
... ... @@ -56,24 +189,7 @@ h4 {
56 189  
57 190 .proposal-header {
58 191 position: relative; }
59   - .proposal-header img {
60   - width: 100%; }
61   - .proposal-header p {
62   - background-color: #000;
63   - bottom: 140px;
64   - color: #fff;
65   - font-size: 14px;
66   - font-weight: 700;
67   - padding-bottom: 20px;
68   - padding-left: 20px;
69   - padding-right: 20px;
70   - padding-top: 5px;
71   - position: absolute;
72   - right: 0;
73   - text-align: center;
74   - width: 50%;
75   - vertical-align: middle; }
76   - .proposal-header .title {
  192 + .proposal-header .title, .proposal-header p {
77 193 background-color: #000;
78 194 bottom: 170px;
79 195 color: #fff;
... ... @@ -128,38 +244,14 @@ h4 {
128 244 padding-right: 15px;
129 245 padding-top: 5px;
130 246 transition: all 200ms; }
131   -
132   -.box {
133   - height: 500px;
134   - border: 1px solid;
135   - margin-bottom: 10px;
136   - padding: 20px;
137   - position: relative; }
138   - .box-title {
139   - font-size: 38px;
140   - font-weight: 400;
141   - margin-bottom: 20px; }
142   - .box-subtitle {
143   - font-size: 24px;
144   - font-weight: 700;
145   - line-height: 1.2;
146   - margin-bottom: 20px; }
147   - .box-footer, .box-bottom {
148   - position: absolute;
149   - bottom: 40px;
150   - margin-left: -30%;
151   - left: 50%;
152   - width: 60%; }
153   - .box-bottom {
154   - bottom: 10px;
155   - color: #000;
  247 + .proposal-header img {
  248 + width: 100%; }
  249 + .proposal-header p {
  250 + bottom: 140px;
156 251 font-size: 14px;
157   - font-weight: 700;
158   - text-align: center; }
159   - .box-bottom:hover, .box-bottom:focus {
160   - color: #000; }
161   - .box-center {
162   - text-align: center; }
  252 + margin-bottom: 10px;
  253 + padding-top: 5px;
  254 + text-transform: none; }
163 255  
164 256 .vote-actions .like {
165 257 background: url(images/like.png) no-repeat;
... ... @@ -277,40 +369,6 @@ h4 {
277 369 .list-unstyled li:first-child {
278 370 border-top: 0; }
279 371  
280   -.button {
281   - background-color: #000;
282   - border-radius: 5px;
283   - color: #fff;
284   - cursor: pointer;
285   - display: block;
286   - font-size: 14px;
287   - font-weight: 400;
288   - padding: 20px 0;
289   - text-align: center;
290   - text-transform: uppercase;
291   - transition: all 200ms; }
292   - .button:hover {
293   - background-color: #333333;
294   - text-decoration: none; }
295   - .button:hover, .button:focus {
296   - color: #fff; }
297   - .button-send span {
298   - padding-left: 30px;
299   - background-image: url(images/airplane.png);
300   - background-position: left center;
301   - background-repeat: no-repeat; }
302   - .button-participe .fa {
303   - margin-right: 10px; }
304   -
305   -.btn {
306   - background-color: #fff;
307   - border-radius: 0;
308   - border: 1px solid #ccc;
309   - color: #000;
310   - line-height: 3.1;
311   - font-size: 14px;
312   - padding: 6px 12px; }
313   -
314 372 .hide {
315 373 display: none; }
316 374  
... ...
sass/novo.sass
  Diff comments   View file @a5950e4
... ... @@ -16,6 +16,9 @@ $font-size-h1: 28px
16 16 $font-size-h2: 38px
17 17 $font-size-h3: 28px
18 18 $font-size-h4: 34px
  19 +$theme-size-title: 19px
  20 +$theme-size-header: 24px
  21 +$proposal-title: 32px
19 22  
20 23  
21 24 // dicionarios
... ... @@ -76,9 +79,158 @@ h4
76 79  
77 80  
78 81 // ------------------------------------
  82 +// elementos
  83 +// ------------------------------------
  84 +
  85 +// botao padrao
  86 +.button
  87 + background-color: #000
  88 + border-radius: $radius
  89 + color: #fff
  90 + cursor: pointer
  91 + display: block
  92 + font-size: $font-size-small
  93 + font-weight: 400
  94 + padding: $gutter 0
  95 + text-align: center
  96 + text-transform: uppercase
  97 + transition: all 200ms
  98 + +hover(#000, 20%)
  99 + &:hover, &:focus
  100 + color: #fff
  101 + &-send
  102 + span
  103 + padding-left: $gutter * 1.5
  104 + background-image: url(images/airplane.png)
  105 + background-position: left center
  106 + background-repeat: no-repeat
  107 + &-participe
  108 + .fa
  109 + margin-right: $gutter * 0.5
  110 +
  111 +// botao voltar
  112 +.btn
  113 + background-color: #fff
  114 + border-radius: 0
  115 + border: 1px solid #ccc
  116 + color: #000
  117 + line-height: 3.1
  118 + font-size: $font-size-small
  119 + padding: 6px 12px
  120 +
  121 +
  122 +// ------------------------------------
79 123 // blocos
80 124 // ------------------------------------
81 125  
  126 +// listagem
  127 +#proposal
  128 + &-categories
  129 + border-bottom: 1px solid #000
  130 + border-left: 1px solid #000
  131 + border-right: 1px solid #000
  132 + padding: $gutter $gutter 0
  133 + ul
  134 + list-style: none
  135 + padding-left: 0
  136 + &-group
  137 + @extend #proposal-categories
  138 +
  139 +// programas por temas
  140 +.proposal
  141 + &-container
  142 + background-color: #ccc
  143 + border-radius: $radius
  144 + padding-bottom: $gutter * 0.5
  145 + padding-left: $gutter
  146 + padding-right: $gutter
  147 + padding-top: $gutter
  148 + .name
  149 + color: #000
  150 + border-bottom: 1px solid #000
  151 + font-family: asap, sans
  152 + font-size: $theme-size-header
  153 + font-weight: 700
  154 + padding-bottom: $gutter * 0.75
  155 + &-list
  156 + list-style: none
  157 + padding-left: 0
  158 + &-group
  159 + ul
  160 + list-style: none
  161 + padding-left: 0
  162 +
  163 +// blocos dos programas
  164 +.box
  165 + background-color: #fff
  166 + border: 1px solid gray
  167 + border-radius: $radius
  168 + color: #000
  169 + display: block
  170 + height: 200px
  171 + margin-top: $gutter * 1.5
  172 + padding: $gutter
  173 + transition: all 200ms
  174 + &:hover
  175 + background-color: darken(#fff, 10%)
  176 + color: #000
  177 + text-decoration: none
  178 + p
  179 + border-bottom: 1px dotted #000
  180 + font-family: asap, sans
  181 + font-size: $font-size-small
  182 + font-weight: 400
  183 + padding-bottom: $gutter * 0.75
  184 + &-propostas
  185 + height: 500px
  186 + border: 1px solid
  187 + margin-bottom: $gutter * 0.5
  188 + padding: $gutter
  189 + position: relative
  190 + &-header
  191 + font-family: asap, sans
  192 + font-size: $theme-size-header
  193 + font-weight: 700
  194 + &-category
  195 + font-size: $font-size-base
  196 + font-weight: 700
  197 + list-style: none
  198 + padding-left: 0
  199 + li
  200 + background-color: #000
  201 + color: #fff
  202 + display: inline-block
  203 + padding-bottom: $gutter * 0.25
  204 + padding-left: $gutter * 1.5
  205 + padding-right: $gutter * 0.5
  206 + padding-top: $gutter * 0.25
  207 + &-title
  208 + font-size: $font-size-h2
  209 + font-weight: 400
  210 + margin-bottom: $gutter
  211 + &-subtitle
  212 + font-size: $theme-size-header
  213 + font-weight: 700
  214 + line-height: 1.2
  215 + margin-bottom: $gutter
  216 + &-footer
  217 + position: absolute
  218 + bottom: 40px
  219 + margin-left: -30%
  220 + left: 50%
  221 + width: 60%
  222 + &-bottom
  223 + @extend .box-footer
  224 + bottom: 10px
  225 + color: #000
  226 + font-size: $font-size-small
  227 + font-weight: 700
  228 + text-align: center
  229 + &:hover, &:focus
  230 + color: #000
  231 + &-center
  232 + text-align: center
  233 +
82 234 // header do programa
83 235 .select
84 236 background-color: #000
... ... @@ -87,7 +239,7 @@ h4
87 239 &-link
88 240 color: #fff
89 241 display: inline-block
90   - font-size: $font-size-base + 3
  242 + font-size: $theme-size-title
91 243 font-weight: 700
92 244 padding-bottom: $gutter * 0.75
93 245 padding-left: $gutter * 2.5
... ... @@ -104,28 +256,11 @@ h4
104 256 // imagem destaque do programa, titulo, descricao e botao de acesso
105 257 .proposal-header
106 258 position: relative
107   - img
108   - width: 100%
109   - p
110   - background-color: #000
111   - bottom: 140px
112   - color: #fff
113   - font-size: $font-size-base - 2
114   - font-weight: 700
115   - padding-bottom: $gutter
116   - padding-left: $gutter
117   - padding-right: $gutter
118   - padding-top: $gutter * 0.25
119   - position: absolute
120   - right: 0
121   - text-align: center
122   - width: 50%
123   - vertical-align: middle
124 259 .title
125 260 background-color: #000
126 261 bottom: 170px
127 262 color: #fff
128   - font-size: $font-size-base * 2
  263 + font-size: $proposal-title
129 264 font-weight: 700
130 265 margin-bottom: $gutter * 1.25
131 266 margin-left: 0
... ... @@ -175,40 +310,15 @@ h4
175 310 padding-right: $gutter * 0.75
176 311 padding-top: $gutter * 0.25
177 312 transition: all 200ms
178   -
179   -// caixas dos programas
180   -.box
181   - height: 500px
182   - border: 1px solid
183   - margin-bottom: $gutter * 0.5
184   - padding: $gutter
185   - position: relative
186   - &-title
187   - font-size: $font-size-h2
188   - font-weight: 400
189   - margin-bottom: $gutter
190   - &-subtitle
191   - font-size: $font-size-base * 1.5
192   - font-weight: 700
193   - line-height: 1.2
194   - margin-bottom: $gutter
195   - &-footer
196   - position: absolute
197   - bottom: 40px
198   - margin-left: -30%
199   - left: 50%
200   - width: 60%
201   - &-bottom
202   - @extend .box-footer
203   - bottom: 10px
204   - color: #000
  313 + img
  314 + width: 100%
  315 + p
  316 + @extend .title
  317 + bottom: 140px
205 318 font-size: $font-size-small
206   - font-weight: 700
207   - text-align: center
208   - &:hover, &:focus
209   - color: #000
210   - &-center
211   - text-align: center
  319 + margin-bottom: $gutter * 0.5
  320 + padding-top: $gutter * 0.25
  321 + text-transform: none
212 322  
213 323 // votacao
214 324 .vote-actions
... ... @@ -333,7 +443,7 @@ h4
333 443 .list-unstyled
334 444 li
335 445 border-top: 1px solid
336   - font-size: $font-size-base + 2
  446 + font-size: $font-size-big
337 447 font-weight: 700
338 448 padding: $gutter
339 449 &:first-child
... ... @@ -341,47 +451,6 @@ h4
341 451  
342 452  
343 453 // ------------------------------------
344   -// elementos
345   -// ------------------------------------
346   -
347   -// botao padrao
348   -.button
349   - background-color: #000
350   - border-radius: $radius
351   - color: #fff
352   - cursor: pointer
353   - display: block
354   - font-size: $font-size-small
355   - font-weight: 400
356   - padding: $gutter 0
357   - text-align: center
358   - text-transform: uppercase
359   - transition: all 200ms
360   - +hover(#000, 20%)
361   - &:hover, &:focus
362   - color: #fff
363   - &-send
364   - span
365   - padding-left: $gutter * 1.5
366   - background-image: url(images/airplane.png)
367   - background-position: left center
368   - background-repeat: no-repeat
369   - &-participe
370   - .fa
371   - margin-right: $gutter * 0.5
372   -
373   -// botao voltar
374   -.btn
375   - background-color: #fff
376   - border-radius: 0
377   - border: 1px solid #ccc
378   - color: #000
379   - line-height: 3.1
380   - font-size: $font-size-small
381   - padding: 6px 12px
382   -
383   -
384   -// ------------------------------------
385 454 // modificadores
386 455 // ------------------------------------
387 456 .hide
... ...