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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,16 @@
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<style>
p.count {
color: #FFFFFF;
background-color: #515151;
border: 1px #303030;
border-radius: 0.5rem;
padding: .2rem .25rem ;
margin: 0.1rem 0.1rem .1rem;
}
table {
width: 100%;
table-layout: fixed;
@ -24,7 +34,7 @@
}
.title {
width: 40%;
width: 30%;
}
.author {
@ -36,12 +46,16 @@
}
.tags {
width: 15%;
width: 25%;
}
.added {
width: 10%;
}
.added {
width: 20%;
.published {
width: 10%;
}
</style>
</head>
@ -108,7 +122,8 @@
</ul>
<ul id="dropdown-pubishers" class="dropdown-content">
{% for pub in unique_publishers %}
<li><a href="{{pub.get_absolute_url}}">{{pub}} ({{pub.num_books}})</a></li>
<!-- stefan here's my shit count -->
<li><a href="{{pub.get_absolute_url}}">{{pub}} <p class="count">{{pub.num_books}}</p> </a> </li>
{% endfor %}
</ul>

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 %}