diff options
| author | Arjun Roychowdhury <pliablepixels@gmail.com> | 2015-11-14 07:20:20 -0500 |
|---|---|---|
| committer | Arjun Roychowdhury <pliablepixels@gmail.com> | 2015-11-14 07:20:20 -0500 |
| commit | 737a6b4b9987b0266e3af72a188288359f018fe4 (patch) | |
| tree | 4239e3cea75aad5293ca6dbd8a9126fcfadb21b8 | |
| parent | 3dfb63fed3618c0540454e442cf7ca6329a32c1b (diff) | |
#82 - reduced flashing to a slower pulse, only flash header
Former-commit-id: bfcd4635d8b2e27995bf0a1f674866b64fbc0c0c
| -rw-r--r-- | www/css/style.css | 18 | ||||
| -rw-r--r-- | www/templates/montage.html | 7 |
2 files changed, 23 insertions, 2 deletions
diff --git a/www/css/style.css b/www/css/style.css index b1cfd10b..752a58f6 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -87,6 +87,24 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ } +.minimized-alarmed-header { + background: #ba3e3e; + color:#ffffff; + border-color: #ba3e3e; + border-style: solid; + border-width:5px; + opactity:80%; + position:absolute; + top:0px; + left:0px; + width:100%; + +} + +#slowpulse +{ + -webkit-animation-duration: 1500ms; +} .alarmed-body { border-left: thick solid #ba3e3e; diff --git a/www/templates/montage.html b/www/templates/montage.html index 8039820a..35a1c835 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -36,10 +36,10 @@ <div class="wrapper"> <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow'"> - <div ng-class="monitor.Monitor.isAlarmed=='true'? 'animated infinite flash':''"> + <div style="position:relative" > <span ng-show="!minimal"> - <header ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header':'header'"> <i class="ion-monitor"></i> + <header id = "slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header animated infinite flash':'header'"> <i class="ion-monitor"></i> {{monitor.Monitor.Name}} </header> </span> @@ -65,6 +65,9 @@ </div> </article> + + <div id = "slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div> + </div> <!-- alarm flash --> </span> <!-- ngrepeat --> |
