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.
This commit is contained in:
Tim van der Meij
parent
9295114bdd
commit
28ef012727
101
web/viewer.css
101
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;
|
||||
}
|
||||
|
||||
@ -223,35 +223,33 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
<span data-l10n-id="tools_label">Tools</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="outerCenter">
|
||||
<div class="innerCenter" id="toolbarViewerMiddle">
|
||||
<div class="splitToolbarButton">
|
||||
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
|
||||
<span data-l10n-id="zoom_out_label">Zoom Out</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
|
||||
<span data-l10n-id="zoom_in_label">Zoom In</span>
|
||||
</button>
|
||||
</div>
|
||||
<span id="scaleSelectContainer" class="dropdownToolbarButton">
|
||||
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
|
||||
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
|
||||
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
|
||||
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
|
||||
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
|
||||
<option id="customScaleOption" title="" value="custom" hidden="true"></option>
|
||||
<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
|
||||
<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
|
||||
<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
|
||||
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
|
||||
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
|
||||
<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
|
||||
<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
|
||||
<option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
|
||||
</select>
|
||||
</span>
|
||||
<div id="toolbarViewerMiddle">
|
||||
<div class="splitToolbarButton">
|
||||
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
|
||||
<span data-l10n-id="zoom_out_label">Zoom Out</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
|
||||
<span data-l10n-id="zoom_in_label">Zoom In</span>
|
||||
</button>
|
||||
</div>
|
||||
<span id="scaleSelectContainer" class="dropdownToolbarButton">
|
||||
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
|
||||
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
|
||||
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
|
||||
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
|
||||
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
|
||||
<option id="customScaleOption" title="" value="custom" hidden="true"></option>
|
||||
<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
|
||||
<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
|
||||
<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
|
||||
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
|
||||
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
|
||||
<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
|
||||
<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
|
||||
<option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loadingBar">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user