diff --git a/css/profile-image.css b/css/profile-image.css index 06914bb..11af593 100644 --- a/css/profile-image.css +++ b/css/profile-image.css @@ -8,7 +8,7 @@ pointer-events: initial; margin: 0 auto; - margin-bottom: 90px; + margin-bottom: 110px; position: relative; flex-flow: column wrap; diff --git a/css/suggestions.css b/css/suggestions.css index 16d3826..9817b3e 100644 --- a/css/suggestions.css +++ b/css/suggestions.css @@ -50,11 +50,12 @@ height: auto; - /*Always center horizontally*/ + /*Always stack and center horizontally*/ /*display: table-cell;*/ /*width: auto;*/ /*text-align: center;*/ + /*Always stack and center vertically*/ display: inline-flex; width: 100%; text-align: center; @@ -87,11 +88,12 @@ background: var(--base-active-bg); } -@media screen and (max-width: 580px) { +@media screen and (max-height: 650px) { /*The Li*/ #phrase { - display: inline-flex !important; - width: 100% !important; - text-align: center !important; + /*Always stack and center horizontally*/ + display: table-cell !important; + width: auto !important; + text-align: center !important; } } \ No newline at end of file diff --git a/index.html b/index.html index 40a0742..e3ee6ae 100644 --- a/index.html +++ b/index.html @@ -240,6 +240,7 @@ + @@ -254,6 +255,5 @@ - \ No newline at end of file diff --git a/js/auto-suggest.js b/js/auto-suggest.js index 24484aa..ef06f13 100644 --- a/js/auto-suggest.js +++ b/js/auto-suggest.js @@ -2,6 +2,18 @@ var searchBox = document.getElementById('searchBox'); var suggestionsUL = document.getElementById('suggestions'); var suggestionsContainer = document.getElementById('suggestionsContainer'); + +const hideSuggestions = () => { + // Hide suggestions + suggestionsContainer.classList.remove('suggestionsShow'); +} + +const showSuggestions = () => { + // Show suggestions + suggestionsContainer.classList.add('suggestionsShow'); +} + + // Create input events const phraseEvents = button => { @@ -16,6 +28,30 @@ const phraseEvents = button => { } else if (event.key === 'Backspace') { searchBox.focus(); + + } else if ((event.key == 'ArrowDown') || event.key == 'ArrowRight') { + + event.preventDefault(); + + const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button')); + const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length; + const phraseButton = phraseButtons[phraseIndex]; + phraseButton.focus(); + + } else if ((event.key == 'ArrowUp') || event.key == 'ArrowLeft') { + + event.preventDefault(); + + const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button')); + var phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length; + + if (phraseIndex < 0) { + phraseIndex = phraseButtons.length - 1; + }; + + const phraseButton = phraseButtons[phraseIndex]; + phraseButton.focus(); + } } @@ -63,7 +99,7 @@ const autocompleteCallback = phrase => { } // Show suggestions - suggestionsContainer.classList.add('suggestionsShow'); + showSuggestions(); } // Update every keyup @@ -72,10 +108,9 @@ searchBox.onkeyup = event => { if (event.key === 'Tab') return; if (searchBox.value < 1) { - - // Hide suggestions - suggestionsContainer.classList.remove('suggestionsShow'); + // Hide suggestions + hideSuggestions(); return; } diff --git a/js/show-search-box.js b/js/show-search-box.js index a681a24..267f064 100644 --- a/js/show-search-box.js +++ b/js/show-search-box.js @@ -24,6 +24,9 @@ const hideSearchBox = () => { searchBox.value = ''; + // Hide suggestions + hideSuggestions(); + searchBoxVisility = !searchBoxVisility; }