render read

cps/static/css/style.css

@@ -123,12 +123,19 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
   position: relative;
 }
 
-.container-fluid .book .cover img {
-  border: 1px solid #fff;
-  box-sizing: border-box;
-  height: 100%;
+.container-fluid .book .cover span.img {
   bottom: 0;
+  height: 100%;
   position: absolute;
+}
+
+.container-fluid .book .cover span img {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border: 1px solid #fff;
+  box-sizing: border-box;
   -webkit-box-shadow: 0 5px 8px -6px #777;
   -moz-box-shadow: 0 5px 8px -6px #777;
   box-shadow: 0 5px 8px -6px #777;
@@ -203,6 +210,14 @@ span.glyphicon.glyphicon-tags {
    left: 2px;
    background-color: #777;
 }
+.cover .read{
+  left: auto;
+  right: 2px;
+  width: 17px;
+  height: 17px;
+  display: inline-block;
+  padding: 2px;
+}
 .cover-height { max-height: 100px;}
 
 .col-sm-2 a .cover-small {

cps/templates/grid.html

@@ -28,8 +28,10 @@
               <div class="col-sm-3 col-lg-2 col-xs-6 book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
                   <div class="cover">
                       <a href="{{url_for('web.books_list', data=data, sort_param='new', book_id=entry[0].series[0].id )}}">
-                          <img src="{{ url_for('web.get_cover', book_id=entry[0].id) }}" alt="{{ entry[0].name }}"/>
-                          <span class="badge">{{entry.count}}</span>
+                          <span class="img">
+                              <img src="{{ url_for('web.get_cover', book_id=entry[0].id) }}" alt="{{ entry[0].name }}"/>
+                              <span class="badge">{{entry.count}}</span>
+                            </span>
                       </a>
                   </div>
                   <div class="meta">

cps/templates/index.html

@@ -79,7 +79,10 @@
     <div class="col-sm-3 col-lg-2 col-xs-6 book" id="books">
       <div class="cover">
           <a href="{{ url_for('web.show_book', book_id=entry.id) }}" data-toggle="modal" data-target="#bookDetailsModal" data-remote="false">
+            <span class="img">
               <img src="{{ url_for('web.get_cover', book_id=entry.id) }}" alt="{{ entry.title }}"/>
+              <span class="badge read glyphicon glyphicon-ok"></span>
+            </span>
           </a>
       </div>
       <div class="meta">