Make search more prominent.
This commit is contained in:
parent
c5d7e160e9
commit
efbce18b1e
@ -65,6 +65,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
fakeSearchInput = searchMobile.querySelector('input')
|
||||
addListenersSearch()
|
||||
}
|
||||
addListenersSearchOverlay();
|
||||
|
||||
const cookies = document.cookie.split(";").map((cookie) => {
|
||||
let [key, value] = cookie.split("=");
|
||||
@ -83,6 +84,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
function startSearchTutorial() {
|
||||
console.log('Showing how to use search');
|
||||
const tutorialOverlay = document.querySelector('.tutorial-overlay-step-1');
|
||||
if (tutorialOverlay === null) {
|
||||
console.error('tutorialOverlay missing');
|
||||
return;
|
||||
}
|
||||
// tutorialOverlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function markSearchTutorialAsSeen() {
|
||||
@ -174,10 +181,8 @@ function addListenersSearch() {
|
||||
const searchOverlay = document.querySelector('div.search-overlay');
|
||||
const searchInput = searchOverlay.querySelector('div.search input');
|
||||
fakeSearchInput.value = searchInput.value;
|
||||
exitSearch.addEventListener('click', onExitSearch)
|
||||
const search = document.querySelector('div.search-overlay div.search input');
|
||||
if (search !== null) {
|
||||
search.addEventListener('change', onSearchChange);
|
||||
if (exitSearch !== null) {
|
||||
exitSearch.addEventListener('click', onExitSearch)
|
||||
}
|
||||
const searchIconDesktop = document.querySelector('nav.desktop a.search-icon');
|
||||
if (searchIconDesktop !== null) {
|
||||
@ -187,6 +192,13 @@ function addListenersSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
function addListenersSearchOverlay() {
|
||||
const search = document.querySelector('div.search-overlay div.search input');
|
||||
if (search !== null) {
|
||||
search.addEventListener('change', onSearchChange);
|
||||
}
|
||||
}
|
||||
|
||||
function searchInWebsite(value, isToBottom) {
|
||||
window.find(value, false, !isToBottom, true)
|
||||
const selection = window.getSelection()
|
||||
@ -247,8 +259,34 @@ function onSearchChange() {
|
||||
'event': 'realsearch_term_keyup',
|
||||
'term': search.value,
|
||||
});
|
||||
fakeSearchInput.value = search.value
|
||||
if (fakeSearchInput !== undefined && fakeSearchInput !== null) {
|
||||
fakeSearchInput.value = search.value
|
||||
}
|
||||
let found = search.value.match(/^#(\S+?)(?:\:(\S+?))?$/);
|
||||
const port = _port()
|
||||
if (found) {
|
||||
let attributeUrlPart = found[2];
|
||||
console.log(attributeUrlPart);
|
||||
if (attributeUrlPart === undefined) {
|
||||
attributeUrlPart = '';
|
||||
}
|
||||
console.log(attributeUrlPart);
|
||||
if (attributeUrlPart !== '') {
|
||||
attributeUrlPart = '/atributo/' + attributeUrlPart;
|
||||
}
|
||||
console.log(attributeUrlPart);
|
||||
const checkHashstagUrl = new URL(window.location.protocol
|
||||
+ "//"
|
||||
+ window.location.hostname
|
||||
+ port
|
||||
+ '/' + found[1] + attributeUrlPart);
|
||||
fetch(checkHashstagUrl).then((res) => {
|
||||
if (res.status === 200) {
|
||||
window.location = checkHashstagUrl;
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
const url = new URL(window.location.protocol
|
||||
+ "//"
|
||||
+ window.location.hostname
|
||||
|
@ -2,6 +2,33 @@ html {
|
||||
height: 100%;
|
||||
touch-action: none; }
|
||||
|
||||
div.open-browser-container {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: #f2eb8c;
|
||||
color: blueviolet; }
|
||||
div.open-browser-container a.open-in-browser {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px; }
|
||||
div.open-browser-container a.open-in-browser img {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px; }
|
||||
div.open-browser-container a.open-in-browser span {
|
||||
display: block; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -36,6 +63,43 @@ body {
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.15em; }
|
||||
body div.tutorial-overlay-step-1 {
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
top: 0%;
|
||||
z-index: 999; }
|
||||
body div.tutorial-overlay-step-1 > .explanation {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
color: aquamarine;
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
width: 230px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border: solid 3px black;
|
||||
font-size: 30px;
|
||||
top: calc(100% - 80px - 203px - 90px); }
|
||||
body div.tutorial-overlay-step-1 > .arrow {
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: calc(100% - 80px - 203px);
|
||||
display: block; }
|
||||
body div.tutorial-overlay-step-1.hidden {
|
||||
display: none; }
|
||||
body div.search-results > div.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: #2160c4;
|
||||
border: solid #9dc1fa 0.3rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
width: calc(100% - 20px - 0.6rem);
|
||||
padding: 10px; }
|
||||
body div.search-overlay {
|
||||
overflow-y: scroll;
|
||||
display: none;
|
||||
@ -46,9 +110,11 @@ body {
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
flex-direction: column; }
|
||||
body div.search-overlay.active {
|
||||
display: flex; }
|
||||
body div.search-overlay.default div.search-results {
|
||||
height: calc(100% - 80px - 2rem);
|
||||
overflow-x: scroll; }
|
||||
body div.search-overlay div.search-results {
|
||||
height: calc(100% - 80px);
|
||||
margin: 7px; }
|
||||
body div.search-overlay div.search-results img {
|
||||
width: 75px; }
|
||||
@ -57,6 +123,12 @@ body {
|
||||
flex-direction: row; }
|
||||
body div.search-overlay div.search-results div.search-result div.row-title-url-image img {
|
||||
margin: 10px; }
|
||||
body div.search-overlay div.search-results div.search-result p {
|
||||
background: aliceblue;
|
||||
width: fit-content;
|
||||
padding: 20px;
|
||||
margin-left: 90px;
|
||||
margin-right: 20px; }
|
||||
body div.search-overlay div.bounding-search-bar {
|
||||
position: fixed;
|
||||
top: calc(100% - 74px);
|
||||
@ -65,11 +137,6 @@ body {
|
||||
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.up, body div.search-overlay div.bounding-search-bar a.down {
|
||||
display: none; }
|
||||
body div.search-overlay div.bounding-search-bar a.exit-search {
|
||||
@ -344,14 +411,9 @@ body {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 10%;
|
||||
width: Min(calc(100% - 90px * 2), 500px);
|
||||
width: Min(calc(100% - 120px), 500px);
|
||||
height: 80%;
|
||||
border-radius: 10px; }
|
||||
body nav.mobile-shortcuts a.menu-expand {
|
||||
position: absolute;
|
||||
left: Min(calc(100% - 80px), 600px);
|
||||
top: 0;
|
||||
align-self: end; }
|
||||
body div.page-contents {
|
||||
background: #FEFEFA;
|
||||
position: fixed;
|
||||
@ -463,44 +525,8 @@ 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;
|
||||
padding-left: 0px;
|
||||
padding-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: calc(100% - 20px);
|
||||
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; }
|
||||
body div.page-contents div.burguillos-logo-container.active {
|
||||
border: solid 1px black;
|
||||
border-radius: 50%;
|
||||
filter: invert(1); }
|
||||
body div.page-contents div.burguillos-logo-container {
|
||||
padding: 40px;
|
||||
width: 120px; }
|
||||
body div.page-contents h1 {
|
||||
text-align: center; }
|
||||
body div.page-contents div.footer p, body div.page-contents div.footer h1, body div.page-contents div.footer h2, body div.page-contents div.footer h3, body div.page-contents div.footer h4, body div.page-contents div.footer a {
|
||||
@ -511,6 +537,32 @@ body {
|
||||
width: 20px;
|
||||
height: 20px; }
|
||||
|
||||
div.easter-egg {
|
||||
display: flex;
|
||||
justify-content: center; }
|
||||
|
||||
div.burguillos-logo-container.active {
|
||||
filter: invert(1); }
|
||||
|
||||
div.burguillos-logo-container {
|
||||
width: 120px; }
|
||||
|
||||
div.search-overlay div.search {
|
||||
width: calc(100% - 60px);
|
||||
height: 60px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px; }
|
||||
|
||||
div.search-overlay.active {
|
||||
display: flex; }
|
||||
|
||||
div.search-overlay.default {
|
||||
display: flex; }
|
||||
div.search-overlay.default div.search {
|
||||
width: 100%; }
|
||||
div.search-overlay.default div.fake-text-box {
|
||||
width: 100%; }
|
||||
|
||||
@media (min-width: 450px) {
|
||||
body div.page-contents table th, body div.page-contents table td {
|
||||
font-size: 20px; } }
|
||||
|
@ -16,6 +16,39 @@ html {
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
}
|
||||
div.open-browser-container {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
|
||||
a.open-in-browser {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
summary {
|
||||
@ -54,6 +87,51 @@ body {
|
||||
margin-bottom: 0.15em;
|
||||
}
|
||||
|
||||
div.tutorial-overlay-step-1 {
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
top: 0%;
|
||||
z-index: 999;
|
||||
& > .explanation {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
color: aquamarine;
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
width: 230px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border: solid 3px black;
|
||||
font-size: 30px;
|
||||
top: calc(100% - 80px - 203px - 90px);
|
||||
}
|
||||
& > .arrow {
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: calc(100% - 80px - 203px);
|
||||
display: block;
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.search-results > div.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: #2160c4;
|
||||
border: solid #9dc1fa 0.3rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
border-radius: 20px;
|
||||
width: calc(100% - 20px - 0.6rem);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div.search-overlay {
|
||||
overflow-y: scroll;
|
||||
display: none;
|
||||
@ -65,11 +143,16 @@ body {
|
||||
top: 0;
|
||||
flex-direction: column;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
&.default {
|
||||
div.search-results {
|
||||
height: calc(100% - 80px - 2rem);
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
div.search-results {
|
||||
height: calc(100% - 80px);
|
||||
margin: 7px;
|
||||
|
||||
img {
|
||||
@ -85,6 +168,13 @@ body {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
background: aliceblue;
|
||||
width: fit-content;
|
||||
padding: 20px;
|
||||
margin-left: 90px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,12 +187,6 @@ body {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
|
||||
div.search {
|
||||
width: calc(100% - 60px);
|
||||
height: 60px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
a.up, a.down {
|
||||
display: none;
|
||||
@ -502,17 +586,10 @@ body {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 10%;
|
||||
width: Min(calc(100% - 90px * 2), 500px);
|
||||
width: Min(calc(100% - 120px), 500px);
|
||||
height: 80%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
a.menu-expand {
|
||||
position: absolute;
|
||||
left: Min(calc(100% - 80px), 600px);
|
||||
top: 0;
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
@ -686,61 +763,11 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
div.open-browser-container {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
|
||||
a.open-in-browser {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 20px);
|
||||
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;
|
||||
}
|
||||
|
||||
div.burguillos-logo-container.active {
|
||||
border: solid 1px black;
|
||||
border-radius: 50%;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
div.burguillos-logo-container {
|
||||
padding: 40px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
div.burguillos-logo-container.active img {}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
@ -763,6 +790,42 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
div.easter-egg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.burguillos-logo-container.active {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
div.burguillos-logo-container {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
div.burguillos-logo-container.active img {}
|
||||
|
||||
div.search-overlay {
|
||||
div.search {
|
||||
width: calc(100% - 60px);
|
||||
height: 60px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
&.default {
|
||||
display: flex;
|
||||
div.search {
|
||||
width: 100%;
|
||||
}
|
||||
div.fake-text-box {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 450px) {
|
||||
body {
|
||||
div.page-contents {
|
||||
|
Binary file not shown.
Before ![]() (image error) Size: 1.4 KiB After ![]() (image error) Size: 1.6 KiB ![]() ![]() |
File diff suppressed because one or more lines are too long
@ -81,9 +81,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tutorial-overlay-step-1">
|
||||
|
||||
</div>
|
||||
%= include 'page/_search_tutorial'
|
||||
<div class="complete-container">
|
||||
%= include 'page/_mobile_foldable', categories => $categories
|
||||
<div class="contents-without-menu">
|
||||
@ -111,7 +109,7 @@
|
||||
</a>
|
||||
</div>
|
||||
% }
|
||||
<%= content %></body>
|
||||
<%= content %>
|
||||
<div class="description android">
|
||||
<a href="#" class="pin-to-home">Añade esta página a la pantalla de inicio de tu móvil.</a>
|
||||
</div>
|
||||
@ -131,4 +129,5 @@
|
||||
</div>
|
||||
%= include 'page/_mobile_menu', categories => $categories
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
94
templates/layouts/search_results.html.ep
Normal file
94
templates/layouts/search_results.html.ep
Normal file
@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
% my $categories = stash 'categories';
|
||||
% my $current_category_slug = stash 'current_category_slug';
|
||||
% my $description_og = stash 'description_og';
|
||||
% $description_og =~ s/\s+/ /g;
|
||||
% $description_og = substr $description_og, 0, 157;
|
||||
% $description_og =~ s/\s\S+$//;
|
||||
% $description_og.='...';
|
||||
% my $base_url = config 'base_url';
|
||||
% use Time::Piece;
|
||||
% my $t = Time::Piece->new();
|
||||
% my $year = $t->year;
|
||||
% my $search_term = stash 'search_term' // '';
|
||||
% if ($search_term eq '#index') {
|
||||
% $search_term = '';
|
||||
% }
|
||||
<html lang="es">
|
||||
<head>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-P9K5VBGN');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SBSKCCF31B"></script>
|
||||
<script type="module" src="/js/cookie.js"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-SBSKCCF31B');
|
||||
</script>
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8178723521508611" crossorigin="anonymous"></script>
|
||||
% my $css_version = config 'css_version';
|
||||
<script src="/js/bundle.js?v=<%=$css_version%>"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css"/>
|
||||
<link rel="stylesheet" href="/css/styles.css?v=<%=$css_version%>"/>
|
||||
<title><%= title %></title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="description" content="<%=defined $description_og ? $description_og : 'Lee más sobre: ' . title %>" />
|
||||
<meta property="og:description" content="<%=defined $description_og ? $description_og : 'Lee más sobre: ' . title %>" />
|
||||
<meta property="og:title" content="<%= title %>"/>
|
||||
<meta property="og:site_name" content="Burguillos Info" />
|
||||
<meta property="og:type" content="website" />
|
||||
% my $ogimage = stash 'ogimage';
|
||||
% say STDERR $ogimage;
|
||||
% my $user_agent = stash 'useragent';
|
||||
|
||||
<meta property="og:url" content="<%=$base_url%><%= url_for %>"/>
|
||||
% if (defined $ogimage) {
|
||||
% my $url_for = url_for || '';
|
||||
<meta itemprop="image" property="og:image" content="<%= $ogimage %>"/>
|
||||
<meta name="image" content="<%= $ogimage %>"/>
|
||||
<meta name="twitter:image" content="<%=$ogimage%>" />
|
||||
% } else {
|
||||
<meta name="image" property="og:image" content="<%=$base_url%>/img/burguillos.webp?v=4">
|
||||
<meta name="twitter:image" content="<%=$base_url%>/img/burguillos.webp?v=4">
|
||||
% }
|
||||
<meta property="og:image:alt" content="Portada de <%= title %>"/>
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
% if (defined $ogimage) {
|
||||
<img style="display: none;" src="<%= $ogimage %>" alt="Portada de <%= title %>"/>
|
||||
% }
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P9K5VBGN"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div class="site-wrapper">
|
||||
</div>
|
||||
<div class="search-overlay default">
|
||||
% if ($is_android) {
|
||||
<div class="description no-android-app open-browser-container">
|
||||
<a href="https://play.google.com/store/apps/details?id=info.burguillos.bi" class="open-in-browser">
|
||||
<img alt="" src="/img/play-store.svg"/>
|
||||
<span>Prueba nuestra aplicación para Android. Más fácil, mejor.</span>
|
||||
</a>
|
||||
</div>
|
||||
% }
|
||||
<div class="search-results">
|
||||
<%= content %>
|
||||
<p>Burguillos Info ©2022-<%=$year%> Sergio Iglesias</p>
|
||||
</div>
|
||||
<div class="bounding-search-bar">
|
||||
%= include 'page/_search_bar', search_term => $search_term
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,34 +1,30 @@
|
||||
% my $posts = stash 'posts';
|
||||
<h2>Artículos</h2>
|
||||
<div class="articles">
|
||||
% my $base_url = config 'base_url';
|
||||
<h2>Resultados de la busqueda</h2>
|
||||
% unless (defined $posts && @$posts) {
|
||||
<p>Parece que aun no hay artículos.</p>
|
||||
<p>No se pudo encontrar nada...</p>
|
||||
% }
|
||||
% for my $post (@$posts) {
|
||||
<a href="/posts/<%=$post->{slug}%>">
|
||||
<article><%
|
||||
my $date_article = DateTime::Format::ISO8601->parse_datetime($post->{date});
|
||||
$date_article->set_time_zone('Europe/Madrid');
|
||||
%><div class="article-up-part">
|
||||
<p class="date"><%= ''.$date_article %></p><%
|
||||
my $title = $post->{title};
|
||||
if (length($title) > 50) {
|
||||
$title = substr($title, 0, 47).'...';
|
||||
}
|
||||
if (defined $post->{image}) {
|
||||
%><div class="image-container">
|
||||
<img alt="Portada de <%=$title%>" src="<%=$post->{image}%>"/>
|
||||
</div><%
|
||||
}
|
||||
%></div><div class="article-down-part"><div>
|
||||
<h3><%=$title%></h3><%
|
||||
my $xml = Mojo::DOM->new($post->{content});
|
||||
my $text = $xml->all_text;
|
||||
if (length($text) > 50) {
|
||||
$text = substr($text, 0, 47).'...';
|
||||
}
|
||||
%><p><%=$text%></p><p class="author">Escrito por <%=$post->{author}%></p>
|
||||
</div></div></article>
|
||||
</a>
|
||||
% }
|
||||
</div>
|
||||
% my $url = "$base_url/posts/$post->{slug}";
|
||||
% my $title = $post->{title};
|
||||
% if (length($title) > 50) {
|
||||
% $title = substr($title, 0, 47).'...';
|
||||
% }
|
||||
<div class="search-result">
|
||||
<div class="row-title-url-image">
|
||||
% if (defined $post->{image}) {
|
||||
<img alt="" src="<%=$post->{image}%>">
|
||||
% }
|
||||
<div class="column-title-url">
|
||||
<b><%=$post->{title}%></b><br/>
|
||||
<a href="<%=$url%>"><%=$url%></a>
|
||||
</div>
|
||||
</div>
|
||||
% my $xml = Mojo::DOM->new($post->{content});
|
||||
% my $text = $xml->all_text;
|
||||
% if (length($text) > 120) {
|
||||
% $text = substr($text, 0, 117).'...';
|
||||
% }
|
||||
<p><%=$text%></p>
|
||||
</div>
|
||||
% }
|
||||
|
@ -2,8 +2,4 @@
|
||||
<nav class="mobile-shortcuts">
|
||||
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
|
||||
%= include 'page/_search_bar'
|
||||
<a class="menu-expand" href="#">
|
||||
<img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
|
||||
<img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
|
||||
</a>
|
||||
</nav>
|
||||
|
@ -1,8 +1,9 @@
|
||||
% my $search_term = stash 'search_term' // '';
|
||||
<div class="search">
|
||||
<a href="#" class="search-icon">
|
||||
<img alt="Buscar" src="/img/search.svg"/>
|
||||
</a>
|
||||
<div class="fake-text-box">
|
||||
<input type="text"></input>
|
||||
<input type="text" value="<%=$search_term%>"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
4
templates/page/_search_tutorial.html.ep
Normal file
4
templates/page/_search_tutorial.html.ep
Normal file
@ -0,0 +1,4 @@
|
||||
<div class="tutorial-overlay-step-1 hidden">
|
||||
<p class="explanation">Esta es la barra de busqueda</p>
|
||||
<img class="arrow" src="/img/arrow-pointing-down.webp"/>
|
||||
</div>
|
@ -11,10 +11,12 @@
|
||||
% my $description_og = '<div>'.$attribute->{description}.'</div>';
|
||||
% $description_og = Mojo::DOM->new($description_og)->all_text;
|
||||
% my $posts = stash 'posts';
|
||||
% layout 'default', current_category_slug => $category->{slug}, description_og => $description_og;
|
||||
% layout 'search_results', current_category_slug => $category->{slug}, description_og => $description_og, search_term => "#$category->{slug}:$attribute->{identifier}";
|
||||
% title $attribute->{title};
|
||||
<div class="description">
|
||||
<h1><%= $attribute->{title} %></h1>
|
||||
<%== $attribute->{description} %>
|
||||
</div>
|
||||
<div class="content">
|
||||
%= include 'page/_list_posts', posts => $posts;
|
||||
</div>
|
||||
|
@ -7,30 +7,17 @@
|
||||
%
|
||||
% use BurguillosInfo::Posts;
|
||||
%
|
||||
% my $current_category = stash 'current_category';
|
||||
% my $description_og = '<div>'.$current_category->{description}.'</div>';
|
||||
% $description_og = Mojo::DOM->new($description_og)->all_text;
|
||||
% layout 'default', current_category_slug => $current_category->{slug}, description_og => $description_og;
|
||||
% layout 'search_results', current_category_slug => $current_category->{slug}, description_og => $description_og, search_term => "#$current_category->{slug}";
|
||||
% title $current_category->{title};
|
||||
<div class="description">
|
||||
<h1><%= $current_category->{title} %></h1>
|
||||
<%== $current_category->{description} %>
|
||||
</div>
|
||||
<div class="content">
|
||||
% my $children_categories = $current_category->{children};
|
||||
% my $attributes = $current_category->{attributes};
|
||||
% if (@$children_categories || %$attributes) {
|
||||
<h2>Quizás te interese.</h2>
|
||||
% for my $child_category (@$children_categories) {
|
||||
<p><a href="/<%=$child_category->{slug}%>"><%==$child_category->{title}%></a></p>
|
||||
% }
|
||||
% for my $attribute_slug (keys %$attributes) {
|
||||
% my $attribute = $attributes->{$attribute_slug};
|
||||
<p><a href="<%="/$current_category->{slug}/atributo/$attribute->{identifier}"%>"><%==$attribute->{menu_text}%></a></p>
|
||||
% }
|
||||
% }
|
||||
% my ($category_posts) = BurguillosInfo::Posts->new->RetrieveAllPostsForCategory($current_category->{slug});
|
||||
%= include 'page/_list_posts', posts => $category_posts;
|
||||
<h2>Suscribete a esta categoría.</h2>
|
||||
|
||||
<a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss">
|
||||
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
|
||||
</a>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user