mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-07-05 19:10:52 +00:00
progress on explore tab.
This commit is contained in:
supertiger1234
parent
da26a2c585
commit
7e04ad01c0
2 changed files with 140 additions and 227 deletions
128
src/components/app/Tabs/Explore/serverTemplate.vue
Normal file
128
src/components/app/Tabs/Explore/serverTemplate.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
<template>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="avatar"></div>
|
||||||
|
<div class="name">{{server.name}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="description">{{server.description}}</div>
|
||||||
|
<div class="button" :class="{selected: joinClicked || joined}" @click="joinButton">
|
||||||
|
<span v-if="joined">Joined</span>
|
||||||
|
<spinner v-else-if="joinClicked" :size="30"/>
|
||||||
|
<span v-else-if="!joinClicked">Join Server</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Spinner from "@/components/Spinner";
|
||||||
|
import ServerService from "@/services/ServerService";
|
||||||
|
export default {
|
||||||
|
components: {Spinner},
|
||||||
|
props: [
|
||||||
|
'server',
|
||||||
|
],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
joinClicked: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async joinButton(event) {
|
||||||
|
if (this.joinClicked|| this.joined) return;
|
||||||
|
this.joinClicked = true;
|
||||||
|
return;
|
||||||
|
const { ok, error, result } = await ServerService.joinServer(
|
||||||
|
|
||||||
|
);
|
||||||
|
if (ok) {
|
||||||
|
this.closeMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
joined() {
|
||||||
|
return this.$store.getters["servers/servers"][this.server.server_id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item {
|
||||||
|
width: 250px;
|
||||||
|
height: 270px;
|
||||||
|
background: rgba(0, 0, 0, 0.479);
|
||||||
|
opacity: 0.9;
|
||||||
|
margin: 5px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: 0.3s;
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.avatar {
|
||||||
|
background: rgb(26, 133, 255);
|
||||||
|
height: 80px;
|
||||||
|
width: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: rgba(0, 0, 0, 0.194);
|
||||||
|
flex: 1;
|
||||||
|
.description {
|
||||||
|
margin: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: rgba(40, 140, 255, 0.8);
|
||||||
|
border-radius: 5px;
|
||||||
|
align-self: flex-end;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 7px;
|
||||||
|
transition: 0.3s;
|
||||||
|
width: 80px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(40, 140, 255);
|
||||||
|
}
|
||||||
|
&.selected {
|
||||||
|
background: grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,167 +4,9 @@
|
||||||
<div class="items-main-container">
|
<div class="items-main-container">
|
||||||
<div class="items-container">
|
<div class="items-container">
|
||||||
<div class="items">
|
<div class="items">
|
||||||
<div class="item">
|
<server-template :server="serverData[0]"/>
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="top">
|
|
||||||
<div class="avatar"></div>
|
|
||||||
<div class="name">Nertivia</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="description">Nertivia is a cool server.</div>
|
|
||||||
<div class="button">Join</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -173,9 +15,17 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import searchHeader from "./searchHeader";
|
import searchHeader from "./searchHeader";
|
||||||
|
import serverTemplate from './serverTemplate';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { searchHeader }
|
components: { searchHeader, serverTemplate },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
serverData: [
|
||||||
|
{server_id: "6572151490335477760", name: 'Nertivia', description: 'Nertivia is a cool server.', code: ''},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -210,71 +60,6 @@ export default {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
.item {
|
|
||||||
width: 250px;
|
|
||||||
height: 270px;
|
|
||||||
background: rgba(0, 0, 0, 0.479);
|
|
||||||
opacity: 0.9;
|
|
||||||
margin: 5px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: 0.3s;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.top {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 140px;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
.avatar {
|
|
||||||
background: rgb(26, 133, 255);
|
|
||||||
height: 80px;
|
|
||||||
width: 80px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
font-size: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: rgba(0, 0, 0, 0.194);
|
|
||||||
flex: 1;
|
|
||||||
.description {
|
|
||||||
margin: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
background: rgba(40, 140, 255, 0.8);
|
|
||||||
border-radius: 5px;
|
|
||||||
align-self: flex-end;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
padding: 7px;
|
|
||||||
transition: 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background: rgb(40, 140, 255);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in a new issue