forked from platypush/platypush
Style for the new sensors web plugin
This commit is contained in:
parent
9c44d047ac
commit
fb4af87967
2 changed files with 29 additions and 5 deletions
|
@ -9,5 +9,29 @@
|
||||||
&:hover { background: $hover-bg; }
|
&:hover { background: $hover-bg; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: $default-border-3;
|
||||||
|
border-radius: 2rem;
|
||||||
|
margin: 2rem auto;
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
.metric {
|
||||||
|
padding: 2rem;
|
||||||
|
border-bottom: $default-border-3;
|
||||||
|
border-radius: 2rem;
|
||||||
|
|
||||||
|
&:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
|
||||||
|
&:nth-child(even) { background: $default-bg-3; }
|
||||||
|
&:hover { background: $hover-bg; }
|
||||||
|
|
||||||
|
.value {
|
||||||
|
text-align: right;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<script type="text/x-template" id="tmpl-sensors">
|
<script type="text/x-template" id="tmpl-sensors">
|
||||||
<div class="sensors">
|
<div class="sensors">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<button type="button" @click="refresh">
|
<button type="button" title="Refresh measurements" @click="refresh">
|
||||||
<i class="fa fa-sync"></i>
|
<i class="fa fa-sync"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<sensor-metric v-for="metric in metrics"
|
<sensor-metric v-for="value, name in metrics"
|
||||||
:key="metric.name"
|
:key="name"
|
||||||
:name="metric.name"
|
:name="name"
|
||||||
:value="metric.value">
|
:value="value">
|
||||||
</sensor-metric>
|
</sensor-metric>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue