From 485b1db09019612e6da34804d1c76fd91f048287 Mon Sep 17 00:00:00 2001
From: pliablepixels <pliablepixels@gmail.com>
Date: Mon, 29 Feb 2016 11:38:20 -0500
Subject: initial code #179

Former-commit-id: 2b35afdc0c733beb2ea05cd6972f58228c8f272b
---
 www/templates/montage.html | 86 ++++++++++++++++------------------------------
 1 file changed, 30 insertions(+), 56 deletions(-)

(limited to 'www/templates/montage.html')

diff --git a/www/templates/montage.html b/www/templates/montage.html
index 42294e09..46cbbd8b 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -20,94 +20,68 @@
 
         <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
         </button>
-        <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
-
-
 
     </ion-nav-buttons>
 
-    <ion-content has-bouncing="false" style="background-color:#444444">
+    <ion-content ng-cloak has-bouncing="false" style="background-color:#444444">
 
-        <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()">
-        </ion-refresher>
+        <!--<ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()">
+        </ion-refresher>-->
 
-        
         <span ng-show="!minimal">
                 <div class="range range-positive">
                     <i style="color:#bbbbbb" class="icon ion-grid"></i>
                     <input type="range" ng-model="slider.monsize" min="1"
-                           max="9" ng-change="sliderChanged(slider.monsize)">
+                           max="5" ng-change="sliderChanged(slider.monsize)">
                     <i style="color:#bbbbbb" class="icon ion-image"></i>
 
                 </div>
         </span>
 
 
-
-        <div ng-style="packMontage ? { '-webkit-column-count':10-slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','-webkit-column-fill': 'balance', 'column-fill': 'balance'} : {'-webkit-column-count':10-slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','display':'-webkit-flex','-webkit-flex-direction':'row','flex-direction':'row', 'flex-wrap':'wrap' }">
-
-            <!--<div ng-style="packMontage ? { '-webkit-column-count':slider.monsize, '-webkit-column-gap':'0px','line-height':'0px' } : { 'flex':'display', '-webkit-column-count':slider.monsize }">-->
-
-
+        <div class="grid" id="mygrid">
+            <div class="grid-sizer"></div>
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">
-     
-            <!-- back to ng-src. spinner was not updating when rand changes-->
-            <!-- moving to single so I can rely on rand for reloads -->
-                
-                
-                <!--src=" /zm/cgi-bin/nph-zms?source=event&mode=jpeg&event=7664&frame=1&scale=100&rate=100&maxfps=5&replay=gapless&auth=6b8c60f81fa2edff94f80f12bdebd98d&connkey=286643&rand=1453671607"-->
-                
-                <div style="position: relative;width:{{devWidth/(10-slider.monsize)}}px;">
-                    <div ng-if="!isModalActive">
+            <div class="grid-item">
+                <figure>
+                    <div ng-if="!isModalActive" >
                         <div ng-if="$root.authSession!='undefined' && !isBackground()">
                             <div ng-if = "!minimal">
-                                <img id="img-{{$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" style="
-        width: 100% !important;
-        height: auto !important;" />
-                            </div>
-                            
+                                
+                                <img id="img-{{$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" />
+                                
+                            </div> 
+
                             <div ng-if = "minimal">
-                                <img id="{{img-$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}"  ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" style="margin-top:0px;
-        width: 100% !important;
-        height: auto !important;" />
+                                <img id="{{img-$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}"  ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines"  />
                             </div>
-                            
-
                         </div>
 
                         <div ng-if="!$root.authSession=='undefined' || isBackground()">
-                            <img image-spinner-src="img/pausevideo.png" style="width: 100% !important;
-  height: auto !important;" />
+                            <img image-spinner-src="img/pausevideo.png" />
                         </div>
-                        
-                        <span ng-show="!minimal">
 
-                            <div id = "slowpulse"  style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
-                                 ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header animated infinite flash':'header'">
-                                &nbsp;<i class="ion-monitor"></i>
-                               {{monitor.Monitor.Name}}&nbsp;
-                            </div>
-                        </span>
-
-            <div id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div>
-
-
-        </div>
-        </div>
+                     
 
+                        <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-figcaption animated infinite flash':'normal-figcaption'" >
 
-        <div ng-if="isModalActive">
-            <img image-spinner-src="img/pausevideo.png" style="margin-top:0px;
-        width: 100% !important;
-        height: auto !important;" />
-        </div>
+                                &nbsp;<i class="ion-monitor"></i>
+                               {{monitor.Monitor.Name}}&nbsp;
 
+                        </figcaption>
 
 
-        </span>
+                        
+                    </div> <!-- modal not active-->
+                    <div ng-if="isModalActive">
+                        <img image-spinner-src="img/pausevideo.png" />
+                    </div>
+                </figure>
+            </div>
+            </span>       <!-- ngrepeat -->
         </div>
 
-        <!-- ngrepeat -->
+ 
 
 
 
-- 
cgit v1.2.3