From 32a2b3e6c1bbdaed66ec7bb3afeba6806d6bb4e5 Mon Sep 17 00:00:00 2001
From: MassiveAtoms <s.ramsaransing.w@gmail.com>
Date: Wed, 15 Jul 2020 13:26:13 -0300
Subject: [PATCH] css concepts

---
 .../library/templates/base.html               | 25 ++++-
 .../library/templates/library/book_list.html  | 93 ++++++++++++-------
 2 files changed, 79 insertions(+), 39 deletions(-)

diff --git a/CalibreWebCompanion/library/templates/base.html b/CalibreWebCompanion/library/templates/base.html
index 1dbb70d..e0ff2e6 100644
--- a/CalibreWebCompanion/library/templates/base.html
+++ b/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>
 
diff --git a/CalibreWebCompanion/library/templates/library/book_list.html b/CalibreWebCompanion/library/templates/library/book_list.html
index 0750391..3f90df0 100644
--- a/CalibreWebCompanion/library/templates/library/book_list.html
+++ b/CalibreWebCompanion/library/templates/library/book_list.html
@@ -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 %}
\ No newline at end of file
+  {% endblock %}
\ No newline at end of file