theming mobile layout to mirror standard layout styling

the span with class m_t and m_t_d and its styling are no longer needed
  mobile todo lists need to be wrapped in ul element. fixing up missing or unclosed
This commit is contained in:
Tim Madden 2011-11-22 09:42:21 -06:00 committed by tim madden
parent 8ed13fc6c2
commit eaa4a46359
7 changed files with 113 additions and 45 deletions

View file

@ -7,10 +7,8 @@ if not @not_done.empty?
%>
<h2><%=@context.name%></h2>
<ul class="c">
<table cellpadding="0" cellspacing="0" border="0" class="c">
<%= render :partial => "todos/mobile_todo",
:collection => @not_done,
:locals => { :parent_container_type => "context" }-%>
</table>
</ul>
<% end -%>

View file

@ -7,13 +7,12 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale = 1.0" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<%= stylesheet_link_tag "mobile", :media => 'handheld,all' %>
<title><%= @page_title %></title>
</head><body>
<% if !(@new_mobile || @edit_mobile)
if current_user && !current_user.prefs.nil? -%>
<h1><span class="count" id="badge_count"><%= @down_count %></span> <%=
<% if current_user && !current_user.prefs.nil? -%>
<div id="topbar"><h1><% if @down_count -%><span class="count" id="badge_count"><%= @down_count %></span><% end -%> <%=
l(Date.today, :format => current_user.prefs.title_date_format) -%></h1>
<div class="nav">
<%= (link_to(t('layouts.mobile_navigation.new_action'), new_todo_path(new_todo_params))+" | ") unless @new_mobile -%>
@ -21,10 +20,9 @@
<%= (link_to(t('layouts.mobile_navigation.contexts'), contexts_path(:format => 'm'))+" | ") -%>
<%= (link_to(t('layouts.mobile_navigation.projects'), projects_path(:format => 'm'))+" | ") -%>
<%= (link_to(t('layouts.mobile_navigation.starred'), {:action => "tag", :controller => "todos", :id => "starred.m"})) -%>
<% end
end -%><%= render_flash -%>
</div>
<%= yield -%>
<% end -%>
</div></div>
<div id="content"><%= render_flash -%><%= yield -%></div>
<hr/><% if current_user && !current_user.prefs.nil? -%>
<div class="nav">
<%= (link_to(t('layouts.mobile_navigation.logout'), logout_path(:format => 'm')) +" | ") -%>

View file

@ -5,20 +5,29 @@
<div class="project_description"><%= sanitize(@project.description) %></div>
<% end -%>
<ul class="c">
<%= render :partial => "todos/mobile_todo", :collection => @not_done, :locals => { :parent_container_type => "project" }%>
<%= render :partial => "todos/mobile_todo",
:collection => @not_done,
:locals => { :parent_container_type => "project" }%>
</ul>
<h2><%= t('projects.deferred_actions')%></h2>
<% if @deferred.empty? -%>
<%= t('projects.deferred_actions_empty') %>
<% else -%>
<%= render :partial => "todos/mobile_todo", :collection => @deferred, :locals => { :parent_container_type => "project" }%>
<% end
<ul class="c">
<%= render :partial => "todos/mobile_todo",
:collection => @deferred,
:locals => { :parent_container_type => "project" }%>
</ul><% end
-%>
<h2><%= t('projects.completed_actions')%></h2>
<% if @done.empty? -%>
<%= t('projects.completed_actions_empty') %>
<% else -%>
<%= render :partial => "todos/mobile_todo", :collection => @done, :locals => { :parent_container_type => "project" }%>
<% end %>
<ul class="c">
<%= render :partial => "todos/mobile_todo",
:collection => @done,
:locals => { :parent_container_type => "project" }%>
</ul><% end %>
<h2><%= t('projects.notes') %></h2>
<% if @project.notes.empty? -%>
<%= t('projects.notes_empty') %>

View file

@ -5,5 +5,7 @@
<% end -%>
<% unless @done.nil? -%>
<h2><%= t('todos.completed_actions') %></h2>
<ul class="c">
<%= render :partial => "todos/mobile_todo", :collection => @done %>
</ul>
<% end %>

View file

