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

new css framework, changed book detail and search, reworked tables

Browse Source
This commit is contained in:
Stefan Udit 2020-07-11 17:36:26 -03:00
parent c00b2b0e52
commit 1c616d27d9
11 changed files with 134 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
CalibreWebCompanion/library/static/css/styles.css
View File

@ -1,112 +0,0 @@
/* sidenav */
/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a,
.dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover,
.dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px;
/* Same as the width of the sidenav */
font-size: 20px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.topnav li {
float: right;
}
.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav li a:hover {
background-color: #111;
}
/* Table */
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}

14
CalibreWebCompanion/library/static/js/nav.js
View File

@ -1,14 +0,0 @@
var dropdown = document.getElementsByClassName("dropdown-btn");
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";
}
});
}

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

@ -5,97 +5,88 @@
{% 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">
<!-- Add additional CSS in static file -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<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>
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>
</head>
<body>
{% block topnav%}
<ul class="topnav">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper row">
<ul class="right">
{% 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>
<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 %}
<li><a href="{{tag.get_absolute_url}}">{{tag}}</a></li>
{% endfor %}
</ul>
{% else %}
<li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
{% endif %}
</ul>
{% endblock %}
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<div class="sidenav">
<a href="{% url 'search' %}">Search</a>
<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>
{% endif %}
</div>
</nav>
</div>
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
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";
}
});
}
$(".dropdown-trigger").dropdown({hover: true, constrainWidth: false, coverTrigger: false});
</script>
{% block content %} {% endblock %}
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
@ -153,17 +144,6 @@
}
</script>
{% else %}
<h1>You don't have permission to view this.</h1>
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
or
<li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
{% endif %}
</body>
</html>

12
CalibreWebCompanion/library/templates/library/author_detail.html
View File

@ -4,14 +4,14 @@
{% load static %}
<h1>{{author}}</h1>
<table id="books">
<table id="books" class="highlight centered">
<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>
<th class="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>

25
CalibreWebCompanion/library/templates/library/book_detail.html
View File

@ -2,16 +2,20 @@
{% block content %}
{% load static %}
<h1>{{book.title}} by
<div class="row">
<div class="col s4"><a href="{% static "" %}{{download}}"><img src="{% static "" %}{{imgpath}}" alt="download" srcset=""></a></div>
<div class="col s8">
<h1> {{book.title}}</h1>
<h4> by
{% if book.authors %}
{% for author in book.authors.all %}
<a href="{{author.get_absolute_url}}">{{author.name}}</a>
{%endfor%}
{% else %}
{{book.author_sort}}
{%endif%}
<br>
Published by
{% if book.publishers %}
{% for pub in book.publishers.all %}
@ -19,9 +23,8 @@
{%endfor%}
{% else %}
Unknown
{%endif%}
<br>
Tags:
{% if book.tags %}
{% for tag in book.tags.all %}
@ -29,7 +32,7 @@
{%endfor%}
{% else %}
{%endif%}
<br>
Rating:
{% if book.ratings %}
{% for rating in book.ratings.all %}
@ -37,14 +40,16 @@
{%endfor%}
{% else %}
{%endif%}
<br>
<a href="{{book.publisher.get_absolute_url}}">{{book.publisher}}</a>
</h1>
<a href="{% static "" %}{{download}}"><img src="{% static "" %}{{imgpath}}" alt="download" srcset=""></a>
</h4>
</div>
</div>
<div class="container">
{% autoescape off %}
{{comment}}
{% endautoescape %}
</div>
{% endblock %}

29
CalibreWebCompanion/library/templates/library/book_list.html
View File

@ -1,17 +1,21 @@
{% extends "base.html" %}
{% block content %}
{% load static %}
<h1>Book List</h1>
<table id="books">
<h1 class="center">Book List</h1>
<div class="row">
<div class="col s1 m0">
</div>
<div class="col s10 m12">
<table id="books" class="highlight centered">
<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>
<th class="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th>
</tr>
{% for book in book_list %}
<tr>
@ -30,11 +34,8 @@
</tr>
{% endfor %}
</table>
<div class="col s1 m0">
</div>
</div>
{% endblock %}

12
CalibreWebCompanion/library/templates/library/publisher_detail.html
View File

@ -5,14 +5,14 @@
<h1>{{publisher}} </h1>
{% if publisher.released %}
<table id="books">
<table id="books" class="highlight centered">
<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>
<th class="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>

14
CalibreWebCompanion/library/templates/library/rating_detail.html
View File

@ -3,16 +3,16 @@
{% block content %}
{% load static %}
<h1>{{rating}}</h1>
<h1 class="left">⭐ {{rating}}</h1>
{% if books %}
<table id="books">
<table id="books" class="highlight centered">
<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>
<th class="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>

12
CalibreWebCompanion/library/templates/library/tag_detail.html
View File

@ -5,14 +5,14 @@
<h1>{{tag}}</h1>
{% if books %}
<table id="books">
<table id="books" class="highlight centered">
<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>
<th class="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th>
</tr>
{% for book in books %}
<tr>

10
CalibreWebCompanion/library/templates/results.html
View File

@ -7,11 +7,11 @@
<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>
<th class="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th>
</tr>
{% for book in book_list %}
<tr>

8
CalibreWebCompanion/library/templates/search.html
View File

@ -1,15 +1,15 @@
{% extends "base.html" %}
{% block content %}
{% load static %}
<form action="{% url 'results' %}" method="get">
<div class="container">
<form action="{% url 'results' %}" method="get" style="padding-top:2em">
<label for="title">Title: </label>
<input id="title" type="text" name="title" value="">
<label for="author">Author: </label>
<input id="author" type="text" name="author" value="">
<input type="submit" value="search">
</form>
</div>
{% endblock %}