mirror of
https://github.com/TracksApp/tracks.git
synced 2025-12-21 01:30:12 +01:00
fix layout and modal issues
These were "regressions" after the bootstrap 3 migration
This commit is contained in:
parent
29acdc5a9d
commit
2f13da8bff
9 changed files with 89 additions and 65 deletions
|
|
@ -48,13 +48,16 @@ TracksApp =
|
||||||
dialog.find("form").attr("data-link", settings.target_link)
|
dialog.find("form").attr("data-link", settings.target_link)
|
||||||
dialog.find("form").attr("data-id", settings.target_id)
|
dialog.find("form").attr("data-id", settings.target_id)
|
||||||
# set title of dialog
|
# set title of dialog
|
||||||
dialog.find("h3#myModalLabel").html(settings.title)
|
dialog.find("h4#myModalLabel").html(settings.title)
|
||||||
# set focus to input field when dialog is shown
|
# set focus to input field when dialog is shown
|
||||||
dialog.on 'shown', ->
|
dialog.on 'show.bs.modal', ->
|
||||||
# twitter-typeahead adds span around search field with display:inline-block. This causes
|
# twitter-typeahead adds span around search field with display:inline-block. This causes
|
||||||
# the search field to ignore the width set in tracks.css
|
# the search field to ignore the width set in tracks.css
|
||||||
$("span.twitter-typeahead").css("display", "block")
|
$("span.twitter-typeahead").css("display", "block")
|
||||||
|
|
||||||
|
dialog.on 'shown.bs.modal', ->
|
||||||
$("input#tracks-goto-item").focus()
|
$("input#tracks-goto-item").focus()
|
||||||
|
|
||||||
# show the dialog
|
# show the dialog
|
||||||
dialog.modal()
|
dialog.modal()
|
||||||
|
|
||||||
|
|
@ -120,7 +123,7 @@ TracksApp =
|
||||||
TracksApp.selectTodo($("div.todo-item").first())
|
TracksApp.selectTodo($("div.todo-item").first())
|
||||||
|
|
||||||
noteOfTodo: (todo) ->
|
noteOfTodo: (todo) ->
|
||||||
notes_id = todo.find("i.icon-book").attr("data-note-id")
|
notes_id = todo.find("i.fa-book").attr("data-note-id")
|
||||||
$("div#" + notes_id )
|
$("div#" + notes_id )
|
||||||
|
|
||||||
toggleNoteOfTodo: (todo) ->
|
toggleNoteOfTodo: (todo) ->
|
||||||
|
|
@ -155,10 +158,10 @@ root.TracksApp = TracksApp
|
||||||
|
|
||||||
$ ->
|
$ ->
|
||||||
$("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal()
|
$("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal()
|
||||||
$("a.button-add-todo").click -> TracksApp.add_todo()
|
$("button.button-add-todo").click -> TracksApp.add_todo()
|
||||||
$("a.button-home").click -> TracksApp.go_home()
|
$("button.button-home").click -> TracksApp.go_home()
|
||||||
$("a.button-goto").click -> TracksApp.go_menu()
|
$("button.button-goto").click -> TracksApp.go_menu()
|
||||||
$("span.todo-description-icons i.icon-book").click -> TracksApp.toggleNoteOfTodo( $(this).parent().parent().parent().parent().parent() )
|
$("span.todo-description-icons i.fa-book").click -> TracksApp.toggleNoteOfTodo( $(this).parent().parent().parent().parent().parent() )
|
||||||
$("span.todo-item-description-container").click -> TracksApp.selectTodo( $(this).parent().parent().parent() )
|
$("span.todo-item-description-container").click -> TracksApp.selectTodo( $(this).parent().parent().parent() )
|
||||||
|
|
||||||
autocompleteDataset = new Dataset
|
autocompleteDataset = new Dataset
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ body {
|
||||||
div.tracks-main {
|
div.tracks-main {
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
@ -82,7 +83,7 @@ div.todo-item {
|
||||||
background-color: #EEE;
|
background-color: #EEE;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0px -3px 0px -3px;
|
margin: 0px 12px 0px -3px;
|
||||||
}
|
}
|
||||||
div.todo-sub-menu {
|
div.todo-sub-menu {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
|
@ -117,6 +118,11 @@ span.tags {
|
||||||
.label {
|
.label {
|
||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
background-color: #BBB;
|
background-color: #BBB;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.tags, div.tracks-todo-badges{
|
||||||
|
span.label {
|
||||||
a:hover, a:focus {
|
a:hover, a:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ module ApplicationHelper
|
||||||
days_limited = 2 if days > 2
|
days_limited = 2 if days > 2
|
||||||
|
|
||||||
colors = [:warning, :warning, :warning, :info, :info, :info]
|
colors = [:warning, :warning, :warning, :info, :info, :info]
|
||||||
color = :important if days < 0
|
color = :danger if days < 0
|
||||||
color = :default if days > 7
|
color = :default if days > 7
|
||||||
color = colors[days] if color.nil?
|
color = colors[days] if color.nil?
|
||||||
|
|
||||||
|
|
@ -54,8 +54,8 @@ module ApplicationHelper
|
||||||
"1" => t('todos.next_actions_due_date.due_tomorrow')
|
"1" => t('todos.next_actions_due_date.due_tomorrow')
|
||||||
})
|
})
|
||||||
|
|
||||||
return content_tag(:a, {:title => format_date(due)}) {
|
return content_tag(:span, {:class => "label label-#{color}"}) {
|
||||||
content_tag(:span, {:class => "badge badge-#{color}"}) { due_text[days_limited.to_s] }
|
content_tag(:a, {:title => format_date(due)}) { due_text[days_limited.to_s] }
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -239,7 +239,7 @@ module TodosHelper
|
||||||
|
|
||||||
def date_span(todo=@todo)
|
def date_span(todo=@todo)
|
||||||
if todo.completed?
|
if todo.completed?
|
||||||
content_tag(:span, {class: "label"}) { format_date( todo.completed_at ) }
|
content_tag(:span, {class: "label label-default"}) { format_date( todo.completed_at ) }
|
||||||
elsif todo.pending?
|
elsif todo.pending?
|
||||||
title = t('todos.depends_on')+ ": " + todo.uncompleted_predecessors.to_a.map(&:description).join(', ')
|
title = t('todos.depends_on')+ ": " + todo.uncompleted_predecessors.to_a.map(&:description).join(', ')
|
||||||
content_tag(:a, {:title => title}) { content_tag(:span, {:class => :orange}) { t('todos.pending') } }
|
content_tag(:a, {:title => title}) { content_tag(:span, {:class => :orange}) { t('todos.pending') } }
|
||||||
|
|
@ -340,8 +340,8 @@ module TodosHelper
|
||||||
end
|
end
|
||||||
|
|
||||||
def show_date_tag(date, the_class, text)
|
def show_date_tag(date, the_class, text)
|
||||||
content_tag(:a, :title => format_date(date)) do
|
content_tag(:span, :class => "label label-#{the_class.to_s}") do
|
||||||
content_tag(:span, :class => "label label-#{the_class.to_s}") { text }
|
content_tag(:a, :title => format_date(date)) { text }
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
@ -356,7 +356,7 @@ module TodosHelper
|
||||||
case days
|
case days
|
||||||
# overdue or due very soon! sound the alarm!
|
# overdue or due very soon! sound the alarm!
|
||||||
when -1000..-1
|
when -1000..-1
|
||||||
show_date_tag(d, :important, t('todos.scheduled_overdue', :days => (days * -1).to_s))
|
show_date_tag(d, :danger, t('todos.scheduled_overdue', :days => (days * -1).to_s))
|
||||||
when 0
|
when 0
|
||||||
show_date_tag(d, :warning, t('todos.show_today'))
|
show_date_tag(d, :warning, t('todos.show_today'))
|
||||||
when 1
|
when 1
|
||||||
|
|
@ -364,9 +364,9 @@ module TodosHelper
|
||||||
# due 2-7 days away
|
# due 2-7 days away
|
||||||
when 2..7
|
when 2..7
|
||||||
if prefs.due_style == Preference.due_styles[:due_on]
|
if prefs.due_style == Preference.due_styles[:due_on]
|
||||||
show_date_tag(d, :important, t('todos.show_on_date', :date => d.strftime("%A")) )
|
show_date_tag(d, :danger, t('todos.show_on_date', :date => d.strftime("%A")) )
|
||||||
else
|
else
|
||||||
show_date_tag(d, :important, t('todos.show_in_days', :days => days.to_s) )
|
show_date_tag(d, :danger, t('todos.show_in_days', :days => days.to_s) )
|
||||||
end
|
end
|
||||||
# more than a week away - relax
|
# more than a week away - relax
|
||||||
else
|
else
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,22 @@
|
||||||
<div id="tracks-go-item-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
<div id="tracks-go-item-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 id="myModalLabel">...</h3>
|
<h4 id="myModalLabel">...</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="form-search" action="/goto" method="get" data-link="/goto">
|
<form action="/goto" method="get" data-link="/goto" role="form">
|
||||||
<input type="text" id="tracks-goto-item" class="input-medium search-query ajax-typeahead" placeholder="..."
|
<div class="form-group">
|
||||||
|
<input type="text" id="tracks-goto-item" class="form-control input-medium search-query ajax-typeahead" placeholder="..."
|
||||||
data-link="/from_go_item_dialog.autocomplete" autocomplete="off">
|
data-link="/from_go_item_dialog.autocomplete" autocomplete="off">
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||||
<button class="btn btn-primary">Go to project</button>
|
<button class="btn btn-primary">Go to project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 class="modal-title" id="tracks-goto-dialog-title">Go to...</h3>
|
<h4 class="modal-title" id="tracks-goto-dialog-title">Go to...</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn" data-dismiss="modal">Close</button>
|
<button class="btn btn-primary" data-dismiss="modal">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<div id="tracks-shortcuts-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
<div id="tracks-shortcuts-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tracks-keyboard-shortcuts" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 id="myModalLabel">Keyboard Shortcuts</h3>
|
<h4 class="modal-title" id="tracks-keyboard-shortcuts">Keyboard Shortcuts</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -12,12 +14,12 @@
|
||||||
<p>Navigation:</p>
|
<p>Navigation:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><span class="badge">j</span> or <span class="badge">k</span>: go to previous or next item</li>
|
<li><span class="badge">j</span> or <span class="badge">k</span>: go to previous or next item</li>
|
||||||
<li><span class="badge">G</span>: show list of project and contexts</li>
|
<li><span class="badge">Shift-G</span>: show list of project and contexts</li>
|
||||||
<li><span class="badge">g</span> then <span class="badge">h</span>: go to the home page</li>
|
<li><span class="badge">g</span> then <span class="badge">h</span>: go to the home page</li>
|
||||||
<li><span class="badge">g</span> then <span class="badge">c</span>: go to a specific context</li>
|
<li><span class="badge">g</span> then <span class="badge">c</span>: go to a specific context</li>
|
||||||
<li><span class="badge">g</span> then <span class="badge">C</span>: go to the contexts page</li>
|
<li><span class="badge">g</span> then <span class="badge">Shift-C</span>: go to the contexts page</li>
|
||||||
<li><span class="badge">g</span> then <span class="badge">p</span>: go to a specific project</li>
|
<li><span class="badge">g</span> then <span class="badge">p</span>: go to a specific project</li>
|
||||||
<li><span class="badge">g</span> then <span class="badge">P</span>: go to the projects page</li>
|
<li><span class="badge">g</span> then <span class="badge">Shift-P</span>: go to the projects page</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Grouping of actions:</p>
|
<p>Grouping of actions:</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -30,6 +32,8 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,9 +57,14 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="navbar-form navbar-right" role="form">
|
<form class="navbar-form navbar-right" role="form">
|
||||||
<a class="btn btn-primary button-add-todo" title="Add a new action"><i class="fa fa-plus fa-lg"></i></a>
|
<button class="btn btn-primary btn-sm button-add-todo" title="Add a new action"><i class="fa fa-plus fa-lg"></i></button>
|
||||||
<a class="btn btn-primary button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></a>
|
<button class="btn btn-primary btn-sm button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></button>
|
||||||
<input type="text" class="form-control search-query" placeholder="Search">
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default"type="button"><i class="fa fa-search"></i></button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<%= link_to("<i class='fa fa-sign-out'></i>".html_safe, logout_path, title: "#{t('common.logout')} (#{current_user.display_name})") %>
|
<%= link_to("<i class='fa fa-sign-out'></i>".html_safe, logout_path, title: "#{t('common.logout')} (#{current_user.display_name})") %>
|
||||||
</form>
|
</form>
|
||||||
</div><%# //.navbar-collapse %>
|
</div><%# //.navbar-collapse %>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<% cache [todo, current_user.date.strftime("%Y%m%d"), @source_view, current_user.prefs.verbose_action_descriptors] do -%>
|
<% cache [todo, current_user.date.strftime("%Y%m%d"), @source_view, current_user.prefs.verbose_action_descriptors] do -%>
|
||||||
<div id="<%= dom_id(todo) %>" class="todo-item"
|
<div id="<%= dom_id(todo) %>" class="todo-item container-fluid"
|
||||||
data-info="<%= render partial: "todos/todo_info", locals: {todo: todo} %>">
|
data-info="<%= render partial: "todos/todo_info", locals: {todo: todo} %>">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span8">
|
<div class="col-md-8">
|
||||||
<span class="todo-item-icons">
|
<span class="todo-item-icons">
|
||||||
<i class="fa <%= todo.completed? ? "fa-check-square-o" : "fa-square-o" %>"></i>
|
<i class="fa <%= todo.completed? ? "fa-check-square-o" : "fa-square-o" %>"></i>
|
||||||
<i class="fa <%= todo.starred? ? "fa-star" : "fa-star-o"%>"></i>
|
<i class="fa <%= todo.starred? ? "fa-star" : "fa-star-o"%>"></i>
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
</small></p>
|
</small></p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="span4 pull-right hidden-phone tracks-todo-badges">
|
<div class="col-md-4 pull-right hidden-phone tracks-todo-badges">
|
||||||
<%= date_span(todo) -%>
|
<%= date_span(todo) -%>
|
||||||
<%= tag_list(todo) %>
|
<%= tag_list(todo) %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue