From 675e8dd5cdcb7303d0d90cc955925bfb4a8f00f4 Mon Sep 17 00:00:00 2001 From: Jonathan Rehm Date: Thu, 6 Jul 2017 09:21:35 -0700 Subject: [PATCH] Show book details in modal dialog With them shown in a modal, you don't lose your place in the pagination. If the request comes via Ajax, the minimal layout is used. If via a normal request, the full layout is used. That lets you open the details in a new tab and have the full experience, but if you're clicking through the results of a search, you can view many without losing your place. --- cps/static/js/main.js | 11 +++++++++++ cps/templates/detail.html | 2 +- cps/templates/discover.html | 2 +- cps/templates/fragment.html | 4 ++++ cps/templates/index.html | 4 ++-- cps/templates/layout.html | 14 ++++++++++++++ cps/templates/search.html | 2 +- cps/templates/shelf.html | 2 +- cps/web.py | 7 ++++++- 9 files changed, 41 insertions(+), 7 deletions(-) create mode 100644 cps/templates/fragment.html diff --git a/cps/static/js/main.js b/cps/static/js/main.js index d759a3b8..55ea42b3 100644 --- a/cps/static/js/main.js +++ b/cps/static/js/main.js @@ -121,6 +121,17 @@ $(function() { }); }); + $('#bookDetailsModal') + .on('show.bs.modal', function(e) { + var $modalBody = $(this).find('.modal-body'); + $.get(e.relatedTarget.href).done(function(content) { + $modalBody.html(content); + }); + }) + .on('hidden.bs.modal', function() { + $(this).find('.modal-body').html('...'); + }); + $(window).resize(function(event) { $(".discover .row").isotope("reLayout"); }); diff --git a/cps/templates/detail.html b/cps/templates/detail.html index 14389809..1d6efe0e 100644 --- a/cps/templates/detail.html +++ b/cps/templates/detail.html @@ -1,4 +1,4 @@ -{% extends "layout.html" %} +{% extends is_xhr|yesno("fragment.html", "layout.html") %} {% block body %}
diff --git a/cps/templates/discover.html b/cps/templates/discover.html index 32f89a47..ff79c23b 100644 --- a/cps/templates/discover.html +++ b/cps/templates/discover.html @@ -8,7 +8,7 @@
{% if entry.has_cover is defined %} - + {% endif %} diff --git a/cps/templates/fragment.html b/cps/templates/fragment.html new file mode 100644 index 00000000..1421ea6a --- /dev/null +++ b/cps/templates/fragment.html @@ -0,0 +1,4 @@ +
+ {% block body %}{% endblock %} +
+{% block js %}{% endblock %} diff --git a/cps/templates/index.html b/cps/templates/index.html index 768c28bd..72df252a 100755 --- a/cps/templates/index.html +++ b/cps/templates/index.html @@ -8,7 +8,7 @@ {% for entry in random %}
+ {% block modal %}{% endblock %} {% block js %}{% endblock %} diff --git a/cps/templates/search.html b/cps/templates/search.html index 7e82c1fc..3f705c47 100644 --- a/cps/templates/search.html +++ b/cps/templates/search.html @@ -15,7 +15,7 @@
{% if entry.has_cover is defined %} - + {% endif %} diff --git a/cps/templates/shelf.html b/cps/templates/shelf.html index a81538e1..46586925 100644 --- a/cps/templates/shelf.html +++ b/cps/templates/shelf.html @@ -15,7 +15,7 @@
{% if entry.has_cover is defined %} - + {% endif %} diff --git a/cps/web.py b/cps/web.py index 8b588650..9d73b173 100755 --- a/cps/web.py +++ b/cps/web.py @@ -411,6 +411,11 @@ def timestamptodate(date, fmt=None): return native.strftime(time_format) +@app.template_filter('yesno') +def yesno(str, yes, no): + return yes if str else no + + def admin_required(f): """ Checks if current_user.role == 1 @@ -1233,7 +1238,7 @@ def show_book(book_id): else: have_read = None - return render_title_template('detail.html', entry=entries, cc=cc, + return render_title_template('detail.html', entry=entries, cc=cc, is_xhr=request.is_xhr, title=entries.title, books_shelfs=book_in_shelfs, have_read=have_read) else: flash(_(u"Error opening eBook. File does not exist or file is not accessible:"), category="error")