Cutlery/calibre
1
0
Fork 0
mirror of https://github.com/kovidgoyal/calibre.git synced 2025-07-07 18:24:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use flexbox rather than floats for better responsiveness

Browse Source
This commit is contained in:
Kovid Goyal 2016-02-18 09:34:41 +05:30
parent 88519f5a44
commit bcd6a62c67
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pyj/book_list/book_details.pyj
View File

@ -349,16 +349,19 @@ class BookDetailsPanel:
get_boss().ui.set_title(metadata.title) get_boss().ui.set_title(metadata.title)
cover_url = str.format('get/cover/{}/{}', book_id, self.interface_data['library_id']) cover_url = str.format('get/cover/{}/{}', book_id, self.interface_data['library_id'])
alt = str.format(_('{} by {}'), metadata['title'], metadata['authors'].join(' & ')) alt = str.format(_('{} by {}'), metadata['title'], metadata['authors'].join(' & '))
img = E.img( imgdiv = E.div(
src=cover_url, alt=alt, title=alt, data_title=metadata['title'], data_authors=metadata['authors'].join(' & '), E.img(
style=str.format('border-radius: 20px; max-width: calc(50vw - 3em); max-height: calc(100vh - 4ex - {}); display: block; width:auto; height:auto; float:left', get_font_size('title')) src=cover_url, alt=alt, title=alt, data_title=metadata['title'], data_authors=metadata['authors'].join(' & '),
style=str.format(
'border-radius: 20px; max-width: calc(100vw - 2em); max-height: calc(100vh - 4ex - {}); display: block; width:auto; height:auto; border-radius: 20px', get_font_size('title')
))
) )
img.onerror = self.on_img_err.bind(self) imgdiv.firstChild.onerror = self.on_img_err.bind(self)
c = self.container c = self.container
c.appendChild(E.div( c.appendChild(E.div(
style='display:block; padding: 1ex 1em', style='display:flex; padding: 1ex 1em; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap',
E.div(style='margin-right: 1em; float:left', data_book_id='' + book_id), E.div(style='margin-right: 1em; flex-grow: 3; max-width: 500px', data_book_id='' + book_id),
img imgdiv
)) ))
container = c.lastChild.firstChild container = c.lastChild.firstChild
read_button = create_button(_('Read'), 'book', self.read_book.bind(self), _('Read this book')) read_button = create_button(_('Read'), 'book', self.read_book.bind(self), _('Read this book'))
@ -368,7 +371,7 @@ class BookDetailsPanel:
if not metadata.formats or not metadata.formats.length: if not metadata.formats or not metadata.formats.length:
row.style.display = 'none' row.style.display = 'none'
container.appendChild(row) container.appendChild(row)
md = E.div(style='max-width:500px; margin-bottom: 2ex') md = E.div(style='margin-bottom: 2ex')
table = E.table(class_='metadata') table = E.table(class_='metadata')
container.appendChild(md) container.appendChild(md)
md.appendChild(table) md.appendChild(table)
@ -376,7 +379,7 @@ class BookDetailsPanel:
def on_img_err(self, err): def on_img_err(self, err):
img = err.target img = err.target
img.style.display = 'none' img.parentNode.style.display = 'none'
def preferred_format(self, book_id): def preferred_format(self, book_id):
return get_preferred_format(self.interface_data.metadata[book_id], self.interface_data.output_format, self.interface_data.input_formats) return get_preferred_format(self.interface_data.metadata[book_id], self.interface_data.output_format, self.interface_data.input_formats)