From f357e0a7046e907b9920a2686c502c57ccf3d676 Mon Sep 17 00:00:00 2001
From: Arjun Roychowdhury <pliablepixels@gmail.com>
Date: Fri, 20 Nov 2015 10:00:36 -0500
Subject: #90 - fixed wide screen issues, I think

Former-commit-id: 1f9c629c426e825c8e4a845356469741b37bacb2
---
 www/css/style.css                 | 10 ++++++++++
 www/templates/events-modal.html   |  8 ++++----
 www/templates/monitors-modal.html | 10 +++++-----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index ef98f353..462cb399 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -439,6 +439,16 @@ progress[aria-valuenow]:before  {
 }
 
 
+/*
+
+.object-fit_cover { object-fit: cover; width:100%; height:auto;}
+.object-fit_contain { object-fit: contain; max-width:100%; height:auto; }
+*/
+
+
+.object-fit_cover { object-fit: cover; width:100%; height:auto;}
+.object-fit_contain { object-fit: contain; max-width:100%; max-height:100%; }
+
 .list .item.item-accordion {
   line-height: 200px;
   padding-top: 0;
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index a348888b..6efb4f07 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -13,18 +13,18 @@
 
                             <li ng-repeat="slide in slides">
                                 <div ng-if="!animationInProgress">
-                                    <img  imageonload="finishedLoadingImage($index)" 
+                                    <img  style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" 
                                          image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" 
                                          image-spinner-loader="lines" 
-                                         ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"
+                                         ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
                                          
                                          />
                                 </div>
                                 <div ng-if="animationInProgress">
-                                    <img  imageonload="finishedLoadingImage($index)" 
+                                    <img   imageonload="finishedLoadingImage($index)" 
                                          image-spinner-src="img/pausevideo.png" 
                                          image-spinner-loader="lines" 
-                                         ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
+                                         ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}"  />
                                 </div>
                                 
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 34bfad22..65e99803 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -9,7 +9,7 @@
                 <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true"
                             direction="xy" style="width: 100%; ">
                     <!-- android needs this 100vh - otherwise max- does not work -->
-
+                    <!--  -->
                     <div id="monitorimage" style="height: 100vh;" class="main">
                            
                         
@@ -17,10 +17,10 @@
                         <div ng-if="$root.authSession!='undefined'">
                         
                             
-                            <div ng-if="!animationInProgress">
-                                <img  imageonload="finishedLoadingImage()"
+                            <div ng-if="!animationInProgress" >
+                                <img  style="width:100vw; height:100vh" imageonload="finishedLoadingImage()"
                                      image-spinner-loader="lines"
-                                     image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" 
+                                     image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
                                      on-swipe-left="onSwipe(monitorId,1)" 
                                      on-swipe-right="onSwipe(monitorId,-1)" />
         
@@ -28,7 +28,7 @@
                             <div ng-if="animationInProgress">
                                     <img 
                                      
-                                     ng-src="img/pausevideo.png" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" 
+                                     ng-src="img/pausevideo.png" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}"  
                                       />
                             </div>
                         
-- 
cgit v1.2.3