Commit 176e46f7fbadb4fa42d55ac7b09bbf0866c176d9

Authored by Leonardo Merlin
1 parent 4723cee6

update: small improvements on header (issue #303)

Showing 3 changed files with 19 additions and 6 deletions   Show diff stats
index.html
... ... @@ -98,11 +98,11 @@
98 98 <script id="proposal-template" type="text/x-handlebars-template">
99 99 <header class="container">
100 100 <div class="row" style="margin: 10px 0 0 0">
101   - <div class="col-xs-5">
  101 + <div class="col-xs-6">
102 102 <button type="button" id="display-contrast" class="btn btn-link"><i class="fa fa-adjust"></i> Alto Contraste</button>
103 103 </div>
104   - <div class="col-xs-7">
105   - <div class="participar">
  104 + <div class="col-xs-6">
  105 + <div class="participar hide">
106 106 <button type="button" id="login-button" class="btn login"><i class="icon icon-login"></i>Entrar</button>
107 107 <button type="button" id="logout-button" class="btn logout hide"><i class="icon icon-login"></i><span class="name"></span>Sair</button>
108 108 </div>
... ...
js/main.js
... ... @@ -1121,6 +1121,8 @@ define([&#39;jquery&#39;, &#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;, &#39;piwik&#39;], fun
1121 1121  
1122 1122 $loginPanel.toggle();
1123 1123 });
  1124 +
  1125 + $('.participar').removeClass('hide');
1124 1126 })();
1125 1127  
1126 1128 });
... ...
sass/style.sass
... ... @@ -77,6 +77,11 @@ $link-color: #387bfa
77 77 // 1.6 - escurecer
78 78 $darken: 15%
79 79  
  80 +// 1.7 - screens
  81 +$screen-xs: 480px
  82 +$screen-sm: 768px
  83 +$screen-md: 992px
  84 +$screen-lg: 1200px
80 85  
81 86 // ------------------------------------
82 87 // 2 - Mixins
... ... @@ -401,12 +406,16 @@ h1
401 406 .top-menu
402 407 float: left
403 408 margin: $gutter ($gutter * 0.75)
  409 + @media (max-width: $screen-xs)
  410 + margin: auto
404 411 a
405 412 color: $header-color
406 413 display: block
407 414 float: left
408 415 margin: ($gutter * 2) ($gutter * 0.5) 0
409 416 text-transform: uppercase
  417 + @media (max-width: $screen-xs)
  418 + margin: 0 ($gutter)
410 419  
411 420 // 6.3 - video
412 421 #content
... ... @@ -568,7 +577,7 @@ h1
568 577 font-weight: 500
569 578 margin-top: $gutter * 0.5
570 579 // height: $gutter * 2
571   - // @media (min-width: 768px)
  580 + // @media (min-width: $screen-md)
572 581 // height: $gutter * 3
573 582 &-body
574 583 padding: $gutter
... ... @@ -714,6 +723,8 @@ h1
714 723 .btn
715 724 color: $link-color
716 725 font-weight: normal
  726 + .contrast &
  727 + color: #fff
717 728 .participe
718 729 font-size: 14px
719 730 padding: 2px 10px
... ... @@ -1112,7 +1123,7 @@ td
1112 1123 .#{$category} &
1113 1124 color: $color
1114 1125  
1115   - @media (max-width: 767px)
  1126 + @media (max-width: $screen-md)
1116 1127 width: 100%
1117 1128 margin-left: 0
1118 1129  
... ... @@ -1353,7 +1364,7 @@ h3.titulo-destaque
1353 1364 // ------------------------------------
1354 1365 // 10 - mobile
1355 1366 // ------------------------------------
1356   -@media (max-width: 480px)
  1367 +@media (max-width: $screen-xs)
1357 1368 #content
1358 1369 // margin-top: $gutter * 1.5 * (-1)
1359 1370 margin-bottom: 0
... ...