#755 animate and fade the entire window

2 files changed, 12 insertions, 12 deletions

diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index 8f0a0fb7..24aea0f5 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -691,11 +691,11 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             drawGraph(framearray, $scope.MontageMonitors[ndx].Monitor.Id);
           }, 100);
           var element = angular.element(document.getElementById($scope.MontageMonitors[ndx].Monitor.Id + "-timeline"));
-          element.removeClass('animated flipInX');
-          element.addClass('animated flipOutX');
+          element.removeClass('animated fadeIn');
+          element.addClass('animated fadeOut');
           $timeout(function () {
-            element.removeClass('animated flipOutX');
-            element.addClass('animated flipInX');
+            element.removeClass('animated fadeOut');
+            element.addClass('animated fadeIn');
             $scope.MontageMonitors[ndx].Monitor.eventUrlTime = data.event.Event.StartTime;
             var bw = NVR.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
 
@@ -926,13 +926,13 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
       //  m.Monitor.videoObject.config.sources[0].src = $sce.trustAsResourceUrl(videoURL);
 
       var element = angular.element(document.getElementById(m.Monitor.Id + "-timeline"));
-      element.removeClass('animated flipInX');
-      element.addClass('animated flipOutX');
+      element.removeClass('animated fadeIn');
+      element.addClass('animated fadeOut');
 
       $timeout (function () {
 
-        element.removeClass('animated flipOutX');
-        element.addClass('animated flipInX');
+        element.removeClass('animated fadeOut');
+        element.addClass('animated fadeIn');
 
         NVR.debug ("--->updating videoURL for mid="+m.Monitor.Id+ "to:"+videoURL);
         m.Monitor.eid = success.eid;
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 7ef88e98..3b02166a 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -32,7 +32,7 @@
         <div ng-if="monitor.Monitor.eventType == 'video'">
           <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}"
             data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}">
-            <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-if=" monitor.Monitor.listDisplay!='noshow'" on-swipe-left="skipVideo(monitor, 1)" on-swipe-right="skipVideo(monitor, -1)">
+            <figure id="{{monitor.Monitor.Id}}-timeline" height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-if=" monitor.Monitor.listDisplay!='noshow'" on-swipe-left="skipVideo(monitor, 1)" on-swipe-right="skipVideo(monitor, -1)">
 
               
               <figcaption class="normal-figheader-history" >
@@ -46,7 +46,7 @@
 
                 </span> {{monitor.Monitor.Name}}&nbsp;
                 <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px"
-                  class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">[{{monitor.Monitor.eid}}]
+                  class="header-event-id" >[{{monitor.Monitor.eid}}]
                   <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}}
                   ({{humanizeTime(monitor.Monitor.eventUrlTime)}})&nbsp;
                 </div>
@@ -88,7 +88,7 @@
         <div ng-if="monitor.Monitor.eventUrl != 'img/noimage.png' && monitor.Monitor.connKey !='' && monitor.Monitor.eventType == 'jpeg'">
           <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}"
             data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}">
-            <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-if=" monitor.Monitor.listDisplay!='noshow'">
+            <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-if=" monitor.Monitor.listDisplay!='noshow'" id="{{monitor.Monitor.Id}}-timeline">
 
                 <figcaption class="normal-figheader-history">
                     &nbsp; 
@@ -99,7 +99,7 @@
     
                     </span> {{monitor.Monitor.Name}}&nbsp;
                     <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px"
-                      class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">[{{monitor.Monitor.eid}}]
+                      class="header-event-id" >[{{monitor.Monitor.eid}}]
                       <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}}
                       ({{humanizeTime(monitor.Monitor.eventUrlTime)}})&nbsp;
                     </div>