Download as
Browse Code »

Commit fe7224aa6d62b5bd7ffcf4afec885eab56bdf2ce

Authored by Victor Costa
2 parents 853ce530 8e1954f5
Exists in master and in 5 other branches build, build2, contigency_plan_recaptcha, production, staging

Merge branch 'master' of https://gitlab.com/participa/proposal-app

Showing 2 changed files with 106 additions and 16 deletions   Show diff stats
@@ -102,6 +102,7 @@ @@ -102,6 +102,7 @@
102 <div class="participar"> 102 <div class="participar">
103 <a href="#" class="button button-inline participe">Participe</a> 103 <a href="#" class="button button-inline participe">Participe</a>
104 <a href="#" class="entrar">Entrar</a> 104 <a href="#" class="entrar">Entrar</a>
  105 + <a href="#" class="logout">Sair</a>
105 </div> 106 </div>
106 <h1><a href="#">{{article.title}}</a></h1> 107 <h1><a href="#">{{article.title}}</a></h1>
107 <div class="social top"> 108 <div class="social top">
@@ -138,13 +139,14 @@ @@ -138,13 +139,14 @@
138 <div class="col-sm-3"> 139 <div class="col-sm-3">
139 <aside id="proposal-categories"> 140 <aside id="proposal-categories">
140 <div id="proposal-categories-container"> 141 <div id="proposal-categories-container">
141 - <h2 class="menu"><strong>Programas</strong> por Tema</h2> 142 + <h2 class="menu hidden-xs"><strong>Programas</strong> por Tema</h2>
142 <ul class="themes"> 143 <ul class="themes">
143 {{#each article.categories}} 144 {{#each article.categories}}
144 <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}"> 145 <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}">
145 <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}"> 146 <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">
146 <span class="icon icon-theme icon-{{slug}}"></span> 147 <span class="icon icon-theme icon-{{slug}}"></span>
147 - {{name}} 148 + <span class="themes-name">{{name}}</span>
  149 + <span class="fa fa-angle-right hidden-xs"></span>
148 </a> 150 </a>
149 <!-- <div class="arrow-box" style="display: none"></div> --> 151 <!-- <div class="arrow-box" style="display: none"></div> -->
150 </li> 152 </li>
@@ -179,7 +181,7 @@ @@ -179,7 +181,7 @@
179 <input placeholder="palavra chave" id="search-input" type="text" name="search" /> 181 <input placeholder="palavra chave" id="search-input" type="text" name="search" />
180 </div> 182 </div>
181 --> 183 -->
182 - <a class="ver-todos" href="#/programas" role="tab" aria-controls="proposal-group">Ver todos os programas</a> 184 + <a class="ver-todos" href="#/programas" role="tab" aria-controls="proposal-group"><span class="fa fa-angle-right"></span>Ver todos os programas</a>
183 <h2 class="name">Programas</h2> 185 <h2 class="name">Programas</h2>
184 186
185 <ul class="proposal-list row"> 187 <ul class="proposal-list row">
@@ -218,7 +220,9 @@ @@ -218,7 +220,9 @@
218 <div class="abstract">{{{abstract}}}</div> 220 <div class="abstract">{{{abstract}}}</div>
219 </a> 221 </a>
220 <div class="show_body row"> 222 <div class="show_body row">
221 - <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a> 223 + <div class="col-sm-6 col-sm-offset-3">
  224 + <a class="" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
  225 + </div>
222 </div> 226 </div>
223 </div> 227 </div>
224 228
@@ -253,7 +257,13 @@ @@ -253,7 +257,13 @@
253 <div class="container-title box-title">Faça Uma Proposta</div> 257 <div class="container-title box-title">Faça Uma Proposta</div>
254 <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div> 258 <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
255 <div class="info box-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> 259 <div class="info box-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>
256 - <div class="button send-proposal-button button-send box-footer"><a href="#"><span>Envie sua proposta</span></a></div> 260 + <div class="row">
  261 + <div class="col-sm-6 col-sm-offset-3">
  262 + <div class="button send-proposal-button button-send box-footer">
  263 + <a href="#"><span>Envie sua proposta</span></a>
  264 + </div>
  265 + </div>
  266 + </div>
