diff options
| -rw-r--r-- | www/css/style.css | 13 | ||||
| -rw-r--r-- | www/js/MontageCtrl.js | 22 | ||||
| -rw-r--r-- | www/js/app.js | 1 | ||||
| -rw-r--r-- | www/templates/montage.html | 15 |
4 files changed, 32 insertions, 19 deletions
diff --git a/www/css/style.css b/www/css/style.css index 9299d518..1e6627b4 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -93,6 +93,9 @@ ion-popover-view.fit ion-content { } + + + /* I am using flexboxes to dynamicall adapt content in montage view. Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ @@ -850,6 +853,7 @@ body { font-family: sans-serif; } border:4px solid #e74c3c; } + .grid-sizer {width:10%; } .grid-item { width: 20%; } .grid-item-10 {width: 10%; } @@ -862,7 +866,11 @@ body { font-family: sans-serif; } .grid-item-80 { width: 80%; } .grid-item-90 {width: 90%; } .grid-item-100 {width:100%; } -. + + + + + /* clear fix */ .grid:after { content: ''; @@ -873,7 +881,8 @@ body { font-family: sans-serif; } .grid-item img { display: block; - max-width: 100%; + width: 100%; + height:auto; } /* ---- .grid-item ---- */ diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index d463ed8d..f073d836 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -200,11 +200,11 @@ function initPackery() ZMDataModel.zmDebug ("All images loaded, doing image layout"); $timeout (function() {pckry.initShiftLayout(positions, 'data-item-id');},0); } - $timeout(function(){ZMDataModel.zmLog ("Force calling resize"); pckry.shiftLayout();},300);// don't ask + $timeout(function(){ZMDataModel.zmLog ("Force calling resize"); pckry.shiftLayout();},zm.packeryTimer);// don't ask - },300); + },zm.packeryTimer); }); @@ -701,10 +701,10 @@ function initPackery() }); + // we don't really need this as we have stopped the timer + // $scope.isModalActive = true; - $scope.isModalActive = true; - - + //$timeout (function() {pckry.shiftLayout();},zm.packeryTimer); $scope.modal.show(); }); @@ -744,6 +744,8 @@ function initPackery() // console.log ("Refreshing Image..."); }.bind(this), 5000); + // $timeout (function() {pckry.shiftLayout();},zm.packeryTimer); + }; @@ -928,7 +930,7 @@ $scope.$on('$ionicView.afterEnter', function () { console.log("**VIEW ** Montage Ctrl AFTER ENTER"); window.addEventListener("resize", orientationChanged, false); - $timeout ( function () {initPackery(); },500); + $timeout ( function () {initPackery(); },zm.packeryTimer); document.addEventListener("pause", onPause, false); document.addEventListener("resume", onResume, false); @@ -1005,7 +1007,7 @@ $scope.$on('$ionicView.afterEnter', function () { // $scope.slider.monsize = 2; }); //layout(pckry); - $timeout (function(){pckry.layout();}); // force here - no shiftlayout + $timeout (function(){pckry.layout();},zm.packeryTimer); // force here - no shiftlayout },100); @@ -1092,7 +1094,7 @@ $scope.$on('$ionicView.afterEnter', function () { ZMDataModel.setLogin(ld); $ionicLoading.hide(); $scope.sliderChanging = false; - },100); + },zm.packeryTimer); }); @@ -1100,13 +1102,13 @@ $scope.$on('$ionicView.afterEnter', function () { if (!somethingReset) { console.log (">>>SOMETHING NOT RESET"); - $timeout(function() {pckry.layout();},300); + $timeout(function() {pckry.layout();},zm.packeryTimer); } else { console.log (">>>SOMETHING RESET"); - $timeout(function() {layout(pckry);},300); + $timeout(function() {layout(pckry);},zm.packeryTimer); } diff --git a/www/js/app.js b/www/js/app.js index 74c2fb66..ef8c1990 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -76,6 +76,7 @@ angular.module('zmApp', [ nphSwitchTimer: 3000, eventHistoryTimer: 10000, eventPlaybackQuery: 3000, + packeryTimer:500 diff --git a/www/templates/montage.html b/www/templates/montage.html index c27e2ef9..4ce29ab3 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -65,14 +65,14 @@ - <figure class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'"> - <div ng-if="!isModalActive" > + <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'"> + <!--<div ng-if="!isModalActive" >--> <div ng-if="$root.authSession!='undefined' && !isBackground() && !areImagesLoading"> <div ng-if = "!minimal"> - <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem($index);" image-spinner-loader="lines" /> + <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem($index);" image-spinner-loader="lines" /> </div> @@ -82,7 +82,7 @@ </div> <div ng-if="!$root.authSession=='undefined' || isBackground() || areImagesLoading"> - <img image-spinner-src="img/pausevideo.png" /> + <img img id="{{img-$index}}" image-spinner-src="img/pausevideo.png" /> </div> @@ -97,10 +97,11 @@ - </div> <!-- modal not active--> + <!--</div>--> <!-- modal not active--> + <!-- <div ng-if="isModalActive"> - <img image-spinner-src="img/pausevideo.png" /> - </div> + <img img id="{{img-$index}}" image-spinner-src="img/pausevideo.png" /> + </div>--> </figure> </div> |