From c38c3ec3aae75107a18c1ae6d653f396329e81b6 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Thu, 30 Nov 2017 08:58:06 +0530 Subject: [PATCH] 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) --- src/pyj/book_list/search.pyj | 7 ++++--- src/pyj/dom.pyj | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pyj/book_list/search.pyj b/src/pyj/book_list/search.pyj index 796111a04b..46104f4f0a 100644 --- a/src/pyj/book_list/search.pyj +++ b/src/pyj/book_list/search.pyj @@ -31,7 +31,8 @@ CLASS_NAME = 'book-search-panel' add_extra_css(def(): 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-name:active', transform='scale(1.5)') 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', 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'), - '\xa0' + data.name + E.span(data.name), ), E.div(class_='tag-menu', style='padding: 1ex; display:flex; align-items:center', 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.lastChild.addEventListener('click', menu_clicked.bind(None, i)) container.appendChild(div) diff --git a/src/pyj/dom.pyj b/src/pyj/dom.pyj index a40671fe51..ebcb5fe0b4 100644 --- a/src/pyj/dom.pyj +++ b/src/pyj/dom.pyj @@ -12,6 +12,7 @@ simple_vendor_prefixes = { 'animation-direction': v"['webkit', 'moz', 'o']", 'animation-fill-mode': v"['webkit', 'moz', 'o']", 'animation-play-state': v"['webkit', 'moz', 'o']", + 'hyphens': v"['webkit', 'moz', 'ms']", 'transform': v"['webkit', 'ms', 'moz', 'o']", 'transform-origin': v"['webkit', 'ms', 'moz', 'o']", 'transition': v"['webkit', 'moz', 'o']",