Player/world list skeletons

This commit is contained in:
James Lyne 2021-01-24 22:15:07 +00:00
parent 8260deba0b
commit d3658e35a2
3 changed files with 14 additions and 0 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -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>