#963 move to flex box wrap

3 files changed, 34 insertions, 7 deletions

diff --git a/www/css/style.css b/www/css/style.css
index a0a19319..707c4603 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1917,8 +1917,14 @@ fill-opacity: 0.8;
 }
 
 .smallThumbs {
+  
+  flex-wrap:wrap;
   float:right;
   
+  
+
+  
+  
 }
 .no-padding {
   padding: 0px !important;
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index a83f6b1e..0cc99651 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -2961,16 +2961,36 @@ angular.module('zmApp.controllers')
 
     }
 
+    function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
+      // credit: https://stackoverflow.com/a/14731922
+      var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
+      return { w: Math.round(srcWidth*ratio), h: Math.round(srcHeight*ratio) };
+   }
+
+
     function computeThumbnailSize(mw, mh, mo) {
-        
+      if (mo != 0 && mo != 180) {
+
+        var tmp = mw;
+        mw = mh;
+        mh = tmp;
+      }
       var ld = NVR.getLogin();
+      if (ld.eventViewThumbsSize == 'large') {
+        return calculateAspectRatioFit(mw, mh, 0.9* $rootScope.devWidth, 0.4 * $rootScope.devHeight);
+
+      } else {
+        return calculateAspectRatioFit(mw, mh, 0.3 * $rootScope.devWidth, 0.3 * $rootScope.devHeight);
 
+      } 
+      
+      /*
       if (ld.eventViewThumbsSize == 'large') {
         tw = Math.round(0.9 * $rootScope.devWidth);
         th = Math.round(0.7 * $rootScope.devHeight);
       } else {
         tw = Math.round(0.4 * $rootScope.devWidth);
-      th = Math.round(0.3 * $rootScope.devHeight);
+        th = Math.round(0.3 * $rootScope.devHeight);
       }
       
 
@@ -2982,7 +3002,7 @@ angular.module('zmApp.controllers')
         h: 0
       };
 
-    
+    */
     /* seems I really should be using strings due to horz and very
     but luckily parseInt will make them 0 which gets treated as "nothing to do"
     '0' => translate('Normal'),
@@ -2993,6 +3013,7 @@ angular.module('zmApp.controllers')
     'vert' => translate('FlippedVert')
 
     */
+   /*
       if (mo != 0 && mo != 180) {
 
         var tmp = mw;
@@ -3020,7 +3041,7 @@ angular.module('zmApp.controllers')
       result.w = mw;
       result.h = mh;
       return result;
-
+*/
     }
 
    
diff --git a/www/templates/events.html b/www/templates/events.html
index e7f4f48d..1a964f6c 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -50,7 +50,7 @@
               <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
             </span>
 
-            <div ng-class="::{'row responsive-lg': thumbClass=='large', 'row responsive-sm': thumbClass=='small'}"
+            <div ng-class="::{'row responsive-lg': thumbClass=='large', 'row': thumbClass=='small'}"
               style="font-size:80%; color:rgb(110,110,110)">
 
 
@@ -60,7 +60,7 @@
               <!--row-->
               <!--<div class="row" style="font-size:80%; color:rgb(110,110,110)">-->
               <!-- <div class="col">-->
-              <div class="col no-padding">
+              <div class="col">
                 <div class="item-text-wrap">
                   <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
@@ -98,7 +98,7 @@
                   <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
                 </div>
               </div> <!-- col-->
-              <div class="col no-padding">
+              <div class="col">
                 <div ng-if="loginData.eventViewThumbs!='none'"
                   ng-class="::{'largeThumbs': thumbClass=='large', 'smallThumbs': thumbClass=='small'}">
                   <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}"