From c63833401da2d0fbb96e8ed38f088cb7936da048 Mon Sep 17 00:00:00 2001 From: bsag Date: Mon, 15 May 2006 18:22:43 +0000 Subject: [PATCH] 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). 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 --- tracks/app/views/layouts/standard.rhtml | 18 ++++--- tracks/public/javascripts/toggle_notes.js | 11 ++++- tracks/public/stylesheets/standard.css | 60 +++++++++++++++++------ 3 files changed, 64 insertions(+), 25 deletions(-) diff --git a/tracks/app/views/layouts/standard.rhtml b/tracks/app/views/layouts/standard.rhtml index cc326a12..c750a862 100644 --- a/tracks/app/views/layouts/standard.rhtml +++ b/tracks/app/views/layouts/standard.rhtml @@ -18,7 +18,8 @@ -
+
+

<% if @count %> <%= @count %> @@ -26,6 +27,14 @@ <%= Time.now.strftime("%A, %d %B %Y") %> <%= image_tag("spinner.gif", :size => "16X16", :border => 0, :id => 'busy', :style => 'display:none' ) %>

+ + +
<% unless @controller_name == 'feed' or session['noexpiry'] == "on" -%> <%= periodically_call_remote( :url => {:controller => "login", :action => "check_expiry"}, diff --git a/tracks/public/javascripts/toggle_notes.js b/tracks/public/javascripts/toggle_notes.js index ac45f6bf..d2cfbbb9 100644 --- a/tracks/public/javascripts/toggle_notes.js +++ b/tracks/public/javascripts/toggle_notes.js @@ -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'; + } } } diff --git a/tracks/public/stylesheets/standard.css b/tracks/public/stylesheets/standard.css index b610fb96..fa70827a 100644 --- a/tracks/public/stylesheets/standard.css +++ b/tracks/public/stylesheets/standard.css @@ -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; }