diff --git a/index.html b/index.html index 4019a06..b93d398 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,41 @@

Lexiconga

- + +
diff --git a/src/js/search.js b/src/js/search.js index 43f8280..d1bb760 100644 --- a/src/js/search.js +++ b/src/js/search.js @@ -1,7 +1,7 @@ import { cloneObject } from "../helpers"; export function getSearchTerm() { - return document.getElementById('searchButton').value; + return document.getElementById('searchBox').value; } export function getMatchingSearchWords() { diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index ab25c97..f486fb4 100644 --- a/src/js/setupListeners.js +++ b/src/js/setupListeners.js @@ -1,11 +1,13 @@ import {showSection} from './displayToggles'; +import { renderWords } from './render'; export default function setupListeners() { setupDetailsTabs(); + setupSearchBar(); } -function setupDetailsTabs () { - let tabs = document.querySelectorAll('#detailsSection nav li'); +function setupDetailsTabs() { + const tabs = document.querySelectorAll('#detailsSection nav li'); tabs.forEach(tab => { tab.addEventListener('click', () => { const section = tab.innerText.toLowerCase(); @@ -19,4 +21,24 @@ function setupDetailsTabs () { } }); }) +} + +function setupSearchBar() { + const searchBox = document.getElementById('searchBox'), + clearSearchButton = document.getElementById('clearSearchButton'), + openSearchModal = document.getElementById('openSearchModal'); + searchBox.addEventListener('change', () => { + renderWords(); + }); + searchBox.addEventListener('input', event => { + openSearchModal.value = event.target.value; + }); + clearSearchButton.addEventListener('click', event => { + searchBox.value = ''; + openSearchModal.value = ''; + renderWords(); + }); + openSearchModal.addEventListener('click', () => { + document.getElementById('searchModal').style.display = 'block'; + }); } \ No newline at end of file diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss index 0866a19..7399bb9 100644 --- a/src/styles/_elements.scss +++ b/src/styles/_elements.scss @@ -4,6 +4,16 @@ border-radius: 3px; background-color: $light; line-height: 30px; + + &.small { + font-size: 80%; + line-height: 25px; + } + + &.red { + background-color: $red; + color: $white; + } } span .tag { @@ -24,8 +34,14 @@ span .tag { } .modal { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + .modal-background { - position: fixed; + position: absolute; top: 0; left: 0; bottom: 0; @@ -35,7 +51,7 @@ span .tag { } .modal-content { - position: fixed; + position: absolute; top: 10%; left: 20%; bottom: 10%; @@ -45,9 +61,10 @@ span .tag { border-radius: 5px; .close-button { + position: absolute; + top: 0; + right: 10px; font-size: 200%; - float: right; - margin: 10px 20px; cursor: pointer; } } @@ -95,7 +112,20 @@ span .tag { width: 46%; } - &.three div { + &.three div, + div.third { width: 30%; } + + div.two-third { + width: 66%; + } + + div.quarter { + width: 22%; + } + + div.three-quarter { + width: 72%; + } } \ No newline at end of file diff --git a/src/styles/_structure.scss b/src/styles/_structure.scss index f9ae21c..954ea68 100644 --- a/src/styles/_structure.scss +++ b/src/styles/_structure.scss @@ -4,14 +4,48 @@ margin: 3px 20px 3px 0; } - #searchButton { + #openSearchModal { cursor: pointer; } + + #searchModal { + min-height: $header-height; + bottom: unset; + z-index: 10; + + .modal-content { + position: relative; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0 auto; + width: 90%; + padding: 20px; + } + + #searchBox { + width: 60%; + } + + .category { + text-align: right; + * { + margin: 0; + } + } + + .options { + * { + margin-right: 5px; + } + } + } } #wordForm { position: fixed; - top: $header-height; + top: auto; width: 24%; padding: 10px; background-color: $light; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 18f007e..846679a 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -7,4 +7,6 @@ $mid: #dedede; $light: #efefef; $white: #ffffff; +$red: #d42932; + $border: 1px solid $dark; \ No newline at end of file