css concepts

CalibreWebCompanion/library/templates/base.html

@@ -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>
 

CalibreWebCompanion/library/templates/library/book_list.html

@@ -2,13 +2,37 @@
 
 {% 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">
+  <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>
@@ -16,7 +40,7 @@
         <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>
+        <th class="published" onclick="sortTable(5)">Published</th>
       </tr>
       {% for book in book_list %}
       <tr>
@@ -26,18 +50,19 @@
           {{rating}}
           {% endfor %}
         </td>
-    <td>
+        <td class="tags">
+          <!-- stefan  -->
           {% for tag in book.tags.all %}
-      {{tag}},
+          <a href={{tag.get_absolute_url}} rel="tag">{{tag}}</a>
           {% endfor %}
         </td>
-    <td>{{book.timestamp | timesince}} ago</td> <!-- YES, very good sorting here.... // DEBUG fix js so it can sort this -->
+        <td>{{book.timestamp | date:"d/m/Y" }}</td>
         <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 %}