From 02ad62d14f9f0b17c0dec6756fe499874d29e611 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Fri, 11 May 2018 10:25:12 -0400
Subject: formatting changes for better readability across different devices

---
 www/templates/events.html | 142 +++++++++++++++++++++++-----------------------
 1 file changed, 70 insertions(+), 72 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/events.html b/www/templates/events.html
index e46fadba..a07d98a1 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -9,7 +9,7 @@
   </ion-nav-buttons>
   <ion-nav-buttons side="right">
     <a class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)" ;>&nbsp;&nbsp;&nbsp;</a>
-    <a  class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a>
+    <a class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a>
   </ion-nav-buttons>
   <div ng-if="showSearch">
     <ion-header-bar class="bar bar-subheader item-input-inset">
@@ -20,7 +20,7 @@
     </ion-header-bar>
   </div>
   <!-- collection repeat forces js scrolling, thing to remember -->
-  <ion-content  ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll>
+  <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll>
     <!-- needed for header-shrink so first item doesn't go below header-->
     <!-- <div style="height: 64px;"></div>-->
     <!-- lets make sure the events list is not empty as collection repeat needs height -->
@@ -38,88 +38,87 @@
           <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;
             <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
           </span>
-          <div class="row">
-            <div class="col col-left">
+          <div class="row" style="font-size:90%;">
+            <div class="col col-60">
               <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
-              <div ng-switch on="event.Event.Cause">
-                <div ng-switch-when="Motion">
-                  <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
-                  <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
-                  <br/>
-                </div>
-                <div ng-switch-when="Signal">
-                  <i class="ion-wifi" style="float:left; font-size:200%;"></i>
-                  <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
-                  <br/>
-                </div>
-                <div ng-switch-default>
-                  <i class="ion-ionic" style="float:left; font-size:200%;"></i>
-                  <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
-                  <br/>
-                </div>
-              </div>
+              <span ng-switch on="event.Event.Cause">
+                <span ng-switch-when="Motion">
+                  <i class="ion-android-walk" style="font-size:150%;" ></i>&nbsp;
+                 <!-- <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>-->
+                
+                </span>
+                <span ng-switch-when="Signal">
+                  <i class="ion-wifi" style="font-size:150%;" ></i>&nbsp;
+                  <!--<i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>-->
+                 
+                </span>
+                <span ng-switch-default>
+                  <i class="ion-ionic" style="font-size:150%;"></i>&nbsp;
+              
+                
+                </span>
+              </span>
               <!-- ng switch -->
               <!-- {{event.Event.Cause}} -->
-              <br/>
-              <span style="font-size:80%; color:rgb(110,110,110)">
-                {{event.Event.Length}}s
-              </span>
-            </div>
+          
+              
+          
             <!-- col col left-->
-            <div class="col col-left">
-              <div class="item-text-wrap">
-
+        
                 <b>
                   <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
-                <span ng-if="!loginData.enableThumbs &&event.Event.MaxScoreFrameId">({{event.Event.Id}})</span> &nbsp;
-                <button ng-if="gifshotSupported && loginData.enableGIFMP4 " class="button button-small button-clear icon gif-icon" ng-click="permissionsDownload(event)">
-                </button>
-
-
-
-                <a ng-if="(event.Event.DefaultVideo!='' && event.Event.DefaultVideo!==undefined) && $root.platformOS=='desktop' && loginData.enableGIFMP4 "
-                  class="button button-clear button-small icon mp4-icon" href="{{event.Event.videoPath}}" download="{{event.Event.Id}}-video.mp4"
-                  ng-click="mp4warning()"></a>
-
-                <button ng-if="event.Event.DefaultVideo!='' && event.Event.DefaultVideo!=undefined && $root.platformOS!='desktop' && loginData.enableGIFMP4 "
-                  class="button button-small button-clear icon mp4-icon" ng-click="downloadFileToDevice(event.Event.videoPath, event.Event.Id)">
-                </button>
-              </div>
-
+                  <span ng-if="!loginData.enableThumbs">({{event.Event.Id}})</span> &nbsp;
+                <br/>
 
               <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
               <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
