hover/active highlight in details list

This commit is contained in:
Kovid Goyal 2017-04-27 14:26:36 +05:30
parent 6d1ff03ace
commit c8143fd0d9
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C

View File

@ -10,6 +10,7 @@ from session import get_interface_data
from utils import fmt_sidx from utils import fmt_sidx
DETAILS_LIST_CLASS = 'book-list-details-list' DETAILS_LIST_CLASS = 'book-list-details-list'
ITEM_CLASS = DETAILS_LIST_CLASS + '-item'
DESCRIPTION = _('A list with thumbnails and some book details') DESCRIPTION = _('A list with thumbnails and some book details')
THUMBNAIL_MAX_WIDTH = 35 * 3 THUMBNAIL_MAX_WIDTH = 35 * 3
@ -20,13 +21,15 @@ BORDER_RADIUS = 6
def details_list_css(): def details_list_css():
ans = '' ans = ''
sel = '.' + DETAILS_LIST_CLASS sel = '.' + DETAILS_LIST_CLASS
ans += build_rule(sel, cursor='pointer') ans += build_rule(sel, cursor='pointer', user_select='none')
ans += build_rule(sel + ' > div', margin='1ex 1em', padding_bottom='1ex', border_bottom='solid 1px currentColor') ans += build_rule(sel + ' > div', margin='1ex 1em', padding_bottom='1ex', border_bottom='solid 1px currentColor')
ans += build_rule(f'{sel} .{ITEM_CLASS}:hover .details-list-left', transform='scale(1.2)')
ans += build_rule(f'{sel} .{ITEM_CLASS}:active .details-list-left', transform='scale(2)')
s = sel + ' .details-list-left' s = sel + ' .details-list-left'
ans += build_rule(s, margin_right='1em', min_width=f'{THUMBNAIL_MAX_WIDTH}px') ans += build_rule(s, margin_right='1em', min_width=f'{THUMBNAIL_MAX_WIDTH}px')
ans += build_rule(s + ' > img', border_radius=BORDER_RADIUS+'px', max_height=f'{THUMBNAIL_MAX_HEIGHT}px', max_width=f'{THUMBNAIL_MAX_WIDTH}px') 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' s = sel + ' .details-list-right'
ans += build_rule(s, flex_grow='10') ans += build_rule(s, flex_grow='10', overflow='hidden')
return ans return ans
@ -83,8 +86,9 @@ def create_item(book_id, metadata, create_image, show_book_details):
comments, comments,
) )
ans = E.div(img_div, right, ans = E.div(img_div, right,
style=f'overflow: hidden; height:{THUMBNAIL_MAX_HEIGHT}px; display: flex', style=f'height:{THUMBNAIL_MAX_HEIGHT}px; display: flex',
onclick=show_book_details onclick=show_book_details,
class_=ITEM_CLASS,
) )
return ans return ans