feat(home): layout adjustment

merged 'contribute' and 'contact' into 'contribute'; optimized UE on mobile devices in component
`Donate`

package.json

@@ -9,6 +9,8 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
+    "@sentry/browser": "^5.6.2",
+    "@sentry/integrations": "^5.6.1",
     "aos": "^2.3.4",
     "core-js": "^2.6.5",
     "dayjs": "^1.8.15",

src/components/AccountManager.vue

@@ -83,10 +83,10 @@
         </v-card-text>
         <v-card-actions class="mx-2 mb-3">
           <v-btn
-            color="primary"
-            block
             :loading="auth.loading"
             :disabled="auth.username === ''"
+            color="primary"
+            block
             large
             @click="login"
           >

src/components/DataSourceToggle.vue

@@ -64,21 +64,21 @@
     </v-dialog>
     <div class="v-item-group theme--dark v-btn-toggle v-btn-toggle--only-child v-btn-toggle--selected">
       <button
+        :class="{'v-btn--active': dataSource === 'global'}"
         type="button"
         value="global"
         class="v-btn theme--dark"
-        :class="{'v-btn--active': dataSource === 'global'}"
         @click="dataSource = 'global'"
       >
         <div class="v-btn__content">
           {{ $t('dataSourceToggle.all') }}
         </div>
       </button>
       <button
+        :class="{'v-btn--active': dataSource === 'personal'}"
         type="button"
         value="personal"
         class="v-btn theme--dark"
-        :class="{'v-btn--active': dataSource === 'personal'}"
         @click="dataSource = 'personal'"
       >
         <div class="v-btn__content">

src/components/Item.vue

@@ -2,10 +2,10 @@
   <span>
     <v-tooltip
       v-if="!disableTooltip"
+      :open-delay="200"
       bottom
       content-class="elevation-0 transparent"
       lazy
-      :open-delay="200"
     >
       <template v-slot:activator="{ on }">
         <span v-on="on">

src/components/ItemIcon.vue

@@ -11,10 +11,10 @@
       <template v-slot:activator="{ on }">
         <v-icon
           v-show="item.itemId === 'furni'"
-          class="deep-orange"
           :class="furniturePadding"
-          style="border-radius: 50%;"
           :style="furnitureWidth"
+          class="deep-orange"
+          style="border-radius: 50%;"
           v-on="on"
         >mdi-lamp</v-icon>
         <figure
@@ -29,10 +29,10 @@
     <span v-if="disableTooltip">
       <v-icon
         v-show="item.itemId === 'furni'"
-        class="deep-orange"
         :class="furniturePadding"
-        style="border-radius: 50%;"
         :style="furnitureWidth"
+        class="deep-orange"
+        style="border-radius: 50%;"
       >mdi-lamp</v-icon>
       <figure
         v-show="item.itemId !== 'furni'"

src/components/ItemStepper.vue

@@ -47,11 +47,11 @@
           </span>
         </template> -->
       <v-badge
+        :value="quantity > 0"
         right
         bottom
         color="secondary"
         overlap
-        :value="quantity > 0"
         transition="scale-transition"
         origin="top left"
         class="cursor-pointer"
@@ -68,8 +68,8 @@
           <Item
             :item="item"
             :ratio="0.8"
-            disable-link
             :disable-tooltip="true"
+            disable-link
           />
         </div>
       </v-badge>

src/main.js

@@ -10,20 +10,39 @@ import AOS from 'aos'
 import 'aos/dist/aos.css'
 import I18n from "@/i18n"
 
+import * as Sentry from '@sentry/browser';
+import * as Integrations from '@sentry/integrations';
+
+const production = process.env.NODE_ENV === 'production';
+
+if (production) {
+  Sentry.init({
+    dsn: 'https://9636aaa824a744f98a619df0aaabba00@sentry.io/1536764',
+    integrations: [new Integrations.Vue({Vue, attachProps: true})],
+
+    // NOTE: the config below (`logErrors`) controls whether the error will be logged
+    // to the console or not. Considering we are in production, logging
+    // errors to the console is not appropriate (since we are using Sentry).
+    // So I've turned this setting off. If necessary please re-enable it.
+    // More info at: https://docs.sentry.io/platforms/javascript/vue/
+    logErrors: false,
+  });
+}
+
 router.beforeEach(async(to, from, next) => {
   await store.dispatch("fetchData");
   document.title = `${I18n.t(to.meta.i18n)} | ${I18n.t('app.name')}`;
   next();
-})
+});
 
 Vue.use(VueAnalytics, {
-  id: 'UA-XXX-X',
+  id: 'UA-142226262-2',
   // customResourceURL: "https://www.google-analytics.com/analytics.js",
   router,
   debug: {
     // enabled: process.env.NODE_ENV === "development",
     enabled: false,
-    sendHitTask: process.env.NODE_ENV === 'production'
+    sendHitTask: production
   },
   batch: {
     enabled: true, // enable/disable
@@ -32,7 +51,7 @@ Vue.use(VueAnalytics, {
   },
   autoTracking: {
     exception: true,
-    exceptionLogs: process.env.NODE_ENV === "development"
+    exceptionLogs: !production
   }
 });
 

src/views/About/Changelog.vue

@@ -1,7 +1,7 @@
 <template>
   <v-timeline
-    align-top
     :dense="$vuetify.breakpoint.smAndDown"
+    align-top
   >
     <v-timeline-item
       v-for="(log, dateKey) in logs"