varia/xppl
14
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

new default covers and grid view in search

Browse Source
This commit is contained in:
nberting 2018-06-07 19:10:56 +02:00
parent 1a68728ed1
commit c6b99974da
11 changed files with 205 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/forms.py
View File

@ -51,4 +51,7 @@ class SearchForm(FlaskForm):
('Stack', 'Stack')] ('Stack', 'Stack')]
select = SelectField('', choices=choices) select = SelectField('', choices=choices)
search = StringField('', validators=[InputRequired()]) 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%; height: 100%;
border: none; 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 Normal file
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: <div> Chosen book:
<h1 class="header">{{ book.title }}</h1> <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> </div>
<p>These are all the stacks that have been built so far.</p> <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> <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> <br> <br>
<div data-toggle="fieldset" id="phone-fieldset"> <div data-toggle="fieldset" id="phone-fieldset">

34
app/templates/results.html
View File

@ -1,19 +1,20 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block main %} {% block main %}
<div class="container"> <div class="container">
<div>
{% from "_formhelpers.html" import render_field %} {% from "_formhelpers.html" import render_field %}
<form method="POST"> <form method="POST">
<div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div> <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
<div class="search"> <div class="search">
{{ render_field(form.search) }} </div> {{ render_field(form.search) }} </div>
<button type="submit" class="button">browse</button> <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> </div>
<br> <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="height: 20px; background-color: yellow; line-height:4px;">
<div style="background-color: black; width: {{ percentage }}%; height: 100%;"></div> <div style="background-color: black; width: {{ percentage }}%; height: 100%;"></div>
</div> </div>
@ -34,16 +35,17 @@
<tr id="header"> <tr id="header">
<th>Cover</th> <th>Cover</th>
<th>Title</th> <th>Title</th>
<th>Author</th> <th width="400px;">Author</th>
<th>Filetype</th> <th width="100px;">Filetype</th>
<th>Category</th> <th width="100px;">Category</th>
<th>Stack</th> <th width="100px;">Stack</th>
<th>Add to stack</th> <th width="100px;">Add to stack</th>
</tr> </tr>
{% for book in books %} {% for book in books %}
<tr> <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><a href="{{url_for('show_book_by_id', id=book.id)}}">{{ book.title }}</a></td>
<td> {% for author in book.authors %} <td> {% for author in book.authors %}
@ -75,16 +77,16 @@
<tr id="header"> <tr id="header">
<th>Cover</th> <th>Cover</th>
<th>Title</th> <th>Title</th>
<th>Author</th> <th width="400px;">Author</th>
<th>Filetype</th> <th width="100px;">Filetype</th>
<th>Category</th> <th width="100px;">Category</th>
<th>Stack</th> <th width="100px;">Stack</th>
<th>Add to stack</th> <th width="100px;">Add to stack</th>
</tr> </tr>
{% for book in books_all %} {% for book in books_all %}
<tr> <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><a href="{{url_for('show_book_by_id', id=book.id)}}">{{ book.title }}</a></td>
<td> {% for author in book.authors %} <td> {% for author in book.authors %}

89
app/templates/results_grid.html Normal file
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"> <div class="container">
<h1 class="header">{{ book.title }}</h1> <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 %} <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> <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"> <div class="search">
{{ render_field(form.search) }} </div> {{ render_field(form.search) }} </div>
<button type="submit" class="button">browse</button> <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> <h1 class="page-header">All Books</h1>
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
@ -28,19 +30,19 @@
<tr id="header"> <tr id="header">
<th>Cover</th> <th>Cover</th>
<th>Title</th> <th>Title</th>
<th>Author</th> <th width="400px;">Author</th>
<th>Filetype</th> <th width="100px;">Filetype</th>
<th>Category</th> <th width="100px;">Category</th>
<th>Stack</th> <th width="100px;">Stack</th>
<th>Add to stack</th> <th width="100px;">Add to stack</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for book in books|sort(attribute='title', reverse = False) %} {% for book in books|sort(attribute='title', reverse = False) %}
<tr> <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"> <!-- <object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="65">
<p hidden="True"></p> <p hidden="True"></p>
@ -62,7 +64,7 @@
</td> </td>
<td id='plus'><a href="{{url_for('add_to_stack', id=book.id)}}"> <td id='plus'><a href="{{url_for('add_to_stack', id=book.id)}}">
==> ===>
</a></td> </a></td>
</tr> </tr>

43
app/templates/show_books_grid.html
View File

@ -2,27 +2,38 @@
{% block main %} {% block main %}
<div class="container"> <div class="container">
<h1 class="page-header">All Books</h1> {% from "_formhelpers.html" import render_field %}
{% with messages = get_flashed_messages() %} <form method="POST">
{% if messages %} <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
<div class="alert alert-success"> <div class="search">
<ul> {{ render_field(form.search) }} </div>
{% for message in messages %} <button type="submit" class="button">browse</button>
<li>{{ message }}</li> <p><br>
{% endfor %} {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p>
</ul> </form>
</div> </div>
{% endif %}
{% endwith %}
<div class="grid">
{% for book in books|sort(attribute='title', reverse = False) %} {% for book in books|sort(attribute='title', reverse = False) %}
<div class="gridbox">
<a href="books/{{ book.id }}"> <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> <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 %} {% endfor %}
</div>
</div> </div>
{% endblock %} {% endblock %}

22
app/views.py
View File

@ -342,6 +342,11 @@ def edit_stack_by_id(id):
def show_books(): def show_books():
books = db.session.query(Book).all() books = db.session.query(Book).all()
search = SearchForm(request.form) 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': if request.method == 'POST':
return redirect((url_for('search_results', searchtype=search.select.data, query=search.search.data))) 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']) @app.route('/search/<searchtype>/<query>/', methods=['POST', 'GET'])
def search_results(searchtype, query): def search_results(searchtype, query):
search = SearchForm(request.form) search = SearchForm(request.form, search=query)
random_order=Book.query.order_by(func.random()).limit(10) random_order=Book.query.order_by(func.random()).limit(14)
results=Book.query.filter(Book.title.contains(query)) results=Book.query.filter(Book.title.contains(query))
if searchtype == 'Title': if searchtype == 'Title':
@ -376,14 +381,21 @@ def search_results(searchtype, query):
upload_form = UploadForm(title= query, author='') upload_form = UploadForm(title= query, author='')
return render_template('red_link.html', form=upload_form, title=query) 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': if request.method == 'POST':
query = search.search.data query = search.search.data
results = [] results = []
return redirect((url_for('search_results', searchtype=search.select.data, query=search.search.data))) 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) 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)