Download as
Browse Code »

Commit 9f8598eccd889dcf992d01cea80a81cab8f73aba

Authored by Leonardo Merlin
1 parent 7b12a2a2
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Refact header

Showing 5 changed files with 135 additions and 43 deletions   Show diff stats
src/app/components/navbar/navbar.html
  Diff comments   View file @9f8598e
1 -<nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">  
2 - <div class="navbar-header">  
3 - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">  
4 - <span class="sr-only">Alternar menu de navegação</span>  
5 - <span class="icon-bar" aria-hidden="true"></span>  
6 - <span class="icon-bar" aria-hidden="true"></span>  
7 - <span class="icon-bar" aria-hidden="true"></span>  
8 - </button>  
9 - <a class="navbar-brand" ui-sref="inicio">  
10 - <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />  
11 - <!-- <span class="glyphicon glyphicon-home"></span> Início -->  
12 - </a>  
13 - </div> 1 +<div class="app-navbar">
  2 + <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
  3 + <div class="navbar-header">
  4 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
  5 + <span class="sr-only">Alternar menu de navegação</span>
  6 + <span class="icon-bar" aria-hidden="true"></span>
  7 + <span class="icon-bar" aria-hidden="true"></span>
  8 + <span class="icon-bar" aria-hidden="true"></span>
  9 + </button>
  10 + <a class="navbar-brand" ui-sref="inicio">
  11 + <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
  12 + <!-- <span class="glyphicon glyphicon-home"></span> Início -->
  13 + </a>
  14 + </div>
14 15
15 - <div id="navbar-collapse" class="collapse navbar-collapse">  
16 - <ul class="nav navbar-nav">  
17 - <li><a ui-sref="sobre">Sobre</a></li>  
18 - <li><a ui-sref="programas">Programas</a></li>  
19 - <li><a ui-sref="propostas">Propostas</a></li>  
20 - <!-- <li><a ui-sref="ranking">Ranking</a></li> -->  
21 - <li><a ui-sref="duvidas">Dúvidas</a></li>  
22 - <!-- <li><a ui-sref="respostas">Respostas</a></li> -->  
23 - </ul>  
24 - </div>  
25 -</nav> 16 + <div id="navbar-collapse" class="collapse navbar-collapse">
  17 + <ul class="nav navbar-nav navbar-right">
  18 + <li ui-sref-active="active"><a ui-sref="sobre">Sobre</a></li>
  19 + <li ui-sref-active="active"><a ui-sref="programas">Programas</a></li>
  20 + <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li>
  21 + <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li>
  22 + <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li>
  23 + <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> -->
  24 + <li role="separator" class="divider"><span>|</span></li>
  25 + <li class="dropdown">
  26 + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span class="icon-circle"><span class="glyphicon glyphicon-share-alt"></span></span></a>
  27 + <ul class="dropdown-menu">
  28 + <li>
  29 + <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook">
  30 + <span class="icon icon-social-facebook"></span>
  31 + <span class="sr-only">Compartilhar no Facebook</span>
  32 + </a>
  33 + </li>
  34 + <li>
  35 + <a social-twitter custom-url="http://dialoga.gov.br" status="This status is #{{ vm.status }}" title="Compartilhar no Twitter">
  36 + <span class="icon icon-social-twitter"></span>
  37 + <span class="sr-only">Compartilhar no Twitter</span>
  38 + </a>
  39 + </li>
  40 + <li>
  41 + <a social-gplus custom-url="http://dialoga.gov.br" title="Compartilhar no Google Plus">
  42 + <span class="icon icon-social-google-plus"></span>
  43 + <span class="sr-only">Compartilhar no Google Plus</span>
  44 + </a>
  45 + </li>
  46 + <!-- <li>
  47 + <a href="whatsapp://send?text=http%3A%2F%2Fdialoga.gov.br" target="_blank" title="Compartilhar no WhatsApp">
  48 + <span class="icon icon-social-whatsapp"></span>
  49 + <span class="sr-only">Compartilhar no WhatsApp</span>
  50 + </a>
  51 + </li> -->
  52 + <li>
  53 + <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email">
  54 + <span class="icon icon-social-whatsapp"></span>
  55 + <span class="sr-only">Enviar por email</span>
  56 + </a>
  57 + </li>
  58 + </ul>
  59 + </li>
  60 + </ul>
  61 + </div>
  62 + </nav>
  63 +</div>
