fixed silly conflict

app/static/css/style.css

@@ -246,7 +246,7 @@ div.marquee > div.marquee-text {
   position: fixed;
   bottom: 0;
   right: 0;
-  width: 30%;
+  width: 25%;
   height: 100%;
 }
 
@@ -258,7 +258,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;
@@ -269,6 +269,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;
@@ -277,6 +314,7 @@ width:100%;
 margin:0;
 padding:0;
 z-index: 100000;
+opacity: 1!important;
 }
 .control{
   display: block;
@@ -357,7 +395,7 @@ box-sizing: border-box;
   justify-items: center;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 1000px) {
 .grid{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -366,11 +404,13 @@ box-sizing: border-box;
   justify-items: center;
 }
 }
-@media screen and (max-width: 400px) {
+
+@media screen and (max-width: 600px) {
 .grid{
   display: grid;
-  grid-template-columns: 1fr;
-  align-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 2px;
+  align-items: top;
   justify-items: center;
 }
 }
@@ -381,6 +421,7 @@ box-sizing: border-box;
   align-items: center;
   justify-items: center;
 }
+
 .gridbox:hover{
   opacity: 0.5;
 }

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 @@ Feel free to browse our catalogue, interfaced in many different ways.
 </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 @@ Feel free to browse our catalogue, interfaced in many different ways.
                 </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

@@ -1,9 +1,8 @@
 {% extends 'base.html' %}
 
 {% block main %}
-
-
 <div class="container">
+
   <h1 class="header">{{ book.title }}</h1>
 <div style="float:right; padding-right: 140px;">
  <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="280px" onerror="if (this.src != '../uploads/cover/{{ book.cover }}') this.src = '../static/img/default_cover.gif';"></div>
@@ -61,15 +60,9 @@
       <td>{{ book.who or '?' }} </td>
     </tr>
 
-</tbody>
-  </table>
-  <a href="{{url_for('add_to_stack', id=book.id)}}">Add book to Stack ===></a> <br><br>
-
-  <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 %}
 
@@ -84,21 +77,26 @@
       {% for instance, value in got.items() %}
         {% set result = value/(book.instances|length) %}
         {{ instance }}: {{ (result*100)|round|int }}%<br>
-  {% endfor %}
+      {% endfor %}</td>
+
+</tbody>
+  </table>
+  <br>
+<a href="{{url_for('add_to_stack', id=book.id)}}">Add book to Stack ===></a> <br><br>
   <br>
 
-
-    {% if book.file %}
-    <button id="myBtn" style= "width: 180px; font-size: 10pt;"><a> Download this {{ book.fileformat }}</a></button>
-    <div id="myModal" class="modal">
+{% if book.file %}
+<button id="myBtn" style= "width: 180px; font-size: 10pt;"><a> Download this {{ book.fileformat }}</a></button>
+<div id="myModal" class="modal">
   <div class="modal-content">
     <span class="close">&times;</span>
     <h3>A message from the uploading librarian:</h3>
     <span style="font-style: italic;">"{{book.message or '...'}}" </span><br>
-        <h4><a href="../uploads/{{ book.file }}"> >>>> Link to file <<<<</h4></a></div>
+    <h4><a href="../uploads/{{ book.file }}"> >>>> Link to file <<<<</h4></a>
   </div>
-    {% else %}
-    {% endif %}
+  </div>
+{% else %}
+{% endif %}
 
   <button style= "font-size: 10pt;"> <a href="{{ url_for('edit_book_by_id', id=book.id )}}">edit</a></button>
   <button style= "font-size: 10pt;"> <a href="{{ url_for('remove_book_by_id', id=book.id)}}">delete</a></button>

app/views.py

@@ -688,7 +688,6 @@ def import_csv():
                         html_string = render_template('potential_pdf.html', pbooks = pbooks)
                         html = HTML(string=html_string)
                         html.write_pdf(target='app/uploads/potential.pdf')
-                        print ('writing to potential_pdf')
 
                     else:
                         fullpath = os.path.join(app.config['UPLOAD_FOLDER'], row['file'])
@@ -702,7 +701,9 @@ def import_csv():
                     else:
                         year_published = None;
                     book = Book(row['title'], file, cover, row['fileformat'], row['category'],year_published, 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