added app download popout.

src/components/homePage/DownloadAppPopout.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="download-popout" @click="backgroundClickEvent">
+    <div class="box">
+      <div class="header">
+        <div class="title">Download Nertivia</div>
+        </div>
+        <div class="inner-content">
+          <div class="download-item" @click="openDownloadPage">
+            <div class="image" :style="{backgroundImage: `url(${winImage})`}"></div>
+            <div class="title">Windows</div>
+          </div>
+          <div class="download-item">
+            <div class="image linux" :style="{backgroundImage: `url(${linuxImage})`}"></div>
+            <div class="title">Coming soon!</div>
+          </div>
+          <div class="download-item">
+            <div class="image" :style="{backgroundImage: `url(${androidImage})`}"></div>
+            <div class="title">Coming soon!</div>
+          </div>
+        </div>
+    </div>
+  </div>  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      winImage: require('@/assets/PlatformIcons/winLogo.png'),
+      linuxImage: require('@/assets/PlatformIcons/linuxLogo.png'),
+      androidImage: require('@/assets/PlatformIcons/androidLogo.png'),
+    }
+  },
+  methods: {
+    backgroundClickEvent(event) {
+      if (event.target.classList.contains("download-popout")) {
+        this.$emit('close')
+      }
+    },
+    openDownloadPage() {
+      window.open('https://github.com/supertiger1234/nertivia-desktop-app/releases','_blank');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .download-popout {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.80);
+    display: flex;
+    user-select: none;
+    cursor: default;
+  }
+
+  .box {
+    display: flex;
+    height: 350px;
+    width: 500px;
+    margin: auto;
+    background: rgb(39, 39, 39);
+    flex-direction: column;
+    border-radius: 10px;
+    overflow: hidden;
+
+  }
+  .header {
+    height: 50px;
+    background: #3fa9f5;  
+    widows: 100%;
+    color: white;
+    font-size: 20px;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    .title {
+      margin: auto;
+    }
+  }
+  .inner-content {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  }
+  .download-item {
+    background: rgb(42, 42, 42);
+    margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    border-radius: 5px;
+    padding: 10px;
+    color: white;
+    user-select: none;
+    cursor: pointer;
+    transition: 0.3s;
+    &:hover {
+      background: rgb(27, 27, 27);
+    }
+    .image {
+      height: 100px;
+      width: 100px;
+      background-size:contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .title {
+      margin-top: 10px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .inner-content  {
+      flex-direction: column;
+      justify-content: inherit;
+      overflow: auto;
+      align-items: inherit;
+      .download-item {
+        height: 400px;
+      }
+    }
+  }
+</style>

src/views/App.vue

@@ -345,6 +345,7 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
+
 </style>
 
 

src/views/HomePage.vue

@@ -1,47 +1,17 @@
 <template>
   <div id="app">
-    <vue-headful
+    <vue-headful title="Nertivia" description="Nertivia Chat Client" />
-      title="Nertivia"
+    <div ref="backgroundImage" class="background-image" />
-      description="Nertivia Chat Client"
-    />
-    <div
-      ref="backgroundImage"
-      class="background-image"
-    />
     <spinner v-if="!showPage" />
-    <div
+    <div v-if="showPage" class="content">
-      v-if="showPage"
+      <transition name="fall-down" appear>
-      class="content"
-    >
-      <transition
-        name="fall-down"
-        appear
-      >
         <div class="header">
           <div class="logo" />
-          <div class="name">
+          <div class="name">Nertivia</div>
-            Nertivia
-          </div>
           <div class="links">
-            <div
+            <div v-if="!loggedIn" class="link" @click="signupPage">Sign up</div>
-              v-if="!loggedIn"
+            <div v-if="!loggedIn" class="link" @click="loginPage">Login</div>
-              class="link"
+            <spinner v-if="loggedIn && !user" class="spinner-profile" :size="50" />
-              @click="signupPage"
-            >
-              Sign up
-            </div>
-            <div
-              v-if="!loggedIn"
-              class="link"
-              @click="loginPage"
-            >
-              Login
-            </div>
-            <spinner
-              v-if="loggedIn && !user"
-              class="spinner-profile"
-              :size="50"
-            />
             <profile-picture
               v-if="loggedIn && user"
               class="avatar"
@@ -50,12 +20,12 @@
               :admin="user.admin"
               size="40px"
               emote-size="17px"
-              @click.native="showPopout = !showPopout"
+              @click.native="showProfilePopout = !showProfilePopout"
             />
             <transition name="fall-down-fast">
-              <Popout
+              <profile-popout
-                v-if="user && loggedIn && showPopout"
+                v-if="user && loggedIn && showProfilePopout"
-                v-click-outside="closePopout"
+                v-click-outside="closeProfilePopout"
                 :user="user"
                 @logout="logOut"
               />
@@ -63,87 +33,71 @@
           </div>
         </div>
       </transition>
-      <transition
+      <transition name="side-in" appear>
-        name="side-in"
-        appear
-      >
         <div class="inner-content">
           <div
             class="title"
-          >
+          >The best chat client that won't restrict you from important and fun features.</div>
-            The best chat client that won't restrict you from important and fun features.
+          <img class="graphic" src="@/assets/graphics/HomeGraphics2.png" />
-          </div>
-          <img
-            class="graphic"
-            src="@/assets/graphics/HomeGraphics2.png"
-          >
           <div class="buttons">
-            <div
+            <div class="button" @click="openApp">Open In Browser</div>
-              class="button"
+            <div class="button download" @click="showDownloadsPopout = true">Download App</div>
-              @click="openApp"
-            >
-              Open In Browser
-            </div>
-            <!-- <div class="button" >Download App</div> -->
           </div>
           <div class="features-list">
-            <div class="title">
+            <div class="title">Things you can do in Nertivia</div>
-              Things you can do in Nertivia
-            </div>
             <div class="list">
               <div class="feature">
                 <i class="material-icons">insert_drive_file</i>
-                <div class="description">
+                <div class="description">1GB per file limit, upload huge files!</div>
-                  1GB per file limit, upload huge files!
-                </div>
               </div>
               <div class="feature">
                 <i class="material-icons">face</i>
-                <div class="description">
+                <div class="description">Free custom gif emojis and profile picture.</div>
-                  Free custom gif emojis and profile picture.
-                </div>
               </div>
               <div class="feature">
                 <i class="material-icons">storage</i>
-                <div class="description">
+                <div class="description">Make your own servers with channels.</div>
-                  Make your own servers with channels.
-                </div>
               </div>
             </div>
           </div>
         </div>
       </transition>
     </div>
+    <div class="popouts">
+      <transition name="fade">
+        <download-app-popout v-if="showDownloadsPopout" @close="showDownloadsPopout = false"/>
+      </transition>
+    </div>
   </div>
 </template>
 
 <script>
 import Spinner from "@/components/Spinner.vue";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
-import Popout from "@/components/homePage/Popout.vue";
+import ProfilePopout from "@/components/homePage/ProfilePopout.vue";
+import DownloadAppPopout from "@/components/homePage/DownloadAppPopout.vue";
 import AuthenticationService from "@/services/AuthenticationService.js";
-import config from '@/config.js'
+import config from "@/config.js";
- 
+
 export default {
-  components: { Spinner, ProfilePicture, Popout },
+  components: { Spinner, ProfilePicture, ProfilePopout, DownloadAppPopout },
   data() {
     return {
-      showPopout: false,
+      showDownloadsPopout: false,
+      showProfilePopout: false,
       showPage: false,
       loggedIn: localStorage.getItem("hauthid") || null,
       user: null,
-      avatarDomain: config.domain + '/avatars/'
+      avatarDomain: config.domain + "/avatars/"
     };
   },
   async mounted() {
     if (this.loggedIn) this.getUser();
     this.preloadImages();
-
   },
   methods: {
-    closePopout(event) {
+    closeProfilePopout(event) {
-      if (!event.target.closest('.avatar'))
+      if (!event.target.closest(".avatar")) this.showProfilePopout = false;
-      this.showPopout = false;
     },
     logOut() {
       this.$store.dispatch("logout");
@@ -180,9 +134,7 @@ export default {
       setTimeout(() => {
         background.src = src;
         background.onload = () => {
-          this.$refs.backgroundImage.style.backgroundImage = `url(${
+          this.$refs.backgroundImage.style.backgroundImage = `url(${background.src})`;
-            background.src
-          })`;
           this.$refs.backgroundImage.style.opacity = 0.7;
           setTimeout(() => (this.showPage = true), 500);
         };
@@ -198,8 +150,8 @@ export default {
           }, 5000);
           return;
         } else {
-          localStorage.removeItem('hauthid');
+          localStorage.removeItem("hauthid");
-          this.loggedIn = null
+          this.loggedIn = null;
         }
       } else {
         this.user = result.data.user;
@@ -211,6 +163,14 @@ export default {
 
 
 <style scoped>
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
 .fall-down-enter-active {
   opacity: 0;
   animation: fall-down 0.5s;
@@ -256,8 +216,6 @@ export default {
   }
 }
 
-
-
 .side-in-enter-active {
   opacity: 0;
   animation: side-in 0.5s;
@@ -279,10 +237,6 @@ export default {
   }
 }
 
-
-
-
-
 html,
 body {
   height: 100%;
@@ -320,7 +274,6 @@ body {
   color: white;
 }
 
-
 .background-image {
   z-index: -1;
   position: fixed;
@@ -381,7 +334,9 @@ body {
   box-shadow: 3px 3px rgb(5, 86, 179);
   user-select: none;
   transition: 0.3s;
+  margin: 10px;
 }
+
 .button:hover {
   background: rgb(24, 132, 255);
 }
@@ -389,6 +344,22 @@ body {
   transform: translate(3px, 3px);
   box-shadow: 0 0 rgb(5, 86, 179);
 }
+
+.button.download {
+  background: rgba(0, 223, 67, 0.733);
+  box-shadow: 3px 3px rgb(0, 121, 36);
+}
+
+
+.button.download:hover {
+  background: rgba(0, 223, 67, 0.777);
+}
+.button.download:active {
+  transform: translate(3px, 3px);
+  box-shadow: 0 0 rgb(0, 121, 36);
+}
+
+
 .features-list {
   margin-top: 20px;
 }
@@ -455,6 +426,15 @@ body {
   }
 }
 
+@media (max-width: 334px) {
+  .buttons {
+    flex-direction: column;
+  }
+  .buttons .button {
+    text-align: center;
+  }
+}
+
 @media (max-width: 465px) {
   .features-list .list {
     flex-direction: column;