Andreas/tracks
1
0
Fork 0
mirror of https://github.com/TracksApp/tracks.git synced 2025-09-21 21:40:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

mobile tuning

Browse source 
change to make nav links even and consistent
  looking to make text bigger for fat fingers
  change to project nav
  adding images for arrows
This commit is contained in:
tim madden 2012-04-13 17:33:39 -05:00
parent 343a4a5846
commit d27ffb6ce0
5 changed files with 89 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/helpers/projects_helper.rb
View file

@ -32,16 +32,20 @@ module ProjectsHelper
end end
def project_next_prev_mobile def project_next_prev_mobile
html = '' html = '<ul class="next-prev-project">'
unless @previous_project.nil? unless @previous_project.nil?
project_name = truncate(@previous_project.name, :length => 40, :omission => "...") 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 end
html << ' | ' if @previous_project && @next_project
unless @next_project.nil? unless @next_project.nil?
project_name = truncate(@next_project.name, :length => 40, :omission => "...") 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 end
html << '</ul>'
html html
end end

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

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

BIN
public/stylesheets/images/next.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 366 B

BIN
public/stylesheets/images/previous.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 347 B

85
public/stylesheets/mobile.css
View file

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