diff --git a/web/app.js b/web/app.js index ddf0629bc..f37093218 100644 --- a/web/app.js +++ b/web/app.js @@ -1576,12 +1576,11 @@ function webViewerInitialized() { appConfig.toolbar.viewFind.classList.add('hidden'); } - appConfig.sidebar.mainContainer.addEventListener('transitionend', - function(evt) { - if (evt.target === /* mainContainer */ this) { - PDFViewerApplication.eventBus.dispatch('resize'); - } - }, true); + appConfig.mainContainer.addEventListener('transitionend', function(evt) { + if (evt.target === /* mainContainer */ this) { + PDFViewerApplication.eventBus.dispatch('resize'); + } + }, true); appConfig.sidebar.toggleButton.addEventListener('click', function() { PDFViewerApplication.pdfSidebar.toggle(); diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js index 89cfcf58c..d984a3d34 100644 --- a/web/pdf_sidebar.js +++ b/web/pdf_sidebar.js @@ -30,10 +30,10 @@ const SidebarView = { * @property {PDFViewer} pdfViewer - The document viewer. * @property {PDFThumbnailViewer} pdfThumbnailViewer - The thumbnail viewer. * @property {PDFOutlineViewer} pdfOutlineViewer - The outline viewer. - * @property {HTMLDivElement} mainContainer - The main container - * (in which the viewer element is placed). * @property {HTMLDivElement} outerContainer - The outer container * (encasing both the viewer and sidebar elements). + * @property {HTMLDivElement} viewerContainer - The viewer container + * (in which the viewer element is placed). * @property {EventBus} eventBus - The application event bus. * @property {HTMLButtonElement} toggleButton - The button used for * opening/closing the sidebar. @@ -73,8 +73,8 @@ class PDFSidebar { this.pdfThumbnailViewer = options.pdfThumbnailViewer; this.pdfOutlineViewer = options.pdfOutlineViewer; - this.mainContainer = options.mainContainer; this.outerContainer = options.outerContainer; + this.viewerContainer = options.viewerContainer; this.eventBus = options.eventBus; this.toggleButton = options.toggleButton; @@ -382,8 +382,8 @@ class PDFSidebar { * @private */ _addEventListeners() { - this.mainContainer.addEventListener('transitionend', (evt) => { - if (evt.target === this.mainContainer) { + this.viewerContainer.addEventListener('transitionend', (evt) => { + if (evt.target === this.viewerContainer) { this.outerContainer.classList.remove('sidebarMoving'); } }); diff --git a/web/viewer.css b/web/viewer.css index b0e580beb..83e4ff0c6 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -143,15 +143,17 @@ select { #sidebarContainer { position: absolute; - top: 0; + top: 32px; bottom: 0; width: 200px; visibility: hidden; + z-index: 100; + border-top: 1px solid #333; + -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease; transition-duration: 200ms; transition-timing-function: ease; - } html[dir='ltr'] #sidebarContainer { -webkit-transition-property: left; @@ -164,14 +166,18 @@ html[dir='rtl'] #sidebarContainer { right: -200px; } -#outerContainer.sidebarMoving > #sidebarContainer, -#outerContainer.sidebarOpen > #sidebarContainer { +.loadingInProgress #sidebarContainer { + top: 36px; +} + +#outerContainer.sidebarMoving #sidebarContainer, +#outerContainer.sidebarOpen #sidebarContainer { visibility: visible; } -html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer { +html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer { left: 0px; } -html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer { +html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer { right: 0px; } @@ -182,20 +188,6 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer { bottom: 0; left: 0; min-width: 320px; - -webkit-transition-duration: 200ms; - -webkit-transition-timing-function: ease; - transition-duration: 200ms; - transition-timing-function: ease; -} -html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer { - -webkit-transition-property: left; - transition-property: left; - left: 200px; -} -html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { - -webkit-transition-property: right; - transition-property: right; - right: 200px; } #sidebarContent { @@ -204,7 +196,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; - width: 200px; + width: 100%; background-color: hsla(0,0%,0%,.1); } html[dir='ltr'] #sidebarContent { @@ -225,6 +217,11 @@ html[dir='rtl'] #sidebarContent { bottom: 0; left: 0; outline: none; + + -webkit-transition-duration: 200ms; + -webkit-transition-timing-function: ease; + transition-duration: 200ms; + transition-timing-function: ease; } html[dir='ltr'] #viewerContainer { box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); @@ -233,6 +230,17 @@ html[dir='rtl'] #viewerContainer { box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05); } +html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer { + -webkit-transition-property: left; + transition-property: left; + left: 200px; +} +html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer { + -webkit-transition-property: right; + transition-property: right; + right: 200px; +} + .toolbar { position: relative; left: 0; @@ -246,7 +254,7 @@ html[dir='rtl'] #viewerContainer { } #toolbarSidebar { - width: 200px; + width: 100%; height: 32px; background-color: #424242; /* fallback */ background-image: url(images/texture.png), @@ -273,15 +281,13 @@ html[dir='rtl'] #toolbarSidebar { linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95)); } html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar { - box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08), - inset 0 1px 1px hsla(0,0%,0%,.15), + box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 -1px 0 hsla(0,0%,100%,.05), 0 1px 0 hsla(0,0%,0%,.15), 0 1px 1px hsla(0,0%,0%,.1); } html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { - box-shadow: inset -1px 0 0 hsla(0,0%,100%,.08), - inset 0 1px 1px hsla(0,0%,0%,.15), + box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 -1px 0 hsla(0,0%,100%,.05), 0 1px 0 hsla(0,0%,0%,.15), 0 1px 1px hsla(0,0%,0%,.1); @@ -1118,17 +1124,17 @@ html[dir='rtl'] .verticalToolbarSeparator { #thumbnailView { position: absolute; - width: 120px; + width: calc(100% - 60px); top: 0; bottom: 0; - padding: 10px 40px 0; + padding: 10px 30px 0; overflow: auto; -webkit-overflow-scrolling: touch; } .thumbnail { float: left; - margin-bottom: 5px; + margin: 0 10px 5px 10px; } #thumbnailView > a:last-of-type > .thumbnail { @@ -1141,7 +1147,7 @@ html[dir='rtl'] .verticalToolbarSeparator { .thumbnail:not([data-loaded]) { border: 1px dashed rgba(255, 255, 255, 0.5); - margin: -1px -1px 4px -1px; + margin: -1px 9px 4px 9px; } .thumbnailImage { @@ -1192,7 +1198,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing, #outlineView, #attachmentsView { position: absolute; - width: 192px; + width: calc(100% - 8px); top: 0; bottom: 0; overflow: auto; @@ -1841,28 +1847,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { display: none; } -@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: 980px) { - .sidebarMoving .hiddenLargeView, - .sidebarOpen .hiddenLargeView { - display: none; - } - .sidebarMoving .visibleLargeView, - .sidebarOpen .visibleLargeView { - display: inherit; - } -} - @media all and (max-width: 900px) { #toolbarViewerMiddle { display: table; @@ -1871,33 +1855,17 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { position: inherit; transform: none; } - .sidebarMoving .hiddenMediumView, - .sidebarOpen .hiddenMediumView { - display: none; - } - .sidebarMoving .visibleMediumView, - .sidebarOpen .visibleMediumView { - display: inherit; - } } @media all and (max-width: 840px) { - #sidebarContainer { - top: 32px; - z-index: 100; - } - .loadingInProgress #sidebarContainer { - top: 37px; - } #sidebarContent { - top: 32px; background-color: hsla(0,0%,0%,.7); } - html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer { + html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer { left: 0px; } - html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { + html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer { right: 0px; } diff --git a/web/viewer.js b/web/viewer.js index 70ff43f4f..4c2453b13 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -105,8 +105,8 @@ function getViewerConfiguration() { }, sidebar: { // Divs (and sidebar button) - mainContainer: document.getElementById('mainContainer'), outerContainer: document.getElementById('outerContainer'), + viewerContainer: document.getElementById('viewerContainer'), toggleButton: document.getElementById('sidebarToggle'), // Buttons thumbnailButton: document.getElementById('viewThumbnail'),