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

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

@@ -14,6 +14,16 @@
<!-- Compiled and minified JavaScript --> <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<style> <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 { table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
@@ -24,7 +34,7 @@
} }
.title { .title {
width: 40%; width: 30%;
} }
.author { .author {
@@ -36,12 +46,16 @@
} }
.tags { .tags {
width: 15%; width: 25%;
}
.added {
width: 10%;
} }
.added { .published {
width: 20%; width: 10%;
} }
</style> </style>
</head> </head>
@@ -108,7 +122,8 @@
</ul> </ul>
<ul id="dropdown-pubishers" class="dropdown-content"> <ul id="dropdown-pubishers" class="dropdown-content">
{% for pub in unique_publishers %} {% 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 %} {% endfor %}
</ul> </ul>

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

@@ -2,42 +2,67 @@
{% block content %} {% 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> <h1 class="center">Book List</h1>
<div class="row"> <div class="row">
<div class="col s1 m0"> <div class="col s1 m0">
</div> </div>
<div class="col s10 m12"> <div class="col s10 m12">
<table id="books" class="highlight centered"> <table id="books" class="highlight centered">
<tr> <tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:--> <!--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="title" onclick="sortTable(0)">Title</th>
<th class="author" onclick="sortTable(1)">Author</th> <th class="author" onclick="sortTable(1)">Author</th>
<th class="rating" onclick="sortTable(2)">Rating</th> <th class="rating" onclick="sortTable(2)">Rating</th>
<th class="tags" onclick="sortTable(3)">Tags</th> <th class="tags" onclick="sortTable(3)">Tags</th>
<th class="added" onclick="sortTable(4)">Added</th> <th class="added" onclick="sortTable(4)">Added</th>
<th class="added" onclick="sortTable(5)">Published</th> <th class="published" onclick="sortTable(5)">Published</th>
</tr> </tr>
{% for book in book_list %} {% for book in book_list %}
<tr> <tr>
<td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td> <td><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></td>
<td>{{book.author_sort}}</td> <td>{{book.author_sort}}</td>
<td> {% for rating in book.ratings.all %} <td> {% for rating in book.ratings.all %}
{{rating}} {{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 %} {% endfor %}
</td> </table>
<td> <div class="col s1 m0">
{% for tag in book.tags.all %} </div>
{{tag}}, </div>
{% 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>
{% endblock %} {% endblock %}