From 0f2d23ae3cfc1ba305afd8cb7d37694f8168ca50 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Thu, 11 May 2017 11:16:15 +0530 Subject: [PATCH] Cover grid: Auto-resizing of covers based on window size now takes window aspect ratio into account The resizing algorithm ensures that at least three covers fit along the smaller of the window width/height --- src/pyj/book_list/cover_grid.pyj | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pyj/book_list/cover_grid.pyj b/src/pyj/book_list/cover_grid.pyj index 9a94ad26b1..de8b21516f 100644 --- a/src/pyj/book_list/cover_grid.pyj +++ b/src/pyj/book_list/cover_grid.pyj @@ -15,14 +15,19 @@ DESCRIPTION = _('A grid of book covers') def cover_grid_css(): sel = '.' + COVER_GRID_CLASS - ans = build_rule(sel, display='flex', flex_wrap='wrap', justify_content='space-around', align_items='flex-end', align_content='flex-start', user_select='none', overflow='hidden') + margin, margin_unit = 10, 'px' + ans = build_rule(sel, display='flex', flex_wrap='wrap', justify_content='space-around', align_items='flex-end', + align_content='flex-start', user_select='none', overflow='hidden', margin_top=f'{margin / 2}{margin_unit}') # Container for an individual cover sel += ' > div' ans += build_rule( - sel, margin='10px', display='flex', align_content='flex-end', align_items='flex-end', justify_content='space-around', - width='21vw', height='28vw', max_width=THUMBNAIL_MAX_WIDTH+'px', max_height=THUMBNAIL_MAX_HEIGHT+'px', cursor='pointer', + sel, margin=f'{margin}{margin_unit}', display='flex', align_content='flex-end', align_items='flex-end', justify_content='space-around', + max_width=THUMBNAIL_MAX_WIDTH+'px', max_height=THUMBNAIL_MAX_HEIGHT+'px', cursor='pointer', min_width=f'{THUMBNAIL_MAX_WIDTH // 2}px', min_height=f'{THUMBNAIL_MAX_HEIGHT // 2}px') + mq = '@media all and (orientation: {orient}) {{ {sel} {{ width: 21{dim}; height: 28{dim} }} }}' + for dim in 'vw', 'vh': + ans += mq.format(sel=sel, dim=dim, orient='portrait' if dim is 'vw' else 'landscape') ans += build_rule(f'{sel}:hover', transform='scale(1.2)') ans += build_rule(f'{sel}:active', transform='scale(2)') ans += build_rule(sel + '.cover-grid-filler', height='0', max_height='0', min_height='0')