From 87a30a7ee145466038faa3215751d7fe476e1ff7 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Wed, 8 Mar 2017 23:54:28 +0100 Subject: [PATCH] Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text. --- web/viewer.css | 25 +++++++++++++++++++------ web/viewer.html | 44 ++++++++++++++++++++++++++------------------ 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index b6e567521..7b067dcb8 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -347,8 +347,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { top: 32px; position: absolute; z-index: 10000; - height: 32px; - + height: auto; min-width: 16px; padding: 0px 6px 0px 6px; margin: 4px 2px 4px 2px; @@ -359,10 +358,15 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { cursor: default; } +.findbar { + min-width: 300px; +} +.findbar > div { + height: 32px; +} html[dir='ltr'] .findbar { left: 68px; } - html[dir='rtl'] .findbar { right: 68px; } @@ -478,6 +482,9 @@ html[dir='ltr'] .doorHangerRight:before { font-style: italic; color: #A6B7D0; } +#findMsg:empty { + display: none; +} #findInput.notFound { background-color: rgb(255, 102, 102); @@ -500,14 +507,14 @@ html[dir='rtl'] #toolbarViewerLeft { html[dir='ltr'] #toolbarViewerLeft > *, html[dir='ltr'] #toolbarViewerMiddle > *, html[dir='ltr'] #toolbarViewerRight > *, -html[dir='ltr'] .findbar > * { +html[dir='ltr'] .findbar * { position: relative; float: left; } html[dir='rtl'] #toolbarViewerLeft > *, html[dir='rtl'] #toolbarViewerMiddle > *, html[dir='rtl'] #toolbarViewerRight > *, -html[dir='rtl'] .findbar > * { +html[dir='rtl'] .findbar * { position: relative; float: right; } @@ -1913,7 +1920,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } @media all and (max-width: 640px) { - .hiddenSmallView { + .hiddenSmallView, .hiddenSmallView * { display: none; } .visibleSmallView { @@ -1922,6 +1929,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { .toolbarButtonSpacer { width: 0; } + html[dir='ltr'] .findbar { + left: 38px; + } + html[dir='rtl'] .findbar { + right: 38px; + } } @media all and (max-width: 535px) { diff --git a/web/viewer.html b/web/viewer.html index ea357475e..0d6469949 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -97,23 +97,31 @@ See https://github.com/adobe-type-tools/cmap-resources
-