257 <div class="login-container hide">Login</div> 267 <div class="login-container hide">Login</div>
258 <form class="make-proposal-form save-article-form require-login hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post"> 268 <form class="make-proposal-form save-article-form require-login hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
259 <div class="message hide"></div> 269 <div class="message hide"></div>
@@ -343,7 +353,11 @@ @@ -343,7 +353,11 @@
343 <div class="vote-actions"> 353 <div class="vote-actions">
344 <a href="#" class="icon icon-vote dislike" data-vote-value="-1"><span class="fa fa-times"></span></a> 354 <a href="#" class="icon icon-vote dislike" data-vote-value="-1"><span class="fa fa-times"></span></a>
345 <a href="#" class="icon icon-vote like" data-vote-value="1"><span class="fa fa-check"></span></a> 355 <a href="#" class="icon icon-vote like" data-vote-value="1"><span class="fa fa-check"></span></a>
346 - <a href="#" class="skip button box-footer">Pular</a> 356 + <div class="row">
  357 + <div class="col-sm-6 col-sm-offset-3">
  358 + <a href="#" class="skip button box-footer">Pular</a>
  359 + </div>
  360 + </div>
347 <a href="#" class="vote-result box-bottom">Resultados</a> 361 <a href="#" class="vote-result box-bottom">Resultados</a>
348 </div> 362 </div>
349 <div class="social"> 363 <div class="social">
@@ -448,14 +462,14 @@ @@ -448,14 +462,14 @@
448 <div class="captcha col-sm-12"> 462 <div class="captcha col-sm-12">
449 <div id="g-recaptcha"></div> 463 <div id="g-recaptcha"></div>
450 </div> 464 </div>
451 - </div>  
452 - <div class="actions col-sm-12">  
453 - <div class="row">  
454 - <div class="col-sm-4">  
455 - <a href="#" class="confirm-signup button">Confirmar</a>  
456 - </div>  
457 - <div class="col-sm-4">  
458 - <a href="#" class="cancel-signup button button-cancela">Cancelar</a> 465 + <div class="actions col-sm-12">
  466 + <div class="row">
  467 + <div class="col-sm-4">
  468 + <a href="#" class="confirm-signup button button-confirm">Confirmar</a>
  469 + </div>
  470 + <div class="col-sm-4">
  471 + <a href="#" class="cancel-signup button button-cancela">Cancelar</a>
  472 + </div>
459 </div> 473 </div>
460 </div> 474 </div>
461 </div> 475 </div>
sass/style.sass
  Diff comments   View file @fe7224a
@@ -39,6 +39,7 @@ @@ -39,6 +39,7 @@
39 // 7 - Modificadores 39 // 7 - Modificadores
40 // 8 - Cores do Temas 40 // 8 - Cores do Temas
41 // 9 - Alto Contraste 41 // 9 - Alto Contraste
  42 +// 10 - Mobile
42 // ------------------------------------ 43 // ------------------------------------
43 44
44 45
@@ -64,7 +65,7 @@ $theme-size-header: 24px @@ -64,7 +65,7 @@ $theme-size-header: 24px
64 $proposal-title: 32px 65 $proposal-title: 32px
65 66
66 // 1.4 - dicionarios 67 // 1.4 - dicionarios
67 -$categories: (saude: #3449b7, seguranca-publica: #ee2a61, educacao: #f39720, reducao-da-pobreza: #3ebb8f) 68 +$categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f)
68 $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.") 69 $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.")
69 70
70 // 1.5 - cores 71 // 1.5 - cores
@@ -220,6 +221,8 @@ td @@ -220,6 +221,8 @@ td
220 &-participe 221 &-participe
221 .fa 222 .fa
222 margin-right: $gutter * 0.5 223 margin-right: $gutter * 0.5
  224 + &-confirm
  225 + margin-bottom: $gutter
