Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #7781 from timvandermeij/viewer-responsiveness

Browse Source 
Viewer: improve responsiveness and clean up CSS
This commit is contained in:
Jonas Jenwald 2016-11-07 17:38:23 +01:00 committed by GitHub
commit 340c6638c5
2 changed files with 58 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
web/viewer.css
View File

@ -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;
} }

4
web/viewer.html
View File

@ -223,8 +223,7 @@ 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>
@ -253,7 +252,6 @@ See https://github.com/adobe-type-tools/cmap-resources
</span> </span>
</div> </div>
</div> </div>
</div>
<div id="loadingBar"> <div id="loadingBar">
<div class="progress"> <div class="progress">
<div class="glimmer"> <div class="glimmer">