diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2020-09-05 10:11:37 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2020-09-05 10:11:37 -0400 |
| commit | 8c616596377906a21e4ad94371f536fd4e9ca018 (patch) | |
| tree | 07aec3476be10ef98de9756541ce6e0707ddc4e0 | |
| parent | e71e9c7ce960ec95edd4af5783a62efb14fc1607 (diff) | |
#963 add responsive styling based on thumb size, revert to columns
| -rw-r--r-- | www/css/style.css | 2 | ||||
| -rw-r--r-- | www/templates/events.html | 35 |
2 files changed, 17 insertions, 20 deletions
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> {{prettifyDate(event.Event.StartTime)}} {{tzAbbr}} </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"> </i>{{event.Event.MonitorName}}</b> - <i class="ion-images"></i> {{event.Event.Frames}} + <br/><i class="ion-images"></i> {{event.Event.Frames}} <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} <span style="font-size:80%; color:rgb(110,110,110)"> {{humanize(event.Event.Length)}} </span> - <i class="ion-ios-pricetags-outline"></i> {{event.Event.Name}} - <br /> - <i class="ion-clipboard"></i> {{event.Event.Notes}} + <br/><i class="ion-ios-pricetags-outline"></i> {{event.Event.Name}} + + <br/><i class="ion-clipboard"></i> {{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;"> |