Download as
Browse Code »

Commit fe1c0d6de2f6306aa01d2861291d61aad592088e

Authored by Augusto dos Anjos Almeida
1 parent bdd3df2c
Exists in master and in 5 other branches build, build2, contigency_plan_recaptcha, production, staging

Mobile - Themes navigation

Showing 2 changed files with 90 additions and 15 deletions   Show diff stats
index.html
  Diff comments   View file @fe1c0d6
... ... @@ -138,13 +138,13 @@
138 138 <div class="col-sm-3">
139 139 <aside id="proposal-categories">
140 140 <div id="proposal-categories-container">
141   - <h2 class="menu"><strong>Programas</strong> por Tema</h2>
  141 + <h2 class="menu hidden-xs"><strong>Programas</strong> por Tema</h2>
142 142 <ul class="themes">
143 143 {{#each article.categories}}
144 144 <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}">
145 145 <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">
146 146 <span class="icon icon-theme icon-{{slug}}"></span>
147   - {{name}}
  147 + <span class="themes-name">{{name}}</span>
148 148 </a>
149 149 <!-- <div class="arrow-box" style="display: none"></div> -->
150 150 </li>
... ... @@ -218,7 +218,9 @@
218 218 <div class="abstract">{{{abstract}}}</div>
219 219 </a>
220 220 <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>
  221 + <div class="col-sm-6 col-sm-offset-3">
  222 + <a class="" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
  223 + </div>
222 224 </div>
223 225 </div>
224 226  
... ... @@ -253,7 +255,13 @@
253 255 <div class="container-title box-title">Faça Uma Proposta</div>
254 256 <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
255 257 <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>
  258 + <div class="row">
  259 + <div class="col-sm-6 col-sm-offset-3">
  260 + <div class="button send-proposal-button button-send box-footer">
  261 + <a href="#"><span>Envie sua proposta</span></a>
  262 + </div>
  263 + </div>
  264 + </div>
257 265 <div class="login-container hide">Login</div>
258 266 <form class="make-proposal-form save-article-form require-login hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
259 267 <div class="message hide"></div>
... ... @@ -343,7 +351,11 @@
343 351 <div class="vote-actions">
344 352 <a href="#" class="icon icon-vote dislike" data-vote-value="-1"><span class="fa fa-times"></span></a>
345 353 <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>
  354 + <div class="row">
  355 + <div class="col-sm-6 col-sm-offset-3">
  356 + <a href="#" class="skip button box-footer">Pular</a>
  357 + </div>
  358 + </div>
347 359 <a href="#" class="vote-result box-bottom">Resultados</a>
348 360 </div>
349 361 <div class="social">
... ... @@ -448,14 +460,14 @@
448 460 <div class="captcha col-sm-12">
449 461 <div id="g-recaptcha"></div>
450 462 </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>
  463 + <div class="actions col-sm-12">
  464 + <div class="row">
  465 + <div class="col-sm-4">
  466 + <a href="#" class="confirm-signup button button-confirm">Confirmar</a>
  467 + </div>
  468 + <div class="col-sm-4">
  469 + <a href="#" class="cancel-signup button button-cancela">Cancelar</a>
  470 + </div>
459 471 </div>
460 472 </div>
461 473 </div>
... ...
sass/style.sass
  Diff comments   View file @fe1c0d6
... ... @@ -39,6 +39,7 @@
39 39 // 7 - Modificadores
40 40 // 8 - Cores do Temas
41 41 // 9 - Alto Contraste
  42 +// 10 - Mobile
42 43 // ------------------------------------
43 44  
44 45  
... ... @@ -64,7 +65,7 @@ $theme-size-header: 24px
64 65 $proposal-title: 32px
65 66  
66 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 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 71 // 1.5 - cores
... ... @@ -220,6 +221,8 @@ td
220 221 &-participe
221 222 .fa
222 223 margin-right: $gutter * 0.5
  224 + &-confirm
  225 + margin-bottom: $gutter
223 226  
224 227 // 5.2 - botao voltar
225 228 .btn
... ... @@ -516,7 +519,6 @@ h1
516 519 margin-left: auto
517 520 margin-right: auto
518 521 margin-top: $gutter
519   - width: 40%
520 522 &-bottom
521 523 @extend .box-footer
522 524 bottom: 10px
... ... @@ -588,6 +590,7 @@ h1
588 590 border-top: 0
589 591 border-radius: $radius * 2
590 592 color: #fff
  593 + display: block
591 594 font-size: $font-size-h2
592 595 font-weight: 700
593 596 padding-bottom: $gutter * 0.5
... ... @@ -1113,3 +1116,63 @@ h3.titulo-destaque
1113 1116 @each $category,$color in $categories
1114 1117 .category-#{$category}
1115 1118 background-color: darken(#fff, 85%)
  1119 +
  1120 +
  1121 +// ------------------------------------
  1122 +// 10 - mobile
  1123 +// ------------------------------------
  1124 +@media (max-width: 480px)
  1125 + #content
  1126 + // margin-top: $gutter * 1.5 * (-1)
  1127 + margin-bottom: 0
  1128 + .embed-responsive
  1129 + margin-left: $gutter * (-1)
  1130 + margin-right: $gutter * (-1)
  1131 + .themes
  1132 + margin-bottom: $gutter * 1.5
  1133 + margin-left: $gutter * 1.5 * (-1)
  1134 + margin-right: $gutter * 1.5 * (-1)
  1135 + margin-top: $gutter * 1.5 * (-1)
  1136 + font-size: 0
  1137 + &-name
  1138 + display: block
  1139 + li
  1140 + display: inline-block
  1141 + font-size: $font-size-base
  1142 + width: 25%
  1143 + vertical-align: top
  1144 + &:first-child
  1145 + a
  1146 + border-left: 0
  1147 + a
  1148 + border-left: 1px solid #f1f1f1
  1149 + display: block
  1150 + padding: 0
  1151 + text-align: center
  1152 + height: 145px
  1153 + .icon
  1154 + margin-bottom: $gutter * 0.5
  1155 + margin-left: 0
  1156 + margin-right: 0
  1157 + margin-top: $gutter
  1158 + .box
  1159 + &-header
  1160 + p
  1161 + height: auto
  1162 + &-propostas
  1163 + height: auto
  1164 + .proposal
  1165 + &-header
  1166 + .title
  1167 + margin: 0
  1168 + padding-bottom: 0
  1169 + position: inherit
  1170 + width: 100%
  1171 + p
  1172 + padding-bottom: $gutter
  1173 + .select
  1174 + .proposal
  1175 + &-selection
  1176 + float: none
  1177 + margin: 0
  1178 + width: 100%
... ...