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

theming mobile layout to mirror standard layout styling

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
app/views/contexts/mobile_show_context.rhtml
View file

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

14
app/views/layouts/mobile.m.erb
View file

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

19
app/views/projects/project_mobile.rhtml
View file

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

2
app/views/todos/_mobile_actions.rhtml
View file

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

7
app/views/todos/_mobile_todo.rhtml
View file

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

10
app/views/todos/mobile_tag.rhtml
View file

@ -8,18 +8,18 @@
<%= render :partial => "contexts/mobile_context", :collection => @contexts_to_show -%> <%= render :partial => "contexts/mobile_context", :collection => @contexts_to_show -%>
<h2><%= t('todos.deferred_actions_with', :tag_name=> @tag_title) %></h2> <h2><%= t('todos.deferred_actions_with', :tag_name=> @tag_title) %></h2>
<% unless (@deferred.nil? or @deferred.size == 0) -%> <% 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" } -%> <%= render :partial => "todos/mobile_todo", :collection => @deferred, :locals => { :parent_container_type => "tag" } -%>
</table> </ul>
<% else -%> <% else -%>
<%= t('todos.no_deferred_actions_with', :tag_name => @tag_title) %> <%= t('todos.no_deferred_actions_with', :tag_name => @tag_title) %>
<% end -%> <% end -%>
<h2><%= t('todos.completed_actions_with', :tag_name => @tag_title) %></h2> <h2><%= t('todos.completed_actions_with', :tag_name => @tag_title) %></h2>
<% unless (@done.nil? or @done.size == 0) -%> <% 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" } %> <%= render :partial => "todos/mobile_todo", :collection => @done, :locals => { :parent_container_type => "tag" } %>
</table> </ul>
<% else -%> <% else -%>
<%= t('todos.no_completed_actions_with', :tag_name => @tag_title) %> <%= t('todos.no_completed_actions_with', :tag_name => @tag_title) %>
<% end -%> <% end -%>
</div> </div>

104
public/stylesheets/mobile.css
View file

@ -3,36 +3,41 @@ body {
font-size: smaller; font-size: smaller;
} }
#content {
margin-top: 50px;
}
div.footer { div.footer {
font-size: XX-small; font-size: XX-small;
color: #999999; color: #999999;
text-align: center; 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 { div.footer a {
text-decoration: underline; text-decoration: underline;
color: #999999; 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 { h1 {
color: #f00; color: #fff;
font-size: small; font-size: small;
margin-top:.3em; padding-top: 0.2em;
margin-bottom:.3em; padding-bottom: 0.2em;
padding-left:8px;
margin-top:0;
margin-bottom:0;
} }
h2 { h2 {
@ -43,6 +48,17 @@ h2 {
border-top: 1px solid #777777; 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 { h4.alert {
border: 1px solid #666666; border: 1px solid #666666;
text-align: center; text-align: center;
@ -79,6 +95,15 @@ span.r {
span.prj, span.ctx{ span.prj, span.ctx{
font-size: X-small; font-size: X-small;
} }
#ctx, #pjr {
margin: 0.5em 0;
}
#ctx a, #pjr a {
padding: 0.1em 0;
}
/* Draw attention to some text /* Draw attention to some text
Same format as traffic lights */ Same format as traffic lights */
.red { .red {
@ -118,8 +143,8 @@ span.prj, span.ctx{
.count { .count {
color: #fff; color: #fff;
background: #000; background: #f00;
font-size: medium; padding: 0.2em;
} }
.errors { .errors {
@ -149,7 +174,44 @@ span.r {
display:none; 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 { .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 { #database_auth_form table td {
@ -162,3 +224,7 @@ table.c {
.mobile-done { .mobile-done {
display:inline; display:inline;
} }
input#todo_description, input#tag_list, textarea#todo_notes, select#todo_project_id, select#todo_context_id {
width: 95%;
}