mirror of
https://github.com/kovidgoyal/calibre.git
synced 2025-07-07 10:14:46 -04:00
Content server: Improve rendering of tags/categories with long words on small screens.
Fixes #1734119 [[Content Server CSS] Language tag not displayed properly in tag browser when language name is long (in narrow screens)](https://bugs.launchpad.net/calibre/+bug/1734119)
This commit is contained in:
parent
5704585544
commit
c38c3ec3aa
@ -31,7 +31,8 @@ CLASS_NAME = 'book-search-panel'
|
|||||||
add_extra_css(def():
|
add_extra_css(def():
|
||||||
sel = '.' + CLASS_NAME + ' '
|
sel = '.' + CLASS_NAME + ' '
|
||||||
|
|
||||||
style = build_rule(sel + ' div.tag-name:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'))
|
style = build_rule(sel + ' div.tag-name > span', word_break='break-all', hyphens='auto', padding_left='1ex')
|
||||||
|
style += build_rule(sel + ' div.tag-name:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'))
|
||||||
style += build_rule(sel + ' div.tag-menu:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'))
|
style += build_rule(sel + ' div.tag-menu:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'))
|
||||||
style += build_rule(sel + ' div.tag-name:active', transform='scale(1.5)')
|
style += build_rule(sel + ' div.tag-name:active', transform='scale(1.5)')
|
||||||
style += build_rule(sel + ' div.tag-menu:active', transform='scale(2)')
|
style += build_rule(sel + ' div.tag-menu:active', transform='scale(2)')
|
||||||
@ -266,14 +267,14 @@ def render_children(container, children):
|
|||||||
E.div(class_='tag-name',
|
E.div(class_='tag-name',
|
||||||
style='border-right:solid 1px currentColor; padding: 1ex; display:flex; align-items: center',
|
style='border-right:solid 1px currentColor; padding: 1ex; display:flex; align-items: center',
|
||||||
E.img(src=icon_for_node(node), style='display:inline-block; max-height:2.5ex'),
|
E.img(src=icon_for_node(node), style='display:inline-block; max-height:2.5ex'),
|
||||||
'\xa0' + data.name
|
E.span(data.name),
|
||||||
),
|
),
|
||||||
E.div(class_='tag-menu',
|
E.div(class_='tag-menu',
|
||||||
style='padding: 1ex; display:flex; align-items:center',
|
style='padding: 1ex; display:flex; align-items:center',
|
||||||
E.div(svgicon('angle-down'))
|
E.div(svgicon('angle-down'))
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
set_css(div, max_width='45vw', border='solid 1px currentColor', border_radius='20px', margin='0.5rem', cursor='pointer', overflow='hidden', user_select='none')
|
set_css(div, max_width='95vw', border='solid 1px currentColor', border_radius='20px', margin='0.5rem', cursor='pointer', overflow='hidden', user_select='none')
|
||||||
div.firstChild.addEventListener('click', node_clicked.bind(None, i))
|
div.firstChild.addEventListener('click', node_clicked.bind(None, i))
|
||||||
div.lastChild.addEventListener('click', menu_clicked.bind(None, i))
|
div.lastChild.addEventListener('click', menu_clicked.bind(None, i))
|
||||||
container.appendChild(div)
|
container.appendChild(div)
|
||||||
|
@ -12,6 +12,7 @@ simple_vendor_prefixes = {
|
|||||||
'animation-direction': v"['webkit', 'moz', 'o']",
|
'animation-direction': v"['webkit', 'moz', 'o']",
|
||||||
'animation-fill-mode': v"['webkit', 'moz', 'o']",
|
'animation-fill-mode': v"['webkit', 'moz', 'o']",
|
||||||
'animation-play-state': v"['webkit', 'moz', 'o']",
|
'animation-play-state': v"['webkit', 'moz', 'o']",
|
||||||
|
'hyphens': v"['webkit', 'moz', 'ms']",
|
||||||
'transform': v"['webkit', 'ms', 'moz', 'o']",
|
'transform': v"['webkit', 'ms', 'moz', 'o']",
|
||||||
'transform-origin': v"['webkit', 'ms', 'moz', 'o']",
|
'transform-origin': v"['webkit', 'ms', 'moz', 'o']",
|
||||||
'transition': v"['webkit', 'moz', 'o']",
|
'transition': v"['webkit', 'moz', 'o']",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user