223 226
224 // 5.2 - botao voltar 227 // 5.2 - botao voltar
225 .btn 228 .btn
@@ -408,6 +411,14 @@ h1 @@ -408,6 +411,14 @@ h1
408 +hover(#fff,$darken) 411 +hover(#fff,$darken)
409 &:hover,&:focus 412 &:hover,&:focus
410 text-decoration: none 413 text-decoration: none
  414 + .fa
  415 + color: #898989
  416 + float: right
  417 + font-size: 45px
  418 + &-name
  419 + display: inline-block
  420 + width: 50%
  421 + vertical-align: middle
411 .arrow-box 422 .arrow-box
412 position: relative 423 position: relative
413 top: $gutter 424 top: $gutter
@@ -424,6 +435,10 @@ h1 @@ -424,6 +435,10 @@ h1
424 // 6.7 - listagem dos programas aleatorios 435 // 6.7 - listagem dos programas aleatorios
425 .ver-todos 436 .ver-todos
426 float: right 437 float: right
  438 + .fa
  439 + font-size: $theme-size-header
  440 + margin-right: $gutter * 0.5
  441 + vertical-align: bottom
427 .proposal 442 .proposal
428 &-container 443 &-container
429 border-radius: $radius 444 border-radius: $radius
@@ -516,7 +531,6 @@ h1 @@ -516,7 +531,6 @@ h1
516 margin-left: auto 531 margin-left: auto
517 margin-right: auto 532 margin-right: auto
518 margin-top: $gutter 533 margin-top: $gutter
519 - width: 40%  
520 &-bottom 534 &-bottom
521 @extend .box-footer 535 @extend .box-footer
522 bottom: 10px 536 bottom: 10px
@@ -588,6 +602,7 @@ h1 @@ -588,6 +602,7 @@ h1
588 border-top: 0 602 border-top: 0
589 border-radius: $radius * 2 603 border-radius: $radius * 2
590 color: #fff 604 color: #fff
  605 + display: block
591 font-size: $font-size-h2 606 font-size: $font-size-h2
592 font-weight: 700 607 font-weight: 700
593 padding-bottom: $gutter * 0.5 608 padding-bottom: $gutter * 0.5
@@ -1113,3 +1128,64 @@ h3.titulo-destaque @@ -1113,3 +1128,64 @@ h3.titulo-destaque
1113 @each $category,$color in $categories 1128 @each $category,$color in $categories
1114 .category-#{$category} 1129 .category-#{$category}
1115 background-color: darken(#fff, 85%) 1130 background-color: darken(#fff, 85%)
  1131 +
  1132 +
  1133 +// ------------------------------------
  1134 +// 10 - mobile
  1135 +// ------------------------------------
  1136 +@media (max-width: 480px)
  1137 + #content
  1138 + // margin-top: $gutter * 1.5 * (-1)
  1139 + margin-bottom: 0
  1140 + .embed-responsive
  1141 + margin-left: $gutter * (-1)
  1142 + margin-right: $gutter * (-1)
  1143 + .themes
  1144 + margin-bottom: $gutter * 1.5
  1145 + margin-left: $gutter * 1.5 * (-1)
  1146 + margin-right: $gutter * 1.5 * (-1)
  1147 + margin-top: $gutter * 1.5 * (-1)
  1148 + font-size: 0
  1149 + &-name
  1150 + display: block
  1151 + width: 100%
  1152 + li
  1153 + display: inline-block
  1154 + font-size: $font-size-base
  1155 + width: 25%
  1156 + vertical-align: top
  1157 + &:first-child
  1158 + a
  1159 + border-left: 0
  1160 + a
  1161 + border-left: 1px solid #f1f1f1
  1162 + display: block
  1163 + padding: 0
  1164 + text-align: center
  1165 + height: 145px
  1166 + .icon
  1167 + margin-bottom: $gutter * 0.5
  1168 + margin-left: 0
  1169 + margin-right: 0
  1170 + margin-top: $gutter
  1171 + .box
  1172 + &-header
  1173 + p
  1174 + height: auto
  1175 + &-propostas
  1176 + height: auto
  1177 + .proposal
  1178 + &-header
  1179 + .title
  1180 + margin: 0
  1181 + padding-bottom: 0
  1182 + position: inherit
  1183 + width: 100%
  1184 + p
  1185 + padding-bottom: $gutter
  1186 + .select
  1187 + .proposal
  1188 + &-selection
  1189 + float: none
  1190 + margin: 0
  1191 + width: 100%