@ -1,10 +1,5 @@
<% @todo = mobile_todo -%>
<li id="<%= dom_id(mobile_todo) %>" ><%
if mobile_todo.completed?
-%><span class="m_t_d">
<% else
-%><span class="m_t">
<% end -%>
<li id="<%= dom_id(mobile_todo) %>" >
<% remote_mobile_checkbox(mobile_todo) %>
<%= date_span -%> <%= link_to mobile_todo.description, todo_path(mobile_todo, :format => 'm') -%>
<% unless mobile_todo.notes.blank? %>

View file

@ -8,17 +8,17 @@
<%= render :partial => "contexts/mobile_context", :collection => @contexts_to_show -%>
<h2><%= t('todos.deferred_actions_with', :tag_name=> @tag_title) %></h2>
<% unless (@deferred.nil? or @deferred.size == 0) -%>
<table cellpadding="0" cellspacing="0" border="0">
<ul class="c">
<%= render :partial => "todos/mobile_todo", :collection => @deferred, :locals => { :parent_container_type => "tag" } -%>
</table>
</ul>
<% else -%>
<%= t('todos.no_deferred_actions_with', :tag_name => @tag_title) %>
<% end -%>
<h2><%= t('todos.completed_actions_with', :tag_name => @tag_title) %></h2>
<% unless (@done.nil? or @done.size == 0) -%>
<table cellpadding="0" cellspacing="0" border="0">
<ul class="c">
<%= render :partial => "todos/mobile_todo", :collection => @done, :locals => { :parent_container_type => "tag" } %>
</table>
</ul>
<% else -%>
<%= t('todos.no_completed_actions_with', :tag_name => @tag_title) %>
<% end -%>

View file

@ -3,36 +3,41 @@ body {
font-size: smaller;
}
#content {
margin-top: 50px;
}
div.footer {
font-size: XX-small;
color: #999999;
text-align: center;
}
a, a:link, a:active, a:visited {
color: #CC3334;
padding-left: 1px;
padding-right: 1px;
text-decoration: none;
}
a:hover {
background-color: #CC3334;
color: #FFFFFF;
}
div.footer a {
text-decoration: underline;
color: #999999;
}
.m_t_d a {
text-decoration: none;
color: #000000;
}
.m_t_d a:hover {
text-decoration: underline;
color: #0000FF;
}
.m_t_d .red, .m_t_d .amber, .m_t_d .orange, .m_t_d .green{
background-color: #999999;
}
h1 {
color: #f00;
color: #fff;
font-size: small;
margin-top:.3em;
margin-bottom:.3em;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left:8px;
margin-top:0;
margin-bottom:0;
}
h2 {
@ -43,6 +48,17 @@ h2 {
border-top: 1px solid #777777;
}
h2 a, h2 a:link, h2 a:active, h2 a:visited {
color: #666666;
text-decoration: none;
}
h2 a:hover {
background-color: transparent;
color: #CC3334;
text-decoration: none;
}
h4.alert {
border: 1px solid #666666;
text-align: center;
@ -79,6 +95,15 @@ span.r {
span.prj, span.ctx{
font-size: X-small;
}
#ctx, #pjr {
margin: 0.5em 0;
}
#ctx a, #pjr a {
padding: 0.1em 0;
}
/* Draw attention to some text
Same format as traffic lights */
.red {
@ -118,8 +143,8 @@ span.prj, span.ctx{
.count {
color: #fff;
background: #000;
font-size: medium;
background: #f00;
padding: 0.2em;
}
.errors {
@ -149,7 +174,44 @@ span.r {
display:none;
}
#topbar {
background-color: #000000;
clear: both;
color: #EEEEEE;
height: 45px;
left: 0;
margin-bottom: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 501;
}
.nav {
color: #fff;
background: #000;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
#topbar .nav {
padding-left:8px;
margin-bottom:0.3em;
}
.nav a, .nav a:link, .nav a:active, .nav a:visited {
color: #fff;
padding-top: 1.0em;
padding-bottom: 0.5em;
}
.nav a:focus, .nav a:hover, .nav a:active {
background: transparent;
text-decoration: underline;
}
.nav li:hover, .nav a:focus, .nav a:hover, .nav a:active {
color: #CCCCCC;
}
#database_auth_form table td {
@ -162,3 +224,7 @@ table.c {
.mobile-done {
display:inline;
}
input#todo_description, input#tag_list, textarea#todo_notes, select#todo_project_id, select#todo_context_id {
width: 95%;
}