From 28ef01272734c576d87ffa3e675233333f7d1965 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Thu, 3 Nov 2016 16:56:57 +0100 Subject: [PATCH 1/2] Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore. --- web/viewer.css | 101 ++++++++++++++---------------------------------- web/viewer.html | 54 +++++++++++++------------- 2 files changed, 54 insertions(+), 101 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 630d54b78..9539af808 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -135,32 +135,6 @@ select { cursor: default; } -/* outer/inner center provides horizontal center */ -.outerCenter { - pointer-events: none; - position: relative; -} -html[dir='ltr'] .outerCenter { - float: right; - right: 50%; -} -html[dir='rtl'] .outerCenter { - float: left; - left: 50%; -} -.innerCenter { - pointer-events: auto; - position: relative; -} -html[dir='ltr'] .innerCenter { - float: right; - right: -50%; -} -html[dir='rtl'] .innerCenter { - float: left; - left: -50%; -} - #outerContainer { width: 100%; height: 100%; @@ -494,24 +468,19 @@ html[dir='ltr'] .doorHangerRight:before { background-color: rgb(255, 102, 102); } -html[dir='ltr'] #toolbarViewerLeft { - margin-left: -1px; -} -html[dir='rtl'] #toolbarViewerRight { - margin-right: -1px; +#toolbarViewerMiddle { + position: absolute; + left: 50%; + transform: translateX(-50%); } html[dir='ltr'] #toolbarViewerLeft, html[dir='rtl'] #toolbarViewerRight { - position: absolute; - top: 0; - left: 0; + float: left; } html[dir='ltr'] #toolbarViewerRight, html[dir='rtl'] #toolbarViewerLeft { - position: absolute; - top: 0; - right: 0; + float: right; } html[dir='ltr'] #toolbarViewerLeft > *, html[dir='ltr'] #toolbarViewerMiddle > *, @@ -1828,20 +1797,18 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { display: none; } -@media all and (max-width: 960px) { - html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter, - html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter { - float: left; - left: 205px; - } - html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter, - html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter { - float: right; - right: 205px; +@media all and (max-width: 1040px) { + #outerContainer.sidebarMoving #toolbarViewerMiddle, + #outerContainer.sidebarOpen #toolbarViewerMiddle { + display: table; + margin: auto; + left: auto; + position: inherit; + transform: none; } } -@media all and (max-width: 900px) { +@media all and (max-width: 980px) { .sidebarOpen .hiddenLargeView { display: none; } @@ -1850,7 +1817,14 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } } -@media all and (max-width: 860px) { +@media all and (max-width: 900px) { + #toolbarViewerMiddle { + display: table; + margin: auto; + left: auto; + position: inherit; + transform: none; + } .sidebarOpen .hiddenMediumView { display: none; } @@ -1859,7 +1833,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } } -@media all and (max-width: 770px) { +@media all and (max-width: 840px) { #sidebarContainer { top: 32px; z-index: 100; @@ -1879,15 +1853,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { right: 0px; } - html[dir='ltr'] .outerCenter { - float: left; - left: 205px; - } - html[dir='rtl'] .outerCenter { - float: right; - right: 205px; - } - #outerContainer .hiddenLargeView, #outerContainer .hiddenMediumView { display: inherit; @@ -1898,7 +1863,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } } -@media all and (max-width: 700px) { +@media all and (max-width: 770px) { #outerContainer .hiddenLargeView { display: none; } @@ -1907,7 +1872,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } } -@media all and (max-width: 660px) { +@media all and (max-width: 700px) { #outerContainer .hiddenMediumView { display: none; } @@ -1916,29 +1881,19 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } } -@media all and (max-width: 600px) { +@media all and (max-width: 640px) { .hiddenSmallView { display: none; } .visibleSmallView { display: inherit; } - html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter, - html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter, - html[dir='ltr'] .outerCenter { - left: 156px; - } - html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter, - html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter, - html[dir='rtl'] .outerCenter { - right: 156px; - } .toolbarButtonSpacer { width: 0; } } -@media all and (max-width: 510px) { +@media all and (max-width: 535px) { #scaleSelectContainer { display: none; } diff --git a/web/viewer.html b/web/viewer.html index 50df35d5a..c5195fdcf 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -223,35 +223,33 @@ See https://github.com/adobe-type-tools/cmap-resources Tools -
-
-
- -
- -
- - - +
+
+ +
+
+ + +
From f95915fc73803794395de2627d04a6929a96f226 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Mon, 7 Nov 2016 16:23:50 +0100 Subject: [PATCH 2/2] Viewer: amend `.sidebarOpen` responsiveness rules with rules for `.sidebarMoving` --- web/viewer.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/viewer.css b/web/viewer.css index 9539af808..135379d12 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1809,9 +1809,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { } @media all and (max-width: 980px) { + .sidebarMoving .hiddenLargeView, .sidebarOpen .hiddenLargeView { display: none; } + .sidebarMoving .visibleLargeView, .sidebarOpen .visibleLargeView { display: inherit; } @@ -1825,9 +1827,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { position: inherit; transform: none; } + .sidebarMoving .hiddenMediumView, .sidebarOpen .hiddenMediumView { display: none; } + .sidebarMoving .visibleMediumView, .sidebarOpen .visibleMediumView { display: inherit; }