Matthew Welch
c4e6824a8a
Change error logging to log messages as error rather than info Add 404 error when video or comic not found Change paths to use pathlib
154 lines
5.7 KiB
HTML
154 lines
5.7 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">
|
|
<link href="/static/videojs-resolution-switcher.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/static/w3.css">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src='/static/video-js-7.7.5/video.js'></script>
|
|
<script src="/static/videojs-resolution-switcher.js"></script>
|
|
{% 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 = {% if max_items %}{{ max_items }}{% else %}1{% endif %};
|
|
var item_count = {% if item_count %}{{ item_count }}{% else %}1{% endif %};
|
|
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>
|