diff --git a/web/thumbnail_view.js b/web/thumbnail_view.js index 7096b0edd..9dacb68f1 100644 --- a/web/thumbnail_view.js +++ b/web/thumbnail_view.js @@ -20,6 +20,7 @@ 'use strict'; var THUMBNAIL_SCROLL_MARGIN = -19; +var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; /** * @constructor @@ -53,8 +54,8 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport, this.renderingId = 'thumbnail' + id; this.canvasWidth = 98; - this.canvasHeight = this.canvasWidth / this.pageWidth * this.pageHeight; - this.scale = (this.canvasWidth / this.pageWidth); + this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0; + this.scale = this.canvasWidth / this.pageWidth; var div = this.el = document.createElement('div'); div.id = 'thumbnailContainer' + id; @@ -68,8 +69,10 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport, var ring = document.createElement('div'); ring.className = 'thumbnailSelectionRing'; - ring.style.width = this.canvasWidth + 'px'; - ring.style.height = this.canvasHeight + 'px'; + ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + + 'px'; + ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + + 'px'; div.appendChild(ring); anchor.appendChild(div); @@ -100,13 +103,15 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport, this.pageHeight = this.viewport.height; this.pageRatio = this.pageWidth / this.pageHeight; - this.canvasHeight = this.canvasWidth / this.pageWidth * this.pageHeight; + this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0; this.scale = (this.canvasWidth / this.pageWidth); div.removeAttribute('data-loaded'); ring.textContent = ''; - ring.style.width = this.canvasWidth + 'px'; - ring.style.height = this.canvasHeight + 'px'; + ring.style.width = this.canvasWidth + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + + 'px'; + ring.style.height = this.canvasHeight + 2 * THUMBNAIL_CANVAS_BORDER_WIDTH + + 'px'; this.hasImage = false; this.renderingState = RenderingStates.INITIAL; diff --git a/web/viewer.css b/web/viewer.css index 47b24d525..ec076ea8f 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1113,9 +1113,13 @@ html[dir='rtl'] .verticalToolbarSeparator { margin-bottom: 10px; } +#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) { + margin-bottom: 9px; +} + .thumbnail:not([data-loaded]) { border: 1px dashed rgba(255, 255, 255, 0.5); - margin-bottom: 10px; + margin: -1px -1px 4px -1px; } .thumbnailImage {