Matthew Welch
5b78e61031
added swipe controls for easier use on mobile devices and better buttons for use on non mobile devices.
39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block head %}
|
|
<script src="/static/hammer.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="page">
|
|
<a href="{{ prev_url }}" ondragstart="return false" id="prev-image">
|
|
{% if not on_mobile %}
|
|
<img src="/static/svg/chevron-left.svg" style="position: absolute; height: 7em; top: 50%; left: 50px" alt="">
|
|
{% endif %}
|
|
</a>
|
|
<a href="{{ next_url }}" ondragstart="return false" id="next-image">
|
|
{% if not on_mobile %}
|
|
<img src="/static/svg/chevron-right.svg" style="position: absolute; height: 7em; top: 50%; right: 50px" alt="">
|
|
{% endif %}
|
|
</a>
|
|
<a href="{{ next_url }}" ondragstart="return false">
|
|
<img class="comic-page" ondragstart="return false" id="image" src="/comics/get_comic/{{ comic["id"] }}/{{ page_number }}" alt="">
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
let prev_image = document.getElementById("prev-image");
|
|
let next_image = document.getElementById("next-image");
|
|
let page = document.getElementById("page");
|
|
let hammer = new Hammer(page);
|
|
|
|
hammer.on("swiperight", function (ev) {
|
|
prev_image.click();
|
|
});
|
|
hammer.on("swipeleft", function (ev) {
|
|
next_image.click();
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|