moved nav bar to the bottom

This commit is contained in:
supertiger1234 2020-02-21 10:53:10 +00:00
parent bb9a2c83e6
commit 19da0e96f7
4 changed files with 21 additions and 7 deletions

View file

@ -265,7 +265,7 @@ export default {
position: relative;
}
.mobile {
background: #005a9e;
background: rgba(0, 0, 0, 0.4);
padding-left: 10px;
width: initial;
.item {
@ -275,6 +275,9 @@ export default {
margin-right: 5px;
font-size: 25px;
}
.tool-tip {
top: -29px;
}
}
.container {
display: flex;

View file

@ -1,5 +1,5 @@
<template>
<div class="navigation" ref="navigation">
<div class="navigation" :class="{ mobile: mobileSize }" ref="navigation">
<div
class="tool-tip"
ref="toolTip"
@ -132,7 +132,11 @@ export default {
if (this.drag) return;
this.toolTipLocalName = null;
this.toolTipServerID = serverID;
this.toolTipTopPosition = top - this.getTopHeight() + 20;
if (this.mobileSize) {
this.toolTipTopPosition = top - this.getTopHeight() + 80;
} else {
this.toolTipTopPosition = top - this.getTopHeight() + 20;
}
this.toolTipShown = true;
},
mouseLeaveEvent() {
@ -163,6 +167,14 @@ export default {
}
},
computed: {
mobileSize() {
return (
this.$mq === "mobile" &&
(this.currentTab === 0 ||
this.currentTab === 1 ||
this.currentTab === 2)
);
},
user() {
return this.$store.getters.user;
},
@ -195,7 +207,6 @@ export default {
selectedServerID() {
return this.$store.getters["servers/selectedServerID"];
}
},
mounted() {
bus.$on("server-tool-tip", this.serverToolTipEvent);

View file

@ -6,7 +6,6 @@
v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
v-click-outside="hideLeftPanel"
>
<MainNav v-if="$mq === 'mobile'" />
<div class="inner">
<navigation />
<div class="content">
@ -62,6 +61,7 @@
</div>
</div>
</div>
<MainNav v-if="$mq === 'mobile'" />
</div>
</transition>

View file

@ -9,7 +9,7 @@
v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
v-click-outside="hideLeftPanel"
>
<MainNav v-if="$mq === 'mobile'" />
<div class="inner">
<navigation />
<div class="wrapper">
@ -20,6 +20,7 @@
</transition>
</div>
</div>
<MainNav v-if="$mq === 'mobile'" />
</div>
</transition>
<message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" />
@ -119,7 +120,6 @@ export default {
display: flex;
flex-direction: column;
z-index: 1;
overflow: hidden;
}
.inner {
z-index: 2;