varia
/
xppl
13
0
Fork 0
Code Issues 6 Pull Requests Releases Activity
Browse Source

new default covers and grid view in search

ansible-setup-and-deploy
nberting 6 years ago
parent
1a68728ed1
commit
c6b99974da
11 changed files with 204 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      app/forms.py
  2. 36
      app/static/css/style.css
  3. BIN
      app/static/img/default_cover.gif
  4. 2
      app/templates/add_to_stacks.html
  5. 2
      app/templates/edit_book_detail.html
  6. 34
      app/templates/results.html
  7. 89
      app/templates/results_grid.html
  8. 2
      app/templates/show_book_detail.html
  9. 20
      app/templates/show_books.html
  10. 41
      app/templates/show_books_grid.html
  11. 24
      app/views.py

3
app/forms.py
View File

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

36
app/static/css/style.css
View File

@ -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;
}

BIN
app/static/img/default_cover.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
app/templates/add_to_stacks.html
View File

@ -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>

2
app/templates/edit_book_detail.html
View File

@ -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">

34
app/templates/results.html
View File

@ -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 %}

89
app/templates/results_grid.html
View File

@ -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 %}

2
app/templates/show_book_detail.html
View File

@ -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>

20
app/templates/show_books.html
View File

@ -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>

41
app/templates/show_books_grid.html
View File

@ -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 %}

24
app/views.py
View File

@ -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)

Write Preview
Loading…
Cancel
Save