Player/world list skeletons
This commit is contained in:
parent
8260deba0b
commit
d3658e35a2
@ -166,6 +166,14 @@ export default defineComponent({
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section__skeleton {
|
||||||
|
font-style: italic;
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
align-self: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 30rem) {
|
@media (max-width: 30rem) {
|
||||||
|
@ -19,6 +19,9 @@
|
|||||||
<span class="section__heading">{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</span>
|
<span class="section__heading">{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</span>
|
||||||
<ul class="section__content">
|
<ul class="section__content">
|
||||||
<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
|
<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
|
||||||
|
<li v-if="!players.size" class="section__skeleton">
|
||||||
|
No players are currently online
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
@ -19,6 +19,9 @@
|
|||||||
<span class="section__heading">{{ heading }}</span>
|
<span class="section__heading">{{ heading }}</span>
|
||||||
<ul class="section__content">
|
<ul class="section__content">
|
||||||
<WorldListItem :world="world" v-for="[name, world] in worlds" :key="name"></WorldListItem>
|
<WorldListItem :world="world" v-for="[name, world] in worlds" :key="name"></WorldListItem>
|
||||||
|
<li v-if="!worlds.size" class="section__skeleton">
|
||||||
|
No maps have been configured
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user