-              <!--<i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}-->
-
+              <br/>
+              <span style="font-size:80%; color:rgb(110,110,110)">
+                {{humanize(event.Event.Length)}}
+              </span>
+              <br/>
+              <button ng-if="gifshotSupported && loginData.enableGIFMP4 " class="button button-small button-clear icon gif-icon" ng-click="permissionsDownload(event)">
+              </button>
 
-            </div>
+              <a ng-if="(event.Event.DefaultVideo!='' && event.Event.DefaultVideo!==undefined) && $root.platformOS=='desktop' && loginData.enableGIFMP4 "
+                class="button button-clear button-small icon mp4-icon" href="{{event.Event.videoPath}}" download="{{event.Event.Id}}-video.mp4"
+                ng-click="mp4warning()"></a>
 
-            <div ng-if="loginData.enableThumbs && event.Event.MaxScoreFrameId" class="col col-left" style="max-height:150px">
-              <!-- thumbnail -->
+              <button ng-if="event.Event.DefaultVideo!='' && event.Event.DefaultVideo!=undefined && $root.platformOS!='desktop' && loginData.enableGIFMP4 "
+                class="button button-small button-clear icon mp4-icon" ng-click="downloadFileToDevice(event.Event.videoPath, event.Event.Id)">
+              </button>
+              <!--<i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}-->
 
-              <!--  ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2"  {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}-->
+              </div>
 
-              <img ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#6C7A89" width="{{event.Event.thumbWidth}}px"
-                height="{{event.Event.thumbHeight}}px" ng-src="{{constructThumbnail(event)}}"
-                on-tap="closeIfOpen(event);openModalWithSnapshot(event)" />
-              <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>-->
 
+              <div class="col col-40" align="right" ng-if="loginData.enableThumbs">
+                <!-- thumbnail -->
+                
+                  <!--  ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2"  {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}-->
+                <div style="max-height:200px; max-width:200px">
+                  <img   ng-image-appear  transition-duration="0.3s" animation="fillIn" bg-color="#6C7A89" 
+                    ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="100%"
+                    height="100%"  />
+                  <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>-->
+                </div>
 
-            </div>
+              </div>
+      
           </div>
           <!--row-->
           <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-              <div class="col">
-                <div class="item-text-wrap">
-                    <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
-                    <br/>
-                    <i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
-                    <br/>
-                    <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
+            <div class="col">
+              <div class="item-text-wrap">
+                <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
+                <br/>
+                <i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
+                <br/>
+                <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
 
                 <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
-                </div>
+              </div>
             </div>
           </div>
           <span style="float:right">
@@ -170,12 +169,11 @@
                         <span translate="kFrame"></span>:{{alarm.frameid}},
                         <span translate="kScore"></span>:{{alarm.score}},
                         <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption>
-                      <img ng-src="{{constructAlarmFrame(event,alarm,true)}}" 
-                        fallback-src="{{constructAlarmFrame(event,alarm,false)}}"
-                        style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"
+                      <img ng-src="{{constructAlarmFrame(event,alarm,true)}}" fallback-src="{{constructAlarmFrame(event,alarm,false)}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px"
+                        on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"
                       />
 
-                
+
                     </figure>
                   </span>
                 </ion-scroll>
@@ -198,9 +196,9 @@
                   <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index"
                     rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}">
                     <li ng-repeat="slide in slides">
-                      <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{constructScrubFrame(event,slide)}}"
-                        image-spinner-loader="lines" height="190px" ;/>
-                    
+                      <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{constructScrubFrame(event,slide)}}" image-spinner-loader="lines"
+                        height="190px" ;/>
+
                       <br/>
                     </li>
                   </ul>
@@ -213,7 +211,7 @@
                 <br/>
                 <div class="videogular-container">
                   <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true"
-                  vg-player-ready="readyToPlay($API)" >
+                    vg-player-ready="readyToPlay($API)">
                     <vg-overlay-play></vg-overlay-play>
                     <vg-controls>
                       <vg-play-pause-button></vg-play-pause-button>
@@ -284,7 +282,7 @@
   <div class="bwmode" ng-if="$root.runMode=='lowbw'">
     <span translate="kLowBWDisplay"></span>
   </div>
-  <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" 
+  <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized"
     default-behavior="expand" state="footerState">
     <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
       <i class="icon ion-chevron-up"></i>
-- 
cgit v1.2.3