added fancy animations and bug fixes

src/components/app/FriendsList.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="friend-left-panel">
-    <!-- <navigation /> -->
-    <MyMiniInformation />
     <div class="tabs">
       <div
         class="tab"
@@ -20,14 +18,11 @@
         Recents
       </div>
     </div>
-    <div v-if="currentTab === 0" class="list">
+    <div class="list">
-      <!-- <pending-friends />
+      <transition name="fade" mode="out-in">
-      <online-friends />
+        <friends-tab v-if="currentTab === 0" />
-      <offline-friends /> -->
+        <recent-friends-tab v-else />
-      <friends-tab />
+      </transition>
-    </div>
-    <div v-else class="list">
-      <recent-friends-tab />
     </div>
     <div
       class="button"
@@ -41,19 +36,12 @@
 </template>
 
 <script>
-import MyMiniInformation from "../../components/app/MyMiniInformation.vue";
-// import PendingFriends from "./relationships/PendingFriends.vue";
-// import OnlineFriends from "./relationships/OnlineFriends.vue";
-// import OfflineFriends from "./relationships/OfflineFriends.vue";
 import RecentFriendsTab from "./relationships/RecentFriendsTab.vue";
 import FriendsTab from "./relationships/FriendsTab.vue";
 
 export default {
   components: {
-    MyMiniInformation,
+
-    // PendingFriends,
-    // OnlineFriends,
-    // OfflineFriends,
     FriendsTab,
     RecentFriendsTab
   },
@@ -127,9 +115,17 @@ export default {
   z-index: 1;
   flex: 1;
   background: rgba(0, 0, 0, 0.14);
-  border-top-left-radius: 10px;
   overflow: hidden;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
 .list {
   flex: 1;
   overflow: auto;
@@ -250,10 +246,4 @@ export default {
 .notify {
   background: #ee3e34;
 }
-
-@media (max-width: 600px) {
-  .friend-left-panel {
-    border-radius: 0;
-  }
-}
 </style>

src/components/app/ServerList.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="server-left-panel">
-    <!-- <navigation /> -->
-    <MyMiniInformation />
     <div
       class="server-banner"
       @mouseenter="bannerHover = true"
@@ -28,18 +26,20 @@
     </div>
     <div class="channels-list">
       <channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
+      <div v-else class="not-selected">
+        <div class="material-icons">dns</div>
+        <div>Select a server</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
 import ChannelsList from "@/components/app/ServerTemplate/ChannelsList.vue";
 import config from "@/config";
 
 export default {
   components: {
-    MyMiniInformation,
     ChannelsList
   },
   data() {
@@ -126,7 +126,6 @@ export default {
   flex: 1;
   background: rgba(0, 0, 0, 0.14);
   overflow: hidden;
-  border-top-left-radius: 10px;
 }
 
 .channels-list {
@@ -190,6 +189,22 @@ export default {
     width: 100%;
   }
 }
+.not-selected {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+  .material-icons {
+    font-size: 35px;
+    margin-bottom: 15px;
+  }
+
+}
 .options-button {
   display: flex;
   align-items: center;
@@ -206,10 +221,4 @@ export default {
     background: rgba(0, 0, 0, 0.322);
   }
 }
-
-@media (max-width: 600px) {
-  .server-left-panel {
-    border-radius: 0;
-  }
-}
 </style>

src/components/app/Tabs/ServerAndDMTab.vue

@@ -10,8 +10,13 @@
         v-click-outside="hideLeftPanel"
       >
         <navigation />
-        <server-list v-if="currentTab === 2" />
+        <div class="wrapper">
-        <friends-list v-if="currentTab === 1" />
+          <MyMiniInformation />
+          <transition name="fade" mode="out-in">
+            <server-list :key="selectedServerID" v-if="currentTab === 2" />
+            <friends-list v-if="currentTab === 1" />
+          </transition>
+        </div>
       </div>
     </transition>
     <message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" />
@@ -35,6 +40,7 @@
 import { bus } from "@/main";
 import MessagePanel from "@/components/app/MessagePanel.vue";
 import Navigation from "@/components/app/Navigation.vue";
+import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
 
 const FriendsList = () => import("@/components/app/FriendsList.vue");
 const MembersList = () => import("@/components/app/MembersList.vue");
@@ -46,7 +52,8 @@ export default {
     FriendsList,
     MessagePanel,
     MembersList,
-    Navigation
+    Navigation,
+    MyMiniInformation
   },
   data() {
     return {
@@ -108,6 +115,20 @@ export default {
   flex-direction: row;
   z-index: 1;
 }
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top-left-radius: 10px;
+  overflow: hidden;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 
 .slide-left-enter-active,
 .slide-left-leave-active {
@@ -142,6 +163,9 @@ export default {
     z-index: 2;
     background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
+  .wrapper {
+    border-radius: 0;
+  }
   .darken::after {
     content: "";
     position: absolute;

src/components/app/relationships/FriendsTemplate.vue

@@ -136,7 +136,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .username {
   width: 150px;
   white-space: nowrap;
@@ -150,7 +150,7 @@ export default {
   align-items: center;
   width: 100%;
 }
-.wrapper {
+.friend .wrapper {
   color: rgba(255, 255, 255, 0.7);
   display: flex;
   height: 45px;
@@ -163,16 +163,31 @@ export default {
   padding-left: 10px;
   margin-left: 3px;
   margin-right: 3px;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+    color: white;
+  }
+
+  &.selected {
+    background-color: rgba(0, 0, 0, 0.4);
+    color: white;
+  }
+
+  &:hover .status-name {
+    opacity: 1;
+    height: 13px;
+  }
+
+  &:hover .close-button {
+    display: flex;
+  }
+  &:hover .status {
+    opacity: 1;
+    bottom: -4px;
+  }
 }
 
-.wrapper:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: white;
-}
-.wrapper.selected {
-  background-color: rgba(0, 0, 0, 0.4);
-  color: white;
-}
 .profile-picture {
   height: 30px;
   width: 30px;
@@ -228,10 +243,7 @@ export default {
   transition: 0.3s;
 }
 
-.wrapper:hover .status {
+
-  opacity: 1;
-  bottom: -4px;
-}
 
 .status-name {
   opacity: 0;
@@ -240,10 +252,6 @@ export default {
   color: #b7cbce;
   height: 0;
 }
-.wrapper:hover .status-name {
-  opacity: 1;
-  height: 13px;
-}
 
 .close-button {
   flex-shrink: 0;
@@ -257,7 +265,5 @@ export default {
 .close-button:hover {
   color: white;
 }
-.wrapper:hover .close-button {
+
-  display: flex;
-}
 </style>