From 89969cf4d6dc308f68efc44d493f9a4a236a24cd Mon Sep 17 00:00:00 2001
From: Arjun Roychowdhury <pliablepixels@gmail.com>
Date: Tue, 22 Dec 2015 11:21:18 -0500
Subject: #119 - fixes to pack in montage - still some odd header behavior but
 better than what exists now

Former-commit-id: 869cab572aa43f457848bf0b4beab312cb17b6d3
---
 www/templates/montage.html | 87 +++++++++++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 36 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/montage.html b/www/templates/montage.html
index d15e4350..9b4b6587 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -10,7 +10,7 @@
                 <button class="button button-icon button-clear ion-arrow-swap"
                         ng-click="toggleReorder();">
                 </button>
-            </span>
+        </span>
         <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>-->
@@ -24,72 +24,86 @@
 
         <span ng-show="!minimal">
                 <div class="range range-positive">
-                    <i style="color:#bbbbbb" class="icon ion-arrow-shrink"></i>
+                    <i style="color:#bbbbbb" class="icon ion-image"></i>
                     <input type="range" ng-model="slider.monsize" min="1"
-                           max="6" ng-change="sliderChanged(slider.monsize)">
-                    <i style="color:#bbbbbb" class="icon ion-arrow-expand"></i>
+                           max="10" ng-change="sliderChanged(slider.monsize)">
+                    <i style="color:#bbbbbb" class="icon ion-grid"></i>
 
                 </div>
         </span>
 
-
-        <div class="wrapper">
+        <div style="-webkit-column-count:{{slider.monsize}};-webkit-column-gap:0px;line-height:0px;">
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow'">
+     
+            <!-- back to ng-src. spinner was not updating when rand changes-->
+            <!-- moving to single so I can rely on rand for reloads -->
                 
-                <div  style="position:relative" >
-                    
-                   <span ng-show="!minimal">
-                        <div style="width:{{((devWidth)/(7-monitorSize[$index]))}}px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis">
-                            <header id = "slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header animated infinite flash':'header'">&nbsp;<i class="ion-monitor"></i>
-                               {{monitor.Monitor.Name}}&nbsp;
-                            </header>
-                        </div>
-                    </span>
+                <div style="position: relative;width:{{devWidth/slider.monsize}}px;float:left; ">
+                    <div ng-if="!isModalActive">
+                        <span ng-show="!minimal">
 
-            <article class="main">
+                            <div id = "slowpulse"  style="position:absolute; top:0px; left:0px;width:100%;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 ng-if="$root.authSession!='undefined'">
+                            <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)" image-spinner-loader="lines" style="margin-top:15px;
+        width: 100% !important;
+        height: auto !important;" />
+                            </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)" image-spinner-loader="lines" style="margin-top:0px;
+        width: 100% !important;
+        height: auto !important;" />
+                            </div>
+                            
 
-                <!-- back to ng-src. spinner was not updating when rand changes-->
-                <!-- moving to single so I can rely on rand for reloads -->
+                        </div>
 
-                <div ng-if="!isModalActive">
-                    <div ng-if="$root.authSession!='undefined'">
-                        <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}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" style="display:block;" image-spinner-loader="lines" />
+                        <div ng-if="!$root.authSession=='undefined'">
+                            <img id="img-$index" ng-src="img/pausevideo.png" style="width: 100% !important;
+  height: auto !important;" />
+                        </div>
 
                     </div>
+                </div>
 
-                    <div ng-if="!$root.authSession=='undefined'">
-                        <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
-                    </div>
 
-                </div>
-                <div ng-if="isModalActive">
-                    <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
-                </div>
+            <div ng-if="isModalActive">
+                <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" />
+            </div>
 
-            </article>
 
             <div id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div>
 
-        </div>
-        <!-- alarm flash -->
 
-        </span>
-        <!-- ngrepeat -->
+            <!-- alarm flash -->
+
+            </span>
+            <!-- ngrepeat -->
+
         </div>
-        <!--wrapper-->
 
 
         <ion-item ng-show="!MontageMonitors.length">
             No monitors to display.
         </ion-item>
+
+
+
     </ion-content>
 
     <div ng-show="minimal">
         <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
 
-            <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(1)">
+            <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)">
             </button>
-            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(-1)">
+            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)">
             </button>
             <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();">
             </button>
@@ -104,4 +118,5 @@
 
     </div>
     <br/>
+
 </ion-view>
\ No newline at end of file
-- 
cgit v1.2.3