feat(client): Display instance icon

This commit is contained in:
syuilo 2020-07-26 12:55:46 +09:00
parent 4feccdfd92
commit b07d037cb5
1 changed files with 12 additions and 4 deletions

View File

@ -5,8 +5,9 @@
<div class="wbrkwalb">
<mk-loading v-if="fetching"/>
<transition-group tag="div" name="chart" class="instances" v-else>
<div v-for="(instance, i) in instances" :key="instance.id">
<div class="instance">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img :src="instance.iconUrl" alt=""/>
<div class="body">
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
</div>
@ -75,13 +76,20 @@ export default define({
transition: transform 1s ease;
}
> div {
> .instance {
display: flex;
align-items: center;
padding: 14px 16px;
border-bottom: solid 1px var(--divider);
> .instance {
> img {
display: block;
width: 30px;
height: 30px;
object-fit: cover;
}
> .body {
flex: 1;
overflow: hidden;
font-size: 0.9em;