Andreas/tracks
1
0
Fork 0
mirror of https://github.com/TracksApp/tracks.git synced 2026-01-01 06:48:49 +01: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 • committed by Reinier Balt
parent 49c0ca6809
commit c424cdf0f9
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
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

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

@ -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>

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 {
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;
}