152 lines
5.5 KiB
HTML
152 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head style="height: 100%">
|
|
<meta charset="UTF-8">
|
|
<title>rpi - {{ title }}</title>
|
|
<link rel="icon" type="image/png" href="/static/images/icon.png" sizes="32x32">
|
|
<link href="/static/video-js-7.7.5/video-js.css" rel="stylesheet">
|
|
<script src='/static/video-js-7.7.5/video.js'></script>
|
|
<link rel="stylesheet" href="/static/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/static/w3.css">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
{% block head %}
|
|
{% endblock %}
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="height: 100vh;display: flex; flex-direction: column; margin: 0">
|
|
<div style="flex: 1 0 auto">
|
|
<div class="sticky-top">
|
|
<nav class="navbar navbar-expand navbar-light bg-secondary">
|
|
<a class="navbar-brand" href="{{ url_for("home") }}">
|
|
<img src="/static/images/icon.png" height="40px" alt="">
|
|
</a>
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for("home") }}">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for("comics.index") }}">Comics</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for("tv_movies.index") }}">Tv & Movies</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for("games.index") }}">Games</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for("login") }}">
|
|
Login
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for("logout") }}">
|
|
Logout
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{% block nav %}
|
|
{% endblock %}
|
|
</div>
|
|
{% block content %}
|
|
<p>Hello World!</p>
|
|
{% endblock %}
|
|
</div>
|
|
|
|
<script>
|
|
var page_num = {% if page %}{{ page }}{% else %}1{% endif %};
|
|
var max_items = {{ max_items }};
|
|
var item_count = {{ item_count }};
|
|
var start = max_items*(page_num-1);
|
|
var end;
|
|
if (item_count < max_items*page_num) {
|
|
end = item_count;
|
|
} else {
|
|
end = max_items * page_num;
|
|
}
|
|
var page_container = document.getElementById("page-container");
|
|
|
|
function go_to_page(pagenumber) {
|
|
let url = new URL(document.location)
|
|
url.searchParams.set("page", pagenumber)
|
|
window.history.replaceState(null, null, url.toString())
|
|
{#document.location.search = search#}
|
|
page_num = pagenumber;
|
|
start = max_items*(page_num-1);
|
|
if (item_count < max_items*page_num) {
|
|
end = item_count;
|
|
} else {
|
|
end = max_items * page_num;
|
|
}
|
|
populate_page()
|
|
var page_count = Math.ceil(item_count/max_items);
|
|
if (page_count > 1) {
|
|
var min = 1 + page_num - 6;
|
|
var max = page_num + 6;
|
|
var prev = page_num - 1;
|
|
var next = page_num + 1;
|
|
if (min <= 1) {
|
|
min = 2;
|
|
}
|
|
if (max >= page_count) {
|
|
max = page_count;
|
|
}
|
|
var pagination_bars = document.getElementsByClassName("pagination");
|
|
for (let i = 0; i < pagination_bars.length; i++) {
|
|
pagination_bars[i].innerHTML = "";
|
|
|
|
if (page_num != 1) {
|
|
var prev_item = `<li class="page-item"><button name="page" value="${prev}" class="page-link" onclick="offset_page(-1)"><img src="/static/svg/chevron-left.svg"></button></li>`;
|
|
pagination_bars[i].innerHTML += prev_item;
|
|
}
|
|
first_active = "";
|
|
if (page_num == 1) {first_active = "active"}
|
|
var first_item = `<li class="page-item ${first_active}"><button name="page" value="1" class="page-link" onclick="go_to_page(1)">1</button></li>`;
|
|
pagination_bars[i].innerHTML += first_item;
|
|
if (min > 2) {pagination_bars[i].innerHTML += "...";}
|
|
|
|
for (x = min; x < max; x++) {
|
|
active = "";
|
|
if (page_num == x) {active = "active"}
|
|
var item = `<li class="page-item ${active}"><button name="page" value="${x}" class="page-link" onclick="go_to_page(${x})">${x}</button></li>`;
|
|
pagination_bars[i].innerHTML += item;
|
|
}
|
|
|
|
if (max < page_count) {pagination_bars[i].innerHTML += "...";}
|
|
last_active = "";
|
|
if (page_num == page_count) {last_active = "active"}
|
|
var last_item = `<li class="page-item ${last_active}"><button name="page" value="1" class="page-link" onclick="go_to_page(${page_count})">${page_count}</button></li>`;
|
|
pagination_bars[i].innerHTML += last_item;
|
|
if (page_num != page_count) {
|
|
var next_item = `<li class="page-item"><button name="page" value="${next}" class="page-link" onclick="offset_page(1)"><img src="/static/svg/chevron-right.svg"></button></li>`;
|
|
pagination_bars[i].innerHTML += next_item;
|
|
}
|
|
}
|
|
}
|
|
window.scrollTo(0, 0)
|
|
}
|
|
|
|
function offset_page(i) {
|
|
go_to_page(page_num += i);
|
|
}
|
|
</script>
|
|
{% block footer %}
|
|
<footer class="bg-secondary" style="flex-shrink: 0; padding: 20px;">
|
|
{% block footer_content %}
|
|
{% endblock footer_content %}
|
|
</footer>
|
|
{% endblock footer %}
|
|
<script>
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|