Download as
Browse Code »

Commit 10073da65ba27eabfc78653640d81870003f0f94

Authored by Leonardo Merlin
1 parent ada42c18
Exists in master and in 6 other branches feature-captcha, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Fixes #23 and refact directive name from 'navbar' to 'app-navbar'

Showing 6 changed files with 360 additions and 329 deletions   Show diff stats
src/app/components/app-navbar/app-navbar.directive.js 0 → 100644
  Diff comments   View file @10073da
... ... @@ -0,0 +1,37 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('appNavbar', appNavbar);
  7 +
  8 + /** @ngInject */
  9 + function appNavbar() {
  10 +
  11 + /** @ngInject */
  12 + function NavbarController($log) {
  13 + $log.debug('NavbarController');
  14 +
  15 + var vm = this;
  16 +
  17 + vm.scrollTo = function(hash) {
  18 + var $el = angular.element('#' + hash);
  19 + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
  20 + };
  21 + }
  22 +
  23 + var directive = {
  24 + restrict: 'E',
  25 + templateUrl: 'app/components/app-navbar/app-navbar.html',
  26 + scope: {
  27 + creationDate: '='
  28 + },
  29 + controller: NavbarController,
  30 + controllerAs: 'vm',
  31 + bindToController: true
  32 + };
  33 +
  34 + return directive;
  35 + }
  36 +
  37 +})();
... ...
src/app/components/app-navbar/app-navbar.html 0 → 100644
  Diff comments   View file @10073da
... ... @@ -0,0 +1,101 @@
  1 +<div class="app-navbar">
  2 + <nav id="navigation" class="header-navbar navbar" role="navigation">
  3 + <div class="navbar-header">
  4 + <div class="row">
  5 + <div class="row-height">
  6 + <div class="col-xs-10 col-xs-height col-middle">
  7 + <a class="navbar-brand" ui-sref="inicio">
  8 + <img src="/assets/images/logo.png" class="img-responsive" alt="Dialoga Brasil | O país fica melhor quando você participa" />
  9 + </a>
  10 + </div>
  11 + <div class="col-xs-2 col-xs-height col-middle">
  12 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
  13 + <span class="sr-only">Alternar menu de navegação</span>
  14 + <span class="icon-bar" aria-hidden="true"></span>
  15 + <span class="icon-bar" aria-hidden="true"></span>
  16 + <span class="icon-bar" aria-hidden="true"></span>
  17 + </button>
  18 + </div>
  19 + </div>
  20 + </div>
  21 + </div>
  22 +
  23 + <div id="navbar-collapse" class="collapse navbar-collapse">
  24 + <ul class="nav navbar-nav navbar-right">
  25 + <li ui-sref-active="active"><a ui-sref="sobre">Sobre</a></li>
  26 + <li ui-sref-active="active"><a ui-sref="programas">Programas</a></li>
  27 + <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li>
  28 + <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li>
  29 + <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li>
  30 + <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li>
  31 + <li class="dropdown" style="border: none; margin: 20px 0;">
  32 + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span aria-hidden="true" class="icon icon-social-share-small"></span></a>
  33 + <social-share class="dropdown-menu dropdown-menu-right" arrow-class="social-share--arrow"></social-share>
  34 + <div class="clearfix"></div>
  35 + </li>
  36 + <li class="hidden-sm hidden-md hidden-lg" style="border: none; padding-bottom: 10px !important;">
  37 + <div class="text text-right" style="padding-right: 20px;">DIALOGA <b>NAS REDES</b></div>
  38 + <ul class="social-share list-inline">
  39 + <li>
  40 + <a href="https://www.facebook.com/DialogaBrasil" target="_blank">
  41 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
  42 + <span class="sr-only">Visitar perfil no Facebook</span>
  43 + </a>
  44 + </li>
  45 + <li>
  46 + <a href="https://twitter.com/dialogabrasil" target="_blank">
  47 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
  48 + <span class="sr-only">Visitar perfil no Twitter</span>
  49 + </a>
  50 + </li>
  51 + <li>
  52 + <a href="https://www.youtube.com/channel/UCtjaJwOWwGu2legqFVAzhIA" target="_blank">
  53 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-youtube"><span class="icon icon-social-youtube"></span></span>
  54 + <span class="sr-only">Visitar canal no Youtube</span>
  55 + </a>
  56 + </li>
  57 + <li>
  58 + <a href="https://www.flickr.com/photos/dialogabrasil" target="_blank">
  59 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-flickr"><span class="icon icon-social-flickr"></span></span>
  60 + <span class="sr-only">Visitar canal no Flickr</span>
  61 + </a>
  62 + </li>
  63 + </ul>
  64 + <div class="clearfix"></div>
  65 + </li>
  66 + </ul>
  67 + </div>
  68 + </nav>
  69 +
  70 + <div id="dialoga-nas-redes" class="hidden-xs">
  71 + <div class="text text-right">
  72 + <p>DIALOGA<br><b>NAS REDES</b></p>
  73 + </div>
  74 + <ul class="social-share list-inline">
  75 + <li>
  76 + <a href="https://www.facebook.com/DialogaBrasil" target="_blank">
  77 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
  78 + <span class="sr-only">Visitar perfil no Facebook</span>
  79 + </a>
  80 + </li>
  81 + <li>
  82 + <a href="https://twitter.com/dialogabrasil" target="_blank">
  83 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
  84 + <span class="sr-only">Visitar perfil no Twitter</span>
  85 + </a>
  86 + </li>
  87 + <li>
  88 + <a href="https://www.youtube.com/channel/UCtjaJwOWwGu2legqFVAzhIA" target="_blank">
  89 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-youtube"><span class="icon icon-social-youtube"></span></span>
  90 + <span class="sr-only">Visitar canal no Youtube</span>
  91 + </a>
  92 + </li>
  93 + <li>
  94 + <a href="https://www.flickr.com/photos/dialogabrasil" target="_blank">
  95 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-flickr"><span class="icon icon-social-flickr"></span></span>
  96 + <span class="sr-only">Visitar canal no Flickr</span>
  97 + </a>
  98 + </li>
  99 + </ul>
  100 + </div>
  101 +</div>
