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 11 .navbar-brand {
4 12 height: auto;
... ... @@ -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 88 .contraste & {
38 89 .nav > li > a:hover,
39 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 21 text-align: right;
22 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 132 }
133 133 }
134 134  
  135 +.icon {
  136 + display: block;
  137 +}
  138 +
135 139 .icon-wrapper-rounded {
136 140 padding: 3px;
137 141 border-radius: 100%;
... ...
src/app/pages/header/header.html
  Diff comments   View file @9f8598e
... ... @@ -12,9 +12,9 @@
12 12 </div>
13 13 </div>
14 14  
15   - <div class="row">
  15 + <!-- <div class="row">
16 16 <div class="col-sm-12">
17 17 <div ncy-breadcrumb></div>
18 18 </div>
19   - </div>
  19 + </div> -->
20 20 </header>
... ...