Make the header responsive and hide everything besides the brand name at 940px or less.

This commit is contained in:
Roland Jesse 2012-06-01 23:52:51 +02:00
parent 0b3b1cdc85
commit 093f09d993

View file

@ -1,32 +1,42 @@
<%# .btn-navbar is used as the toggle for collapsed navbar content %>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand"><span class="logo_contact">Contact</span><span class="logo_o-rama">-o-Rama</span></a>
<ul class="nav pull-left">
<% if nav_active == "overview" %>
<li class="active">
<% else %>
<li>
<% end %>
<%= link_to 'A..Z', contacts_path %></li>
<% if nav_active == "birthdays" %>
<%# The rest we want hidden at 940px or less %>
<div class="nav-collapse">
<ul class="nav pull-left">
<% if nav_active == "overview" %>
<li class="active">
<% else %>
<% else %>
<li>
<% end %>
<%= link_to 'Birthdays', birthdays_path %></li>
<% end %>
<%= link_to 'A..Z', contacts_path %></li>
<% if nav_active == "new_contact" %>
<% if nav_active == "birthdays" %>
<li class="active">
<% else %>
<% else %>
<li>
<% end %>
<%= link_to 'New', new_contact_path %></li>
</ul>
<% end %>
<%= link_to 'Birthdays', birthdays_path %></li>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<%# We shouldn't be seeing logged out users here, as the controller sends them to the login page first. %>
<% if nav_active == "new_contact" %>
<li class="active">
<% else %>
<li>
<% end %>
<%= link_to 'New', new_contact_path %></li>
</ul>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<%# We shouldn't be seeing logged out users here, as the controller sends them to the login page first. %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#">
<%= current_user.email %>
<b class="caret"></b>
</a>
@ -35,5 +45,6 @@
<li><a href="#">dummy</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
<li class="divider-vertical"></li>
</ul>
</div>