... ...
src/app/components/app-navbar/app-navbar.scss 0 → 100644
  Diff comments   View file @10073da
... ... @@ -0,0 +1,222 @@
  1 +.app-navbar {
  2 +
  3 + border-bottom: 2px solid #f1f1f1;
  4 +
  5 + .navbar {
  6 + margin-bottom: 0;
  7 + border: none;
  8 + }
  9 +
  10 + .navbar-brand {
  11 + height: auto;
  12 + padding-bottom: 0;
  13 + padding-left: 0;
  14 +
  15 + @media screen and (max-width: $screen-md) {
  16 + padding: 20px 0;
  17 + margin: 20px 0;
  18 + }
  19 + }
  20 +
  21 + .navbar-toggle {
  22 + border-radius: 100%;
  23 + background-color: #5e749d;
  24 +
  25 + .icon-bar {
  26 + height: 3px;
  27 + background-color: #fff;
  28 + }
  29 +
  30 + @media screen and (max-width: $screen-md) {
  31 + padding: 12px 10px;
  32 + margin: 0;
  33 + }
  34 + }
  35 +
  36 + .navbar-nav .divider span {
  37 + display: block;
  38 +
  39 + @media screen and (max-width: $screen-md) {
  40 + display: none;
  41 + }
  42 + }
  43 +
  44 + .dropdown-menu {
  45 + padding: 0;
  46 + }
  47 +
  48 + .navbar-nav {
  49 +
  50 + li > a {
  51 + text-transform: uppercase;
  52 + color: #616161;
  53 + font-weight: bold;
  54 +
  55 + &:hover,
  56 + &:focus {
  57 + background: none;
  58 + }
  59 +
  60 + .contraste & {
  61 + color: #fff;
  62 + }
  63 + }
  64 +
  65 + li.active > a {
  66 + border-bottom: 2px solid #77BB34;
  67 + }
  68 + }
  69 +
  70 + .contraste & {
  71 + .nav > li > a:hover,
  72 + .nav > li > a:focus {
  73 + color: #fff;
  74 + }
  75 +
  76 + .active a {
  77 + border-bottom-color: #fff;
  78 + }
  79 + }
  80 +
  81 + // <= Mobile
  82 + @media screen and (max-width: ($screen-sm - 1)) {
  83 + .navbar-collapse {
  84 + margin: 0 -15px;
  85 + }
  86 +
  87 + .navbar-nav {
  88 + background-color: #eee;
  89 +
  90 + & > li {
  91 + // border-top: 1px solid #ccc;
  92 + -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
  93 + -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
  94 + border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
  95 + border-image-slice: 1;
  96 +
  97 + border-top: 1px solid #ccc;
  98 + border-bottom: 0px solid #ccc;
  99 + border-left: 0px solid #ccc;
  100 + border-right: 0px solid #ccc;
  101 + &:last-child {
  102 + border-bottom: 1px solid #ccc;
  103 + }
  104 + }
  105 +
  106 + & > li > a {
  107 + padding: 12px 20px;
  108 + margin: 0;
  109 + text-align: right;
  110 + }
  111 +
  112 + & > li.active > a {
  113 + border-bottom: none;
  114 + border-right: 4px solid #77BB34;
  115 + }
  116 +
  117 + .dropdown-toggle {
  118 + margin-top: 0px;
  119 +
  120 + }
  121 + .dropdown-menu {
  122 + position: relative;
  123 + margin-right: 10px;
  124 + }
  125 +
  126 + .social-share {
  127 + float: right;
  128 + }
  129 + }
  130 +
  131 + }
  132 +
  133 + // >= Table, < Destop
  134 + @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
  135 + .navbar-brand {
  136 + padding-top: 0;
  137 + margin-top: 0;
  138 + margin-bottom: 60px;
  139 + }
  140 +
  141 + .navbar-collapse {
  142 + position: absolute;
  143 + left: 0;
  144 + bottom: 0;
  145 + width: 100%;
  146 +
  147 + ul.navbar-nav {
  148 + width: 100%;
  149 + float: none;
  150 + }
  151 +
  152 + li > a {
  153 + margin: 0 10px;
  154 + padding: 0 0 10px 0;
  155 + }
  156 +
  157 + li.dropdown {
  158 + position: absolute;
  159 + right: 0;
  160 + bottom: 0;
  161 +
  162 + .dropdown-toggle {
  163 + position: relative;
  164 + width: 160px;
  165 + margin: 0 5px 5px 0;
  166 + padding: 0;
  167 + }
  168 + }
  169 + }
  170 + }
  171 + // >= Desktop
  172 + @media screen and (min-width: $screen-md) {
  173 +
  174 + li > a {
  175 + padding: 15px 0;
  176 + margin: 0 9px;
  177 + }
  178 +
  179 + li.divider span{
  180 + padding: 12px 0;
  181 + line-height: 20px;
  182 + }
  183 +
  184 + li.dropdown {
  185 + .dropdown-toggle {
  186 + padding: 6px 10px;
  187 + margin: 0;
  188 + }
  189 + }
  190 + }
  191 +
  192 + // > Desktop Large
  193 + @media screen and (min-width: $screen-lg) {
  194 + .navbar-brand {
  195 + margin-bottom: 30px;
  196 + }
  197 +
  198 + ul.navbar-nav {
  199 + position: absolute;
  200 + right: 0;
  201 + bottom: 0;
  202 + }
  203 +
  204 + li.divider span{
  205 + padding: 12px 6px;
  206 + }
  207 + }
  208 +}
  209 +
  210 +#dialoga-nas-redes {
  211 + position: absolute;
  212 + right: 0;
  213 + top: 0;
  214 + z-index: 1000;
  215 +
  216 + .text {
  217 + position: absolute;
  218 + top: 5px;
  219 + right: 210px;
  220 + width: 100px;
  221 + }
  222 +}
