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; } &: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"> <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>