mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-19 06:21:02 +00:00
added nertivia and support card in the explore tab
This commit is contained in:
supertiger1234
parent
f2d50e1b7a
commit
9f6caf26af
1 changed files with 115 additions and 8 deletions
|
|
@ -14,17 +14,33 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div
|
||||
class="item"
|
||||
<div class="item"
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{selected: selectedTab === index}"
|
||||
@click="selectedTab = index"
|
||||
>
|
||||
@click="selectedTab = index">
|
||||
<i class="material-icons">{{tab.icon}}</i>
|
||||
{{tab.name}}
|
||||
</div>
|
||||
|
||||
<div class="card self-promo" v-if="nertiviaServerHide !== true && !nertiviaServer">
|
||||
<div class="material-icons close-btn" @click="hideSelfPromo">close</div>
|
||||
<div class="logo"/>
|
||||
<div class="title">Join the official Nertivia server</div>
|
||||
<div class="button" @click="joinNertiviaServer">Join</div>
|
||||
</div>
|
||||
|
||||
<div class="card donate-paypal" v-if="donateHide !== true">
|
||||
<div class="material-icons close-btn" @click="hideDonatePaypal">close</div>
|
||||
<div class="material-icons heart">favorite</div>
|
||||
<div class="title">Support Nertivia by donating any amount of money. You will get a supporter badge and more features in the future.</div>
|
||||
<div class="button" @click="donateButton">Donate With PayPal</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="header"> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
|
||||
|
|
@ -42,11 +58,12 @@
|
|||
<script>
|
||||
import { bus } from "@/main";
|
||||
import Servers from './Explore/servers'
|
||||
import ServerService from '@/services/ServerService'
|
||||
export default {
|
||||
components: { Servers },
|
||||
data() {
|
||||
return {
|
||||
showLeftPanel: false,
|
||||
showLeftPanel: true,
|
||||
selectedTab: 0,
|
||||
tabs: [
|
||||
// {icon: "home", name: "home", component: ""},
|
||||
|
|
@ -54,10 +71,14 @@ export default {
|
|||
{ icon: "face", name: "Emoji Packs", component: "" },
|
||||
{ icon: "brush", name: "Themes", component: "" },
|
||||
{ icon: "message", name: "Message Styles", component: "" }
|
||||
]
|
||||
],
|
||||
nertiviaServerID: '6572915451527958528',
|
||||
nertiviaServerHide: localStorage.getItem('exploreTabNertiviaServerPromoHide') === 'true',
|
||||
donateHide: localStorage.getItem('exploreTabDonateHide') === 'true'
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
hideLeftPanel(event) {
|
||||
if (this.showLeftPanel) {
|
||||
|
|
@ -65,9 +86,31 @@ export default {
|
|||
this.showLeftPanel = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
hideSelfPromo() {
|
||||
localStorage.setItem('exploreTabNertiviaServerPromoHide', true)
|
||||
this.nertiviaServerHide = true;
|
||||
},
|
||||
hideDonatePaypal() {
|
||||
localStorage.setItem('exploreTabDonateHide', true)
|
||||
this.donateHide = true;
|
||||
},
|
||||
async joinNertiviaServer() {
|
||||
const {ok, error, result} = await ServerService.joinServerById(this.nertiviaServerID, {
|
||||
socketID: this.$socket.id
|
||||
});
|
||||
},
|
||||
donateButton() {
|
||||
window.open('https://www.patreon.com/nertivia', '_blank');
|
||||
}
|
||||
},
|
||||
computed: {}
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
nertiviaServer() {
|
||||
return this.$store.getters['servers/servers'][this.nertiviaServerID]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -88,6 +131,8 @@ export default {
|
|||
flex-shrink: 0;
|
||||
.items {
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.item {
|
||||
.material-icons {
|
||||
margin-right: 5px;
|
||||
|
|
@ -114,6 +159,7 @@ export default {
|
|||
height: 100px;
|
||||
background: rgba(0, 0, 0, 0.226);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -151,6 +197,67 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background: black;
|
||||
height: 200px;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
.button {
|
||||
background-color: rgba(0, 0, 0, 0.200);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
font-size: 20px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
color: rgba(255, 255, 255, 0.924);
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.300);
|
||||
}
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.self-promo{
|
||||
.logo {
|
||||
background-image: url('../../../assets/logo.png');
|
||||
background-size: cover;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
margin-top: 50px;
|
||||
background: #3fa9f5;
|
||||
}
|
||||
&.donate-paypal {
|
||||
margin-top: 20px;
|
||||
background: #f53f3f;
|
||||
.title {
|
||||
font-size: 15px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.heart {
|
||||
font-size: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.coming-soon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in a new issue