calibre-web-companion/CalibreWebCompanion/library/templates/base.html

186 lines
5.9 KiB
HTML
Raw Normal View History

2020-07-08 02:11:21 +00:00
<!DOCTYPE html>
<html lang="en">
2020-07-08 16:22:37 +00:00
2020-07-08 02:11:21 +00:00
<head>
{% block title %}<title>Local Library</title>{% endblock %}
2020-07-13 00:09:26 +00:00
2020-07-08 02:11:21 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<style>
2020-07-13 00:09:26 +00:00
table {
width: 100%;
table-layout: fixed;
}
th {
text-align: center;
}
.title {
width: 40%;
}
.author {
width: 20%;
}
.rating {
width: 5%;
}
.tags {
width: 15%;
}
.added {
width: 20%;
}
</style>
2020-07-08 02:11:21 +00:00
</head>
2020-07-08 16:22:37 +00:00
2020-07-08 02:11:21 +00:00
<body>
2020-07-08 16:22:37 +00:00
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper row green darken-1">
<ul class="right">
2020-07-13 00:09:26 +00:00
{% if user.is_authenticated %}
<li class="active"><a href="{{user.get_absolute_url}}"> {{ user.get_username }}</a></li>
<li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
</ul>
<ul class="left">
<li><a href="{% url 'search' %}">Search</a></li>
<li><a href="{% url 'books' %}">Books</a></li>
2020-07-13 00:09:26 +00:00
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-authors">Authors<i
class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-ratings">Ratings<i
class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown-tags">Tags<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<ul id="dropdown-authors" class="dropdown-content">
{% for author in unique_authors %}
<li><a href="{{author.get_absolute_url}}">{{author}}</a></li>
{% endfor %}
</ul>
<ul id="dropdown-ratings" class="dropdown-content">
{% for rating in unique_ratings %}
<li><a href="{{rating.get_absolute_url}}">{{rating}}</a></li>
{% endfor %}
</ul>
<ul id="dropdown-tags" class="dropdown-content">
{% for tag in unique_tags %}
2020-07-14 22:48:54 +00:00
<li><a href="{{tag.get_absolute_url}}">{{tag}} ({{tag.num_books}})</a></li>
{% endfor %}
</ul>
{% else %}
2020-07-13 00:09:26 +00:00
<li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
</ul>
{% endif %}
2020-07-08 02:11:21 +00:00
</div>
</nav>
2020-07-08 02:11:21 +00:00
</div>
<script>
2020-07-13 00:09:26 +00:00
$(".dropdown-trigger").dropdown({
hover: true,
constrainWidth: false,
coverTrigger: false
});
2020-07-08 16:22:37 +00:00
</script>
2020-07-13 00:09:26 +00:00
{% if user.is_authenticated %}
{% block content %} {% endblock %}
{% else %}
<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
<div class="valign" style="width:100%;">
<div class="container">
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content center">
2020-07-14 22:48:54 +00:00
<p>You don't have permission to view this.</p>
</div>
<div class="card-action center">
2020-07-14 22:48:54 +00:00
<a class="waves-effect waves-light btn-large green accent-4"
href="{% url 'login'%}?next={{request.path}}">Login</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2020-07-13 00:09:26 +00:00
{% endif %}
2020-07-08 16:22:37 +00:00
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("books");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
2020-07-08 02:11:21 +00:00
}
</script>
2020-07-09 05:14:08 +00:00
2020-07-08 02:11:21 +00:00
</body>
2020-07-08 16:22:37 +00:00
2020-07-08 02:11:21 +00:00
</html>