mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-16 21:11:16 +00:00
creating explore main page.
This commit is contained in:
supertiger1234
parent
e388a6db57
commit
0889a08ee1
5 changed files with 578 additions and 4 deletions
|
|
@ -8,7 +8,8 @@
|
|||
<div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
|
||||
<general v-if="index === 0"/>
|
||||
<manage-channels v-if="index === 1"/>
|
||||
<delete-server v-if="index === 2"/>
|
||||
<server-visibility v-if="index === 2"/>
|
||||
<delete-server v-if="index === 3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,9 +25,9 @@ import { mapState } from "vuex";
|
|||
import General from './General.vue'
|
||||
import DeleteServer from './DeleteServer.vue'
|
||||
import ManageChannels from './ManageChannels.vue'
|
||||
|
||||
import ServerVisibility from './ServerVisibility.vue'
|
||||
export default {
|
||||
components: { General, DeleteServer, ManageChannels},
|
||||
components: { General, DeleteServer, ManageChannels, ServerVisibility},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
|
|
@ -34,6 +35,7 @@ export default {
|
|||
{title: "General", icon: "info"},
|
||||
{title: "Manage Channels", icon: "storage"},
|
||||
// {title: "Manage Invites", icon: "local_post_office"},
|
||||
{title: "Server Visibility", icon: "visibility"},
|
||||
{title: "Delete Server", icon: "warning", critical: true},
|
||||
]
|
||||
}
|
||||
|
|
@ -104,7 +106,7 @@ export default {
|
|||
margin: 5px;
|
||||
padding: 5px;
|
||||
transition: 0.2s;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class="content-inner" v-if="server">
|
||||
<div class="details">Making your server visibility public means that your server will be shown publicly in the Nertivia's "Explore" tab.</div>
|
||||
<div class="content">
|
||||
<div class="toggle">
|
||||
<div class="title">Server Visibility</div>
|
||||
<div class="item" @click="privateServer = false"><div class="box" :class="{selected: !privateServer}"></div> Public</div>
|
||||
<div class="item" @click="privateServer = true"><div class="box" :class="{selected: privateServer}"></div> Private</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config.js";
|
||||
import { bus } from "@/main";
|
||||
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
privateServer: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
server() {
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID
|
||||
return this.$store.getters['servers/servers'][serverID]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.content-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
background: rgb(46, 46, 46);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item {
|
||||
display: flex;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
.box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
background: rgb(95, 95, 95);
|
||||
margin-right: 5px;
|
||||
&.selected {
|
||||
background: rgb(34, 156, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: rgba(255, 0, 0, 0.719);
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
160
src/components/app/Tabs/Explore.vue
Normal file
160
src/components/app/Tabs/Explore.vue
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<div class="explore-tab">
|
||||
<div class="left-panel">
|
||||
<div class="header">
|
||||
<div class="icon">
|
||||
<i class="material-icons">explore</i>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="title">Explore</div>
|
||||
<div class="description">Find new servers, Emojis and more!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{selected: selectedTab === index}"
|
||||
@click="selectedTab = index"
|
||||
>
|
||||
<i class="material-icons">{{tab.icon}}</i>
|
||||
{{tab.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="header"> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
|
||||
<div class="coming-soon" v-if="selectedTab > 0">
|
||||
<div class="icon">
|
||||
<i class="material-icons">explore</i>
|
||||
</div>
|
||||
<div class="text">Coming soon!</div>
|
||||
</div>
|
||||
<component :is="tabs[selectedTab].component" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bus } from "@/main";
|
||||
import Servers from './Explore/servers'
|
||||
export default {
|
||||
components: { Servers },
|
||||
data() {
|
||||
return {
|
||||
selectedTab: 0,
|
||||
tabs: [
|
||||
// {icon: "home", name: "home", component: ""},
|
||||
{ icon: "rss_feed", name: "Servers", component: "servers" },
|
||||
{ icon: "face", name: "Emojis", component: "" },
|
||||
{ icon: "brush", name: "Themes", component: "" },
|
||||
{ icon: "message", name: "Message Styles", component: "" }
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.explore-tab {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.459);
|
||||
color: white;
|
||||
}
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.274);
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
.items {
|
||||
user-select: none;
|
||||
.item {
|
||||
.material-icons {
|
||||
margin-right: 5px;
|
||||
}
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.199);
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
&.selected {
|
||||
background: rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
background: rgba(0, 0, 0, 0.226);
|
||||
user-select: none;
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
.material-icons {
|
||||
font-size: 70px;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
align-self: center;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.description {
|
||||
opacity: 0.7;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coming-soon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.39);
|
||||
color: white;
|
||||
.material-icons {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.448);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
.material-icons {margin-right: 5px;}
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
39
src/components/app/Tabs/Explore/searchHeader.vue
Normal file
39
src/components/app/Tabs/Explore/searchHeader.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="search-header">
|
||||
<div class="search-area">
|
||||
<input type="text" :placeholder="`Search for ${name}`">
|
||||
</div>
|
||||
<div class="filter-area"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'name'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-header {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.231);
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.search-area {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
280
src/components/app/Tabs/Explore/servers.vue
Normal file
280
src/components/app/Tabs/Explore/servers.vue
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<div class="servers-tab">
|
||||
<search-header name="servers" />
|
||||
<div class="items-main-container">
|
||||
<div class="items-container">
|
||||
<div class="items">
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchHeader from "./searchHeader";
|
||||
|
||||
export default {
|
||||
components: { searchHeader }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.servers-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.items-main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
|
||||
|
||||
}
|
||||
.items-container {
|
||||
display: block;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
max-width: 1066px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
.items {
|
||||
margin-top: 40px;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill, 250px);
|
||||
grid-auto-rows: min-content;
|
||||
align-items: stretch;
|
||||
justify-content: space-evenly;
|
||||
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>
|
||||
Loading…
Reference in a new issue