mobile tuning

change to make nav links even and consistent
  looking to make text bigger for fat fingers
  change to project nav
  adding images for arrows

app/helpers/projects_helper.rb

@@ -32,16 +32,20 @@ module ProjectsHelper
   end
 
   def project_next_prev_mobile
-    html = ''
+    html = '<ul class="next-prev-project">'
     unless @previous_project.nil?
       project_name = truncate(@previous_project.name, :length => 40, :omission => "...")
-      html << link_to_project_mobile(@previous_project, "5", "&laquo; 5-#{project_name}")
+      html << '<li class="prev">'
+      html << link_to_project_mobile(@previous_project, "5", "#{project_name}")
+      html << '</li>'
     end
-    html << ' | ' if @previous_project && @next_project
     unless @next_project.nil?
       project_name = truncate(@next_project.name, :length => 40, :omission => "...")
-      html << link_to_project_mobile(@next_project, "6", "6-#{project_name} &raquo;")
+      html << '<li class="next">'
+      html << link_to_project_mobile(@next_project, "6", "#{project_name}")
+      html << '</li>'
     end
+    html << '</ul>'
     html
   end
 

app/views/layouts/mobile.m.erb

@@ -14,21 +14,21 @@
 <% 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 -%>
-<%=     (link_to(t('layouts.mobile_navigation.home'), todos_path(:format => 'm'))) unless @home -%>
-<%=     (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"})) -%>
+<ul class="nav">
+  <li class="link"><%=     (link_to(t('layouts.mobile_navigation.new_action'), new_todo_path(new_todo_params))) unless @new_mobile -%></li>
+  <li class="link"><%=     (link_to(t('layouts.mobile_navigation.home'), todos_path(:format => 'm'))) unless @home -%></li>
+  <li class="link"><%=     (link_to(t('layouts.mobile_navigation.contexts'), contexts_path(:format => 'm'))) -%></li>
+  <li class="link"><%=     (link_to(t('layouts.mobile_navigation.projects'), projects_path(:format => 'm'))) -%></li>
+  <li class="link"><%=     (link_to(t('layouts.mobile_navigation.starred'), {:action => "tag", :controller => "todos", :id => "starred.m"})) -%></li>
 <% end -%>
-</div></div>
+</ul></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'))) -%>
-<%= (link_to(t('layouts.mobile_navigation.tickler'), {:action => "index", :controller => "tickler.m"})) -%>
-<%= (link_to(t('layouts.mobile_navigation.feeds'), {:action => "index", :controller => "feeds.m"})) -%>
-</div>
+<ul class="nav">
+  <li class="link"><%= (link_to(t('layouts.mobile_navigation.logout'), logout_path(:format => 'm'))) -%></li>
+  <li class="link"><%= (link_to(t('layouts.mobile_navigation.tickler'), {:action => "index", :controller => "tickler.m"})) -%></li>
+  <li class="link"><%= (link_to(t('layouts.mobile_navigation.feeds'), {:action => "index", :controller => "feeds.m"})) -%></li>
+</ul>
 <% end -%>
 <%= render :partial => "shared/mobile_footer" -%>  
 </body></html>

public/stylesheets/mobile.css

@@ -1,22 +1,20 @@
 body {
     font-family: Arial,Helvetica,sans-serif;
-    font-size: smaller;
 }
 
 #content {
-    margin-top: 5em;
+    margin-top: 4em;
 }
 
 div.footer {
-    font-size: XX-small;
+    font-size: small;
     color: #999999;
     text-align: center;
-    }
+}
     
 a, a:link, a:active, a:visited {
     color: #CC3334;
-    padding-left: 1px;
-    padding-right: 1px;
+    padding: 0.25em;
     text-decoration: none;
 }
 
@@ -32,20 +30,20 @@ div.footer a {
 
 h1 {
   color: #fff;
-  font-size: small;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   padding-left:8px;
   margin-top:0;
   margin-bottom:0;
+  font-size:medium;
 }
 
 h2 {
   background-color: #aaaaaa;
-  font-size : small;
   margin: .3em 0;
   padding: .3em 0 .1em .3em;
   border-top: 1px solid #777777;
+  font-size:medium;
 }
 
 h2 a, h2 a:link, h2 a:active, h2 a:visited {
@@ -70,7 +68,7 @@ h4.warning  {
   color: #000;
 }
 h4.error  {
-   color:#fff; 
+   color:#fff;
    background:#c00;
 }
 h4.notice {
@@ -80,7 +78,7 @@ h4.notice {
 }
 
 span.tag {
-  font-size: x-small;
+  font-size: small;
   background-color: #CCE7FF;
   color: #000;
   padding: 1px;
@@ -88,12 +86,12 @@ span.tag {
 }
 
 span.r {
-    font-size: XX-small;
+    font-size: small;
     color: #777777;
 }
 
 span.prj, span.ctx{
-    font-size: X-small;    
+    font-size: small;    
 }
 
 #ctx, #pjr {
@@ -162,7 +160,7 @@ ul.c {
 }
 
 ul.c li {
-  padding: 0; 
+  padding: 0.25em 0;
   margin: 0;
 }
 
@@ -188,15 +186,16 @@ span.r {
 .nav {
   color: #fff;
   background: #000;
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding:0;
+  overflow:auto;
+  list-style:none;
+  margin:0;
 }
 
 .nav a, .nav a:link, .nav a:active, .nav a:visited {
     background: #666;
     color: #fff;
     padding: 0.5em;
-    margin-left:0.5em;
 }
 
 .nav a:focus, .nav a:hover, .nav a:active {
@@ -208,6 +207,17 @@ span.r {
     color: #CCCCCC;
 }
 
+.nav li.link {
+    width:20%;
+    float:left;
+    outline:black solid 1px;
+}
+.nav .link a {
+    font-size:small;
+    text-align:center;
+    display:block;
+}
+
 #database_auth_form table td {
   width:7em;
 }
@@ -223,3 +233,46 @@ table.c {
 input#todo_description, input#tag_list, textarea#todo_notes, select#todo_project_id, select#todo_context_id {
   width: 95%;
 }
+
+.next-prev-project {
+  overflow:auto;
+  padding:0;
+  margin:0;
+  list-style:none;
+}
+
+.prev,
+.next {
+  float:left;
+  width:50%;
+}
+
+.next {
+  float:right;
+}
+
+.prev a,
+.next a {
+  display:block;
+  height:1em;
+  overflow:hidden;
+}
+
+.prev a {
+  background: url(images/previous.png) left center no-repeat;
+  padding-left: 20px;
+}
+
+.prev a:hover {
+  background: #cc3334 url(images/previous.png) left center no-repeat;
+}
+
+.next a {
+  text-align:right;
+  background: url(images/next.png) right center no-repeat;
+  padding-right: 20px;
+}
+
+.next a:hover {
+  background: #cc3334 url(images/next.png) right center no-repeat;
+}