added server member count

This commit is contained in:
supertiger1234 2019-09-06 19:33:21 +01:00
parent dd4fb49a97
commit ca95c78542

View file

@ -10,7 +10,8 @@
<div class="bottom"> <div class="bottom">
<div class="description">{{server.description}}</div> <div class="description">{{server.description}}</div>
<div class="buttons"> <div class="buttons">
<div class="verified" v-if="server.verified">Verified<div class="material-icons">check</div></div> <div class="member-count"><div class="material-icons">account_box</div>{{server.total_members}}</div>
<div class="verified" v-if="server.verified"><div class="material-icons">check</div></div>
<div class="button" :class="{selected: joined}" @click="joinButton"> <div class="button" :class="{selected: joined}" @click="joinButton">
<span v-if="joined">Joined</span> <span v-if="joined">Joined</span>
<spinner v-else-if="joinClicked" :size="30"/> <spinner v-else-if="joinClicked" :size="30"/>
@ -121,22 +122,27 @@ export default {
.buttons { .buttons {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: flex-end; flex-direction: row;
} }
.verified { .verified {
display: flex; display: flex;
width: 100%; margin: auto;
margin-left: 10px; margin-right: 10px;
align-content: center; margin-bottom: 14px;
align-items: center; flex-shrink: 0;
align-self: center;
margin-bottom: 5px;
.material-icons { .material-icons {
margin-left: 5px;
margin-bottom: 5px;
color: #66e0ff; color: #66e0ff;
} }
} }
.member-count {
display: flex;
align-items: center;
align-content: center;
margin-left: 10px;
margin-top: 0px;
width: 100%;
.material-icons { margin-right: 5px;}
}
.button { .button {
display: flex; display: flex;
align-content: center; align-content: center;
@ -148,8 +154,10 @@ export default {
border-radius: 5px; border-radius: 5px;
align-self: flex-end; align-self: flex-end;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 10px; margin: auto;
margin-right: 10px; margin-right: 10px;
margin-left: 0;
margin-bottom: 10px;
padding: 7px; padding: 7px;
transition: 0.3s; transition: 0.3s;
width: 80px; width: 80px;