From 47a8f790b8e4fb9c2e56fd977f644222e3a176ba Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Sun, 6 Sep 2020 08:22:15 -0400
Subject: [PATCH] #963 apply span styles from lucas

---
 www/css/style.css         |  8 ++++----
 www/templates/events.html | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 707c4603c..626fe0ba2 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1920,12 +1920,12 @@ fill-opacity: 0.8;
   
   flex-wrap:wrap;
   float:right;
-  
-  
+}
 
-  
-  
+span.smallThumbsSpan {
+  display: table;
 }
+
 .no-padding {
   padding: 0px !important;
 }
diff --git a/www/templates/events.html b/www/templates/events.html
index 744474b07..9fbbcc6a8 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -64,7 +64,7 @@
                 <div class="item-text-wrap">
                   <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
-                  <span ng-switch on="event.Event.Cause">
+                  <span ng-switch on="event.Event.Cause" ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}">
                     <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>-->
@@ -80,25 +80,28 @@
 
 
                     </span>
+                    <b><i ng-if="event.Event.Archived=='1'" class="ion-ios-flag"
+                      style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
                   </span>
 
-                  <b>
-                    <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag"
-                      style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
-                  <br /><i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
+                  <span ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}">
+                  <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
                   <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
                   <span style="font-size:80%; color:rgb(110,110,110)">
                     {{humanize(event.Event.Length)}} &nbsp;
                   </span>
+                  </span>
 
-                  <br /><i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
+                  <span ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}">
+                  <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
+                  </span>
 
 
 
                   <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
                 </div>
               </div> <!-- col-->
-              <div ng-if="loginData.eventViewThumbs!='none'" class="col">
+              <div class="col">
                 <div ng-if="loginData.eventViewThumbs!='none'"
                   ng-class="::{'largeThumbs': thumbClass=='large', 'smallThumbs': thumbClass=='small'}">
                   <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}"