diff --git a/phpmyfaq/assets/scss/layout/_autocomplete.scss b/phpmyfaq/assets/scss/layout/_autocomplete.scss index 87252501df..9d72b1daba 100644 --- a/phpmyfaq/assets/scss/layout/_autocomplete.scss +++ b/phpmyfaq/assets/scss/layout/_autocomplete.scss @@ -1,34 +1,84 @@ +.searchContainer { + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + display: none; + padding: 3px 0px; + + #expandaSearch { + border-radius: 10px; + } + + .bi-close{ + position: absolute; + top: -16px; + left: 7px; + font-size: 45px; + color: var(--bs-gray-400); + cursor: pointer; + } + + .bi-close:before{ + content: "×"; + font-weight: bold; + } +} + .search { position: relative; box-shadow: 0 0 40px rgba(51, 51, 51, 0.1); background-color: transparent; input { - height: 60px; + height: 50px; text-indent: 25px; &:focus { box-shadow: none; border: 2px solid var(--bs-primary); + padding-right: 110px; + padding-left: 15px; } } - .bi-search { - position: absolute; - top: 18px; - left: 18px; + &.searchClosed { + display: inline-block; + + form { + background: white; + border-radius: 10px; + width: fit-content; + padding: 3px; + } + + .bi-close { + display: none; + } + + input { + visibility: hidden; + position: absolute; + border: none; + } + + button { + position: unset; + } + } button { position: absolute; top: 5px; right: 5px; - height: 50px; + height: 40px; + padding-top: 0.25rem; } } .autocomplete { @extend .list-group; + z-index: 1200; } .autocomplete > div { @@ -42,3 +92,5 @@ @extend .list-group-item-info; cursor: pointer; } + + diff --git a/phpmyfaq/assets/scss/layout/_navigation.scss b/phpmyfaq/assets/scss/layout/_navigation.scss index d312c8bab8..bd8334f3ac 100644 --- a/phpmyfaq/assets/scss/layout/_navigation.scss +++ b/phpmyfaq/assets/scss/layout/_navigation.scss @@ -11,3 +11,16 @@ @extend .px-2; @extend .link-light; } + +@media (min-width: 992px) { + li.searchNav { + display: none !important; + } + div.searchContainer { + display: block; + } +} +.pmf-nav-link.active { + border-radius: 5px; + background-color: var(--bs-primary); +} \ No newline at end of file diff --git a/phpmyfaq/assets/src/frontend.ts b/phpmyfaq/assets/src/frontend.ts index a7915ae9fa..717c9ec2b4 100644 --- a/phpmyfaq/assets/src/frontend.ts +++ b/phpmyfaq/assets/src/frontend.ts @@ -23,7 +23,7 @@ import { handleShowFaq, handleUserVoting, } from './faq'; -import { handleAutoComplete, handleQuestion } from './search'; +import { handleAutoComplete, handleQuestion, handleExpandaSearch } from './search'; import { handleDeleteBookmarks, handleRegister, @@ -98,4 +98,7 @@ document.addEventListener('DOMContentLoaded', () => { // AutoComplete handleAutoComplete(); + + // set up expandaSearch + handleExpandaSearch(); }); diff --git a/phpmyfaq/assets/src/search/expandasearch.ts b/phpmyfaq/assets/src/search/expandasearch.ts new file mode 100644 index 0000000000..d78612377c --- /dev/null +++ b/phpmyfaq/assets/src/search/expandasearch.ts @@ -0,0 +1,61 @@ +/** + * Expandasearch functionality JavaScript part + * + * This Source Code Form is subject to the terms of the Mozilla Public License, + * v. 2.0. If a copy of the MPL was not distributed with this file, You can + * obtain one at https://mozilla.org/MPL/2.0/. + * + * @package phpMyFAQ + * @author Thorsten Rinne + * @copyright 2014-2025 phpMyFAQ Team + * @license http://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0 + * @link https://www.phpmyfaq.de + * @since 2014-11-23 + */ + +export const handleExpandaSearch = (): void => { + + let searchContainer: HTMLElement | null = document.getElementById('expandaSearch'); + let menuList: HTMLElement | null = document.querySelector('#pmf-top-navbar ul'); + let closeBtn: HTMLElement | null = document.querySelector('.searchContainer .bi-close'); + let timeOut: int | null; + + function showSearch(event: MouseEvent): void { + if (searchContainer && searchContainer.querySelector('button') && !searchContainer.querySelector('button').disabled) return; + event.stopPropagation(); + if (menuList) menuList.style.display = "none"; + if (searchContainer && searchContainer.querySelector('input')) searchContainer.querySelector('input').value = ""; + if (searchContainer) searchContainer.classList.remove('searchClosed'); + if (searchContainer && searchContainer.querySelector('button')) searchContainer.querySelector('button').disabled = false; + if (searchContainer && searchContainer.querySelector('input')) searchContainer.querySelector('input').focus(); + document.querySelector('div.searchContainer')!.style.width = "75%"; + redoTimeout(); + } + + function hideSearch(event?: MouseEvent): void { + if (document.querySelector('ul.autocomplete')) return; + if (searchContainer && searchContainer.querySelector('button') && searchContainer.querySelector('button').disabled) return; + if (event) event.stopPropagation(); + if (searchContainer) searchContainer.classList.add('searchClosed'); + if (searchContainer && searchContainer.querySelector('button')) searchContainer.querySelector('button').disabled = true; + if (menuList) menuList.style.display = ""; + document.querySelector('div.searchContainer')!.style.width = ""; + } + + function checkEsc(event: KeyboardEvent): void { + if (event.key === "Escape") { + if (searchContainer && !searchContainer.classList.contains('searchClosed')) hideSearch(); + } + } + + function redoTimeout() { + clearTimeout(timeOut); + timeOut = setTimeout(hideSearch, 3000); + } + + if (searchContainer) searchContainer.addEventListener('click', showSearch); + if (closeBtn) closeBtn.addEventListener('click', hideSearch); + + document.querySelector('.search input').addEventListener("keyup", redoTimeout); + document.addEventListener('keydown', checkEsc); +}; diff --git a/phpmyfaq/assets/src/search/index.ts b/phpmyfaq/assets/src/search/index.ts index bd1b7dc2e6..456ff91bb3 100644 --- a/phpmyfaq/assets/src/search/index.ts +++ b/phpmyfaq/assets/src/search/index.ts @@ -1,2 +1,3 @@ export * from './autocomplete'; export * from './question'; +export * from './expandasearch'; diff --git a/phpmyfaq/assets/templates/default/index.twig b/phpmyfaq/assets/templates/default/index.twig index 3857172996..69967fa940 100644 --- a/phpmyfaq/assets/templates/default/index.twig +++ b/phpmyfaq/assets/templates/default/index.twig @@ -49,22 +49,45 @@ {{ item['name'] }} {% endfor %} - {% endif %} +
  • + {{ searchBox }} +
    • + {% endif %} - -