new default covers and grid view in search

app/forms.py

@@ -51,4 +51,7 @@ class SearchForm(FlaskForm):
                ('Stack', 'Stack')]
     select = SelectField('', choices=choices)
     search = StringField('', validators=[InputRequired()])
+    grid = SubmitField('Grid')
+    listview = SubmitField('List')
+
 

app/static/css/style.css

@@ -313,3 +313,39 @@ box-sizing: border-box;
   height: 100%;
   border: none;
 }
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: 2px;
+  align-items: top;
+  justify-items: center;
+}
+
+@media screen and (max-width: 900px) {
+.grid{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 2px;
+  align-items: center;
+  justify-items: center;
+}
+}
+@media screen and (max-width: 400px) {
+.grid{
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  justify-items: center;
+}
+}
+
+.gridbox {
+  display: inline-block;
+  padding-left: 5px;
+  align-items: center;
+  justify-items: center;
+}
+.gridbox:hover{
+  opacity: 0.5;
+}

app/templates/add_to_stacks.html

@@ -6,7 +6,7 @@
 <div> Chosen book:
 
     <h1 class="header">{{ book.title }}</h1>
-    <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="150" onerror="if (this.src != '../static/img/{{ book.cover }}') this.src = '../static/img/default_cover.png';">
+    <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="150" onerror="if (this.src != '../static/img/{{ book.cover }}') this.src = '../static/img/default_cover.gif';">
 
 </div>
 <p>These are all the stacks that have been built so far.</p>

app/templates/edit_book_detail.html

@@ -12,7 +12,7 @@
 
     <div class="form-group"><h1 class="header">{{ form.title.label }} {{ form.title(size=20, class="form-control") }}</h1></div>
 
-  <img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="150" onerror="if (this.src != '/uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.png';">
+  <img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="150" onerror="if (this.src != '/uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';">
 
         <br>  <br>
     <div data-toggle="fieldset" id="phone-fieldset">

app/templates/results.html

@@ -1,19 +1,20 @@
 {% extends 'base.html' %}
 
 {% block main %}
-
 <div class="container">
-  <div>
   {% from "_formhelpers.html" import render_field %}
   <form method="POST">
     <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
       <div class="search">
       {{ render_field(form.search) }} </div>
       <button type="submit" class="button">browse</button>
