mirror of
https://github.com/TracksApp/tracks.git
synced 2026-01-28 19:56:11 +01:00
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
This commit is contained in:
lukemelia
parent
274cdba18c
commit
22a9519bd7
7 changed files with 164 additions and 44 deletions
|
|
@ -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 -%>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 »",
|
||||
"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 »",
|
||||
"todoItems.showNewActionForm();return false;",
|
||||
{:title => "Add a next action"}) %>
|
||||
</div>
|
||||
<div id="hide_todo_new_action" style="display:block">
|
||||
<%= link_to_function("« 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
BIN
tracks/public/images/container-gradient.png
Normal file
BIN
tracks/public/images/container-gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
BIN
tracks/public/images/new-action-gradient.png
Normal file
BIN
tracks/public/images/new-action-gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 B |
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue