From 8c616596377906a21e4ad94371f536fd4e9ca018 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Sat, 5 Sep 2020 10:11:37 -0400
Subject: #963 add responsive styling based on thumb size, revert to columns

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

(limited to 'www')

diff --git a/www/css/style.css b/www/css/style.css
index 3cb1ef4a..b280383b 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1918,7 +1918,7 @@ fill-opacity: 0.8;
 
 .smallThumbs {
   float:right;
-  padding-left:20px;
+  display:block;
 }
 
 @media (min-width:600px) {
diff --git a/www/templates/events.html b/www/templates/events.html
index ca6853cb..9112f7a1 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -45,21 +45,17 @@
             <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
           </span>
 
-          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-        
-
+          <div  ng-class="::{'row responsive-lg': thumbClass=='large', 'row responsive-sm': thumbClass=='small'}" style="font-size:80%; color:rgb(110,110,110)">
         
 
+  
+           
           <!--</div>-->
           <!--row-->
           <!--<div class="row" style="font-size:80%; color:rgb(110,110,110)">-->
            <!-- <div class="col">-->
+             <div class="col">
               <div class="item-text-wrap">
-
-                <div ng-if="loginData.eventViewThumbs!='none'" ng-class="::{'largeThumbs': thumbClass=='large', 'smallThumbs': thumbClass=='small'}">
-                  <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
-                    width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px"  fallback-src="img/noimage.png" />
-                </div>
               <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
               <span ng-switch on="event.Event.Cause">
@@ -79,27 +75,28 @@
 
                 </span>
               </span>
-              <!-- ng switch -->
-              <!-- {{event.Event.Cause}} -->
-
-
-
-              <!-- col col left-->
-
+          
               <b>
                 <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
-              <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
+              <br/><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>
 
-                <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
-                <br />
-                <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
+                <br/><i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
+
+                <br/><i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
 
                 <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
               </div>
+            </div> <!-- 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)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
+                  width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px"  fallback-src="img/noimage.png" />
+              </div>
+            </div>
             <!--</div>-->
           </div>
 		  <div class="row" style="float:right; margin-right: 10px; display: block;">
-- 
cgit v1.2.3