src/app/components/navbar/navbar.scss
  Diff comments   View file @9f8598e
1 -.header-navbar { 1 +.app-navbar {
  2 +
  3 + border-bottom: 2px solid #f1f1f1;
  4 + margin-bottom: 40px;
  5 +
  6 + .navbar {
  7 + margin-bottom: 0;
  8 + border: none;
  9 + }
2 10
3 .navbar-brand { 11 .navbar-brand {
4 height: auto; 12 height: auto;
@@ -14,19 +22,62 @@ @@ -14,19 +22,62 @@
14 } 22 }
15 } 23 }
16 24
17 - .navbar-nav a {  
18 - padding-top: 30px;  
19 - padding-bottom: 30px;  
20 - text-transform: uppercase;  
21 - color: #03316f; 25 + .navbar-nav .divider span {
  26 + padding: 0 0 10px 0;
  27 + margin: 53px 10px 0 10px;
  28 + display: block;
  29 +
  30 + @media screen and (max-width: 768px) {
  31 + display: none;
  32 + }
  33 + }
  34 +
  35 + .navbar-nav > li {
22 36
23 - -webkit-transition: all 0.2s ease-in-out;  
24 - -moz-transition: all 0.2s ease-in-out;  
25 - -o-transition: all 0.2s ease-in-out;  
26 - transition: all 0.2s ease-in-out; 37 + & > a {
  38 + padding: 0 0 10px 0;
  39 + margin: 55px 10px 0 10px;
  40 + text-transform: uppercase;
  41 + color: #616161;
  42 + font-weight: bold;
27 43
28 - .contraste & {  
29 - color: #fff; 44 + &:hover,
  45 + &:focus {
  46 + background: none;
  47 + }
  48 +
  49 + .contraste & {
  50 + color: #fff;
  51 + }
  52 + }
  53 +
  54 + &.active > a {
  55 + border-bottom: 3px solid #77BB34;
  56 +
  57 + @media screen and (max-width: 768px) {
  58 + border: none;
  59 + background-color: #eee;
  60 + padding: 10px 0 10px 0px;
  61 + }
  62 + }
  63 +
  64 + .dropdown-menu {
  65 + min-width: 190px;
  66 +
  67 + li {
  68 + float: left;
  69 + padding: 0;
  70 + margin: 0;
  71 + width: 45px;
  72 +
  73 + & > a {
  74 + padding: 0;
  75 + }
  76 +
  77 + &:first-child {
  78 + margin-left: 5px;
  79 + }
  80 + }
30 } 81 }
31 } 82 }
32 83
@@ -37,8 +88,11 @@ @@ -37,8 +88,11 @@
37 .contraste & { 88 .contraste & {
38 .nav > li > a:hover, 89 .nav > li > a:hover,
39 .nav > li > a:focus { 90 .nav > li > a:focus {
40 - color: #000; 91 + color: #fff;
41 } 92 }
42 93
  94 + .active a {
  95 + border-bottom-color: #fff;
  96 + }
43 } 97 }
44 } 98 }
src/app/components/socialShare/socialShare.scss
  Diff comments   View file @9f8598e
@@ -21,8 +21,4 @@ @@ -21,8 +21,4 @@
21 text-align: right; 21 text-align: right;
22 vertical-align: middle; 22 vertical-align: middle;
23 } 23 }
24 -  
25 - .icon {  
26 - display: block;  
27 - }  
28 } 24 }
src/app/index.scss
  Diff comments   View file @9f8598e
@@ -132,6 +132,10 @@ body { @@ -132,6 +132,10 @@ body {
132 } 132 }
133 } 133 }
134 134
  135 +.icon {
  136 + display: block;
  137 +}
  138 +
135 .icon-wrapper-rounded { 139 .icon-wrapper-rounded {
136 padding: 3px; 140 padding: 3px;
137 border-radius: 100%; 141 border-radius: 100%;
src/app/pages/header/header.html
  Diff comments   View file @9f8598e
@@ -12,9 +12,9 @@ @@ -12,9 +12,9 @@
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 - <div class="row"> 15 + <!-- <div class="row">
16 <div class="col-sm-12"> 16 <div class="col-sm-12">
17 <div ncy-breadcrumb></div> 17 <div ncy-breadcrumb></div>
18 </div> 18 </div>
19 - </div> 19 + </div> -->
20 </header> 20 </header>