styling buttons

app/static/css/style.css

@@ -385,21 +385,21 @@ box-sizing: border-box;
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
 }
 
 /* Modal Content/Box */
 .modal-content {
-    background-color: #fefefe;
+    background-color: yellow;
     margin: 15% auto; /* 15% from the top and centered */
-    padding: 20px;
+    padding: 15px;
     border: 1px solid #888;
     width: 40%; /* Could be more or less, depending on screen size */
 }
 
 /* The Close Button */
 .close {
-    color: red;
+    color: grey;
     float: right;
     font-size: 28px;
     font-weight: bold;
@@ -407,7 +407,7 @@ box-sizing: border-box;
 
 .close:hover,
 .close:focus {
-    color: black;
+    color: red;
     text-decoration: none;
     cursor: pointer;
 }

app/templates/show_book_detail.html

@@ -21,18 +21,20 @@
 
              {% endfor %}</ul></p>
 
-  <button id="myBtn" style= "width: 180px; font-size: 10pt;"><a> Download this {{ book.fileformat }}</a></button>
-  <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>
-
+{% 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>
-    <p style="font-style: italic;">"{{book.message or 'Happy reading.'}}" </p>
-    <br>
-  <h4><a href="../uploads/{{ book.file }}"> >>>> Link to file <<<<</h4>
-  </div></div>
+    <span style="font-style: italic;">"{{book.message or 'Happy reading.'}}" </span><br>
+    <h4><a href="../uploads/{{ book.file }}"> >>>> Link to file <<<<</h4></a></div>
+  </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>
 
 </div>
 

app/views.py

@@ -141,12 +141,14 @@ def edit_book_by_id(id):
             input_authors = user_form.author.data
             category = user_form.category.data
             year_published = user_form.year_published.data
+            message = user_form.message.data
             if year_published=="":
                 year_published = None
             book = Book.query.filter_by(id=id).first()
             book.title = title
             book.category = category
             book.year_published = year_published
+            book.message = message
 
             #authors update
             book.authors.clear()