diff --git a/js-src/index.js b/js-src/index.js index 35690ca..13d92da 100644 --- a/js-src/index.js +++ b/js-src/index.js @@ -32,8 +32,39 @@ window.onload = () => { if (window !== undefined && window.Android !== undefined) { executeAndroidExclusiveCode(Android) } + addListenersSearch() }; +function addListenersSearch() { + const searchMobile = document.querySelector('nav.mobile-shortcuts div.search') + if (searchMobile !== null) { + searchMobile.addEventListener('click', onFakeSearchClick); + } + const exitSearch = document.querySelector('a.exit-search') + if (exitSearch !== null) { + exitSearch.addEventListener('click', () => { + const searchOverlay = document.querySelector('div.search-overlay'); + if (searchOverlay !== null) { + searchOverlay.classList.toggle('active'); + } + }); + } +} + +function onFakeSearchClick(e) { + e.preventDefault(); + const searchOverlay = document.querySelector('div.search-overlay'); + if (searchOverlay === null) { + return + } + searchOverlay.classList.toggle('active'); + const search = searchOverlay.querySelector('div.search input'); + if (search !== null) { + search.focus() + } + return false; +} + function absoluteToHost(imageUrl) { if (imageUrl.match(/^\//)) { imageUrl = window.location.protocol + "//" + window.location.host + imageUrl diff --git a/public/css/styles.css b/public/css/styles.css index 601078e..b67591c 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -8,12 +8,41 @@ body { min-height: 100%; width: 100%; height: 100%; } - body div.search { + body div.search-overlay { + display: none; + position: fixed; + height: 100%; + width: 100%; background: white; + z-index: 3; + top: 0; } + body div.search-overlay.active { + display: flex; } + body div.search-overlay div.bounding-search-bar { + margin: 7px; + width: calc(100% - 20px); + border-radius: 10px; + height: 60px; + display: flex; } + body div.search-overlay div.bounding-search-bar div.search { + width: calc(100% - 60px); + height: 60px; + margin-left: 0px; + margin-right: 0px; } + body div.search-overlay div.bounding-search-bar a.exit-search { + width: 60px; + background: whitesmoke; + height: 60px; + display: flex; + justify-content: center; + align-items: center; } + body div.search-overlay div.bounding-search-bar a.exit-search img { + width: 60%; } + body div.search { + background: whitesmoke; margin-left: 10px; - margin-right: 10px; } - body div.search:focus, body div.search:hover { - background: aliceblue; } + margin-right: 10px; + display: flex; } body div.search div.search-icon { height: calc(100% - 28px); display: flex; @@ -26,6 +55,17 @@ body { aspect-ratio: 1/1; } body div.search div.search-icon img { height: 80%; } + body div.search div.fake-text-box { + width: calc(100% - 60px); + display: flex; + align-items: center; } + body div.search div.fake-text-box input[type="text"] { + font-size: 30px; + width: 100%; + height: 70%; + background: none; + border: none; + outline: none; } body p, body h1, body h2, body h3, body h4, body a { font-family: 'arial'; } body *.android { diff --git a/public/css/styles.scss b/public/css/styles.scss index 7a972a3..a0c63af 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -14,13 +14,47 @@ html { } body { - div.search { + div.search-overlay { + display: none; + position: fixed; + height: 100%; + width: 100%; background: white; + z-index: 3; + top: 0; + &.active { + display: flex; + } + div.bounding-search-bar { + margin: 7px; + width: calc(100% - 20px); + border-radius: 10px; + height: 60px; + display: flex; + div.search { + width: calc(100% - 60px); + height: 60px; + margin-left: 0px; + margin-right: 0px; + } + a.exit-search { + width: 60px; + background: whitesmoke; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + img { + width: 60%; + } + } + } + } + div.search { + background: whitesmoke; margin-left: 10px; margin-right: 10px; - &:focus,&:hover { - background: aliceblue; - } + display: flex; div.search-icon { height: calc(100% - 28px); display: flex; @@ -35,6 +69,19 @@ body { height: 80%; } } + div.fake-text-box { + width: calc(100% - 60px); + display: flex; + align-items: center; + input[type="text"] { + font-size: 30px; + width: 100%; + height: 70%; + background: none; + border: none; + outline: none; + } + } } p, h1, h2, h3, h4, a { font-family: 'arial'; diff --git a/public/img/exit.svg b/public/img/exit.svg new file mode 100644 index 0000000..6dee2e1 --- /dev/null +++ b/public/img/exit.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + diff --git a/public/js/bundle.js b/public/js/bundle.js index 5b048d3..a83aa21 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -16,7 +16,7 @@ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n const menu_expand = document.querySelector('a.menu-expand');\n const mobile_foldable = document.querySelector('nav.mobile-foldable');\n const tables = document.querySelectorAll('table')\n\n loadAd()\n addEasterEggAnimation()\n\n if (menu_expand !== null && mobile_foldable !== null) {\n menu_expand.addEventListener('click', () => {\n mobile_foldable.classList.toggle('show');\n });\n }\n\n for (const table of tables) {\n const header = table.querySelector('tr');\n if (header !== null) {\n header.setAttribute('data-sort-method', 'none')\n for (const th of header.querySelectorAll('th')) {\n if (th.getAttribute('data-sort-method') == null) {\n th.setAttribute('data-sort-method', 'thead')\n }\n }\n }\n new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n }\n if (window !== undefined && window.Android !== undefined) {\n executeAndroidExclusiveCode(Android)\n }\n};\n\nfunction absoluteToHost(imageUrl) {\n if (imageUrl.match(/^\\//)) {\n imageUrl = window.location.protocol + \"//\" + window.location.host + imageUrl \n }\n return imageUrl.replace(/\\?.*$/, '');\n}\n\nfunction addListenerOpenInBrowserButton(android) {\n const openInBrowserLink = document.querySelector('a.open-in-browser')\n if (openInBrowserLink === null) {\n return\n }\n openInBrowserLink.addEventListener('click', () => {\n android.openInBrowser(window.location.href)\n })\n}\nfunction executeAndroidExclusiveCode(android) {\n document.querySelectorAll('*.android').forEach((element) => {\n element.classList.remove('android')\n })\n addListenerOpenInBrowserButton(android)\n const pinToHomeUrl = document.querySelector('a.pin-to-home')\n if (pinToHomeUrl === null) {\n return;\n }\n pinToHomeUrl.addEventListener('click', () => {\n const url = new URL(window.location.href)\n const pathandQuery = url.pathname + url.search;\n const label = (url.pathname.replace(/^.*\\//g, '')\n .replace(/(?:^|-)\\w/g, function(character) {\n return character.toUpperCase() \n })\n .replace(/-/g, ' ')) + ' - Burguillos.info';\n const firstImg = document.querySelector('div.description img');\n let iconUrl;\n if (firstImg !== null) {\n if (!firstImg.src.match(/\\.svg(?:\\?|$)/)) {\n iconUrl = absoluteToHost(firstImg.src);\n }\n }\n if (iconUrl === undefined) {\n const imagePreview = document.querySelector('meta[name=\"image\"]');\n iconUrl = absoluteToHost(imagePreview.content);\n }\n android.pinPage(pathandQuery, label, iconUrl)\n })\n}\n\nfunction addEasterEggAnimation() {\n const logoContainer = document.querySelector('div.burguillos-logo-container')\n if (logoContainer === null) {\n return;\n }\n logoContainer.addEventListener('click', () => {\n logoContainer.classList.toggle('active')\n })\n}\n\nlet current_ad_number = null\n\nfunction expand_page_contents() {\n const page_contents = document.querySelector('div.page-contents'); \n if (page_contents === null) {\n return;\n }\n page_contents.classList.add('no-carousel');\n}\n\nfunction no_more_ads() {\n const carousel = document.querySelector('.carousel');\n if (carousel !== null) {\n carousel.remove();\n }\n expand_page_contents();\n}\n\nfunction loadAd() {\n const params = new URLSearchParams();\n if (current_ad_number !== null) {\n params.append('n', \"\"+current_ad_number);\n }\n fetch('/next-ad.json?' + params).then((res) => {\n return res.json()\n }).then((res) => {\n current_ad_number = res.current_ad_number\n const ad = res.ad\n const must_continue = res.continue\n const carousel = document.querySelector('.carousel');\n if (must_continue === 0\n || carousel === null\n || carousel.offsetWidth === 0) {\n no_more_ads();\n return;\n }\n const a = _retrieveLinkCarousel(carousel)\n a.innerHTML = \"\"\n const image = document.createElement('img')\n const text_container = document.createElement('div')\n const text = document.createElement('h4')\n const promoted = document.createElement('p')\n\n promoted.classList.add('promoted-tag')\n promoted.innerText = \"Promocionado\"\n image.src = ad.img\n image.alt = \"\"\n text.innerText = ad.text\n a.href = ad.href\n\n a.append(image)\n text_container.append(promoted)\n text_container.append(text)\n a.append(text_container)\n\n window.setTimeout(() => {\n loadAd()\n }, ad.seconds * 1000)\n }).catch(() => {\n window.setTimeout(() => {\n loadAd()\n }, 1000)\n });\n}\n\nfunction _retrieveLinkCarousel(carousel) {\n const maybeA = carousel.querySelector('a')\n if (maybeA !== null) {\n return maybeA\n }\n const a = document.createElement('a')\n carousel.innerHTML = \"\"\n carousel.append(a)\n return a\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n const menu_expand = document.querySelector('a.menu-expand');\n const mobile_foldable = document.querySelector('nav.mobile-foldable');\n const tables = document.querySelectorAll('table')\n\n loadAd()\n addEasterEggAnimation()\n\n if (menu_expand !== null && mobile_foldable !== null) {\n menu_expand.addEventListener('click', () => {\n mobile_foldable.classList.toggle('show');\n });\n }\n\n for (const table of tables) {\n const header = table.querySelector('tr');\n if (header !== null) {\n header.setAttribute('data-sort-method', 'none')\n for (const th of header.querySelectorAll('th')) {\n if (th.getAttribute('data-sort-method') == null) {\n th.setAttribute('data-sort-method', 'thead')\n }\n }\n }\n new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n }\n if (window !== undefined && window.Android !== undefined) {\n executeAndroidExclusiveCode(Android)\n }\n addListenersSearch()\n};\n\nfunction addListenersSearch() {\n const searchMobile = document.querySelector('nav.mobile-shortcuts div.search')\n if (searchMobile !== null) {\n searchMobile.addEventListener('click', onFakeSearchClick);\n }\n const exitSearch = document.querySelector('a.exit-search')\n if (exitSearch !== null) {\n exitSearch.addEventListener('click', () => {\n const searchOverlay = document.querySelector('div.search-overlay');\n if (searchOverlay !== null) {\n searchOverlay.classList.toggle('active');\n }\n });\n }\n}\n\nfunction onFakeSearchClick(e) {\n e.preventDefault();\n const searchOverlay = document.querySelector('div.search-overlay');\n if (searchOverlay === null) {\n return\n }\n searchOverlay.classList.toggle('active');\n const search = searchOverlay.querySelector('div.search input');\n if (search !== null) {\n search.focus()\n }\n return false;\n}\n\nfunction absoluteToHost(imageUrl) {\n if (imageUrl.match(/^\\//)) {\n imageUrl = window.location.protocol + \"//\" + window.location.host + imageUrl \n }\n return imageUrl.replace(/\\?.*$/, '');\n}\n\nfunction addListenerOpenInBrowserButton(android) {\n const openInBrowserLink = document.querySelector('a.open-in-browser')\n if (openInBrowserLink === null) {\n return\n }\n openInBrowserLink.addEventListener('click', () => {\n android.openInBrowser(window.location.href)\n })\n}\nfunction executeAndroidExclusiveCode(android) {\n document.querySelectorAll('*.android').forEach((element) => {\n element.classList.remove('android')\n })\n addListenerOpenInBrowserButton(android)\n const pinToHomeUrl = document.querySelector('a.pin-to-home')\n if (pinToHomeUrl === null) {\n return;\n }\n pinToHomeUrl.addEventListener('click', () => {\n const url = new URL(window.location.href)\n const pathandQuery = url.pathname + url.search;\n const label = (url.pathname.replace(/^.*\\//g, '')\n .replace(/(?:^|-)\\w/g, function(character) {\n return character.toUpperCase() \n })\n .replace(/-/g, ' ')) + ' - Burguillos.info';\n const firstImg = document.querySelector('div.description img');\n let iconUrl;\n if (firstImg !== null) {\n if (!firstImg.src.match(/\\.svg(?:\\?|$)/)) {\n iconUrl = absoluteToHost(firstImg.src);\n }\n }\n if (iconUrl === undefined) {\n const imagePreview = document.querySelector('meta[name=\"image\"]');\n iconUrl = absoluteToHost(imagePreview.content);\n }\n android.pinPage(pathandQuery, label, iconUrl)\n })\n}\n\nfunction addEasterEggAnimation() {\n const logoContainer = document.querySelector('div.burguillos-logo-container')\n if (logoContainer === null) {\n return;\n }\n logoContainer.addEventListener('click', () => {\n logoContainer.classList.toggle('active')\n })\n}\n\nlet current_ad_number = null\n\nfunction expand_page_contents() {\n const page_contents = document.querySelector('div.page-contents'); \n if (page_contents === null) {\n return;\n }\n page_contents.classList.add('no-carousel');\n}\n\nfunction no_more_ads() {\n const carousel = document.querySelector('.carousel');\n if (carousel !== null) {\n carousel.remove();\n }\n expand_page_contents();\n}\n\nfunction loadAd() {\n const params = new URLSearchParams();\n if (current_ad_number !== null) {\n params.append('n', \"\"+current_ad_number);\n }\n fetch('/next-ad.json?' + params).then((res) => {\n return res.json()\n }).then((res) => {\n current_ad_number = res.current_ad_number\n const ad = res.ad\n const must_continue = res.continue\n const carousel = document.querySelector('.carousel');\n if (must_continue === 0\n || carousel === null\n || carousel.offsetWidth === 0) {\n no_more_ads();\n return;\n }\n const a = _retrieveLinkCarousel(carousel)\n a.innerHTML = \"\"\n const image = document.createElement('img')\n const text_container = document.createElement('div')\n const text = document.createElement('h4')\n const promoted = document.createElement('p')\n\n promoted.classList.add('promoted-tag')\n promoted.innerText = \"Promocionado\"\n image.src = ad.img\n image.alt = \"\"\n text.innerText = ad.text\n a.href = ad.href\n\n a.append(image)\n text_container.append(promoted)\n text_container.append(text)\n a.append(text_container)\n\n window.setTimeout(() => {\n loadAd()\n }, ad.seconds * 1000)\n }).catch(() => {\n window.setTimeout(() => {\n loadAd()\n }, 1000)\n });\n}\n\nfunction _retrieveLinkCarousel(carousel) {\n const maybeA = carousel.querySelector('a')\n if (maybeA !== null) {\n return maybeA\n }\n const a = document.createElement('a')\n carousel.innerHTML = \"\"\n carousel.append(a)\n return a\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?"); /***/ }), diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index 67b3788..b18e270 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -30,8 +30,16 @@ -
-
+
+
+
+
+%= include 'page/_search_bar' + + Exit search + +
+
%= include 'page/_mobile_menu', categories => $categories
diff --git a/templates/page/_mobile_menu.html.ep b/templates/page/_mobile_menu.html.ep index 1c63332..e96c8e8 100644 --- a/templates/page/_mobile_menu.html.ep +++ b/templates/page/_mobile_menu.html.ep @@ -1,13 +1,7 @@ % my $categories = stash 'categories';