Responsive overview screen

This commit is contained in:
Noel Wuyts 2015-05-28 17:25:27 +02:00 committed by Martin Schröder
parent 927550ded0
commit 2d3a1e8fae
3 changed files with 44 additions and 21 deletions

View file

@ -0,0 +1,8 @@
.overview-list-item-text {
height: 32px;
line-height: 34px;
}
.overview-list-item-label {
margin-top: 7px;
}

View file

@ -32,25 +32,34 @@
<table class="table">
<tr>
<td>
<div class="col-md-2"><i class="fa fa-calendar fa-2x"></i></div>
<div class="col-md-10"><strong><a href="#!/wifi-schedule">Schedule</a> <a class="label label-{{(wifi.status.schedule.value)?'success':'default'}} pull-right" href="" ng-click="onWIFISchedToggle()">{{wifiSchedStatus | translate}}</a></strong></div>
<div class="col-xs-2"><i class="fa fa-calendar fa-2x"></i></div>
<div class="col-xs-8">
<a class="overview-list-item-text" href="#!/wifi-schedule"><strong>{{'Schedule'|translate}}</strong></a>
</div>
<div class="col-xs-2">
<a class="label label-{{(wifi.status.schedule.value)?'success':'default'}} pull-right overview-list-item-label" href="" ng-click="onWIFISchedToggle()"><strong>{{wifiSchedStatus| translate}}</strong></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-2"><i class="fa fa-wifi fa-2x"></i></div>
<div class="col-md-10"><strong><a href="#!/wifi-wps">WPS</a> <a class="label label-{{(wifi.status.wps.value)?'success':'default'}} pull-right" href="" ng-click="onWPSToggle()">{{wifiWPSStatus | translate}}</a></strong></div>
<div class="col-xs-2"><i class="fa fa-wifi fa-2x"></i></div>
<div class="col-xs-8">
<a class="overview-list-item-text" href="#!/wifi-wps"><strong>WPS</strong></a>
</div>
<div class="col-xs-2">
<a class="label label-{{(wifi.status.wps.value)?'success':'default'}} pull-right overview-list-item-label" href="" ng-click="onWPSToggle()"><strong>{{wifiWPSStatus | translate}}</strong></a>
</div>
</td>
</tr>
<tr ng-repeat="client in wireless.clients">
<td>
<div class="col-md-2"><i class="fa fa-desktop fa-2x"></i></div>
<div class="col-md-8">{{client.hostname}}<br/>{{client.ipaddr}}</div>
<div ng-show="client.connected" class="col-md-2" style="color: #a9b400">
<div class="col-xs-2"><i class="fa fa-desktop fa-2x"></i></div>
<div class="col-xs-8">{{client.hostname}}<br/>{{client.ipaddr}}</div>
<div ng-show="client.connected" class="col-xs-2" style="color: #a9b400;">
<wifi-signal-indicator ng-model="client.snr"></wifi-signal-indicator>
<!--<i class="fa fa-signal fa-2x"></i>-->
</div>
<div ng-show="!client.connected" class="col-md-2" style="color: #eee"><i class="fa fa-signal fa-2x"></i></div>
<div ng-show="!client.connected" class="col-xs-2" style="color:#eee;"><i class="fa fa-signal fa-2x"></i></div>
</td>
</tr>
</table>
@ -59,10 +68,10 @@
<table class="table">
<tr ng-repeat="client in wireless.guest_clients">
<td>
<div class="col-md-2"><i class="fa fa-desktop fa-2x"></i></div>
<div class="col-md-8">{{client.hostname}}<br/>{{client.ipaddr}}</div>
<div ng-show="client.connected" class="col-md-2" style="color: #a9b400"><i class="fa fa-signal fa-2x"></i></div>
<div ng-show="!client.connected" class="col-md-2" style="color: #eee"><i class="fa fa-signal fa-2x"></i></div>
<div class="col-xs-2"><i class="fa fa-desktop fa-2x"></i></div>
<div class="col-xs-8">{{client.hostname}}<br/>{{client.ipaddr}}</div>
<div ng-show="client.connected" class="col-xs-2" style="color: #a9b400"><i class="fa fa-signal fa-2x"></i></div>
<div ng-show="!client.connected" class="col-xs-2" style="color: #eee"><i class="fa fa-signal fa-2x"></i></div>
</td>
</tr>
</table>
@ -73,8 +82,8 @@
<table class="table">
<tr ng-repeat="client in network.clients">
<td>
<div class="col-md-2"><i class="fa fa-laptop fa-2x"></i></div>
<div class="col-md-8">{{client.hostname || defaultHostName}}<br/>{{client.ipaddr}}</div>
<div class="col-xs-2"><i class="fa fa-laptop fa-2x"></i></div>
<div class="col-xs-8">{{client.hostname || defaultHostName}}<br/>{{client.ipaddr}}</div>
</td>
</tr>
</table>
@ -84,14 +93,19 @@
<table class="table">
<tr>
<td>
<div class="col-md-2"><i class="fa fa-calendar fa-2x"></i></div>
<div class="col-md-10"><strong><a href="#!/phone-ringing-schedule">Schedule</a> <a class="label label-{{(wifi.status.wps.value)?'success':'default'}} pull-right" href="" ng-click="onWPSToggle()">{{wifiWPSStatus | translate}}</a></strong></div>
<div class="col-xs-2"><i class="fa fa-calendar fa-2x"></i></div>
<div class="col-xs-8">
<a class="overview-list-item-text" href="#!/phone-ringing-schedule"><strong>{{'Schedule'|translate}}</strong></a>
</div>
<div class="col-xs-2">
<a class="label label-{{(wifi.status.wps.value)?'success':'default'}} pull-right overview-list-item-label" href="" ng-click="onWPSToggle()"><strong>{{wifiWPSStatus | translate}}</strong></a>
</div>
</td>
</tr>
<tr ng-repeat="sip in sipAccounts track by $index">
<td ng-show="sip.user.value">
<div class="col-md-2"><strong style="font-size: 1.2em">{{sip.name.value}}: </strong></div>
<div class="col-md-8"><strong>{{sip.user.value}}</strong></div>
<div class="col-xs-2"><strong style="font-size: 1.2em">{{sip.name.value}}: </strong></div>
<div class="col-xs-8"><strong>{{sip.user.value}}</strong></div>
</td>
</tr>
</table>

View file

@ -1,3 +1,4 @@
<div style="width: 40px; position: relative; ">
<div ng-repeat="bar in bars track by $index" ng-style="barStyle($index, bar)"></div>
<div>
<div ng-repeat="bar in bars track by $index" ng-style="barStyle($index, bar)"></div>
</div>