Commit 51995706ba401aad3b72146dc344e699476ceca8

Authored by Leandro Santos
1 parent 39020195

make navigation bar iterative

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(&#39;link&#39;, 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 = &#39;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;
... ...