From 22a9519bd720fef54ec0903f333eda22cb5bd276 Mon Sep 17 00:00:00 2001
From: lukemelia <lukemelia@a4c988fc-2ded-0310-b66e-134b36920a42>
Date: Wed, 18 Apr 2007 06:45:09 +0000
Subject: [PATCH] I did some CSS work on the appearance of Tracks. Nothing
 major, just some subtle improvements, hopefully. Haven't checked it out
 outside of Firefox yet.

git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@537 a4c988fc-2ded-0310-b66e-134b36920a42
---
 tracks/app/views/projects/_project.rhtml      |   2 +-
 .../app/views/shared/_add_new_item_form.rhtml |  36 +++--
 tracks/app/views/todos/completed.rhtml        |   6 +-
 tracks/public/images/container-gradient.png   | Bin 0 -> 138 bytes
 tracks/public/images/new-action-gradient.png  | Bin 0 -> 161 bytes
 tracks/public/javascripts/todo-items.js       |  20 +++
 tracks/public/stylesheets/standard.css        | 144 ++++++++++++++----
 7 files changed, 164 insertions(+), 44 deletions(-)
 create mode 100644 tracks/public/images/container-gradient.png
 create mode 100644 tracks/public/images/new-action-gradient.png

diff --git a/tracks/app/views/projects/_project.rhtml b/tracks/app/views/projects/_project.rhtml
index df79822a..ad0db62f 100644
--- a/tracks/app/views/projects/_project.rhtml
+++ b/tracks/app/views/projects/_project.rhtml
@@ -8,7 +8,7 @@
     <span class="in_place_editor_field" id="project_name_in_place_editor"><%= project.name %></span>
     <%= in_place_editor 'project_name_in_place_editor', { :url => { :controller => 'projects', :action => 'update', :id => project.id, :field => 'name', :wants_render => false, :escape => false}  , :options=>"{method:'put'}" } %>
   </h2>
-  <% if @project.description -%>
+  <% unless @project.description.blank? -%>
     <div class="project_description"><%= sanitize(@project.description) %></div>
   <% end -%>
   
diff --git a/tracks/app/views/shared/_add_new_item_form.rhtml b/tracks/app/views/shared/_add_new_item_form.rhtml
index 7e3b0473..8869ecf0 100644
--- a/tracks/app/views/shared/_add_new_item_form.rhtml
+++ b/tracks/app/views/shared/_add_new_item_form.rhtml
@@ -5,10 +5,18 @@
   @initial_context_name ||= @contexts[0].name unless @contexts[0].nil?
   @initial_project_name = @project.name unless @project.nil?
 %>
+<div id="todo_new_action_container">
 
-<%= link_to_function("Add a next action &#187;",
-                     "Element.toggle('todo_new_action');Form.focusFirstElement('todo-form-new-action');",
-                     {:title => "Add a next action", :accesskey => "n"}) %>
+<div id="show_todo_new_action" style="display:none">
+  <%= link_to_function("Add a next action &#187;",
+                       "todoItems.showNewActionForm();return false;",
+                       {:title => "Add a next action"}) %>
+</div>
+<div id="hide_todo_new_action" style="display:block">
+  <%= link_to_function("&laquo; Hide form",
+                       "todoItems.hideNewActionForm();return false;",
+                       {:title => "Hide next action form", :accesskey => "n"}) %>
+                     </div>
 
 <div id="todo_new_action" class="context_new" style="display:block">
 
@@ -20,13 +28,13 @@
 <div id="status"><%= error_messages_for("item") %></div>
 
 <label for="todo_description">Description</label>
-<%= text_field( "todo", "description", "size" => 25, "tabindex" => 1) %>
+<%= text_field( "todo", "description", "size" => 30, "tabindex" => 1) %>
 
 <label for="todo_notes">Notes</label>
-<%= text_area( "todo", "notes", "cols" => 25, "rows" => 6, "tabindex" => 2) %>
+<%= text_area( "todo", "notes", "cols" => 29, "rows" => 6, "tabindex" => 2) %>
 
 <label for="todo_project_name">Project</label>
-<input id="todo_project_name" name="project_name" autocomplete="off" tabindex="3" size="25" type="text" value="<%= @initial_project_name %>" />
+<input id="todo_project_name" name="project_name" autocomplete="off" tabindex="3" size="30" type="text" value="<%= @initial_project_name %>" />
 <div class="page_name_auto_complete" id="project_list" style="display:none"></div>
 
 <script type="text/javascript">
