From 85c098ee78c2431dc8ad113410a1a74da8604775 Mon Sep 17 00:00:00 2001
From: Bytetrex <y.kniaziev@protonmail.com>
Date: Wed, 7 Apr 2021 16:54:38 +0800
Subject: [PATCH] New Landing and Dashboard

---
 src/views/Home.vue | 253 +++++++++++++++++++++++++--------------------
 1 file changed, 140 insertions(+), 113 deletions(-)

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