-      </form>
+     <p><br>
+      {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p>      
+    </form>
     </div>
+
   <br>
-  <h4 style="line-height:0px;"">Results: "{{ query }}" included in {{ count }} out of {{ whole }} items </h4>
+  <h3 style="line-height:0px;"">Results: "{{ query }}" included in {{ count }} out of {{ whole }} items </h3>
   <div style="height: 20px; background-color: yellow; line-height:4px;">
     <div style="background-color: black; width: {{ percentage }}%; height: 100%;"></div>
 </div>
@@ -34,16 +35,17 @@
     <tr id="header">
       <th>Cover</th>
       <th>Title</th>
-      <th>Author</th>
-      <th>Filetype</th>
-      <th>Category</th>
-      <th>Stack</th>
-      <th>Add to stack</th>
+      <th width="400px;">Author</th>
+      <th width="100px;">Filetype</th>
+      <th width="100px;">Category</th>
+      <th width="100px;">Stack</th>
+      <th width="100px;">Add to stack</th>
 
     </tr>
         {% for book in books %}
     <tr>
-      <td><img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="80" onerror="if (this.src != '/static/img/default_cover.png') this.src = '/static/img/default_cover.png';"></td>
+    <td style= "padding: 5px;">
+<img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="80" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></td>
       <td><a href="{{url_for('show_book_by_id', id=book.id)}}">{{ book.title }}</a></td>
 
       <td>  {% for author in book.authors %}
@@ -75,16 +77,16 @@
     <tr id="header">
       <th>Cover</th>
       <th>Title</th>
-      <th>Author</th>
-      <th>Filetype</th>
-      <th>Category</th>
-      <th>Stack</th>
-      <th>Add to stack</th>
+      <th width="400px;">Author</th>
+      <th width="100px;">Filetype</th>
+      <th width="100px;">Category</th>
+      <th width="100px;">Stack</th>
+      <th width="100px;">Add to stack</th>
 
     </tr>
         {% for book in books_all %}
     <tr>
-      <td><img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="80" onerror="if (this.src != '/static/img/default_cover.png') this.src = '/static/img/default_cover.png';"></td>
+      <td style= "padding: 5px;"><img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="80" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></td>
       <td><a href="{{url_for('show_book_by_id', id=book.id)}}">{{ book.title }}</a></td>
 
       <td>  {% for author in book.authors %}

app/templates/results_grid.html

@@ -0,0 +1,89 @@
+{% extends 'base.html' %}
+
+{% block main %}
+<div class="container">
+  {% from "_formhelpers.html" import render_field %}
+  <form method="POST">
+    <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
+      <div class="search">
+      {{ render_field(form.search) }} </div>
+      <button type="submit" class="button">browse</button>
+           <p><br>
+      {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p>  
+</form>
+    </div>
+
+  <br>
+  <h3 style="line-height:0px;"">Results: "{{ query }}" included in {{ count }} out of {{ whole }} items </h3>
+  <div style="height: 20px; background-color: yellow; line-height:4px;">
+    <div style="background-color: black; width: {{ percentage }}%; height: 100%;"></div>
+</div>
+<br>
+  {% with messages = get_flashed_messages() %}
+    {% if messages %}
+      <div class="alert alert-success">
+        <ul>
+        {% for message in messages %}
+          <li>{{ message }}</li>
+        {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  {% endwith %}
+<div class="grid">
+
+        {% for book in books|sort(attribute='title', reverse = False) %}
+
+
+<div class="gridbox">
+<a href="books/{{ book.id }}">
+<img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></a> 
+<p>
+<tbody>
+<th>
+{{ book.title }}</th>
+<br>
+<span style = "font-size: 14px;">
+{% for author in  book.authors %}
+{{ author.author_name }}<br> {% endfor %} </span>
+</tbody>
+</p>
+</div>
+  {% endfor %}
+</div>
+
+
+<div class="container" >
+  <hr>
+  <h2> Other books </h2>
+
+<div class="grid">
+
+{% for book in books_all|sort(attribute='title', reverse = False) %}
+  
+<div class="gridbox">
+<a href="books/{{ book.id }}">
+<img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></a> 
+<p>
+<tbody>
+<th>
+{{ book.title }}</th>
+<br>
+<span style = "font-size: 14px;">
+{% for author in  book.authors %}
+{{ author.author_name }}<br> {% endfor %} </span>
+</tbody>
+</p>
+</div>
+  {% endfor %}
+</div>
+</div>
+
+
+  <p>
+    <a href="/books"> See all books </a>
+  </p>
+
+</div>
+
+{% endblock %}

app/templates/show_book_detail.html

@@ -4,7 +4,7 @@
 <div class="container">
 
   <h1 class="header">{{ book.title }}</h1>
-  <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="150" onerror="if (this.src != '../static/img/{{ book.cover }}') this.src = '../static/img/default_cover.png';">
+  <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="150" onerror="if (this.src != '../static/img/{{ book.cover }}') this.src = '../static/img/default_cover.gif';">
   <p>Author(s): <ul>{% for author in book.authors %}
 
               <li><a href="{{url_for('show_author_by_id', id=author.id)}}">{{ author.author_name }}</a>  </li>

app/templates/show_books.html

@@ -8,7 +8,9 @@
       <div class="search">
       {{ render_field(form.search) }} </div>
       <button type="submit" class="button">browse</button>
-      </form>
+       <p><br>
+      {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p>  
+ </form>
 
   <h1 class="page-header">All Books</h1>
   {% with messages = get_flashed_messages() %}
@@ -28,19 +30,19 @@
     <tr id="header">
       <th>Cover</th>
       <th>Title</th>
-      <th>Author</th>
-      <th>Filetype</th>
-      <th>Category</th>
-      <th>Stack</th>
-      <th>Add to stack</th>
+      <th width="400px;">Author</th>
+      <th width="100px;">Filetype</th>
+      <th width="100px;">Category</th>
+      <th width="100px;">Stack</th>
+      <th width="100px;">Add to stack</th>
     </tr>
     </thead>
     <tbody>
         {% for book in books|sort(attribute='title', reverse = False) %}
     <tr>
-      <td>
+      <td style= "padding: 5px;">
 
-        <img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="40" 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 }}" width="80" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';">
       <!--  <object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="65">
           <p hidden="True"></p>
 
@@ -62,7 +64,7 @@
               </td>
       <td id='plus'><a href="{{url_for('add_to_stack', id=book.id)}}">
 
-      ==>
+      ===>
               </a></td>
     </tr>
 

app/templates/show_books_grid.html

@@ -2,27 +2,38 @@
 
 {% block main %}
 <div class="container">
-  <h1 class="page-header">All Books</h1>
-  {% with messages = get_flashed_messages() %}
-    {% if messages %}
-      <div class="alert alert-success">
-        <ul>
-        {% for message in messages %}
-          <li>{{ message }}</li>
-        {% endfor %}
-        </ul>
-      </div>
-    {% endif %}
-  {% endwith %}
+  {% from "_formhelpers.html" import render_field %}
+  <form method="POST">
+    <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
+      <div class="search">
+      {{ render_field(form.search) }} </div>
+      <button type="submit" class="button">browse</button>
+           <p><br>
+      {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p>  
+ </form>
+    </div>
 
+<div class="grid">
 
         {% for book in books|sort(attribute='title', reverse = False) %}
-<a href="books/{{ book.id }}">
-<img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="140" onerror="if (this.src != '../static/img/default_cover.png') this.src = '../static/img/default_cover.png';"><!--{{ book.title }}--></a>
 
 
+<div class="gridbox">
+<a href="books/{{ book.id }}">
+<img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></a> 
+<p>
+<tbody>
+<th>
+{{ book.title }}</th>
+<br>
+<span style = "font-size: 14px;">
+{% for author in  book.authors %}
+{{ author.author_name }}<br> {% endfor %} </span>
+</tbody>
+</p>
+</div>
   {% endfor %}
-
+</div>
 
 </div>
 {% endblock %}

app/views.py

@@ -342,6 +342,11 @@ def edit_stack_by_id(id):
 def show_books():
     books = db.session.query(Book).all()
     search = SearchForm(request.form)
+
+    if search.grid.data:
+        return render_template ('show_books_grid.html', books=books, form=search)
+    if search.listview.data:
+        return render_template ('show_books.html', books=books, form=search)
     if request.method == 'POST':
         return redirect((url_for('search_results', searchtype=search.select.data, query=search.search.data)))
 
@@ -349,8 +354,8 @@ def show_books():
 
 @app.route('/search/<searchtype>/<query>/', methods=['POST', 'GET'])
 def search_results(searchtype, query):
-    search = SearchForm(request.form)
-    random_order=Book.query.order_by(func.random()).limit(10)
+    search = SearchForm(request.form, search=query)
+    random_order=Book.query.order_by(func.random()).limit(14)
     results=Book.query.filter(Book.title.contains(query))
 
     if searchtype == 'Title':
@@ -376,14 +381,21 @@ def search_results(searchtype, query):
         upload_form = UploadForm(title= query, author='')
         return render_template('red_link.html', form=upload_form, title=query)
 
+    count = results.count()
+    whole = Book.query.count()
+    percentage = float(count / whole * 100) 
+
+    if search.listview.data:
+        return render_template('results.html', books=results, form=search, query=query, books_all=random_order, searchtype=search.select.data, count = count, whole = whole, percentage = percentage)
+
+    if search.grid.data:
+        return render_template('results_grid.html', books=results, form=search, query=query, books_all=random_order, searchtype=search.select.data, count = count, whole = whole, percentage = percentage)
+
     if request.method == 'POST':
         query = search.search.data
         results = []
         return redirect((url_for('search_results', searchtype=search.select.data, query=search.search.data)))
-
-    count = results.count()
-    whole = Book.query.count()
-    percentage = float(count / whole * 100)    
+   
     return render_template('results.html', form=search, books=results, books_all=random_order, searchtype=search.select.data, query=query, count = count, whole = whole, percentage = percentage)