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;
|
||||
}
|
||||
|
||||
/* 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,38 +1797,47 @@ 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) {
|
||||
.sidebarMoving .hiddenLargeView,
|
||||
.sidebarOpen .hiddenLargeView {
|
||||
display: none;
|
||||
}
|
||||
.sidebarMoving .visibleLargeView,
|
||||
.sidebarOpen .visibleLargeView {
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
.sidebarMoving .visibleMediumView,
|
||||
.sidebarOpen .visibleMediumView {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 770px) {
|
||||
@media all and (max-width: 840px) {
|
||||
#sidebarContainer {
|
||||
top: 32px;
|
||||
z-index: 100;
|
||||
@ -1879,15 +1857,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 +1867,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 700px) {
|
||||
@media all and (max-width: 770px) {
|
||||
#outerContainer .hiddenLargeView {
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
@ -1916,29 +1885,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…
Reference in New Issue
Block a user