Detailed list: On very narrow screen hide the comments and place the ratings and series below the title instead of to the right

This commit is contained in:
Kovid Goyal 2017-05-20 15:31:17 +05:30
parent f0318871ab
commit 64a517b72d
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C

View File

@ -30,6 +30,12 @@ def details_list_css():
ans += build_rule(s + ' > img', border_radius=BORDER_RADIUS+'px', max_height=f'{THUMBNAIL_MAX_HEIGHT}px', max_width=f'{THUMBNAIL_MAX_WIDTH}px')
s = sel + ' .details-list-right'
ans += build_rule(s, flex_grow='10', overflow='hidden', display='flex', flex_direction='column')
top = s + ' > div:first-child'
extra_data = top + ' > div:last-child'
ans += f'{extra_data} {{ text-align: right }}'
narrow_style = f'{s} iframe {{ display: none }} {top} {{ flex-direction: column }} {extra_data} {{ text-align: left; margin-top: 1ex }}'
ans += f'@media (max-width: 400px) {{ {narrow_style} }}'
print(ans)
s += ' iframe'
# To enable clicking anywhere on the item to load book details to work, we
# have to set pointer-events: none
@ -63,9 +69,10 @@ def create_item(book_id, metadata, create_image, show_book_details):
img.setAttribute('alt', _('{} by {}').format(metadata.title, authors))
img.dataset.title, img.dataset.authors = metadata.title, authors
img_div = E.div(img, class_='details-list-left')
extra_data = E.div(style='text-align: right')
extra_data = E.div()
comments = sandboxed_html(metadata.comments, 'html { overflow: hidden }')
comments.style.display = 'block' if metadata.comments else 'none'
if not metadata.comments:
comments.style.display = 'none'
comments.style.marginTop = '1ex'
interface_data = get_interface_data()
if metadata.rating:
@ -82,7 +89,7 @@ def create_item(book_id, metadata, create_image, show_book_details):
extra_data.appendChild(E.span(ival, ' ' + _('of') + ' ', E.i(metadata.series)))
right = E.div(
class_='details-list-right',
E.div(style='display:flex; justify-content: space-between',
E.div(style='display:flex; justify-content: space-between; overflow: hidden',
E.div(
E.b(metadata.title or _('Unknown')), E.br(), metadata.authors.join(' & '),
),