Andreas/tracks
1
0
Fork 0
mirror of https://github.com/TracksApp/tracks.git synced 2025-12-16 23:30:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made some changes to the 'navigation bar' of all of the pages. Moved the 'toggle notes' link, add users (admin only) and logout links up to the top right corner, as they don't really fit with the other navigation links. The toggle notes link is now collapsed to one link which toggles, rather than a separate 'show' and 'hide' link (fixes #274).

Browse source 
Experimentally, I've made the whole top navigation section fixed so that it stays in place as the page scrolls, and it's black and slightly transparent to give it a different feel. I'm not sure if I like it or not, but it does make the links handily available.

I've also made the layout a bit more fluid to use the available width better. It's not quite right yet, but it works much better with wide displays (fixing #193) and also with narrow displays (fixing #262).



git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@245 a4c988fc-2ded-0310-b66e-134b36920a42
This commit is contained in:
bsag 2006-05-15 18:22:43 +00:00
parent 6ba235d5cc
commit c63833401d
3 changed files with 64 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

18
tracks/app/views/layouts/standard.rhtml
View file

@ -18,7 +18,8 @@
</head>
<body>
<div>
<div id="topbar">
<div id="date">
<h1>
<% if @count %>
<span id="badge_count" class="badge"><%= @count %></span>
@ -26,6 +27,14 @@
<%= Time.now.strftime("%A, %d %B %Y") %> <%= image_tag("spinner.gif", :size => "16X16", :border => 0, :id => 'busy', :style => 'display:none' ) %>
</h1>
</div>
<div id="minilinks">
<a href="javascript:toggleAll('notes')" accesskey="S" title="Toggle all notes">Toggle notes</a>&nbsp;|&nbsp;
<% if @user.is_admin? -%>
<%= link_to "Add users", :controller => "login", :action => "signup" %>&nbsp;|&nbsp;
<% end -%>
<%= link_to "Logout (#{@user.login}) »", :controller => "login", :action=>"logout"%>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><%= navigation_link("Home", {:controller => "todo", :action => "list"}, {:accesskey => "t", :title => "Home"} ) %></li>
@ -35,15 +44,10 @@
<li><%= navigation_link( "Done", {:controller => "todo", :action => "completed"}, {:accesskey=>"d", :title=>"Completed"} ) %></li>
<li><%= navigation_link( "Notes", {:controller => "note", :action => "index"}, {:accesskey => "o", :title => "Show all notes"} ) %></li>
<li><%= navigation_link( "Preferences", {:controller => "user", :action => "preferences"}, {:accesskey => "u", :title => "Show my preferences"} ) %></li>
<li><a href="javascript:toggleAll('notes','block')" accesskey="S" title="Show all notes">Show</a></li>
<li><a href="javascript:toggleAll('notes','none')" accesskey="H" title="Hide all notes">Hide</a></li>
<li><%= navigation_link(image_tag("feed-icon", :size => "16X16", :border => 0), {:controller => "todo", :action => "feeds"}, :title => "See a list of available feeds" ) %></li>
<% if @user.is_admin? -%>
<li><%= link_to "Add users", :controller => "login", :action => "signup" %>
<% end -%>
<li><%= link_to "Logout (#{@user.login}) &#187;", :controller => "login", :action=>"logout"%></li>
</ul>
</div>
</div>
<div id="info"></div>
<% unless @controller_name == 'feed' or session['noexpiry'] == "on" -%>
<%= periodically_call_remote( :url => {:controller => "login", :action => "check_expiry"},

11
tracks/public/javascripts/toggle_notes.js
View file

@ -1,7 +1,14 @@
function toggleAll(className,state) {
function toggleAll(className) {
var elems = document.getElementsByClassName(className);
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = state;
if (elems[i].style.display == 'block')
{
elems[i].style.display = 'none';
}
else
{
elems[i].style.display = 'block';
}
}
}

60
tracks/public/stylesheets/standard.css
View file

@ -53,37 +53,38 @@ a.show_notes:hover {background-image: url(../images/notes_on.png); background-re
#display_box {
float: left;
width: 450px;
width: 60%;
margin: 0px 15px 50px 15px;
}
#single_box {
width: 450px;
margin: 50px auto;
width: 60%;
margin: 80px auto;
}
#full_width_display {
float: left;
width: 800px;
margin: 0px 15px 50px 15px;
width: 95%;
margin: 90px 15px 90px 15px;
}
#display_box_projects {
float: left;
width: 820px;
margin: 0px 15px 50px 15px;
width: 95%;
margin: 90px 15px 90px 15px;
}
/* Navigation links at the top */
#navcontainer {
margin: 15px;
position: fixed;
top: 48px;
}
#navlist {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
padding: 0 0 20px 5px;
/* border-bottom: 1px solid #000;*/
}
#navlist ul, #navlist li {
@ -99,18 +100,45 @@ a.show_notes:hover {background-image: url(../images/notes_on.png); background-re
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
color: #eee;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
border-bottom: 4px solid #000;
border-bottom: 4px solid #CCC;
padding-bottom: 2px;
background: transparent;
color: #000;
color: #CCC;
}
#navlist a:hover { color: #000; }
#navlist a:hover { color: #CCC; }
#topbar {
position: fixed;
top: 0px;
left: 0px;
height: 68px;
clear: both;
background-color: #000;
filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
color: #eee;
}
#date {
float: left;
width: 45%;
padding-left: 15px;
}
#minilinks {
text-align: right;
position: fixed;
right: 15px;
top: 20px;
font-size: 0.9em;
}
.container {
padding: 0px 5px 0px 5px;
border: 1px solid #999;
@ -147,7 +175,7 @@ h2 a:hover {
}
#input_box {
margin: 20px 15px 0px 490px;
margin: 100px 5% 0% 65%;
padding: 0px 15px 0px 15px;
}