From 297bf995fdb7ca05cd92f3e94beaff618efd1136 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Fri, 11 Sep 2020 14:51:31 -0400
Subject: #973 take care humanize time going to 2nd row

---
 www/css/style.css         |  2 +-
 www/lang/locale-en.json   |  2 +-
 www/templates/events.html | 36 ++++++++++++++++++++++--------------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 20668e7f..967744f6 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -564,7 +564,7 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     opacity: 0.5;
 }
 
-.events-list-text {
+.events-list-text  {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index b24ad8ef..a4208e97 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -336,7 +336,7 @@
     "kReachabilityFailed"        :"primary login failed, trying fallbacks",
     "kRecaptcha"                 :"Looks like you have enabled reCaptcha. It needs to be turned off for the app to work",
     "kReconfirmPin"              :"Reconfirm PIN",
-    "kRecordingProgress"         :"recording in progress",
+    "kRecordingProgress"         :"in progress",
     "kReflow"                    :"reflow",
     "kRefresh"                   :"Refresh",
     "kRefreshedView"             :"refreshed view",
diff --git a/www/templates/events.html b/www/templates/events.html
index ec1b4a48..9ee84344 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -35,20 +35,28 @@
          <ion-item force-refresh-images="true" collection-repeat="event in events| filter:search.text |  eventListFilter" force-refresh-images=true 
           item-height="event.Event.ShowScrub? rowHeightExpanded:rowHeight" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" >
          
-            <span
-              style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;
-              <i
-                class="ion-clock"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;</span>&nbsp;&nbsp;
-            <span
-              style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;">&nbsp;&nbsp;
-              <i class="ion-arrow-right-b"></i>&nbsp;{{event.Event.humanizeTime}}
-              <span ng-if="!event.Event.EndTime">(
-                <span translate="kRecordingProgress"></span>)</span>
-            </span>
-            <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-calendar"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
-            </span>
+            <!-- item headers: date/time -->
+            <div class="row" style="padding-top:0px; padding-bottom:10px">
+              
+              <div class="col events-list-text" style="margin-top:-20px;padding:0px; ">
+                <div style="float:left;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">
+                  &nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;&nbsp;&nbsp;
+                </div> 
+                <div  style="float:left;color:#444;font-size:11px;opacity:0.7;">
+                  &nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{event.Event.humanizeTime}}
+                  <span ng-if="!event.Event.EndTime">(
+                    <span translate="kRecordingProgress"></span>)
+                  </span>
+                </div>
+
+              </div>
+              <div class="col " style="margin-top:-20px;padding:0px; ">
+                <div  style="float:right;background-color:#444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">
+                  &nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;&nbsp;&nbsp;
+                </div>
+              </div>
+            </div> <!--row-->
+            
 
             <div class="row" style="font-size:80%; color:rgb(110,110,110)">
               <div class="col events-list-text"> <!-- data -->
-- 
cgit v1.2.3