alamin/websurfx
alamin/websurfx
0
0
Fork 0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-11-21 13:38:21 -05:00
Code Issues Releases Activity

add previous and next button to navigate to different pages

Browse Source
This commit is contained in:
neon_arch 2023-05-03 21:31:52 +03:00
parent 664fba2449
commit a912e64f6d
3 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/static/pagination.js Normal file
View File

@ -0,0 +1,26 @@
function navigate_forward() {
const url = new URL(window.location)
const searchParams = url.searchParams
let q = searchParams.get('q')
let page = searchParams.get('page')
if (page === null) {
page = 2
window.location = `${url.origin}${url.pathname}?q=${q}&page=${page}`
} else {
window.location = `${url.origin}${url.pathname}?q=${q}&page=${++page}`
}
}
function navigate_backward() {
const url = new URL(window.location)
const searchParams = url.searchParams
let q = searchParams.get('q')
let page = searchParams.get('page')
if (page !== null && page > 1) {
window.location = `${url.origin}${url.pathname}?q=${q}&page=${--page}`
}
}

20
public/static/themes/simple.css
View File

@ -240,3 +240,23 @@ footer {
.error_content p a:hover {
color: var(--5);
}
.page_navigation {
padding: 0 0 2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.page_navigation button {
background: var(--bg);
color: var(--fg);
padding: 1rem;
border-radius: 0.5rem;
outline: none;
border: none;
}
.page_navigation button:active {
filter: brightness(1.2);
}

31
public/templates/search.html
View File

@ -1,20 +1,25 @@
{{>header this.style}}
<main class="results">
{{>search_bar}}
<div class="results_aggregated">
{{#each results}}
<div class="result">
<h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
<small>{{this.url}}</small>
<p>{{{this.description}}}</p>
<div class="upstream_engines">
{{#each engine}}
<span>{{this}}</span>
{{/each}}
</div>
</div>
{{>search_bar}}
<div class="results_aggregated">
{{#each results}}
<div class="result">
<h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
<small>{{this.url}}</small>
<p>{{{this.description}}}</p>
<div class="upstream_engines">
{{#each engine}}
<span>{{this}}</span>
{{/each}}
</div>
</div>
{{/each}}
</div>
<div class="page_navigation">
<button type="button" onclick="navigate_backward()">&#8592; previous</button>
<button type="button" onclick="navigate_forward()">next &#8594;</button>
</div>
</main>
<script src="static/index.js"></script>
<script src="static/pagination.js"></script>
{{>footer}}