From f40b41093273fb1659b008b3a3228e44db73c705 Mon Sep 17 00:00:00 2001 From: Rowan Hogan Date: Sat, 10 Sep 2016 15:22:16 -0400 Subject: [PATCH] Basic keyboard navigation for search input --- app/scripts/components/eventHandlers.js | 69 ++++++++---- app/styles/_app.scss | 10 +- app/styles/_default.scss | 3 + app/styles/_main.scss | 140 ++++++++++++------------ 4 files changed, 123 insertions(+), 99 deletions(-) diff --git a/app/scripts/components/eventHandlers.js b/app/scripts/components/eventHandlers.js index 6ec5fe9..32d533c 100644 --- a/app/scripts/components/eventHandlers.js +++ b/app/scripts/components/eventHandlers.js @@ -6,6 +6,54 @@ var handleFont = require('./handleFont'); var debounce = require('./debounce'); var lastScrollTop = 55; +var searchForm = debounce(function(e) { + e.preventDefault(); + var query = $('.search-form').find('input').val(); + handleSearch(query, 'en'); +}, 300); + +$(document).on('keyup', '.search-form', function(e) { + var keyPressed = e.which, + $form = $('.search-form'); + + if (keyPressed === 27) { + e.preventDefault(); + $form.find('.search-results').remove(); + } + + if (keyPressed === 38 || keyPressed === 40) { + e.preventDefault(); + + var $activeLi = $form.find('.search-results li.active'); + + if ($activeLi.length) { + $activeLi.removeClass('active'); + + if (keyPressed === 38) { + $activeLi.prev().addClass('active'); + } else { + $activeLi.next().addClass('active'); + } + } else { + $form.find('.search-results li:first-child').addClass('active'); + } + } else { + searchForm(e); + } +}); + +$(document).on('submit', '.search-form', function(e) { + e.preventDefault(); + + var $activeLi = $('.search-form .search-results li.active'); + + if ($activeLi.length) { + window.location.assign($activeLi.find('a').attr('href')); + } else { + window.location.search = $(this).find('input').val().replace(/ /g, "_") + } +}); + $(document).on('scroll', function(e) { var st = $(window).scrollTop(); @@ -24,7 +72,6 @@ $(document).on('scroll', function(e) { } }); - $(document).on('click', '.page-title', function(e) { e.preventDefault(); @@ -54,26 +101,6 @@ $(document).on('keyup', '#custom-styles-input', function(e) { localStorage.setItem('customStyles', styles); }); -$(document).on('submit', '.search-form', function(e) { - e.preventDefault(); - - if (false) { - // Do nothing - } else { - window.location.search = $(this).find('input').val().replace(/ /g, "_") - } -}); - -var searchForm = debounce(function(e) { - e.preventDefault(); - - var query = $('.search-form').find('input').val(); - handleSearch(query, 'en'); -}, 300) - -$(document).on('keyup', '.search-form', searchForm); - - $(document).on('change', '#theme-changer input', function(e) { e.preventDefault(); diff --git a/app/styles/_app.scss b/app/styles/_app.scss index 35df6f7..1cc6bee 100644 --- a/app/styles/_app.scss +++ b/app/styles/_app.scss @@ -106,12 +106,12 @@ body { text-indent: 0; line-height: 3em; height: auto; + } - &:hover, &.active { - background: #ddd; - color: black; - text-decoration: none; - } + &:hover a, &.active a { + background: #ddd; + color: black; + text-decoration: none; } } } diff --git a/app/styles/_default.scss b/app/styles/_default.scss index e1d4fd5..ea12985 100644 --- a/app/styles/_default.scss +++ b/app/styles/_default.scss @@ -162,7 +162,10 @@ div.columns dd dd { .hlist dd:after, .hlist li:after { content: " \2022 "; + font-size: 10px; + font-family: monospace; font-weight: bold; + margin-left: 6px; } .hlist dd:last-child:after, diff --git a/app/styles/_main.scss b/app/styles/_main.scss index 8f8999d..d9e50f7 100644 --- a/app/styles/_main.scss +++ b/app/styles/_main.scss @@ -26,8 +26,11 @@ #content { font-size: 1em; - max-width: 800px; - margin: auto; + + #mp-right { + margin: auto !important; + max-width: 800px; + } .mw-headline { margin: 0; @@ -68,90 +71,81 @@ padding: 2em $padding !important; box-sizing: border-box; - @media (min-width: 769px) { - #mp-tfa-img { - margin-right: 3em !important; - } - } - - @media (max-width: 768px) { + &.has-bg-image { + color: white !important; + background: #334 !important; - &.has-bg-image { + a { color: white !important; - background: #334 !important; + } - a { - color: white !important; + > p { + max-height: 300px; + max-width: 480px; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 3em; + line-height: 1.667em; + text-align: justify; + -webkit-text-fill-color: transparent; + background: -webkit-linear-gradient(white, transparent 60%); + -webkit-background-clip: text; + // max-width: 600px; + margin: 1em auto; + } + + > #mp-tfa-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + bottom: 0; + margin: 0 !important; + z-index: 0; + overflow: hidden; + background-size: cover; + background-position: center; + opacity: .6; + + .thumbcaption { + display: none; } - > p { - max-height: 300px; - max-width: 480px; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 3em; - line-height: 1.667em; - text-align: justify; - -webkit-text-fill-color: transparent; - background: -webkit-linear-gradient(white, transparent 60%); - -webkit-background-clip: text; - // max-width: 600px; - margin: 1em auto; + a { + display: none; + pointer-events: none; } - > #mp-tfa-img { + img { + display: block; + height: 100vh; + width: auto !important; + max-width: 10000000px; position: absolute; - top: 0; - left: 0; - width: 100%; - bottom: 0; - margin: 0 !important; - z-index: 0; - overflow: hidden; - background-size: cover; - background-position: center; - opacity: .6; - - .thumbcaption { - display: none; - } - - a { - display: none; - pointer-events: none; - } - - img { - display: block; - height: 100vh; - width: auto !important; - max-width: 10000000px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - opacity: .5; - } + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: .5; } } + } - > * { - position: relative; - z-index: 10; - } + > * { + position: relative; + z-index: 10; + } - > ul { - text-align: center !important; - position: absolute; - bottom: 2em; - left: 0; - right: 0; - padding: 0 2em; + > ul { + text-align: center !important; + position: absolute; + bottom: 2em; + left: 0; + right: 0; + padding: 0 2em; - .hlist { - display: block; - font-size: 14px; - } + .hlist { + display: block; + font-size: 14px; } }