New Landing and Dashboard
This commit is contained in:
Bytetrex
parent
039987aacd
commit
85c098ee78
1 changed files with 140 additions and 113 deletions
|
|
@ -1,143 +1,170 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<div id="home">
|
||||||
<div class="columns is-centered section" v-if="$store.state.user.username">
|
<section class="section" v-if="$store.state.user.username">
|
||||||
<div class="column is-4 has-text-centered">
|
<div class="columns is-centered">
|
||||||
<h1 class="title has-text-centered">{{$store.state.user.username}}</h1>
|
<div class="column is-3">
|
||||||
<div class="box">
|
<div class="title">
|
||||||
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width="50%">
|
{{ $store.state.user.username }}
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" alt="Avatar" width="50%">
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
{{ $t('home.news') }}
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title">{{$t('home.news')}}</h1>
|
|
||||||
<div v-if="blogs.length">
|
<div v-if="blogs.length">
|
||||||
<div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
|
<div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
|
||||||
<h2 class="subtitle">{{blog.name}}</h2>
|
<div class="subtitle">
|
||||||
|
{{ blog.name }}
|
||||||
|
</div>
|
||||||
<p>{{ blog.plainText }}</p>
|
<p>{{ blog.plainText }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!blogs.length" class="box">
|
<div v-else>
|
||||||
|
<div class="box">
|
||||||
<NoItems type="blog posts"></NoItems>
|
<NoItems type="blog posts"></NoItems>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column has-text-centered is-vcentered" v-if="!loading">
|
</div>
|
||||||
<h1 class="title">{{$t('home.globalWall')}}</h1>
|
<div class="column is-7" v-if="!loading">
|
||||||
<div class="">
|
<div class="box">
|
||||||
<b-input placeholder="What's up?" v-model="wallText" maxlength="256" type="textarea"></b-input>
|
<div class="title">
|
||||||
<b-tag>
|
{{ $t('home.globalWall') }}
|
||||||
|
</div>
|
||||||
|
<b-input type="textarea" maxlength="256" placeholder="How's it going?" v-model="wallText"></b-input>
|
||||||
|
<b-tag type="is-info" class="is-pulled-right">
|
||||||
Markdown is no longer available on wall posts.
|
Markdown is no longer available on wall posts.
|
||||||
</b-tag>
|
</b-tag>
|
||||||
<b-button :loading="loadingWallButton" @click="postWall()" class="is-info" style="float: left">Post</b-button>
|
<b-button type="is-info" ckass="is-pulled-left" :loading="loadingWallButton" @click="postWall">Post</b-button>
|
||||||
<br><hr>
|
</div>
|
||||||
|
<hr>
|
||||||
<div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
|
<div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
|
||||||
<article class="media">
|
<article class="media">
|
||||||
<figure class="media-left">
|
<figure class="media-left">
|
||||||
<p class="image is-64x64">
|
<figure class="image is-64x64 is-rounded">
|
||||||
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'">
|
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'" alt="Avatar">
|
||||||
</p>
|
</figure>
|
||||||
</figure>
|
</figure>
|
||||||
<div class="media-content">
|
<div class="media-content">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
<strong>{{post.fromUser.username}}</strong> <small>{{ post.createdAt | formatDate() }}</small>
|
<strong>{{ post.fromUser.username }}</strong>
|
||||||
|
<small>{{ post.createdAt | formatDate() }}</small>
|
||||||
<br>
|
<br>
|
||||||
{{ post.plainText }}
|
{{ post.plainText }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-right">
|
<div class="media-right">
|
||||||
<b-tooltip label="Delete">
|
<b-tooltip label="Delete" v-if="$store.state.user.admin">
|
||||||
<button class="delete"></button>
|
<b-button class="delete"></b-button>
|
||||||
</b-tooltip>
|
</b-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div v-if="!$store.state.user.username">
|
<section class="section hero is-info is-large is-fullheight-with-navbar" v-if="!store.state.user.username">
|
||||||
<section class="hero is-info is-large is-fullheight-with-navbar" style="overflow: auto">
|
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container has-text-centered">
|
<div class="container has-text-centered">
|
||||||
<h1 class="title">
|
<div class="title">
|
||||||
Kaverti
|
Kaverti
|
||||||
</h1>
|
</div>
|
||||||
<h2 class="subtitle">
|
<div class="subtitle">
|
||||||
Kaverti is a new 3D sandbox gaming platform, and avatar social website.
|
Kaverti is a new 3D sandbox gaming platform, and avatar social website.
|
||||||
<br />
|
<br>
|
||||||
Kaverti is home to hundreds of users who enjoy using it
|
Kaverti is home to hundreds of users who enjoy using it
|
||||||
<br />
|
<br>
|
||||||
So why not sign up today!
|
So why not sign up today!
|
||||||
</h2>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="hero is-medium" style="overflow: auto">
|
<section class="section hero is-white is-medium" v-if="!store.state.user.username">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container has-text-centered">
|
<div class="container has-text-centered">
|
||||||
<h1 class="title">
|
<div class="title">
|
||||||
The stats:
|
Statistics
|
||||||
</h1>
|
</div>
|
||||||
<h2 class="subtitle">
|
|
||||||
<div class="columns is-centered">
|
<div class="columns is-centered">
|
||||||
<div class="column is-vcentered has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<h1 class="title">{{$t('stats.users')}}</h1>
|
<div class="title">{{ $t('stats.users') }}</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<h1 class="title" v-if="!loading">
|
<div class="title" v-if="!loading">
|
||||||
{{ users }}
|
{{ users }}
|
||||||
</h1>
|
</div>
|
||||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-vcentered has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<h1 class="title">{{$t('stats.posts')}}</h1>
|
<div class="title">{{ $t('stats.users') }}</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<h1 class="title" v-if="!loading">
|
<div class="title" v-if="!loading">
|
||||||
|
{{ users }}
|
||||||
|
</div>
|
||||||
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column has-text-centered">
|
||||||
|
<div class="title">{{ $t('stats.posts') }}</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title" v-if="!loading">
|
||||||
{{ posts }}
|
{{ posts }}
|
||||||
</h1>
|
</div>
|
||||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-vcentered has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<h1 class="title">{{$t('stats.purchased')}}</h1>
|
<div class="title">{{ $t('stats.users') }}</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<h1 class="title" v-if="!loading">
|
<div class="title" v-if="!loading">
|
||||||
|
{{ users }}
|
||||||
|
</div>
|
||||||
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column has-text-centered">
|
||||||
|
<div class="title">{{ $t('stats.purchased') }}</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title" v-if="!loading">
|
||||||
{{ inventory }}
|
{{ inventory }}
|
||||||
</h1>
|
</div>
|
||||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-vcentered has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<h1 class="title">{{$t('stats.teams')}}</h1>
|
<div class="title">{{ $t('stats.items') }}</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<h1 class="title" v-if="!loading">
|
<div class="title" v-if="!loading">
|
||||||
{{teams}}
|
|
||||||
</h1>
|
|
||||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column is-vcentered has-text-centered">
|
|
||||||
<h1 class="title">{{$t('stats.items')}}</h1>
|
|
||||||
<div class="box">
|
|
||||||
<h1 class="title" v-if="!loading">
|
|
||||||
{{ items }}
|
{{ items }}
|
||||||
</h1>
|
</div>
|
||||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-vcentered has-text-centered">
|
<div class="column has-text-centered">
|
||||||
<h1 class="title">{{$t('stats.threads')}}</h1>
|
<div class="title">{{ $t('stats.teams') }}</div>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<h1 class="title" v-if="!loading">
|
<div class="title" v-if="!loading">
|
||||||
|
{{ teams }}
|
||||||
|
</div>
|
||||||
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column has-text-centered">
|
||||||
|
<div class="title">{{ $t('stats.threads') }}</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title" v-if="!loading">
|
||||||
{{ threads }}
|
{{ threads }}
|
||||||
</h1>
|
</div>
|
||||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue