diff --git a/js-src/index.js b/js-src/index.js index 94381a7..35690ca 100644 --- a/js-src/index.js +++ b/js-src/index.js @@ -41,10 +41,20 @@ function absoluteToHost(imageUrl) { return imageUrl.replace(/\?.*$/, ''); } +function addListenerOpenInBrowserButton(android) { + const openInBrowserLink = document.querySelector('a.open-in-browser') + if (openInBrowserLink === null) { + return + } + openInBrowserLink.addEventListener('click', () => { + android.openInBrowser(window.location.href) + }) +} function executeAndroidExclusiveCode(android) { document.querySelectorAll('*.android').forEach((element) => { element.classList.remove('android') }) + addListenerOpenInBrowserButton(android) const pinToHomeUrl = document.querySelector('a.pin-to-home') if (pinToHomeUrl === null) { return; @@ -66,11 +76,8 @@ function executeAndroidExclusiveCode(android) { } if (iconUrl === undefined) { const imagePreview = document.querySelector('meta[name="image"]'); - console.error(imagePreview.content); - console.error(absoluteToHost(imagePreview.content)); iconUrl = absoluteToHost(imagePreview.content); } - console.error(iconUrl); android.pinPage(pathandQuery, label, iconUrl) }) } diff --git a/package.json b/package.json index f7acd1b..9e44e73 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,9 @@ "@typescript-eslint/parser": "^5.59.2", "eslint": "^8.40.0", "eslint-plugin-no-relative-import-paths": "^1.5.2", + "husky": "^8.0.3", + "lint-staged": "^14.0.1", + "prettier": "^3.0.3", "typescript": "^5.0.4", "webpack-cli": "^5.1.4" }, diff --git a/public/css/styles.css b/public/css/styles.css index 443284b..fcdbc38 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -242,6 +242,32 @@ body { body div.page-contents div.description a.suscribe-category-rss img { width: 40px; height: 40px; } + body div.page-contents div.open-browser-container { + display: flex; + justify-content: start; + width: 100%; + margin-left: 0px; + margin-right: 0px; + background: #f2eb8c; + color: blueviolet; } + body div.page-contents div.open-browser-container a.open-in-browser { + text-decoration: none; + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + margin-left: 10px; + margin-right: 10px; } + body div.page-contents div.open-browser-container a.open-in-browser img { + display: block; + height: 2rem; + width: 2rem; + margin-right: 0px; + margin-left: 0px; } + body div.page-contents div.open-browser-container a.open-in-browser span { + display: block; } + body div.page-contents div.open-browser-container.android { + display: none; } body div.page-contents div.easter-egg { display: flex; justify-content: center; } diff --git a/public/css/styles.scss b/public/css/styles.scss index 523bb00..5616619 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -19,7 +19,7 @@ body { } *.android { - display: none; + display: none; } margin: 0; @@ -49,30 +49,34 @@ body { height: calc(20% - 6px); width: calc(100% - 6px); border: solid 3px black; + a { - font-size: 13px; - background: $color_div; - color: $background_div; - display: flex; - text-align: center; - justify-content: space-between; - align-items: center; - height: 100%; - text-decoration: none; - &:hover,&:focus { - background: $background_div; - color: $color_div; - } + font-size: 13px; + background: $color_div; + color: $background_div; + display: flex; + text-align: center; + justify-content: space-between; + align-items: center; + height: 100%; + text-decoration: none; + + &:hover, &:focus { + background: $background_div; + color: $color_div; + } } - div.promoted-tag,h3 { - margin: 0; - margin-right: 5px; + + div.promoted-tag, h3 { + margin: 0; + margin-right: 5px; } + img { - margin: 10px; - height: calc(100% - 20px); - border: solid 1px black; - background: white; + margin: 10px; + height: calc(100% - 20px); + border: solid 1px black; + background: white; } } @@ -91,131 +95,129 @@ body { } div.page-contents.no-carousel { - height: calc(100% - 60px); + height: calc(100% - 60px); } - nav { - overflow: auto; - display: block; - font-size: 25px; - margin: 0px; + nav { + overflow: auto; + display: block; + font-size: 25px; + margin: 0px; - a.go-to-index img { - } + a.go-to-index img {} - a { - padding-left: 10px; - padding-right: 10px; - height: 100%; - text-decoration: none; - color: $color_div; - margin: 0; - - &:hover,&:focus { - background: $color_div; - color: $background_div; - } - - &.selected { - background: $background-page; - color: $background_div; - border-right: 1px solid $background_div; - } - } - - - } - nav.desktop { - display: none; - - a { - vertical-align: middle; - background: $background_div; - } - } - - - - nav.mobile-foldable { - display: none; - background: $background_div; + a { + padding-left: 10px; + padding-right: 10px; + height: 100%; + text-decoration: none; color: $color_div; + margin: 0; - a { - //background: $color_div; - //color: $background_div; - display: block; + &:hover, &:focus { + background: $color_div; + color: $background_div; + } + + &.selected { + background: $background-page; + color: $background_div; + border-right: 1px solid $background_div; } } + } - nav.mobile-foldable.show { + nav.desktop { + display: none; + + a { + vertical-align: middle; + background: $background_div; + } + } + + nav.mobile-foldable { + display: none; + background: $background_div; + color: $color_div; + + a { + //background: $color_div; + //color: $background_div; display: block; - } + } + } + + nav.mobile-foldable.show { + display: block; + } + nav.mobile-shortcuts > a { - display:flex; + display: flex; align-items: center; justify-content: center; } - a.menu-expand { - padding-bottom: 9px; - .open-menu-icon-hover { - display: none; - } + a.menu-expand { + padding-bottom: 9px; - &:hover,&:focus { - .open-menu-icon-hover { - display: block; - } + .open-menu-icon-hover { + display: none; + } - .open-menu-icon { - display: none; - } - } + &:hover, &:focus { + .open-menu-icon-hover { + display: block; } - nav > a.menu-expand > img { - width: 30px; - height: 30px; + .open-menu-icon { + display: none; + } } - - nav > a > img.index-image-menu { - vertical-align: middle; - width: 40px; - height: 40px; - } - - nav > a > img.index-image-menu, div.burguillos-logo-container > img { - transition-property: transform; - transition-duration: 2s; - transition-delay: 2s; - } - nav > a:hover > img.index-image-menu, - div.burguillos-logo-container.active > img { - transform: rotate(-1.5707963267948966rad); } + nav > a.menu-expand > img { + width: 30px; + height: 30px; + } + + nav > a > img.index-image-menu { + vertical-align: middle; + width: 40px; + height: 40px; + } + + nav > a > img.index-image-menu, div.burguillos-logo-container > img { + transition-property: transform; + transition-duration: 2s; + transition-delay: 2s; + } + + nav > a:hover > img.index-image-menu, + div.burguillos-logo-container.active > img { + transform: rotate(-1.5707963268rad); + } nav.mobile-shortcuts { - position: fixed; - display: flex; - width: 100%; - background: $background_div; - height: 60px; - top: 0%; + position: fixed; + display: flex; + width: 100%; + background: $background_div; + height: 60px; + top: 0%; - a { - height: 100%; - width: (100% / 6); - padding-left: 0; - padding-top: 0; - padding-right: 0; - padding-bottom: 0; - } + a { + height: 100%; + width: (100% / 6); + padding-left: 0; + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + } - div { - width: 100% * 4 / 6; - } + div { + width: 100% * 4 / 6; + } } div.page-contents { @@ -225,6 +227,7 @@ body { height: calc(80% - 60px); width: 100%; overflow-y: scroll; + div.child-categories-mobile a { padding-left: 2.5rem; } @@ -281,39 +284,41 @@ body { flex-wrap: wrap; div.image-container { - margin-left: 2.5%; - margin-top: 10px; - height: 95%; - width: 95%; - display: flex; - min-height: 130px; - justify-content: center; - align-items: center; - img { - background: white; - max-height: 100%; - max-width: 100%; - min-width: 277px; - border: solid 1px black; - } + margin-left: 2.5%; + margin-top: 10px; + height: 95%; + width: 95%; + display: flex; + min-height: 130px; + justify-content: center; + align-items: center; + + img { + background: white; + max-height: 100%; + max-width: 100%; + min-width: 277px; + border: solid 1px black; + } } a { - min-height: 90%; - width: 100%; - display: block; - text-decoration: none; - text-overflow: ellipsis; - margin-bottom: 30px; + min-height: 90%; + width: 100%; + display: block; + text-decoration: none; + text-overflow: ellipsis; + margin-bottom: 30px; - &:focus,&:hover { - //outline: red solid 3px; - article { - background: $background_div; - color: $color_div; - } - } - article { + &:focus, &:hover { + //outline: red solid 3px; + article { + background: $background_div; + color: $color_div; + } + } + + article { word-wrap: break-word; width: 90%; height: 90%; @@ -321,20 +326,21 @@ body { p, h4, h3, h2 { margin: 0px; } + p { - font-size: 0.9rem; + font-size: 0.9rem; } div.article-up-part { - height: 12em; + height: 12em; } div.article-down-part { - margin-top: 2em; - height: 9em; - display: flex; - align-items: end; - padding-bottom: 2em; + margin-top: 2em; + height: 9em; + display: flex; + align-items: end; + padding-bottom: 2em; } padding: 5%; @@ -375,29 +381,59 @@ body { } } + div.open-browser-container { + display: flex; + justify-content: start; + width: 100%; + margin-left: 0px; + margin-right: 0px; + background: $color_div; + color: $background_div; + a.open-in-browser { + text-decoration: none; + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + margin-left: 10px; + margin-right: 10px; + img { + display: block; + height: 2rem; + width: 2rem; + margin-right: 0px; + margin-left: 0px; + } + + span { + display: block; + } + } + } + + div.open-browser-container.android { + display: none; + } div.easter-egg { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } div.burguillos-logo-container.active { - border: solid 1px black; - border-radius: 50%; - filter: invert(1); + border: solid 1px black; + border-radius: 50%; + filter: invert(1); } div.burguillos-logo-container { - padding: 40px; - width: 120px; + padding: 40px; + width: 120px; } - div.burguillos-logo-container.active img { - } - - + div.burguillos-logo-container.active img {} h1 { text-align: center; @@ -431,16 +467,17 @@ body { } } } + @media (min-width: 694px) { body { div.page-contents { div.description { - div.articles { a { &:nth-child(2n+1) { - margin-left: 0%; + margin-left: 0%; } + width: 45%; margin-left: 5%; } @@ -455,6 +492,7 @@ body { nav.mobile-shortcuts { display: none; } + div.page-contents { nav.mobile-foldable, nav.mobile-foldable.show { display: none; @@ -481,13 +519,13 @@ body { } } - top: 0%; left: 5%; height: 80%; width: 90%; border: solid 1px black; } + div.page-contents.no-carousel { height: 100%; } @@ -498,15 +536,16 @@ body { body { div.page-contents { div.description { - div.articles { a { &:nth-child(2n+1) { - margin-left: 3%; + margin-left: 3%; } + &:nth-child(3n+1) { - margin-left: 0%; + margin-left: 0%; } + width: 30%; margin-left: 3%; } diff --git a/public/img/firefox.svg b/public/img/firefox.svg new file mode 100644 index 0000000..57de078 --- /dev/null +++ b/public/img/firefox.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/js/bundle.js b/public/js/bundle.js index f4b8f4a..5b048d3 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 executeAndroidExclusiveCode(android) {\n document.querySelectorAll('*.android').forEach((element) => {\n element.classList.remove('android')\n })\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 console.error(imagePreview.content);\n console.error(absoluteToHost(imagePreview.content));\n iconUrl = absoluteToHost(imagePreview.content);\n }\n console.error(iconUrl);\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};\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 f80ec59..4ddc70b 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -37,6 +37,12 @@
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug %= include 'page/_mobile_foldable', categories => $categories +
+ + + Abrir en el navegador. + +
<%= content %>
Añade esta página a la pantalla de inicio de tu móvil.