Merge pull request #7781 from timvandermeij/viewer-responsiveness
Viewer: improve responsiveness and clean up CSS
This commit is contained in:
Jonas Jenwald
GitHub
commit
340c6638c5
105
web/viewer.css
105
web/viewer.css
@ -135,32 +135,6 @@ select {
|
|||||||
cursor: default;
|
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 {
|
#outerContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -494,24 +468,19 @@ html[dir='ltr'] .doorHangerRight:before {
|
|||||||
background-color: rgb(255, 102, 102);
|
background-color: rgb(255, 102, 102);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[dir='ltr'] #toolbarViewerLeft {
|
#toolbarViewerMiddle {
|
||||||
margin-left: -1px;
|
position: absolute;
|
||||||
}
|
left: 50%;
|
||||||
html[dir='rtl'] #toolbarViewerRight {
|
transform: translateX(-50%);
|
||||||
margin-right: -1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[dir='ltr'] #toolbarViewerLeft,
|
html[dir='ltr'] #toolbarViewerLeft,
|
||||||
html[dir='rtl'] #toolbarViewerRight {
|
html[dir='rtl'] #toolbarViewerRight {
|
||||||
position: absolute;
|
float: left;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
html[dir='ltr'] #toolbarViewerRight,
|
html[dir='ltr'] #toolbarViewerRight,
|
||||||
html[dir='rtl'] #toolbarViewerLeft {
|
html[dir='rtl'] #toolbarViewerLeft {
|
||||||
position: absolute;
|
float: right;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
html[dir='ltr'] #toolbarViewerLeft > *,
|
html[dir='ltr'] #toolbarViewerLeft > *,
|
||||||
html[dir='ltr'] #toolbarViewerMiddle > *,
|
html[dir='ltr'] #toolbarViewerMiddle > *,
|
||||||
@ -1828,38 +1797,47 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 960px) {
|
@media all and (max-width: 1040px) {
|
||||||
html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
|
#outerContainer.sidebarMoving #toolbarViewerMiddle,
|
||||||
html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter {
|
#outerContainer.sidebarOpen #toolbarViewerMiddle {
|
||||||
float: left;
|
display: table;
|
||||||
left: 205px;
|
margin: auto;
|
||||||
}
|
left: auto;
|
||||||
html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
|
position: inherit;
|
||||||
html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter {
|
transform: none;
|
||||||
float: right;
|
|
||||||
right: 205px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 900px) {
|
@media all and (max-width: 980px) {
|
||||||
|
.sidebarMoving .hiddenLargeView,
|
||||||
.sidebarOpen .hiddenLargeView {
|
.sidebarOpen .hiddenLargeView {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.sidebarMoving .visibleLargeView,
|
||||||
.sidebarOpen .visibleLargeView {
|
.sidebarOpen .visibleLargeView {
|
||||||
display: inherit;
|
display: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 860px) {
|
@media all and (max-width: 900px) {
|
||||||
|
#toolbarViewerMiddle {
|
||||||
|
display: table;
|
||||||
|
margin: auto;
|
||||||
|
left: auto;
|
||||||
|
position: inherit;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
.sidebarMoving .hiddenMediumView,
|
||||||
.sidebarOpen .hiddenMediumView {
|
.sidebarOpen .hiddenMediumView {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.sidebarMoving .visibleMediumView,
|
||||||
.sidebarOpen .visibleMediumView {
|
.sidebarOpen .visibleMediumView {
|
||||||
display: inherit;
|
display: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 770px) {
|
@media all and (max-width: 840px) {
|
||||||
#sidebarContainer {
|
#sidebarContainer {
|
||||||
top: 32px;
|
top: 32px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
@ -1879,15 +1857,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
|||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[dir='ltr'] .outerCenter {
|
|
||||||
float: left;
|
|
||||||
left: 205px;
|
|
||||||
}
|
|
||||||
html[dir='rtl'] .outerCenter {
|
|
||||||
float: right;
|
|
||||||
right: 205px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#outerContainer .hiddenLargeView,
|
#outerContainer .hiddenLargeView,
|
||||||
#outerContainer .hiddenMediumView {
|
#outerContainer .hiddenMediumView {
|
||||||
display: inherit;
|
display: inherit;
|
||||||
@ -1898,7 +1867,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 700px) {
|
@media all and (max-width: 770px) {
|
||||||
#outerContainer .hiddenLargeView {
|
#outerContainer .hiddenLargeView {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -1907,7 +1876,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 660px) {
|
@media all and (max-width: 700px) {
|
||||||
#outerContainer .hiddenMediumView {
|
#outerContainer .hiddenMediumView {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -1916,29 +1885,19 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 600px) {
|
@media all and (max-width: 640px) {
|
||||||
.hiddenSmallView {
|
.hiddenSmallView {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.visibleSmallView {
|
.visibleSmallView {
|
||||||
display: inherit;
|
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 {
|
.toolbarButtonSpacer {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 510px) {
|
@media all and (max-width: 535px) {
|
||||||
#scaleSelectContainer {
|
#scaleSelectContainer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -223,35 +223,33 @@ See https://github.com/adobe-type-tools/cmap-resources
|
|||||||
<span data-l10n-id="tools_label">Tools</span>
|
<span data-l10n-id="tools_label">Tools</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="outerCenter">
|
<div id="toolbarViewerMiddle">
|
||||||
<div class="innerCenter" id="toolbarViewerMiddle">
|
<div class="splitToolbarButton">
|
||||||
<div class="splitToolbarButton">
|
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
|
||||||
<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>
|
||||||
<span data-l10n-id="zoom_out_label">Zoom Out</span>
|
</button>
|
||||||
</button>
|
<div class="splitToolbarButtonSeparator"></div>
|
||||||
<div class="splitToolbarButtonSeparator"></div>
|
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
|
||||||
<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>
|
||||||
<span data-l10n-id="zoom_in_label">Zoom In</span>
|
</button>
|
||||||
</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>
|
||||||
|
<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>
|
</div>
|
||||||
<div id="loadingBar">
|
<div id="loadingBar">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user