From 2bb981a835b9808816b8c86d8578b7271c5a2735 Mon Sep 17 00:00:00 2001 From: fkaelberer Date: Sun, 28 Dec 2014 19:17:30 +0100 Subject: [PATCH 1/2] Ensure constant 7px thumbnail border width --- web/thumbnail_view.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/web/thumbnail_view.js b/web/thumbnail_view.js index 1e16a7de4..5fa50d1a3 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 @@ -55,8 +56,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; @@ -70,8 +71,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); @@ -103,13 +106,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; From 1d31018c7db06e7e7a16ce3fe0b3870d618da9b3 Mon Sep 17 00:00:00 2001 From: fkaelberer Date: Tue, 30 Dec 2014 15:05:39 +0100 Subject: [PATCH 2/2] Make thumbnail CSS size independent of data-loaded tag --- web/viewer.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/viewer.css b/web/viewer.css index 32ba1b692..98784a2f4 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1115,9 +1115,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 {