Organised images, added about page, tweaked home page

app/imports/ui/layouts/Sidebar.vue

@@ -136,8 +136,9 @@
           {title: 'Home', icon: 'home', to: '/'},
           {title: 'Characters', icon: 'portrait', to: '/characterList', requireLogin: true},
           {title: 'Library', icon: 'book', to: '/library', requireLogin: true},
-          {title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
-          {title: 'Send Feedback', icon: 'bug_report', to: '/feedback'},
+          //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
+          {title: 'Feedback', icon: 'bug_report', to: '/feedback'},
+          {title: 'About', icon: 'subject', to: '/about'},
           {title: 'Patreon', icon: '', href: 'https://www.patreon.com/dicecloud'},
           {title: 'Github', icon: '', href: 'https://github.com/ThaumRystra/DiceCloud/tree/version-2'},
         ];

app/imports/ui/layouts/SingleCardLayout.vue

@@ -0,0 +1,15 @@
+<template
+  lang="html"
+  functional
+>
+  <div
+    class="pa-4 layout column align-center"
+    style="height: calc(100vh - 96px); display: flex;"
+  >
+    <v-card
+      style="height: 100%; width: 100%; max-width: 1800px;"
+    >
+      <slot />
+    </v-card>
+  </div>
+</template>

app/imports/ui/pages/About.vue

@@ -0,0 +1,88 @@
+<template lang="html">
+  <div>
+    <section>
+      <v-parallax
+        src="/images/paper-dice-crown-with-candy.png"
+        height="400"
+      >
+        <v-layout
+          column
+          align-center
+          justify-center
+          class="white--text"
+        >
+          <p
+            class="white--text ma-2 headline text-xs-center"
+            style="max-width: 1200px;"
+          >
+            DiceCloud is a single-developer project started in 2014 with the aim of
+            being a character sheet that stayed in sync between the DM and their
+            players, and made it clear where every value in the sheet came from, and
+            how it was calculated.
+          </p>
+        </v-layout>
+      </v-parallax>
+    </section>
+    <section class="layout column align-center ma-2 mt-4">
+      <div>
+        <h3 class="headline mb-2">
+          Special Thanks
+        </h3>
+        <p>
+          <b>Sam</b> My fiancée, without whom DiceCloud could not hope to exist
+        </p><p>
+          <b>The "Heroes" of Asaea</b> The D&amp;D party whose joy was the fuel
+          with which DiceCloud was powered
+        </p>
+        <h3 class="title">
+          Paragon tier Patrons
+        </h3>
+        <v-list
+          avatar
+          two-line
+          style="background: inherit;"
+        >
+          <v-list-tile
+            v-for="paragon in paragons"
+            :key="paragon.name"
+          >
+            <v-list-tile-avatar>
+              <v-img :src="`/images/paragons/${paragon.avatar}.png`" />
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{ paragon.name }}
+              </v-list-tile-title>
+              <v-list-tile-sub-title>
+                {{ paragon.title }}
+              </v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){ return {
+    paragons:[{
+      name: 'Kira Ametrine',
+      title: 'Cleric of Lewd',
+      avatar: 'kira'
+    },{
+      name: 'Satherian',
+      title: '',
+      avatar: 'satherian'
+    },{
+      name: 'Vinton',
+      title: 'The Gravekeeper',
+      avatar: 'vinton'
+    }],
+  }},
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/pages/Home.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <section>
         <v-parallax
-          src="/png/paper-dice-crown.png"
+          src="/images/paper-dice-crown.png"
           height="300"
         >
           <v-layout
@@ -78,9 +78,7 @@
               Inventory manager
             </h3>
             <p>
-              Equiping items changes your characters stats automatically. Drag
-              items to other characters, or between sheets open on different
-              tabs.
+              Equiping items changes your characters stats automatically.
             </p>
           </v-layout>
         </v-layout>
@@ -117,7 +115,6 @@
         >
           <v-btn
             v-for="btn in [
-              {link: 'https://reddit.com/r/dicecloud', name: 'Reddit'},
               {link: 'https://discord.gg/qEvdfeB', name: 'Discord'},
               {link: 'https://www.patreon.com/dicecloud', name: 'Patreon'},
               {link: 'https://github.com/ThaumRystra/DiceCloud', name: 'Github'},

app/imports/ui/pages/Library.vue

@@ -1,20 +1,15 @@
 <template lang="html">
-  <div
-    class="pa-4 layout column align-center"
-    style="height: calc(100vh - 96px); display: flex;"
-  >
-    <v-card
-      style="height: 100%; width: 100%; max-width: 1800px;"
-    >
-      <library-and-node />
-    </v-card>
-  </div>
+  <single-card-layout>
+    <library-and-node />
+  </single-card-layout>
 </template>
 
 <script>
+  import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue';
 	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
 	export default {
 		components: {
+      SingleCardLayout,
 			LibraryAndNode,
 		},
 	};

app/imports/ui/router.js

@@ -4,6 +4,7 @@ import { acceptInviteToken } from '/imports/api/users/Invites.js';
 
 // Components
 import Home from '/imports/ui/pages/Home.vue';
+import About from '/imports/ui/pages/About.vue';
 import CharacterList from '/imports/ui/pages/CharacterList.vue';
 import Library from '/imports/ui/pages/Library.vue';
 import SingleLibraryPage from '/imports/ui/pages/SingleLibraryPage.vue'
@@ -182,6 +183,14 @@ RouterFactory.configure(factory => {
       meta: {
         title: 'Feedback',
       },
+    },{
+      path: '/about',
+      components: {
+        default: About,
+      },
+      meta: {
+        title: 'About DiceCloud',
+      },
     },{
       path: '/invite/:inviteToken',
       beforeEnter: claimInvite,