GRADIENT

app/static/css/style.css

@@ -242,7 +242,7 @@ div.marquee > div.marquee-text {
   position: fixed;
   bottom: 0;
   right: 0;
-  width: 30%;
+  width: 25%;
   height: 100%;
 }
 
@@ -254,7 +254,7 @@ div.marquee > div.marquee-text {
   padding: 10px;
   margin: 0px;
   height: 100%;
-  background-color: #b4b9be;
+  /*background-color: #b4b9be;*/
   overflow-y: scroll;
   overflow-x: hidden;
   color: white;
@@ -265,6 +265,43 @@ div.marquee > div.marquee-text {
 z-index: -100000;
 }
 
+.messageback1{
+
+position: absolute;
+bottom: 40px;
+display: block;
+width:100%;
+padding: 0px;
+margin: 0px;
+height: 100%;
+background-color: #b4b9be;
+overflow-y: scroll;
+overflow-x: hidden;
+color: white;
+word-wrap:break-word;
+box-sizing: border-box;
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+z-index: -100000;}
+
+.messageback2{
+position: absolute;
+bottom: 40px;
+display: block;
+width:100%;
+padding: 0px;
+margin: 0px;
+height: 100%;
+background-color: #b4b9be;
+overflow-y: scroll;
+overflow-x: hidden;
+color: white;
+word-wrap:break-word;
+box-sizing: border-box;
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+z-index: -100000;}
+
 .new-message {
   position: absolute;
   bottom: 0;
@@ -273,6 +310,7 @@ width:100%;
 margin:0;
 padding:0;
 z-index: 100000;
+opacity: 1!important;
 }
 .control{
   display: block;

app/templates/add_book.html

@@ -36,7 +36,7 @@ function outputUpdate3(gender) {
     <div class="form-group">Title:* <br> {{ form.title (size=50, class="form-control") }}</div>
     <br>
     <div data-toggle="fieldset" id="phone-fieldset">
-         Author(s):*  <button type="button" data-toggle="fieldset-add-row data-target="#phone-fieldset">+</button>
+         Author(s):*  <button type="button" data-toggle="fieldset-add-row" data-target="#phone-fieldset">+</button>
         <table>
             <tr>
                 <th></th>

app/templates/base.html

@@ -99,6 +99,31 @@ socket.on('connect', function() {
 });
 
 socket.on('channel-' + app.channel, function(msg) {
+  console.log("new: "+msg.text)
+
+
+  $(".messageback1").each(function() {
+    var oldColor = $(this).css("background-color");
+    var randomColor = colorHash(msg.text).rgb;
+  console.log("old: "+oldColor)
+  console.log("new: "+randomColor)
+  $(this).css({
+    background: "-webkit-gradient(linear, left top, left bottom, from("+oldColor+"), to("+randomColor+"))",
+    backgroundColor: randomColor
+  });
+
+  $('.messageback2').animate({
+              opacity: 0
+  	}, 1000, function() {
+        $('.messageback2').css({background: "-webkit-gradient(linear, left top, left bottom, from("+oldColor+"), to("+randomColor+"))", opacity: 1})
+    });
+
+
+});
+
+
+
+
   // Add new message to HTML
   let my_messages = app.messages;
   my_messages.push({

app/templates/home.html

@@ -25,7 +25,10 @@ This might only be one interface to this library:
 </div>
 
 <div id="app" class="container">
+  <div class="messageback1"></div>
+  <div class="messageback2"></div>
     <section class="messages">
+
         <div v-for="message in messages" class="box">
             <article class="media">
                 <div class="media-content">
@@ -38,6 +41,7 @@ This might only be one interface to this library:
                 </div>
             </article>
         </div>
+
     </section>
     <section class="new-message">
         <div class="field has-addons">

app/templates/scape.html

@@ -74,7 +74,7 @@
     <div class = "drag" id = "{{ book.id }}" style="position: absolute;width:70px;height:auto; top:{{ book.scapeY }}px; left:{{ book.scapeX }}px;">
 
 
-      <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" style="width:100%;height:auto;" onerror="if (this.src != '../static/img/default_cover.png') this.src = '../static/img/default_cover.png';">
+      <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" style="width:100%;height:auto;" onerror="if (this.src != '../static/img/default_cover.gif') this.src = '../static/img/default_cover.gif';">
       <p class="booktitle" style="font-size:7px;"><a href="books/{{ book.id }}">{{ book.title }}</a></p>
 
       {% set got = {} %}

app/templates/show_book_detail.html

@@ -62,15 +62,9 @@
       <td>How much time has been spent with this item?<br></td>
       <td>{{ book.time or '?' }} </td>
     </tr>
-
-</tbody>
-  </table>
-
-  <a href="../uploads/{{ book.file }}">download {{ book.fileformat }}</a>
-  <br>
-  <br>
-  <p>Instances:</p>
-  {% set got = {} %}
+    <tr>
+      <td>Instances:</td>
+      <td>{% set got = {} %}
       {% set all = 1 %}
       {% for instance in book.instances %}
 
@@ -85,7 +79,11 @@
       {% for instance, value in got.items() %}
         {% set result = value/(book.instances|length) %}
         {{ instance }}: {{ (result*100)|round|int }}%<br>
-  {% endfor %}
+      {% endfor %}</td>
+
+</tbody>
+  </table>
+
   <br>
 
 

app/views.py

@@ -258,6 +258,8 @@ def add_book():
             sameness = upload_form.sameness.data
             gender = upload_form.gender.data
             diversity = upload_form.diversity.data
+            time = None
+            if time:
                 time = upload_form.time.data
             who = upload_form.who.data
 
@@ -678,7 +680,9 @@ def import_csv():
                     else:
                         year_published = None;
                     book = Book(row['title'], row['file'], cover, row['fileformat'], row['category'], year_published, None, None, None, None, None, None)
+                    if row['scapeX']:
                         book.scapeX = float(row['scapeX'])
+                    if row['scapeY']:
                         book.scapeY = float(row['scapeY'])
 
                     db.session.add(book)

init_db.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-rm app/mydatabase.db
+#rm app/mydatabase.db
 mkdir -p app/uploads/cover
 chmod 777 app/uploads/
 chmod 777 app/uploads/cover