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; }
|
||||
}
|
||||
}
|
||||
|
||||
.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">
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue