johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(client): Display instance icon

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/client/widgets/federation.vue
View file

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