mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-17 13:31:11 +00:00
added app download popout.
This commit is contained in:
supertiger1234
parent
2e2a677d92
commit
25490e629b
7 changed files with 206 additions and 94 deletions
BIN
src/assets/PlatformIcons/androidLogo.png
Normal file
BIN
src/assets/PlatformIcons/androidLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/PlatformIcons/linuxLogo.png
Normal file
BIN
src/assets/PlatformIcons/linuxLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/PlatformIcons/winLogo.png
Normal file
BIN
src/assets/PlatformIcons/winLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
131
src/components/homePage/DownloadAppPopout.vue
Normal file
131
src/components/homePage/DownloadAppPopout.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -345,6 +345,7 @@ export default {
|
|||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,17 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<vue-headful
|
||||
title="Nertivia"
|
||||
description="Nertivia Chat Client"
|
||||
/>
|
||||
<div
|
||||
ref="backgroundImage"
|
||||
class="background-image"
|
||||
/>
|
||||
<vue-headful title="Nertivia" description="Nertivia Chat Client" />
|
||||
<div ref="backgroundImage" class="background-image" />
|
||||
<spinner v-if="!showPage" />
|
||||
<div
|
||||
v-if="showPage"
|
||||
class="content"
|
||||
>
|
||||
<transition
|
||||
name="fall-down"
|
||||
appear
|
||||
>
|
||||
<div v-if="showPage" class="content">
|
||||
<transition name="fall-down" appear>
|
||||
<div class="header">
|
||||
<div class="logo" />
|
||||
<div class="name">
|
||||
Nertivia
|
||||
</div>
|
||||
<div class="name">Nertivia</div>
|
||||
<div class="links">
|
||||
<div
|
||||
v-if="!loggedIn"
|
||||
class="link"
|
||||
@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"
|
||||
/>
|
||||
<div v-if="!loggedIn" class="link" @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
|
||||
v-if="user && loggedIn && showPopout"
|
||||
v-click-outside="closePopout"
|
||||
<profile-popout
|
||||
v-if="user && loggedIn && showProfilePopout"
|
||||
v-click-outside="closeProfilePopout"
|
||||
:user="user"
|
||||
@logout="logOut"
|
||||
/>
|
||||
|
|
@ -63,87 +33,71 @@
|
|||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition
|
||||
name="side-in"
|
||||
appear
|
||||
>
|
||||
<transition 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>
|
||||
<img
|
||||
class="graphic"
|
||||
src="@/assets/graphics/HomeGraphics2.png"
|
||||
>
|
||||
>The best chat client that won't restrict you from important and fun features.</div>
|
||||
<img class="graphic" src="@/assets/graphics/HomeGraphics2.png" />
|
||||
<div class="buttons">
|
||||
<div
|
||||
class="button"
|
||||
@click="openApp"
|
||||
>
|
||||
Open In Browser
|
||||
</div>
|
||||
<!-- <div class="button" >Download App</div> -->
|
||||
<div class="button" @click="openApp">Open In Browser</div>
|
||||
<div class="button download" @click="showDownloadsPopout = true">Download App</div>
|
||||
</div>
|
||||
<div class="features-list">
|
||||
<div class="title">
|
||||
Things you can do in Nertivia
|
||||
</div>
|
||||
<div class="title">Things you can do in Nertivia</div>
|
||||
<div class="list">
|
||||
<div class="feature">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
<div class="description">
|
||||
1GB per file limit, upload huge files!
|
||||
</div>
|
||||
<div class="description">1GB per file limit, upload huge files!</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<i class="material-icons">face</i>
|
||||
<div class="description">
|
||||
Free custom gif emojis and profile picture.
|
||||
</div>
|
||||
<div class="description">Free custom gif emojis and profile picture.</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<i class="material-icons">storage</i>
|
||||
<div class="description">
|
||||
Make your own servers with channels.
|
||||
</div>
|
||||
<div class="description">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) {
|
||||
if (!event.target.closest('.avatar'))
|
||||
this.showPopout = false;
|
||||
closeProfilePopout(event) {
|
||||
if (!event.target.closest(".avatar")) this.showProfilePopout = false;
|
||||
},
|
||||
logOut() {
|
||||
this.$store.dispatch("logout");
|
||||
|
|
@ -180,9 +134,7 @@ export default {
|
|||
setTimeout(() => {
|
||||
background.src = src;
|
||||
background.onload = () => {
|
||||
this.$refs.backgroundImage.style.backgroundImage = `url(${
|
||||
background.src
|
||||
})`;
|
||||
this.$refs.backgroundImage.style.backgroundImage = `url(${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');
|
||||
this.loggedIn = null
|
||||
localStorage.removeItem("hauthid");
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue