Commit 51995706ba401aad3b72146dc344e699476ceca8
1 parent
39020195
Exists in
master
and in
12 other branches
make navigation bar iterative
Showing
5 changed files
with
37 additions
and
22 deletions
Show diff stats
css/.style.css.swp
No preview for this file type
css/style.css
... | ... | @@ -95,13 +95,13 @@ nav li a { |
95 | 95 | text-transform: lowercase; |
96 | 96 | } |
97 | 97 | |
98 | -nav li a#active { | |
98 | +nav li a.active { | |
99 | 99 | position: relative; |
100 | 100 | background: #2997cc; |
101 | 101 | color: #fff; |
102 | 102 | } |
103 | 103 | |
104 | -nav li a#active:after { | |
104 | +nav li a.active:after { | |
105 | 105 | content: ""; |
106 | 106 | position: absolute; |
107 | 107 | bottom: -15px; |
... | ... | @@ -113,7 +113,7 @@ nav li a#active:after { |
113 | 113 | width: 0; |
114 | 114 | } |
115 | 115 | |
116 | -#proposal-categories { | |
116 | +#proposal-categories, #proposal-group { | |
117 | 117 | background: #f3f5f7; |
118 | 118 | clear: both; |
119 | 119 | margin: 0; |
... | ... | @@ -122,12 +122,12 @@ nav li a#active:after { |
122 | 122 | text-align: center; |
123 | 123 | } |
124 | 124 | |
125 | -#proposal-categories li { | |
125 | +#proposal-categories li, #proposal-group li { | |
126 | 126 | list-style: none; |
127 | 127 | display: inline-block; |
128 | 128 | } |
129 | 129 | |
130 | -#proposal-categories a { | |
130 | +#proposal-categories a, #proposal-group a { | |
131 | 131 | text-transform: lowercase; |
132 | 132 | text-decoration: none; |
133 | 133 | color: #fff; |
... | ... | @@ -151,12 +151,12 @@ nav li a#active:after { |
151 | 151 | border-color: #0e232e; |
152 | 152 | } |
153 | 153 | |
154 | -#proposal-categories a:hover { | |
154 | +#proposal-categories a:hover, #proposal-group a:hover { | |
155 | 155 | background-color: #244f68; |
156 | 156 | border-color: #f3f5f7; |
157 | 157 | } |
158 | 158 | |
159 | -#proposal-group, .proposal-item-hide { | |
159 | +.hide { | |
160 | 160 | display: none; |
161 | 161 | } |
162 | 162 | ... | ... |
index.html
... | ... | @@ -16,15 +16,15 @@ |
16 | 16 | <p>Estamos construindo o Plano Plurianual (PPA) para os próximos quatros anos. Queremos sua participação para definir o que é importante. O Brasil fica melhor quando todos participam. Faça uma sugestão para melhorar um programa, curta ideias de outros participantes e conte para nós sua experiência com iniciativas do governo. Aqui suas ideias viram propostas e você ajuda a melhorar o Brasil. Participe!</p> |
17 | 17 | </div> |
18 | 18 | |
19 | - <nav> | |
20 | - <ul> | |
21 | - <li><a href="#proposal-categories" id="active">Temas</a></li> | |
22 | - <li><a href="#proposal-group">Programas</a></li> | |
23 | - </ul> | |
24 | - </nav> | |
25 | - | |
26 | 19 | |
27 | 20 | <script id='proposal-template' type='text/x-handlebars-template'> |
21 | + <nav> | |
22 | + <ul> | |
23 | + <li><a href="#proposal-categories" class="active">Temas</a></li> | |
24 | + <li><a href="#proposal-group" class='inactive'>Programas</a></li> | |
25 | + </ul> | |
26 | + </nav> | |
27 | + | |
28 | 28 | <ul id="proposal-categories"> |
29 | 29 | <li><a href="" id="sau">Saúde</a></li> |
30 | 30 | <li><a href="" id="edu">Educação</a></li> |
... | ... | @@ -38,7 +38,7 @@ |
38 | 38 | <li><a href="" id="inf">Infraestrutura</a></li> |
39 | 39 | <li><a href="" id="eco">Economia</a></li> |
40 | 40 | <li><a href="" id="mei">Meio Ambiente</a></li> |
41 | - </div> | |
41 | + </ul> | |
42 | 42 | |
43 | 43 | <ul id="proposal-group"> |
44 | 44 | {{#each articles}} |
... | ... | @@ -48,9 +48,9 @@ |
48 | 48 | {{/each}} |
49 | 49 | </ul> |
50 | 50 | {{#each articles}} |
51 | - <div class='proposal-item-hide' id="proposal-item-{{id}}"> | |
51 | + <div class='proposal-detail' id="proposal-item-{{id}}"> | |
52 | 52 | <div class='title'>{{title}}</div> |
53 | - <spam>{{body}} </spam> | |
53 | + <span>{{body}}</span> | |
54 | 54 | </div> |
55 | 55 | {{/each}} |
56 | 56 | ... | ... |
js/handlebars-helpers.js
... | ... | @@ -2,7 +2,7 @@ Handlebars.registerHelper('link', function(text, url) { |
2 | 2 | text = Handlebars.Utils.escapeExpression(text); |
3 | 3 | url = Handlebars.Utils.escapeExpression(url); |
4 | 4 | |
5 | - var result = '<a id="#' + url + '" href="#' + url + '">' + text + '</a>'; | |
5 | + var result = '<a id="#' + url + '" href="#proposal-item-' + url + '">' + text + '</a>'; | |
6 | 6 | |
7 | 7 | return new Handlebars.SafeString(result); |
8 | 8 | }); | ... | ... |
js/main.js
... | ... | @@ -13,13 +13,28 @@ var noosferoAPI = 'http://localhost:3000/api/v1/articles?private_token=89419a2d3 |
13 | 13 | |
14 | 14 | $.getJSON(noosferoAPI) |
15 | 15 | .done(function( data ) { |
16 | - //console.log(data); | |
17 | 16 | resultsPlaceholder.innerHTML = template(data); |
18 | 17 | $( 'a' ).click(function(){ |
19 | -// resultsPlaceholder.innerHTML = $('#proposal-item-' + this.id.replace('#','')).html(); | |
20 | - resultsPlaceholder.innerHTML = $('#proposal-item-' + this.id.replace('#','')).html(); | |
18 | + var item = this.href.split('#').pop(); | |
19 | + if(item == 'proposal-categories'){ | |
20 | + $('#proposal-group').hide(); | |
21 | + var active_tab = $('nav ul li a.active').removeClass('active'); | |
22 | + var inactive_tab = $('nav ul li a.inactive').removeClass('inactive'); | |
23 | + inactive_tab.addClass('active'); | |
24 | + active_tab.addClass('inactive'); | |
25 | + }else if(item == 'proposal-group'){ | |
26 | + $('#proposal-categories').hide(); | |
27 | + var active_tab = $('nav ul li a.active').removeClass('active'); | |
28 | + var inactive_tab = $('nav ul li a.inactive').removeClass('inactive'); | |
29 | + inactive_tab.addClass('active'); | |
30 | + active_tab.addClass('inactive'); | |
31 | + }else{ | |
32 | + $('#proposal-categories').hide(); | |
33 | + $('#proposal-group').hide(); | |
34 | + } | |
35 | + $('.proposal-detail').hide(); | |
36 | + $('#' + item).show(); | |
21 | 37 | }); |
22 | - //console.log(resultsPlaceholder); | |
23 | 38 | }) |
24 | 39 | .fail(function( jqxhr, textStatus, error ) { |
25 | 40 | var err = textStatus + ", " + error; | ... | ... |