diff --git a/web/images/toolbarButton-download.png b/web/images/toolbarButton-download.png index a0a9ce3e0..8676d8e2c 100644 Binary files a/web/images/toolbarButton-download.png and b/web/images/toolbarButton-download.png differ diff --git a/web/viewer.css b/web/viewer.css index b7500a980..be08a6093 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -358,27 +358,25 @@ body { } .thumbnail { - width: 134px; - height: 134px; - margin-top: 15px; margin-bottom: 15px; - margin-left:auto; - margin-right:auto; - line-height: 134px; - text-align: center; - overflow: hidden; + float: left; +} + +.thumbnailImage { + -moz-transition-duration: 150ms; + border: 1px solid transparent; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); + opacity: 0.8; + z-index: 99; } .thumbnailSelectionRing { - position: absolute; - width: 112px; - height: 142px; - margin: 4px; border-radius: 2px; + padding: 7px; -moz-transition-duration: 150ms; } -.thumbnail:hover > .thumbnailImage { +.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage { opacity: .9; } @@ -392,7 +390,7 @@ body { color: hsla(0,0%,100%,.9); } -.thumbnail.selected > .thumbnailImage { +.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage { box-shadow: 0 0 0 1px hsla(0,0%,0%,.5); opacity: 1; } diff --git a/web/viewer.html b/web/viewer.html index 7fe5a08ce..89f8e74ec 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -49,7 +49,7 @@
-
+
diff --git a/web/viewer.js b/web/viewer.js index 5a4b573a5..6d53251d2 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -498,7 +498,7 @@ var PDFView = { var pagesCount = pdf.numPages; var id = pdf.fingerprint; var storedHash = null; - document.getElementById('numPages').textContent = '/ '+pagesCount; + document.getElementById('numPages').textContent = '/ ' + pagesCount; document.getElementById('pageNumber').max = pagesCount; PDFView.documentFingerprint = id; var store = PDFView.store = new Settings(id); @@ -990,11 +990,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { this.height = view.height; this.id = id; - var maxThumbSize = 134; - var canvasWidth = pageRatio >= 1 ? maxThumbSize : - maxThumbSize * pageRatio; - var canvasHeight = pageRatio <= 1 ? maxThumbSize : - maxThumbSize / pageRatio; + var canvasWidth = 98; + var canvasHeight = canvasWidth / this.width * this.height; var scaleX = this.scaleX = (canvasWidth / this.width); var scaleY = this.scaleY = (canvasHeight / this.height); @@ -1014,9 +1011,14 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { canvas.width = canvasWidth; canvas.height = canvasHeight; + canvas.className = 'thumbnailImage'; div.setAttribute('data-loaded', true); - div.appendChild(canvas); + + var ring = document.createElement('div'); + ring.className = 'thumbnailSelectionRing'; + ring.appendChild(canvas); + div.appendChild(ring); var ctx = canvas.getContext('2d'); ctx.save(); @@ -1026,10 +1028,6 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { var view = page.view; ctx.translate(-view.x * scaleX, -view.y * scaleY); - div.style.width = (view.width * scaleX) + 'px'; - div.style.height = (view.height * scaleY) + 'px'; - div.style.lineHeight = (view.height * scaleY) + 'px'; - return ctx; } @@ -1272,6 +1270,7 @@ window.addEventListener('load', function webViewerLoad(evt) { document.getElementById('sidebarToggle').addEventListener('click', function() { + this.classList.toggle('toggled'); document.getElementById('toolbarSidebar').classList.toggle('hidden'); document.getElementById('sidebarContainer').classList.toggle('hidden'); updateThumbViewArea(); @@ -1452,8 +1451,14 @@ window.addEventListener('scalechange', function scalechange(evt) { window.addEventListener('pagechange', function pagechange(evt) { var page = evt.pageNumber; - if (document.getElementById('pageNumber').value != page) + if (document.getElementById('pageNumber').value != page) { document.getElementById('pageNumber').value = page; + var selected = document.querySelector('.thumbnail.selected'); + if (selected) + selected.classList.remove('selected'); + document.getElementById('thumbnailContainer' + page) + .classList.add('selected'); + } document.getElementById('previous').disabled = (page <= 1); document.getElementById('next').disabled = (page >= PDFView.pages.length); }, true);