dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-15 12:31:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

moved main nav to left panel for mobile.

Browse source
This commit is contained in:
supertiger1234 2020-02-20 12:54:23 +00:00
parent cf2b43cdae
commit a800e692d7
4 changed files with 112 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/app/MainNav.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="main navigation" ref="navigation">
<div class="main navigation" :class="{ mobile: mobileSize }" ref="navigation">
<div
class="tool-tip"
ref="toolTip"
@ -99,7 +99,6 @@ export default {
toolTipServerID: null,
toolTipLocalName: null,
mobile: isMobile(),
drag: false
};
},
@ -155,7 +154,11 @@ export default {
this.$nextTick(() => {
const tooltipWidth = this.$refs.toolTip.clientWidth;
const rect = event.target.getBoundingClientRect();
this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
if (this.mobileSize) {
this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 20;
} else {
this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
}
});
},
mouseLeaveEvent() {
@ -183,6 +186,14 @@ export default {
}
},
computed: {
mobileSize() {
return (
this.$mq === "mobile" &&
(this.currentTab === 0 ||
this.currentTab === 1 ||
this.currentTab === 2)
);
},
user() {
return this.$store.getters.user;
},
@ -253,6 +264,18 @@ export default {
width: 100%;
position: relative;
}
.mobile {
background: #005a9e;
padding-left: 10px;
width: initial;
.item {
width: 40px;
height: 40px;
margin-left: 5px;
margin-right: 5px;
font-size: 25px;
}
}
.container {
display: flex;
flex-direction: row;
@ -335,5 +358,4 @@ export default {
cursor: default;
transition: 0.2s;
}
</style>

107
src/components/app/Tabs/Explore.vue
View file

@ -6,54 +6,59 @@
v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
v-click-outside="hideLeftPanel"
>
<navigation />
<div class="content">
<MyMiniInformation />
<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;
showLeftPanel = false;
"
>
<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
<MainNav v-if="$mq === 'mobile'" />
<div class="inner">
<navigation />
<div class="content">
<MyMiniInformation />
<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 class="logo" />
<div class="title">Join the official Nertivia server</div>
<div class="button" @click="joinNertiviaServer">Join</div>
</div>
<div class="items">
<div
class="item"
v-for="(tab, index) in tabs"
:key="index"
:class="{ selected: selectedTab === index }"
@click="
selectedTab = index;
showLeftPanel = false;
"
>
<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 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</div>
</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</div>
</div>
</div>
</div>
@ -88,8 +93,10 @@ import Themes from "./Explore/themes";
import ServerService from "@/services/ServerService";
import Navigation from "@/components/app/Navigation";
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
const MainNav = () => import("@/components/app/MainNav.vue");
export default {
components: { Servers, Themes, Navigation, MyMiniInformation },
components: { Servers, Themes, Navigation, MyMiniInformation, MainNav },
data() {
return {
showLeftPanel: false,
@ -152,12 +159,19 @@ export default {
}
.left-panel {
display: flex;
flex-direction: row;
flex-direction: column;
width: 340px;
max-width: calc(100% - 60px);
flex-shrink: 0;
z-index: 2;
.inner {
display: flex;
flex-direction: row;
flex-shrink: 0;
z-index: 2;
}
.content {
display: flex;
flex-direction: column;
@ -385,5 +399,4 @@ export default {
background: rgba(0, 0, 0, 0.4);
}
}
</style>

31
src/components/app/Tabs/ServerAndDMTab.vue
View file

@ -9,13 +9,16 @@
v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
v-click-outside="hideLeftPanel"
>
<navigation />
<div class="wrapper">
<MyMiniInformation />
<transition name="fade" mode="out-in">
<server-list :key="selectedServerID" v-if="currentTab === 2" />
<friends-list v-if="currentTab === 1" />
</transition>
<MainNav v-if="$mq === 'mobile'" />
<div class="inner">
<navigation />
<div class="wrapper">
<MyMiniInformation />
<transition name="fade" mode="out-in">
<server-list :key="selectedServerID" v-if="currentTab === 2" />
<friends-list v-if="currentTab === 1" />
</transition>
</div>
</div>
</div>
</transition>
@ -45,6 +48,7 @@ import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
const FriendsList = () => import("@/components/app/FriendsList.vue");
const MembersList = () => import("@/components/app/MembersList.vue");
const ServerList = () => import("@/components/app/ServerList.vue");
const MainNav = () => import("@/components/app/MainNav.vue");
export default {
components: {
@ -53,7 +57,8 @@ export default {
MessagePanel,
MembersList,
Navigation,
MyMiniInformation
MyMiniInformation,
MainNav
},
data() {
return {
@ -112,6 +117,16 @@ export default {
max-width: calc(100% - 60px);
flex-shrink: 0;
display: flex;
flex-direction: column;
z-index: 1;
}
.inner {
z-index: 2;
height: 100%;
width: 340px;
max-width: 100%;
flex-shrink: 0;
display: flex;
flex-direction: row;
z-index: 1;
}

4
src/views/App.vue
View file

@ -10,7 +10,9 @@
<electron-frame-buttons />
</div>
</div>
<main-nav />
<main-nav
v-if="$mq !== 'mobile' || currentTab === 3 || currentTab === 4"
/>
<div class="panel-layout">
<news v-if="currentTab == 3" />
<servers v-if="currentTab == 1 || currentTab == 2" />