From f0a6ae192f516e0a100bbd857b36c022e6f88175 Mon Sep 17 00:00:00 2001
From: Arjun Roychowdhury <pliablepixels@gmail.com>
Date: Thu, 17 Dec 2015 15:14:20 -0500
Subject: #117 - chopping off monitor name to avoid black gaps

Former-commit-id: 3476e4da412b0f7337a3114be668574da92f53fa
---
 www/templates/montage.html | 61 +++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/www/templates/montage.html b/www/templates/montage.html
index 803302cf..d15e4350 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -17,11 +17,11 @@
     </ion-nav-buttons>
 
     <ion-content has-bouncing="false" style="background-color:#444444">
-        
+
         <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-arrow-shrink"></i>
@@ -38,40 +38,45 @@
                 
                 <div  style="position:relative" >
                     
-                    <span ng-show="!minimal">
-                        <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>
+                   <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>
-                    
-                    <article class="main">
 
-                        <!-- back to ng-src. spinner was not updating when rand changes-->
-                        <!-- moving to single so I can rely on rand for reloads -->
+            <article class="main">
 
-                        <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" />
+                <!-- 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="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
-                            </div>
+                    </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="!$root.authSession=='undefined'">
+                        <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
+                    </div>
 
-                    </article>
-                    
-                    <div id = "slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div>
-                    
-                </div> <!-- alarm flash -->
+                </div>
+                <div ng-if="isModalActive">
+                    <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
+                </div>
+
+            </article>
 
-            </span> <!-- ngrepeat -->
-        </div> <!--wrapper-->
+            <div id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div>
+
+        </div>
+        <!-- alarm flash -->
+
+        </span>
+        <!-- ngrepeat -->
+        </div>
+        <!--wrapper-->
 
 
         <ion-item ng-show="!MontageMonitors.length">
-- 
cgit v1.2.3