Add reporting views/menu; link to mobile app

also give mobile About page some proper content

mobile/src/App.vue

@@ -6,7 +6,7 @@
         <router-link to="/about">{{ appsettings.appTitle}} {{ appsettings.version }}</router-link>
         <div>
           <br />
-          <a href="/">View Desktop Site</a>
+          <a href="/">View Desktop App</a>
         </div>
       </template>
     </byjove-app>

mobile/src/views/About.vue

@@ -1,5 +1,44 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>About {{ appsettings.appTitle }}</h1>
+    <h2>{{ appsettings.appTitle }} {{ appsettings.version }}</h2>
+    <p>{{ appsettings.systemTitle }} {{ libVersions.system }}</p>
+    <p>rattail {{ libVersions.rattail }}</p>
+    <p>Tailbone {{ libVersions.Tailbone }}</p>
+    <br />
+    <p>Please see <a href="https://rattailproject.org/" target="_blank">rattailproject.org</a> for more info.</p>
   </div>
 </template>
+
+<script>
+import appsettings from '@/appsettings'
+
+export default {
+    name: 'About',
+    data() {
+        return {
+            appsettings: appsettings,
+            libVersions: {},
+        }
+    },
+    mounted: function() {
+        this.$http.get('/api/about').then(response => {
+            this.libVersions = response.data.packages
+            this.libVersions.system = response.data.project_version
+        })
+    }
+}
+</script>
+
+<style scoped>
+h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+h2 {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+</style>