... ...
src/app/components/navbar/navbar.directive.js
View file @ada42c1
... ... @@ -1,37 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .directive('appNavbar', appNavbar);
7   -
8   - /** @ngInject */
9   - function appNavbar() {
10   -
11   - /** @ngInject */
12   - function NavbarController($log) {
13   - $log.debug('NavbarController');
14   -
15   - var vm = this;
16   -
17   - vm.scrollTo = function(hash) {
18   - var $el = angular.element('#' + hash);
19   - angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
20   - };
21   - }
22   -
23   - var directive = {
24   - restrict: 'E',
25   - templateUrl: 'app/components/navbar/navbar.html',
26   - scope: {
27   - creationDate: '='
28   - },
29   - controller: NavbarController,
30   - controllerAs: 'vm',
31   - bindToController: true
32   - };
33   -
34   - return directive;
35   - }
36   -
37   -})();
src/app/components/navbar/navbar.html
View file @ada42c1
... ... @@ -1,70 +0,0 @@
1   -<div class="app-navbar">
2   - <nav id="navigation" class="header-navbar navbar" role="navigation">
3   - <div class="navbar-header">
4   - <div class="row">
5   - <div class="row-height">
6   - <div class="col-xs-10 col-xs-height col-middle">
7   - <a class="navbar-brand" ui-sref="inicio">
8   - <img src="/assets/images/logo.png" class="img-responsive" alt="Dialoga Brasil | O país fica melhor quando você participa" />
9   - </a>
10   - </div>
11   - <div class="col-xs-2 col-xs-height col-middle">
12   - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
13   - <span class="sr-only">Alternar menu de navegação</span>
14   - <span class="icon-bar" aria-hidden="true"></span>
15   - <span class="icon-bar" aria-hidden="true"></span>
16   - <span class="icon-bar" aria-hidden="true"></span>
17   - </button>
18   - </div>
19   - </div>
20   - </div>
21   - </div>
22   -
23   - <div id="navbar-collapse" class="collapse navbar-collapse">
24   - <ul class="nav navbar-nav navbar-right">
25   - <li ui-sref-active="active"><a ui-sref="sobre">Sobre</a></li>
26   - <li ui-sref-active="active"><a ui-sref="programas">Programas</a></li>
27   - <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li>
28   - <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li>
29   - <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li>
30   - <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li>
31   - <li class="dropdown">
32   - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span aria-hidden="true" class="icon icon-social-share-small"></span></a>
33   - <social-share class="dropdown-menu dropdown-menu-right" arrow-class="social-share--arrow"></social-share>
34   - </li>
35   - </ul>
36   - </div>
37   - </nav>
38   -
39   - <div id="dialoga-nas-redes" class="hidden-xs">
40   - <div class="text text-right">
41   - <p>DIALOGA<br><b>NAS REDES</b></p>
42   - </div>
43   - <ul class="social-share list-inline">
44   - <li>
45   - <a href="https://www.facebook.com/DialogaBrasil" target="_blank">
46   - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
47   - <span class="sr-only">Visitar perfil no Facebook</span>
48   - </a>
49   - </li>
50   - <li>
51   - <a href="https://twitter.com/dialogabrasil" target="_blank">
52   - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
53   - <span class="sr-only">Visitar perfil no Twitter</span>
54   - </a>
55   - </li>
56   - <li>
57   - <a href="https://www.youtube.com/channel/UCtjaJwOWwGu2legqFVAzhIA" target="_blank">
58   - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-youtube"><span class="icon icon-social-youtube"></span></span>
59   - <span class="sr-only">Visitar canal no Youtube</span>
60   - </a>
61   - </li>
62   - <li>
63   - <a href="https://www.flickr.com/photos/dialogabrasil" target="_blank">
64   - <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-flickr"><span class="icon icon-social-flickr"></span></span>
65   - <span class="sr-only">Visitar canal no Flickr</span>
66   - </a>
67   - </li>
68   - </ul>
69   - </div>
70   -</div>
src/app/components/navbar/navbar.scss
View file @ada42c1
... ... @@ -1,222 +0,0 @@
1   -.app-navbar {
2   -
3   - border-bottom: 2px solid #f1f1f1;
4   -
5   - .navbar {
6   - margin-bottom: 0;
7   - border: none;
8   - }
9   -
10   - .navbar-brand {
11   - height: auto;
12   - padding-bottom: 0;
13   - padding-left: 0;
14   -
15   - @media screen and (max-width: $screen-md) {
16   - padding: 20px 0;
17   - margin: 20px 0;
18   - }
19   - }
20   -
21   - .navbar-toggle {
22   - border-radius: 100%;
23   - background-color: #5e749d;
24   -
25   - .icon-bar {
26   - height: 3px;
27   - background-color: #fff;
28   - }
29   -
30   - @media screen and (max-width: $screen-md) {
31   - padding: 12px 10px;
32   - margin: 0;
33   - }
34   - }
35   -
36   - .navbar-nav .divider span {
37   - display: block;
38   -
39   - @media screen and (max-width: $screen-md) {
40   - display: none;
41   - }
42   - }
43   -
44   - .dropdown-menu {
45   - padding: 0;
46   - }
47   -
48   - .navbar-nav {
49   -
50   - li > a {
51   - text-transform: uppercase;
52   - color: #616161;
53   - font-weight: bold;
54   -
55   - &:hover,
56   - &:focus {
57   - background: none;
58   - }
59   -
60   - .contraste & {
61   - color: #fff;
62   - }
63   - }
64   -
65   - li.active > a {
66   - border-bottom: 2px solid #77BB34;
67   - }
68   - }
69   -
70   - .contraste & {
71   - .nav > li > a:hover,
72   - .nav > li > a:focus {
73   - color: #fff;
74   - }
75   -
76   - .active a {
77   - border-bottom-color: #fff;
78   - }
79   - }
80   -
81   - // <= Mobile
82   - @media screen and (max-width: ($screen-sm - 1)) {
83   - .navbar-collapse {
84   - margin: 0 -15px;
85   - }
86   -
87   - .navbar-nav {
88   - background-color: #eee;
89   -
90   - & > li {
91   - // border-top: 1px solid #ccc;
92   - -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
93   - -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
94   - border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
95   - border-image-slice: 1;
96   -
97   - border-top: 1px solid #ccc;
98   - border-bottom: 0px solid #ccc;
99   - border-left: 0px solid #ccc;
100   - border-right: 0px solid #ccc;
101   - &:last-child {
102   - border-bottom: 1px solid #ccc;
103   - }
104   - }
105   -
106   - & > li > a {
107   - padding: 12px 20px;
108   - margin: 0;
109   - text-align: right;
110   - }
111   -
112   - & > li.active > a {
113   - border-bottom: none;
114   - border-right: 4px solid #77BB34;
115   - }
116   -
117   - .dropdown-toggle {
118   - margin-top: 0px;
119   -
120   - }
121   - .dropdown-menu {
122   - position: relative;
123   - margin-right: 10px;
124   - }
125   -
126   - .social-share {
127   - float: right;
128   - }
129   - }
130   -
131   - }
132   -
133   - // >= Table, < Destop
134   - @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
135   - .navbar-brand {
136   - padding-top: 0;
137   - margin-top: 0;
138   - margin-bottom: 60px;
139   - }
140   -
141   - .navbar-collapse {
142   - position: absolute;
143   - left: 0;
144   - bottom: 0;
145   - width: 100%;
146   -
147   - ul.navbar-nav {
148   - width: 100%;
149   - float: none;
150   - }
151   -
152   - li > a {
153   - margin: 0 10px;
154   - padding: 0 0 10px 0;
155   - }
156   -
157   - li.dropdown {
158   - position: absolute;
159   - right: 0;
160   - bottom: 0;
161   -
162   - .dropdown-toggle {
163   - position: relative;
164   - width: 160px;
165   - margin: 0 5px 5px 0;
166   - padding: 0;
167   - }
168   - }
169   - }
170   - }
171   - // >= Desktop
172   - @media screen and (min-width: $screen-md) {
173   -
174   - li > a {
175   - padding: 15px 0;
176   - margin: 0 9px;
177   - }
178   -
179   - li.divider span{
180   - padding: 12px 0;
181   - line-height: 20px;
182   - }
183   -
184   - li.dropdown {
185   - .dropdown-toggle {
186   - padding: 6px 10px;
187   - margin: 0;
188   - }
189   - }
190   - }
191   -
192   - // > Desktop Large
193   - @media screen and (min-width: $screen-lg) {
194   - .navbar-brand {
195   - margin-bottom: 30px;
196   - }
197   -
198   - ul.navbar-nav {
199   - position: absolute;
200   - right: 0;
201   - bottom: 0;
202   - }
203   -
204   - li.divider span{
205   - padding: 12px 6px;
206   - }
207   - }
208   -}
209   -
210   -#dialoga-nas-redes {
211   - position: absolute;
212   - right: 0;
213   - top: 0;
214   - z-index: 1000;
215   -
216   - .text {
217   - position: absolute;
218   - top: 5px;
219   - right: 210px;
220   - width: 100px;
221   - }
222   -}