Nicer rendering for books with no cover in the cover grid

This commit is contained in:
Kovid Goyal 2015-11-12 11:58:24 +05:30
parent ce61de9ae1
commit 6f263dd3fc

View File

@ -1,7 +1,7 @@
# vim:fileencoding=utf-8
# License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
from dom import set_css, build_rule
from dom import set_css, build_rule, clear
from elementmaker import E
from gettext import gettext as _
@ -122,13 +122,26 @@ class BooksView:
cover_url = str.format('get/thumb/{}/{}?sz={}x{}', book_id, self.interface_data['library_id'], THUMBNAIL_MAX_WIDTH, THUMBNAIL_MAX_HEIGHT)
metadata = self.interface_data['metadata'][book_id]
alt = str.format(_('{} by {}'), metadata['title'], metadata['authors'].join(' & '))
img = E.img(src=cover_url, alt=alt, title=alt, data_title=metadata['title'], data_authors=metadata['authors'].join(' & '),
style='max-width: 100%; max-height: 100%; display: block; cursor: pointer; width:auto; height:auto')
img.onerror = def(err):
img = err.target
div = img.parentNode
clear(div)
div.appendChild(E.div(
style='position:relative; top:-50%; transform: translateY(50%); cursor:pointer',
E.h2(img.getAttribute('data-title'), style='text-align:center; font-size:larger; font-weight: bold'),
E.div(_('by'), style='text-align: center'),
E.h2(img.getAttribute('data-authors'), style='text-align:center; font-size:larger; font-weight: bold')
))
set_css(div, border='dashed 1px currentColor', border_radius='10px')
return E.div(
style=str.format(('margin: 10px; display: flex; align-content: flex-end; align-items: flex-end; justify-content: space-around;'
'width: 21vw; height: 28vw; max-width: {}px; max-height: {}px; min-width: {}px; min-height: {}px'),
THUMBNAIL_MAX_WIDTH, THUMBNAIL_MAX_HEIGHT, THUMBNAIL_MAX_WIDTH // 2, THUMBNAIL_MAX_HEIGHT // 2),
data_book_id=str(book_id),
E.img(src=cover_url, alt=alt, title=alt,
style='max-width: 100%; max-height: 100%; display: block; cursor: pointer; width:auto; height:auto')
img
)
# }}}