@@ -44,7 +52,7 @@ Event.observe($('todo_project_name'), "blur", selectDefaultContext.bind($('todo_
 </script>
 
 <label for="todo_context_name">Context</label>
-<input id="todo_context_name" name="context_name" autocomplete="off" tabindex="4" size="25" type="text" value="<%= @initial_context_name %>" />
+<input id="todo_context_name" name="context_name" autocomplete="off" tabindex="4" size="30" type="text" value="<%= @initial_context_name %>" />
 <div class="page_name_auto_complete" id="context_list" style="display:none"></div>
 
 <script type="text/javascript">
@@ -56,19 +64,25 @@ Event.observe($('todo_context_name'), "click", contextAutoCompleter.activate.bin
 </script>
 
 <label for="tag_list">Tags (separate with commas)</label>
-<%= text_field_tag "tag_list", nil, :size => 40, :tabindex => 5 %> 
+<%= text_field_tag "tag_list", nil, :size => 30, :tabindex => 5 %> 
 
+<div class="due_input">
 <label for="todo_due">Due</label>
-<%= text_field("todo", "due", "size" => 10, "class" => "Date", "onfocus" => "Calendar.setup", "tabindex" => 6, "autocomplete" => "off") %>
+<%= text_field("todo", "due", "size" => 12, "class" => "Date", "onfocus" => "Calendar.setup", "tabindex" => 6, "autocomplete" => "off") %>
+</div>
 
+<div class="show_from_input">
 <label for="todo_show_from">Show from</label>
-  <%= text_field("todo", "show_from", "size" => 10, "class" => "Date", "onfocus" => "Calendar.setup", "tabindex" => 7, "autocomplete" => "off") %>
+  <%= text_field("todo", "show_from", "size" => 12, "class" => "Date", "onfocus" => "Calendar.setup", "tabindex" => 7, "autocomplete" => "off") %>
+</div>
+
 
 <%= source_view_tag( @source_view ) %>
-<div class="submit_box"><input type="submit" value="Add item" tabindex="8" /></div>
+<div class="submit_box"><input type="submit" value="Add action" tabindex="8" /></div>
 <% end -%><!--[eoform:todo]-->
 
                   
 <%= calendar_setup( "todo_due"  ) %>
 <%= calendar_setup( "todo_show_from"  ) %>
 </div><!-- [end:todo-new-action] -->
+</div>
\ No newline at end of file
diff --git a/tracks/app/views/todos/completed.rhtml b/tracks/app/views/todos/completed.rhtml
index 2086db79..72b9eb15 100644
--- a/tracks/app/views/todos/completed.rhtml
+++ b/tracks/app/views/todos/completed.rhtml
@@ -2,21 +2,21 @@
 <p>You have completed <%= pluralize @done_today.length, 'action' %> so far today.</p>
 <div class="container">
   <h2>Completed in the last 24 hours</h2>
-  <table class="next_actions" cellspacing="5" cellpadding="0" border="0">
+  <table class="next_actions" border="0">
     <%= render :partial => "done", :collection => @done_today %>
   </table>
 </div>
 
 <div class="container">
   <h2>Completed in last 7 days</h2>
-  <table class="next_actions" cellspacing="5" cellpadding="0" border="0">
+  <table class="next_actions" border="0">
     <%= render :partial => "done", :collection => @done_this_week %>
   </table>
 </div>
 
 <div class="container">
   <h2>Completed in the last 28 days</h2>
-  <table class="next_actions" cellspacing="5" cellpadding="0" border="0">
+  <table class="next_actions" border="0">
     <%= render :partial => "done", :collection => @done_this_month %>
   </table>
 </div>
diff --git a/tracks/public/images/container-gradient.png b/tracks/public/images/container-gradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4043a786a65883f395dc5b56aec03cb78a7b0ce
GIT binary patch
literal 138
zcmeAS@N?(olHy`uVBq!ia0vp^zkryPg9%7J_DWj@qyjx%978JRyq#po$DqK$-2J~^
zs=p}J;Ff}#+847++3IKRGBOw#vpm|_dFk2ixkdKjisco(>*L*yPZ1PK%Pl{-Vy^I`
n^e^ug309R~<k-7A;|R-zZl)`9A|tYahBJ7&`njxgN@xNAfxa<s

literal 0
HcmV?d00001

diff --git a/tracks/public/images/new-action-gradient.png b/tracks/public/images/new-action-gradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b12897d91b60c35309b063496d98643d32f2d8a
GIT binary patch
literal 161
zcmV;S0ABxzP)<h;3K|Lk000e1NJLTq000F500EE)0ssI2>Crv*0001JNkl<Zc%1E!
zu?+wq48thm{||dhSz%&8q9IK;4=6U~?rpi=_B-*2h@1Df{CdAyZ}xt*UUZ-Aefe<v
z$rqd1`_zxc`fstAhliOV`LJ{K|7P$1txvw(e)7TENAr2TU#&NL|F_-=186w=tO#xa
P00000NkvXXu0mjf%Fjqm

literal 0
HcmV?d00001

diff --git a/tracks/public/javascripts/todo-items.js b/tracks/public/javascripts/todo-items.js
index 09ee89f9..41f13f27 100644
--- a/tracks/public/javascripts/todo-items.js
+++ b/tracks/public/javascripts/todo-items.js
@@ -162,7 +162,27 @@ ToDoItems.prototype = {
   		parentElem = parentElem.parentNode;
   	}
   	return null;
+  },
+
+  showNewActionForm: function()
+  {
+	Element.show('todo_new_action');
+	Element.hide('show_todo_new_action');
+	$('show_todo_new_action').down('a').accessKey = '';
+	$('hide_todo_new_action').down('a').accessKey = 'n';
+	Element.show('hide_todo_new_action');
+	Form.focusFirstElement('todo-form-new-action');
+  },
+
+  hideNewActionForm: function()
+  {
+	Element.hide('todo_new_action');
+	Element.hide('hide_todo_new_action');
+	$('hide_todo_new_action').down('a').accessKey = '';
+	$('show_todo_new_action').down('a').accessKey = 'n';
+	Element.show('show_todo_new_action');
   }
+
 }
 
 todoItems = new ToDoItems();
diff --git a/tracks/public/stylesheets/standard.css b/tracks/public/stylesheets/standard.css
index 8f022713..17e83206 100644
--- a/tracks/public/stylesheets/standard.css
+++ b/tracks/public/stylesheets/standard.css
@@ -1,9 +1,37 @@
-/* Stylesheet for the main listing page */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img { 
+	border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+	font-style:normal;
+	font-weight:normal;
+}
+ol,ul {
+	list-style:none;
+}
+caption,th {
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after {
+	content:'';
+}
+abbr,acronym { border:0;
+}
 
 body {
       font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
-      font-size: 12px;
-      line-height: 140%;
+      font-size: 85%;
       padding: 0px 10px;
       margin: 0px;
       background: #eee;
@@ -11,6 +39,8 @@ body {
 
 p {
       padding: 2px;
+      font-size: 92%;
+      line-height: 140%;
       }
 
 a, a:link, a:active, a:visited {
@@ -24,7 +54,22 @@ a:hover {
       color: #fff;
       background-color: #cc3334;
       } 
-      
+
+h1 {
+	font-size: 304%;
+	font-weight: bold;
+}
+
+h2 {
+	font-size: 148%;
+	font-weight: bold;
+}
+
+h3 {
+	font-size: 129%;
+	font-weight: bold;
+}
+
 /* Rules for the icon links */
 
 img.edit_item {background-image: url(../images/edit_off.png); background-repeat: no-repeat; border: none;}
@@ -57,7 +102,7 @@ a.show_notes:hover, a.link_to_notes:hover {background-image: url(../images/notes
 #display_box {
       float: left;
       width: 55%;
-      margin: 0px 15px 50px 15px;
+      margin: 0px 10px 50px 15px;
       }
 
 #single_box {
@@ -136,12 +181,12 @@ a.show_notes:hover, a.link_to_notes:hover {background-image: url(../images/notes
       float: left;
       width: 45%;
       padding-left: 15px;
+      margin-top: 15px;
       margin-bottom: 5px;
       white-space: nowrap; /* added 2006-05-17 for safari display, timfm */ 
       }
 #date h1 {
-      font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
-      font-size: 14pt;
+      font-size: 152%;
       }
       
 #minilinks {
@@ -158,9 +203,16 @@ a.show_notes:hover, a.link_to_notes:hover {background-image: url(../images/notes
       margin: 0px 0px 15px 0px;
       background: #fff; 
       }
+
+.completed {
+    background: #eee; 	
+}
       
 .container h2 {
-      background: #CCC;
+      background: #ccc;
+      background-image: url('/images/container-gradient.png');
+      background-repeat: repeat-y;
+      background-position: right;
       padding: 5px;
       margin-top: 0px;
       margin-left: -5px;
@@ -188,7 +240,7 @@ h2 a:hover {
       }
       
 div#input_box {
-      margin: 0% 5% 0% 60%;
+      margin: 0px 15px 0px 58%;
       padding: 0px 15px 0px 0px;
       }
 
@@ -199,13 +251,27 @@ div#input_box {
 
 #input_box ul {list-style-type: circle; font-size: 0.9em;}
 
+#input_box .show_from_input, #input_box .due_input {
+	float:left;
+	width:50%;
+}
+
+#input_box .submit_box {
+	width:100%;
+	text-align:center;
+}
+
+#input_box .submit_box input {
+	margin-top:10px;
+}
+
 .box {
       float: left;
       width: 20px;
       }
 
 div.item-container {
-      padding: 3px;
+      padding: 3px 0px;
       clear: both;
       }
       
@@ -223,9 +289,6 @@ input.item-checkbox {
 
 .description {
       margin-left: 70px;
-      margin-right: 10px;
-      _margin-left: 0px; 
-      _margin-right: 0px;
       }
 
 .stale_l1, .stale_l2, .stale_l3 {
@@ -245,7 +308,7 @@ input.item-checkbox {
             
 #footer {
       clear: both;
-      font-size: 0.8em;
+      font-size: 85%;
       text-align: center;
       color: #999;
       margin: 20px 20px 5px 20px;
@@ -302,6 +365,7 @@ div.note_footer a, div.note_footer a:hover {
       }
 
 div.add_note_link {
+	margin-top:12px;
 	float: right;
 	}
 div#project_status > div {
@@ -391,35 +455,35 @@ h4.notice {
       color: #fff;
       background: #f00;
       padding: 1px;
-      font-size: 10px;
+      font-size: 85%;
       }
       
 .amber {
       color: #fff;
       background: #ff6600;
       padding: 1px;
-      font-size: 10px;
+      font-size: 85%;
       }
          
 .orange {
       color: #fff;
       background: #FFA500;
       padding: 1px;
-      font-size: 10px;
+      font-size: 85%;
       }
 
 .green {
       color: #fff;
       background: #33cc00;
       padding: 1px;
-      font-size: 10px;
+      font-size: 85%;
       }
       
 .grey {
       color: #fff;
       background: #999;
-      padding: 1px;
-      font-size: 10px;
+      padding: 2px;
+      font-size: 85%;
       }
       
 .info {
@@ -463,6 +527,11 @@ h4.notice {
 ul {
       list-style-type: none;
       }
+
+#sidebar h3 {
+	margin-top:15px;
+	margin-bottom:5px;
+}
       
 #sidebar ul {
       margin-left: auto;
@@ -502,10 +571,6 @@ input {
 
 /* Positioning the 'cells' in the list */
 
-.position {
-    float: left;
-    }
-
 img.position, a:hover img.position {
     text-align: left;
     vertical-align: middle;
@@ -529,7 +594,9 @@ div#list-active-projects, div#list-hidden-projects, div#list-completed-projects,
     clear:right;
 	border: 1px solid #999;
     }
-
+.project-state-group h2 {
+	margin:20px 0px 8px 13px;
+}
 div.alpha_sort {
 	margin-top:-20px;
 	float:right;
@@ -589,6 +656,17 @@ form {
 .inline-form table td.label {
     width: 13ex;
     }
+#todo_new_action_container {
+	background:#ddd;
+	width:270px;
+	padding:5px;
+	background-image: url('/images/new-action-gradient.png');
+    background-repeat: repeat-x;
+    background-position: top;
+}
+#hide_todo_new_action {
+	text-align:right;
+}
 #todo-form-new-action label {
     display:block;
 }
@@ -604,7 +682,7 @@ label {
     padding: 0px 0px;
     }
     
-input, select {
+input, select, textarea {
     margin: 0px 0px 5px 0px;
     }
     
@@ -622,12 +700,16 @@ input, select {
     }
     
 /* Classes for Drag and Drop */
+.position {
+    float: left;
+	margin-top:2px;
+    }
 .handle {
     color: #fff;
     background: #000;
-    padding: 1px;
-    font-size: 10px;
-    cursor: move;    
+    padding: 2px;
+    font-size: 92%;
+    cursor: move;
 }
 
 div.message {
@@ -774,6 +856,10 @@ div.page_name_auto_complete ul strong.highlight {
 	padding: 0;
 }
 
+table.next_actions td {
+	padding:5px 3px 2px 0px;
+}
+
 table.users_table {
   width: 100%;
   text-align: center;