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; | ... | ... |