diff --git a/public_html/css/tag-list.css b/public_html/css/tag-list.css index 8543befa..facebc6d 100644 --- a/public_html/css/tag-list.css +++ b/public_html/css/tag-list.css @@ -1,12 +1,25 @@ #tag-list { + min-width: 15em; + max-width: 40em; + margin: 0 auto; text-align: center; } +#tag-list form { + float: left; + white-space: nowrap; +} #tag-list ul { + float: right; list-style-type: none; padding: 0; margin: 0; } +#tag-list .search:after { + display: block; + content: ''; + clear: both; +} #ta-list ul.order { margin: -0.5em -0.5em 0.5em -0.5em; @@ -21,13 +34,13 @@ } #tag-list table { - min-width: 20em; + width: 100%; text-align: left; margin: 1em auto; } -#tag-list th, -#tag-list td { +#tag-list th:not(:last-child), +#tag-list td:not(:last-child) { padding-right: 1.5em; } @@ -43,3 +56,10 @@ #tag-list .usages { text-align: center; } + +@media all and (max-width: 40em) { + #tag-list .implications, + #tag-list .suggestions { + display: none; + } +} diff --git a/public_html/js/Presenters/TagListPresenter.js b/public_html/js/Presenters/TagListPresenter.js index 8f8ffbcc..d8bea4f0 100644 --- a/public_html/js/Presenters/TagListPresenter.js +++ b/public_html/js/Presenters/TagListPresenter.js @@ -11,11 +11,16 @@ App.Presenters.TagListPresenter = function( topNavigationPresenter) { var $el = jQuery('#content'); + var $searchInput; var templates = {}; - function init(params, loaded) { + var params; + + function init(_params, loaded) { topNavigationPresenter.select('tags'); topNavigationPresenter.changeTitle('Tags'); + params = _params; + params.query = params.query || {}; promise.wait( util.promiseTemplate('tag-list'), @@ -44,7 +49,8 @@ App.Presenters.TagListPresenter = function( }); } - function reinit(params, loaded) { + function reinit(_params, loaded) { + params = _params; params.query = params.query || {}; params.query.order = params.query.order || 'name,asc'; updateActiveOrder(params.query.order); @@ -55,7 +61,12 @@ App.Presenters.TagListPresenter = function( $el.find('table a').eq(0).focus(); }); + keyboard.keyup('q', function() { + $searchInput.eq(0).focus().select(); + }); + loaded(); + softRender(); } function deinit() { @@ -64,6 +75,33 @@ App.Presenters.TagListPresenter = function( function render() { $el.html(templates.list()); + $searchInput = $el.find('input[name=query]'); + $searchInput.keydown(searchInputKeyPressed); + $el.find('form').submit(searchFormSubmitted); + softRender(); + } + + function softRender() { + $searchInput.val(params.query.query); + } + + + function searchInputKeyPressed(e) { + if (e.which !== KEY_RETURN) { + return; + } + updateSearch(); + } + + function searchFormSubmitted(e) { + e.preventDefault(); + updateSearch(); + } + + function updateSearch() { + $searchInput.blur(); + params.query.query = $searchInput.val().trim(); + pagerPresenter.setQuery(params.query); } function updateActiveOrder(activeOrder) { diff --git a/public_html/templates/tag-list.tpl b/public_html/templates/tag-list.tpl index 2a866d3a..e012a85a 100644 --- a/public_html/templates/tag-list.tpl +++ b/public_html/templates/tag-list.tpl @@ -1,15 +1,22 @@