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

css concepts

Browse Source
This commit is contained in:
MassiveAtoms
2020-07-15 13:26:13 -03:00
parent 14f14a2f33
commit 32a2b3e6c1
2 changed files with 79 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,42 +2,67 @@
{% block content %}
<style>
/* stefan, this is my tag style */
.tags a {
color: #FFFFFF;
background-color: #43A047;
text-transform: uppercase;
font-size: .66rem;
white-space: nowrap;
border-radius: 2rem;
padding: .25rem .85rem .25rem;
line-height: 2;
margin: 0.1rem 0.1rem .1rem;
}
.tags {
width: 25vw;
padding: .5rem 0 1rem;
line-height: 2;
display: flex;
flex-flow: row wrap;
}
</style>
<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 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>
<th class="added" onclick="sortTable(5)">Published</th>
</tr>
{% for book in book_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}}
<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 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>
<th class="published" onclick="sortTable(5)">Published</th>
</tr>
{% for book in book_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 class="tags">
<!-- stefan -->
{% for tag in book.tags.all %}
<a href={{tag.get_absolute_url}} rel="tag">{{tag}}</a>
{% endfor %}
</td>
<td>{{book.timestamp | date:"d/m/Y" }}</td>
<td>{{book.pubdate.year}}</td>
</tr>
{% endfor %}
</td>
<td>
{% for tag in book.tags.all %}
{{tag}},
{% endfor %}
</td>
<td>{{book.timestamp | timesince}} ago</td> <!-- YES, very good sorting here.... // DEBUG fix js so it can sort this -->
<td>{{book.pubdate.year}}</td>
</tr>
{% endfor %}
</table>
<div class="col s1 m0">
</div>
</div>
</table>
<div class="col s1 m0">
</div>
</div>
{% endblock %}
{% endblock %}