Download as
Browse Code »

Commit 51995706ba401aad3b72146dc344e699476ceca8

Authored by Leandro Santos
1 parent 39020195
Exists in master and in 12 other branches build, build2, capa, captcha, contigency_plan_recaptcha, jasmine-testing, login, make_harder_to_vote_twice, production, refactory-sass, session_cookie, staging

make navigation bar iterative

Showing 5 changed files with 37 additions and 22 deletions   Show diff stats
css/.style.css.swp
View file @5199570
No preview for this file type
@@ -95,13 +95,13 @@ nav li a { @@ -95,13 +95,13 @@ nav li a {
95 text-transform: lowercase; 95 text-transform: lowercase;
96 } 96 }
97 97
98 -nav li a#active { 98 +nav li a.active {
99 position: relative; 99 position: relative;
100 background: #2997cc; 100 background: #2997cc;
101 color: #fff; 101 color: #fff;
102 } 102 }
103 103
104 -nav li a#active:after { 104 +nav li a.active:after {
105 content: ""; 105 content: "";
106 position: absolute; 106 position: absolute;
107 bottom: -15px; 107 bottom: -15px;
@@ -113,7 +113,7 @@ nav li a#active:after { @@ -113,7 +113,7 @@ nav li a#active:after {
113 width: 0; 113 width: 0;
114 } 114 }
115 115
116 -#proposal-categories { 116 +#proposal-categories, #proposal-group {
117 background: #f3f5f7; 117 background: #f3f5f7;
118 clear: both; 118 clear: both;
119 margin: 0; 119 margin: 0;
@@ -122,12 +122,12 @@ nav li a#active:after { @@ -122,12 +122,12 @@ nav li a#active:after {
122 text-align: center; 122 text-align: center;
123 } 123 }
124 124
125 -#proposal-categories li { 125 +#proposal-categories li, #proposal-group li {
126 list-style: none; 126 list-style: none;
127 display: inline-block; 127 display: inline-block;
128 } 128 }
129 129
130 -#proposal-categories a { 130 +#proposal-categories a, #proposal-group a {
131 text-transform: lowercase; 131 text-transform: lowercase;
132 text-decoration: none; 132 text-decoration: none;
133 color: #fff; 133 color: #fff;
@@ -151,12 +151,12 @@ nav li a#active:after { @@ -151,12 +151,12 @@ nav li a#active:after {
151 border-color: #0e232e; 151 border-color: #0e232e;
152 } 152 }
153 153
154 -#proposal-categories a:hover { 154 +#proposal-categories a:hover, #proposal-group a:hover {
155 background-color: #244f68; 155 background-color: #244f68;
156 border-color: #f3f5f7; 156 border-color: #f3f5f7;
157 } 157 }
158 158
159 -#proposal-group, .proposal-item-hide { 159 +.hide {
160 display: none; 160 display: none;
161 } 161 }
162 162
@@ -16,15 +16,15 @@ @@ -16,15 +16,15 @@
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> 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 </div> 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 <script id='proposal-template' type='text/x-handlebars-template'> 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 <ul id="proposal-categories"> 28 <ul id="proposal-categories">
29 <li><a href="" id="sau">Saúde</a></li> 29 <li><a href="" id="sau">Saúde</a></li>
30 <li><a href="" id="edu">Educação</a></li> 30 <li><a href="" id="edu">Educação</a></li>
@@ -38,7 +38,7 @@ @@ -38,7 +38,7 @@
38 <li><a href="" id="inf">Infraestrutura</a></li> 38 <li><a href="" id="inf">Infraestrutura</a></li>
39 <li><a href="" id="eco">Economia</a></li> 39 <li><a href="" id="eco">Economia</a></li>
40 <li><a href="" id="mei">Meio Ambiente</a></li> 40 <li><a href="" id="mei">Meio Ambiente</a></li>
41 - </div> 41 + </ul>
42 42
43 <ul id="proposal-group"> 43 <ul id="proposal-group">
44 {{#each articles}} 44 {{#each articles}}
@@ -48,9 +48,9 @@ @@ -48,9 +48,9 @@
48 {{/each}} 48 {{/each}}
49 </ul> 49 </ul>
50 {{#each articles}} 50 {{#each articles}}
51 - <div class='proposal-item-hide' id="proposal-item-{{id}}"> 51 + <div class='proposal-detail' id="proposal-item-{{id}}">
52 <div class='title'>{{title}}</div> 52 <div class='title'>{{title}}</div>
53 - <spam>{{body}} </spam> 53 + <span>{{body}}</span>
54 </div> 54 </div>
55 {{/each}} 55 {{/each}}
56 56
js/handlebars-helpers.js
  Diff comments   View file @5199570
@@ -2,7 +2,7 @@ Handlebars.registerHelper(&#39;link&#39;, function(text, url) { @@ -2,7 +2,7 @@ Handlebars.registerHelper(&#39;link&#39;, function(text, url) {
2 text = Handlebars.Utils.escapeExpression(text); 2 text = Handlebars.Utils.escapeExpression(text);
3 url = Handlebars.Utils.escapeExpression(url); 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 return new Handlebars.SafeString(result); 7 return new Handlebars.SafeString(result);
8 }); 8 });
@@ -13,13 +13,28 @@ var noosferoAPI = &#39;http://localhost:3000/api/v1/articles?private_token=89419a2d3 @@ -13,13 +13,28 @@ var noosferoAPI = &#39;http://localhost:3000/api/v1/articles?private_token=89419a2d3
13 13
14 $.getJSON(noosferoAPI) 14 $.getJSON(noosferoAPI)
15 .done(function( data ) { 15 .done(function( data ) {
16 - //console.log(data);  
17 resultsPlaceholder.innerHTML = template(data); 16 resultsPlaceholder.innerHTML = template(data);
18 $( 'a' ).click(function(){ 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 .fail(function( jqxhr, textStatus, error ) { 39 .fail(function( jqxhr, textStatus, error ) {
25 var err = textStatus + ", " + error; 40 var err = textStatus + ", " + error;