Add selection ring around thumbnails.

web/viewer.css

@@ -350,27 +350,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;
 }
 
@@ -384,7 +382,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;
 }

web/viewer.html

@@ -49,7 +49,7 @@
             </div>
           </div>
           <div id="toolbarViewer">
-            <div id="sidebarToggle" class="toolbarButton toggled" title="Toggle Sidebar"></div>
+            <div id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"></div>
             <div class="toolbarButtonSpacer"></div>
             <div class="splitToolbarButton">
               <div class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--"></div>

web/viewer.js

@@ -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,13 @@ 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);