MassiveAtoms/calibre-web-companion
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

beautified it

Browse Source
This commit is contained in:
MassiveAtoms
2020-07-08 13:22:37 -03:00
parent 73f6937c78
commit 0ab703f8b9
13 changed files with 342 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
CalibreWebCompanion/library/templates/base.html
View File

@ -1,55 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% block title %}<title>Local Library</title>{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Add additional CSS in static file -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<div class="sidenav">
<a href="{% url 'books' %}">Books</a>
<a href="{% url 'authors' %}">Authors</a>
<a href="{% url 'publishers' %}">Publishers</a>
<a href="{% url 'ratings' %}">Ratings</a>
<button class="dropdown-btn">Tags
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
{% for tag in tag_list %}
<a href="{{tag.get_absolute_url}}">{{tag}}</a>
{% endfor %}
<a href="#">doesnt work </a>
</div>
</div>
{% endblock %}
{% block sidebar %}
<div class="sidenav">
<a href="{% url 'books' %}">Books</a>
<button class="dropdown-btn">Authors
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
{% for author in unique_authors %}
<a href="{{author.get_absolute_url}}">{{author}}</a>
{% endfor %}
</div>
<button class="dropdown-btn">Publishers
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
{% for publisher in unique_publishers %}
<a href="{{publisher.get_absolute_url}}">{{publisher}}</a>
{% endfor %}
</div>
<button class="dropdown-btn">Ratings
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
{% for rating in unique_ratings %}
<a href="{{rating.get_absolute_url}}">{{rating}}</a>
{% endfor %}
</div>
<button class="dropdown-btn">Tags
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
{% for tag in unique_tags %}
<a href="{{tag.get_absolute_url}}">{{tag}}</a>
{% endfor %}
</div>
</div>
{% endblock %}
</div>
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
</div>
</div>
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function () {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
<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;
}
}
}
}
});
}
</script>
</body>
</html>

34
CalibreWebCompanion/library/templates/library/authors_detail.html
View File

@ -3,15 +3,33 @@
{% block content %}
{% load static %}
<h1>{{authors}}</h1>
{% if books %}
<ul>
{% for book in books %}
<li><a href="{{book.get_absolute_url}}">{{book.title}}</a></li>
{%endfor%}
</ul>
{% else %}
{%endif%}
<table id="books">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Title</th>
<th onclick="sortTable(1)">Author</th>
<th onclick="sortTable(2)">Rating</th>
<th onclick="sortTable(3)">Tags</th>
<th onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>
<td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td>
<td>{{book.author_sort}}</td>
<td> {% for rating in book.ratings.all %}
{{rating}}
{% endfor %}
</td>
<td>
{% for tag in book.tags.all %}
{{tag}},
{% endfor %}
</td>
<td>{{book.timestamp}}</td>
</tr>
{% endfor %}
</table>

47
CalibreWebCompanion/library/templates/library/books_list.html
View File

@ -2,16 +2,39 @@
{% block content %}
{% load static %}
<h1>Book List</h1>
{% if books_list %}
<ul>
{% for book in books_list %}
<li>
<a href="{{ book.get_absolute_url }}">{{ book.title }}</a> ({{book.author_sort}})
</li>
{% endfor %}
</ul>
{% else %}
<p>There are no books in the library.</p>
{% endif %}
<h1>Book List</h1>
<table id="books">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Title</th>
<th onclick="sortTable(1)">Author</th>
<th onclick="sortTable(2)">Rating</th>
<th onclick="sortTable(3)">Tags</th>
<th onclick="sortTable(4)">Added</th>
</tr>
{% for book in books_list %}
<tr>
<td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td>
<td>{{book.author_sort}}</td>
<td> {% for rating in book.ratings.all %}
{{rating}}
{% endfor %}
</td>
<td>
{% for tag in book.tags.all %}
{{tag}},
{% endfor %}
</td>
<td>{{book.timestamp}}</td>
</tr>
{% endfor %}
</table>
{% endblock %}

40
CalibreWebCompanion/library/templates/library/publishers_detail.html
View File

@ -2,17 +2,37 @@
{% block content %}
{% load static %}
<h1>{{authors}} </h1>
<h1>{{publishers}} </h1>
{% if publishers.released %}
<ul>
{% for book in publishers.released.all %}
<li><a href="{{book.get_absolute_url}}">{{book.title}}</a></li>
{%endfor%}
</ul>
{% else %}
{%endif%}
{% if publishers.released %}
<table id="books">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Title</th>
<th onclick="sortTable(1)">Author</th>
<th onclick="sortTable(2)">Rating</th>
<th onclick="sortTable(3)">Tags</th>
<th onclick="sortTable(4)">Added</th>
</tr>
{% for book in publishers.released.all %}
<tr>
<td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td>
<td>{{book.author_sort}}</td>
<td> {% for rating in book.ratings.all %}
{{rating}}
{% endfor %}
</td>
<td>
{% for tag in book.tags.all %}
{{tag}},
{% endfor %}
</td>
<td>{{book.timestamp}}</td>
</tr>
{% endfor %}
</table>
{% else %}
{%endif%}
{% endblock %}

38
CalibreWebCompanion/library/templates/library/ratings_detail.html
View File

@ -4,15 +4,35 @@
{% load static %}
<h1>{{ratings}}</h1>
{% if books %}
<ul>
{% for book in books %}
<li><a href="{{book.get_absolute_url}}">{{book.title}}</a></li>
{%endfor%}
</ul>
{% else %}
{%endif%}
{% if books %}
<table id="books">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Title</th>
<th onclick="sortTable(1)">Author</th>
<th onclick="sortTable(2)">Rating</th>
<th onclick="sortTable(3)">Tags</th>
<th onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>
<td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td>
<td>{{book.author_sort}}</td>
<td> {% for rating in book.ratings.all %}
{{rating}}
{% endfor %}
</td>
<td>
{% for tag in book.tags.all %}
{{tag}},
{% endfor %}
</td>
<td>{{book.timestamp}}</td>
</tr>
{% endfor %}
</table>
{% else %}
{%endif%}

38
CalibreWebCompanion/library/templates/library/tags_detail.html
View File

@ -4,15 +4,35 @@
{% load static %}
<h1>{{tags}}</h1>
{% if books %}
<ul>
{% for book in books %}
<li><a href="{{book.get_absolute_url}}">{{book.title}}</a></li>
{%endfor%}
</ul>
{% else %}
{%endif%}
{% if books %}
<table id="books">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Title</th>
<th onclick="sortTable(1)">Author</th>
<th onclick="sortTable(2)">Rating</th>
<th onclick="sortTable(3)">Tags</th>
<th onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>
<td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td>
<td>{{book.author_sort}}</td>
<td> {% for rating in book.ratings.all %}
{{rating}}
{% endfor %}
</td>
<td>
{% for tag in book.tags.all %}
{{tag}},
{% endfor %}
</td>
<td>{{book.timestamp}}</td>
</tr>
{% endfor %}
</table>
{% else %}
{%endif%}