Scale images proportionally

diff --git a/web/viewer.css b/web/viewer.css
index a8578eb7eb680bac95d5f6e246197dc3c031acc8..ae00efd0137f327b074ac3b60cdd33002f430087 100755 (executable)
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -109,13 +109,23 @@ span#info {
 }
 
 .thumbnail {
-  width: 104px;
+  width: 134px;
   height: 134px;
-  background-color: white;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left:auto;
   margin-right:auto;
+  line-height: 134px;
+  text-align: center;
+}
+
+.thumbnail:not([data-loaded]) {
+  background-color: gray;
+}
+
+.thumbnail > canvas {
+  vertical-align: middle;
+  display: inline-block;
 }
 
 #outlineScrollView {

diff --git a/web/viewer.js b/web/viewer.js
index c93df3b744cb746b819319a367de8ef2f786abc8..ceaf22fa3464d69a5c45e22c7ffc5049b0c06e5b 100644 (file)
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -123,7 +123,8 @@ var PDFView = {
       var page = pdf.getPage(i);
       pages.push(new PageView(container, page, i, page.width, page.height,
                               page.stats, this.navigateTo.bind(this)));
-      thumbnails.push(new ThumbnailView(sidebar, pages[i - 1]));
+      thumbnails.push(new ThumbnailView(sidebar, pages[i - 1],
+                                        page.width / page.height));
       var pageRef = page.ref;
       pagesRefMap[pageRef.num + ' ' + pageRef.gen + ' R'] = i;
     }
@@ -274,7 +275,7 @@ var PageView = function(container, content, id, width, height,
   };
 };
 
-var ThumbnailView = function(container, page) {
+var ThumbnailView = function(container, page, pageRatio) {
   var anchor = document.createElement('a');
   anchor.href = '#' + page.id;
 
@@ -293,8 +294,13 @@ var ThumbnailView = function(container, page) {
     canvas.id = 'thumbnail' + page.id;
     canvas.mozOpaque = true;
 
-    canvas.width = 104;
-    canvas.height = 134;
+    var maxThumbSize = 134;
+    canvas.width = pageRatio >= 1 ? maxThumbSize :
+      maxThumbSize * pageRatio;
+    canvas.height = pageRatio <= 1 ? maxThumbSize :
+      maxThumbSize / pageRatio;
+
+    div.setAttribute('data-loaded', true);
     div.appendChild(canvas);
 
     var ctx = canvas.getContext('2d');