more progress with explore tab

src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue

@@ -1,42 +1,51 @@
 <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 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 = true">
+          <div class="box" :class="{selected: privateServer}"></div>Private
+        </div>
+        <div class="item" @click="privateServer = false">
+          <div class="box" :class="{selected: !privateServer}"></div>Public
+        </div>
+      </div>
+      <div class="public-settings" v-if="!privateServer">
+        <div class="input">
+          <div class="title">Description (<span :class="{warn: description.length > 150}">{{description.length}}</span>/150)</div>
+          <textarea placeholder="Description" v-model="description"></textarea>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 import config from "@/config.js";
 import { bus } from "@/main";
 
-
 export default {
   components: {},
   data() {
     return {
-      privateServer: true
-    }
+      privateServer: true,
+      description: '',
+    };
   },
   methods: {
 
   },
   computed: {
     server() {
-      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
-      return this.$store.getters['servers/servers'][serverID]
+      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;
@@ -50,6 +59,7 @@ export default {
 
 .content {
   display: flex;
+  flex-direction: column;
 }
 
 .toggle {
@@ -59,6 +69,7 @@ export default {
   margin-left: 10px;
   display: flex;
   flex-direction: column;
+  align-self: flex-start;
   .item {
     display: flex;
     margin: 3px;
@@ -76,6 +87,37 @@ export default {
   }
 }
 
+.public-settings {
+  display: flex;
+}
+
+.input{
+  background: rgb(46, 46, 46);
+  border-radius: 5px;
+  padding: 5px;
+  margin: 10px;
+  align-self: flex-start;
+  height: 155px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  .title {
+    margin-bottom: 5px;
+  }
+  textarea {
+    background: rgb(34, 34, 34);
+    resize: none;
+    outline: none;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    flex: 1;
+  }
+  .warn {
+    color: rgb(255, 67, 67);
+  }
+}
 
 .button {
   padding: 10px;

src/components/app/Tabs/Explore.vue

@@ -110,15 +110,27 @@ export default {
       justify-content: center;
       flex-shrink: 0;
       width: 100px;
+      position: relative;
       .material-icons {
         font-size: 70px;
       }
+      &::after{
+        content: 'BETA';
+        position: absolute;
+        background: #ff3333;
+        border-radius: 5px;
+        font-size: 10px;
+        padding: 2px;
+        bottom: 15px;
+        z-index: 999;
+      }
     }
     .details {
       align-self: center;
       .title {
         font-size: 20px;
         margin-bottom: 5px;
+        position: relative;
       }
       .description {
         opacity: 0.7;

src/components/app/Tabs/Explore/serverTemplate.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="item">
     <div class="top">
-      <div class="avatar"></div>
-      <div class="name">{{server.name}}</div>
+      <profile-picture
+        size="90px"
+        :url="`${avatarDomain}/${server.server.avatar}`"
+      />
+      <div class="name">{{server.server.name}}</div>
     </div>
     <div class="bottom">
       <div class="description">{{server.description}}</div>
-      <div class="button" :class="{selected: joinClicked || joined}" @click="joinButton">
+      <div class="button" :class="{selected: joined}" @click="joinButton">
 				<span v-if="joined">Joined</span>
 				<spinner v-else-if="joinClicked" :size="30"/>
 				<span v-else-if="!joinClicked">Join Server</span>
@@ -18,32 +21,34 @@
 <script>
 import Spinner from "@/components/Spinner";
 import ServerService from "@/services/ServerService";
+import config from "@/config.js";
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+
 export default {
-	components: {Spinner},
+	components: {Spinner, ProfilePicture},
   props: [
 		'server',
 	],
 	data() {
 		return {
-			joinClicked: false,
+      joinClicked: false,
+      avatarDomain: config.domain + "/avatars"
 		}
 	},
 	methods: {
 		async joinButton(event) {
       if (this.joinClicked|| this.joined) return;
 			this.joinClicked = true;
-			return;
-      const { ok, error, result } = await ServerService.joinServer(
-        
-      );
+
+      const { ok, error, result } = await ServerService.joinServer(this.server.invite_code);
       if (ok) {
-        this.closeMenu();
+        this.joinClicked = false;
       }
     }
 	},
 	computed: {
 		joined() {
-      return this.$store.getters["servers/servers"][this.server.server_id];
+      return this.$store.getters["servers/servers"][this.server.server.server_id];
     }
 	}
 };
@@ -52,7 +57,7 @@ export default {
 <style lang="scss" scoped>
     .item {
       width: 250px;
-      height: 270px;
+      height: 300px;
       background: rgba(0, 0, 0, 0.479);
       opacity: 0.9;	
       margin: 5px;
@@ -70,7 +75,7 @@ export default {
         display: flex;
         flex-direction: column;
         width: 100%;
-        height: 140px;
+        height: 150px;
         justify-content: center;
         align-content: center;
         align-items: center;
@@ -83,7 +88,13 @@ export default {
           margin-bottom: 10px;
         }
         .name {
-          font-size: 23px;
+          margin-top: 9px;
+          font-size: 21px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 100%;
+          text-align: center;
         }
       }
       .bottom {
@@ -91,12 +102,17 @@ export default {
         flex-direction: column;
         background: rgba(0, 0, 0, 0.194);
         flex: 1;
+        height: 100%;
+        flex-shrink: 0;
         .description {
-          margin: 20px;
-          margin-top: 20px;
-          margin-bottom: 10px;
-          height: 100%;
+          margin: 10px;
+          flex: 1;
           opacity: 0.9;
+          overflow: auto;
+          font-size: 14px;
+          word-break: break-word;
+          white-space: pre-wrap;
+          overflow-wrap: anywhere;
         }
         .button {
 					display: flex;

src/components/app/Tabs/Explore/servers.vue

@@ -4,7 +4,7 @@
     <div class="items-main-container">
       <div class="items-container">
         <div class="items">
-          <server-template :server="serverData[0]"/>
+          <server-template v-for="server in publicServers" :key="server.id" :server="server"/>
   
   
         </div>
@@ -16,15 +16,26 @@
 <script>
 import searchHeader from "./searchHeader";
 import serverTemplate from './serverTemplate';
+import exploreService from '@/services/exploreService';
 
 export default {
   components: { searchHeader, serverTemplate },
   data() {
     return {
-      serverData: [
-        {server_id: "6572151490335477760", name: 'Nertivia', description: 'Nertivia is a cool server.', code: ''},
-      ]
+      publicServers: null,
     }
+  },
+  methods: {
+    async getServersList() {
+      const {ok, result, error} = await exploreService.getServersList();
+      if (ok) {
+        this.publicServers =  result.data;
+      }
+
+    }
+  },
+  mounted() {
+    this.getServersList();
   }
 };
 </script>

src/services/exploreService.js

@@ -0,0 +1,8 @@
+import {instance, wrapper} from './Api';
+
+export default {
+  getServersList () {
+    return wrapper(instance().get(`explore/servers`))
+  },
+
+}

src/views/App.vue

@@ -312,7 +312,9 @@ export default {
   -webkit-app-region: no-drag;
   margin-top: 5px;
   cursor: pointer;
+  position: relative;
 }
+
 .tab.selected {
   background: rgba(71, 71, 71, 0.637);
 }