mirror of
https://github.com/TracksApp/tracks.git
synced 2025-09-21 21:40:48 +02:00
fix layout and modal issues
These were "regressions" after the bootstrap 3 migration
This commit is contained in:
Reinier Balt
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-id", settings.target_id)
|
||||
# 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
|
||||
dialog.on 'shown', ->
|
||||
dialog.on 'show.bs.modal', ->
|
||||
# twitter-typeahead adds span around search field with display:inline-block. This causes
|
||||
# the search field to ignore the width set in tracks.css
|
||||
$("span.twitter-typeahead").css("display", "block")
|
||||
|
||||
dialog.on 'shown.bs.modal', ->
|
||||
$("input#tracks-goto-item").focus()
|
||||
|
||||
# show the dialog
|
||||
dialog.modal()
|
||||
|
||||
|
|
@ -120,7 +123,7 @@ TracksApp =
|
|||
TracksApp.selectTodo($("div.todo-item").first())
|
||||
|
||||
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 )
|
||||
|
||||
toggleNoteOfTodo: (todo) ->
|
||||
|
|
@ -154,12 +157,12 @@ root = exports ? this
|
|||
root.TracksApp = TracksApp
|
||||
|
||||
$ ->
|
||||
$("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal()
|
||||
$("a.button-add-todo").click -> TracksApp.add_todo()
|
||||
$("a.button-home").click -> TracksApp.go_home()
|
||||
$("a.button-goto").click -> TracksApp.go_menu()
|
||||
$("span.todo-description-icons i.icon-book").click -> TracksApp.toggleNoteOfTodo( $(this).parent().parent().parent().parent().parent() )
|
||||
$("span.todo-item-description-container").click -> TracksApp.selectTodo( $(this).parent().parent().parent() )
|
||||
$("a#menu-keyboard-shotcuts").click -> $('div#tracks-shortcuts-dialog').modal()
|
||||
$("button.button-add-todo").click -> TracksApp.add_todo()
|
||||
$("button.button-home").click -> TracksApp.go_home()
|
||||
$("button.button-goto").click -> TracksApp.go_menu()
|
||||
$("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() )
|
||||
|
||||
autocompleteDataset = new Dataset
|
||||
limit: 7
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ body {
|
|||
div.tracks-main {
|
||||
background-color: #FFF;
|
||||
border-radius: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
|
@ -43,7 +44,7 @@ div.todo-item {
|
|||
margin-top: 7px;
|
||||
border: 3px solid #EEE;
|
||||
border-width: 0px 0px 1px 0px;
|
||||
padding: 0px 3px 0px 3px;
|
||||
padding: 0px 3px 0px 3px;
|
||||
min-height: none;
|
||||
line-height: none;
|
||||
|
||||
|
|
@ -82,7 +83,7 @@ div.todo-item {
|
|||
background-color: #EEE;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
margin: 0px -3px 0px -3px;
|
||||
margin: 0px 12px 0px -3px;
|
||||
}
|
||||
div.todo-sub-menu {
|
||||
margin-top: 5px;
|
||||
|
|
@ -117,6 +118,11 @@ span.tags {
|
|||
.label {
|
||||
margin-right: 1px;
|
||||
background-color: #BBB;
|
||||
}
|
||||
}
|
||||
|
||||
span.tags, div.tracks-todo-badges{
|
||||
span.label {
|
||||
a:hover, a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ module ApplicationHelper
|
|||
days_limited = 2 if days > 2
|
||||
|
||||
colors = [:warning, :warning, :warning, :info, :info, :info]
|
||||
color = :important if days < 0
|
||||
color = :default if days > 7
|
||||
color = :danger if days < 0
|
||||
color = :default if days > 7
|
||||
color = colors[days] if color.nil?
|
||||
|
||||
if prefs.due_style == Preference.due_styles[:due_on]
|
||||
|
|
@ -54,8 +54,8 @@ module ApplicationHelper
|
|||
"1" => t('todos.next_actions_due_date.due_tomorrow')
|
||||
})
|
||||
|
||||
return content_tag(:a, {:title => format_date(due)}) {
|
||||
content_tag(:span, {:class => "badge badge-#{color}"}) { due_text[days_limited.to_s] }
|
||||
return content_tag(:span, {:class => "label label-#{color}"}) {
|
||||
content_tag(:a, {:title => format_date(due)}) { due_text[days_limited.to_s] }
|
||||
}
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ module TodosHelper
|
|||
|
||||
def date_span(todo=@todo)
|
||||
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?
|
||||
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') } }
|
||||
|
|
@ -340,8 +340,8 @@ module TodosHelper
|
|||
end
|
||||
|
||||
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}") { text }
|
||||
content_tag(:span, :class => "label label-#{the_class.to_s}") do
|
||||
content_tag(:a, :title => format_date(date)) { text }
|
||||
end
|
||||
end
|
||||
|
||||
|
|
@ -356,7 +356,7 @@ module TodosHelper
|
|||
case days
|
||||
# overdue or due very soon! sound the alarm!
|
||||
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
|
||||
show_date_tag(d, :warning, t('todos.show_today'))
|
||||
when 1
|
||||
|
|
@ -364,9 +364,9 @@ module TodosHelper
|
|||
# due 2-7 days away
|
||||
when 2..7
|
||||
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
|
||||
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
|
||||
# more than a week away - relax
|
||||
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 class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">...</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-search" action="/goto" method="get" data-link="/goto">
|
||||
<input type="text" id="tracks-goto-item" class="input-medium search-query ajax-typeahead" placeholder="..."
|
||||
data-link="/from_go_item_dialog.autocomplete" autocomplete="off">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button class="btn btn-primary">Go to project</button>
|
||||
<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">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 id="myModalLabel">...</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="/goto" method="get" data-link="/goto" role="form">
|
||||
<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">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button class="btn btn-primary">Go to project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 class="modal-body">
|
||||
<div>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
<div id="tracks-shortcuts-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Keyboard Shortcuts</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<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">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title" id="tracks-keyboard-shortcuts">Keyboard Shortcuts</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul>
|
||||
<li><span class="badge">?</span>: Shows this help page</li>
|
||||
<li><span class="badge">a</span>: add action</li>
|
||||
<li><span class="badge">i</span>: show details of action or project</li>
|
||||
<li><span class="badge">?</span>: Shows this help page</li>
|
||||
<li><span class="badge">a</span>: add action</li>
|
||||
<li><span class="badge">i</span>: show details of action or project</li>
|
||||
</ul>
|
||||
<p>Navigation:</p>
|
||||
<ul>
|
||||
<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">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 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 the projects page</li>
|
||||
<li><span class="badge">j</span> or <span class="badge">k</span>: go to previous or next item</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">c</span>: go to a specific context</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">Shift-P</span>: go to the projects page</li>
|
||||
</ul>
|
||||
<p>Grouping of actions:</p>
|
||||
<ul>
|
||||
<li><span class="badge">v</span> then <span class="badge">p</span>: group the actions on the page by project</li>
|
||||
<li><span class="badge">v</span> then <span class="badge">c</span>: group the actions on the page by context</li>
|
||||
<li><span class="badge">v</span> then <span class="badge">p</span>: group the actions on the page by project</li>
|
||||
<li><span class="badge">v</span> then <span class="badge">c</span>: group the actions on the page by context</li>
|
||||
</ul>
|
||||
<p>Handling actions:</p>
|
||||
<ul>
|
||||
<li><span class="badge">n</span>: Toggle the notes of the selected action</li>
|
||||
<li><span class="badge">n</span>: Toggle the notes of the selected action</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,9 +57,14 @@
|
|||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<a class="btn btn-primary button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></a>
|
||||
<input type="text" class="form-control search-query" placeholder="Search">
|
||||
<button class="btn btn-primary btn-sm button-add-todo" title="Add a new action"><i class="fa fa-plus fa-lg"></i></button>
|
||||
<button class="btn btn-primary btn-sm button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></button>
|
||||
<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})") %>
|
||||
</form>
|
||||
</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 -%>
|
||||
<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} %>">
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<div class="col-md-8">
|
||||
<span class="todo-item-icons">
|
||||
<i class="fa <%= todo.completed? ? "fa-check-square-o" : "fa-square-o" %>"></i>
|
||||
<i class="fa <%= todo.starred? ? "fa-star" : "fa-star-o"%>"></i>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</small></p>
|
||||
</span>
|
||||
</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) -%>
|
||||
<%= tag_list(todo) %>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue