Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use .menu styling for other menu-y things

Browse Source
This commit is contained in:
James Lyne 2021-05-24 17:16:07 +01:00
parent e4f0864805
commit 302077c9c1
5 changed files with 8 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/sidebar/PlayerList.vue
View File

@ -17,7 +17,7 @@
<template> <template>
<section class="sidebar__section sidebar__section--players"> <section class="sidebar__section sidebar__section--players">
<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 menu">
<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">{{ skeletonPlayers }}</li> <li v-if="!players.size" class="section__skeleton">{{ skeletonPlayers }}</li>
</ul> </ul>

14
src/components/sidebar/PlayerListItem.vue
View File

@ -104,13 +104,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.player { .player {
position: relative;
display: block;
line-height: 3rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.player__icon { .player__icon {
position: absolute; position: absolute;
display: block; display: block;
@ -123,12 +116,7 @@ export default defineComponent({
} }
.player__name { .player__name {
padding: 0.8rem 0 0.7rem 3.5rem; padding-left: 3.5rem;
text-align: left;
margin: 0;
width: 100%;
height: 100%;
min-height: 3.2rem;
} }
&.player--hidden { &.player--hidden {

6
src/components/sidebar/ServerList.vue
View File

@ -17,7 +17,7 @@
<template> <template>
<section class="sidebar__section" v-if="servers.size > 1"> <section class="sidebar__section" v-if="servers.size > 1">
<span class="section__heading">{{ heading }}</span> <span class="section__heading">{{ heading }}</span>
<ul class="section__content"> <ul class="section__content menu">
<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem> <ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
</ul> </ul>
</section> </section>
@ -46,7 +46,3 @@ export default defineComponent({
}); });
</script> </script>
<style scoped>
</style>

17
src/components/sidebar/ServerListItem.vue
View File

@ -50,20 +50,3 @@ export default defineComponent({
} }
}); });
</script> </script>
<style lang="scss" scoped>
@import '../../scss/placeholders';
.server {
height: 3.2rem;
button {
@extend %button;
text-align: left;
display: block;
height: 100%;
width: 100%;
border-radius: 0.5rem;
}
}
</style>

5
src/scss/style.scss
View File

@ -154,14 +154,19 @@ input {
> li { > li {
display: flex; display: flex;
padding: 0.8rem 0.8rem 0.7rem; padding: 0.8rem 0.8rem 0.7rem;
position: relative;
margin: 0 !important; margin: 0 !important;
> button { > button {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: -0.8rem -0.8rem -0.7rem; margin: -0.8rem -0.8rem -0.7rem;
padding: 0.8rem 0.8rem 0.7rem; padding: 0.8rem 0.8rem 0.7rem;
text-align: left; text-align: left;
flex-grow: 1; flex-grow: 1;
min-height: 3.2rem; min-height: 3.2rem;
border-radius: 0.5rem;
} }
} }
} }