large thumbs were being cropped a touch.

as they could be wider than the parent div (especially when the window is small).
changes to events.html add a little more room for the large thumb.
changes to EventCtrl.js ensure the thumb is never wider than the thumb div.

2 files changed, 12 insertions, 8 deletions

diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 64d2e724..4e1417f7 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -3389,27 +3389,30 @@ angular.module('zmApp.controllers')
       }
       var ld = NVR.getLogin();
       var landscape = ($rootScope.devWidth > $rootScope.devHeight) ? true:false;
-      var maxRowHeight;
+      var maxThumbHeight;
+      var maxThumbWidth;
 
       if (ld.eventViewThumbsSize == 'large') {
-        maxRowHeight = Math.min(0.7* $rootScope.devHeight, 450);
+        maxThumbHeight = Math.min(0.7* $rootScope.devHeight, 450);
+        maxThumbWidth = Math.min(0.95* $rootScope.devWidth, $rootScope.devWidth - 44);
         if (landscape) {
           // go till 90% of width in large landscape, but restricted to useable row height 
-          return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight);
+          return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight);
         } else {
                     // go till 80% of width in large portrait, but restricted to useable row height 
 
-          return calculateAspectRatioFit(mw, mh, 0.95* $rootScope.devWidth, maxRowHeight);
+          return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight);
         }
 
       } else { // small
-        maxRowHeight = 250;
+        maxThumbHeight = 250;
+        maxThumbWidth = 0.5* $rootScope.devWidth;
         if (landscape) {
           // go till 50% of width in small landscape, but restricted to useable row height 
-          return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight);
+          return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight);
         } else {
                     // go till 30% of width in small portrait, but restricted to useable row height 
-          return calculateAspectRatioFit(mw, mh, 0.5* $rootScope.devWidth, maxRowHeight);
+          return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight);
         }
 
       }
diff --git a/www/templates/events.html b/www/templates/events.html
index 7ce3c3f7..e8f5dfa7 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -69,7 +69,8 @@
             <div class="col events-list-text">
               <!-- data -->
               <!-- for largeThumbs show image in this column -->
-              <div ng-if="loginData.eventViewThumbs!='none' && thumbClass=='large'" width="100%" style="padding: 5px;">
+              <div ng-if="loginData.eventViewThumbs!='none' && thumbClass=='large'" width="100%"
+                style="padding-top: 5px; padding-bottom: 5px; margin-left: -5px; margin-right: -5px;">
                 <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}"
                   on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px"
                   height="{{event.Event.thumbHeight}}px" fallback-src="img/noimage.png"