Style for the new sensors web plugin

This commit is contained in:
Fabio Manganiello 2019-07-02 15:23:41 +02:00
parent 9c44d047ac
commit fb4af87967
2 changed files with 29 additions and 5 deletions

View File

@ -9,5 +9,29 @@
&: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;
}
}
}
}

View File

@ -1,16 +1,16 @@
<script type="text/x-template" id="tmpl-sensors">
<div class="sensors">
<div class="head">
<button type="button" @click="refresh">
<button type="button" title="Refresh measurements" @click="refresh">
<i class="fa fa-sync"></i>
</button>
</div>
<div class="body">
<sensor-metric v-for="metric in metrics"
:key="metric.name"
:name="metric.name"
:value="metric.value">
<sensor-metric v-for="value, name in metrics"
:key="name"
:name="name"
:value="value">
</sensor-metric>
</div>
</div>