Fix scaling issue

components/InputLabel.vue

@@ -1,173 +0,0 @@
-<template>
-  <div class="columns label">
-    <p>{{ label }}</p>
-    <button :v-tooltip="tooltip">
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <circle cx="12" cy="12" r="10"></circle>
-        <line x1="12" y1="16" x2="12" y2="12"></line>
-        <line x1="12" y1="8" x2="12.01" y2="8"></line>
-      </svg>
-    </button>
-    <svg
-      v-if="required"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="12" cy="12" r="10"></circle>
-      <line x1="12" y1="8" x2="12" y2="12"></line>
-      <line x1="12" y1="16" x2="12.01" y2="16"></line>
-    </svg>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'InputLabel',
-  props: {
-    label: {
-      type: String,
-      default: 'Label',
-    },
-    tooltip: {
-      type: String,
-      default: null,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.label {
-  color: var(--color-text);
-  height: 24px;
-  font-size: 24px;
-  p {
-    margin: 0;
-  }
-}
-
-.tooltip {
-  display: block !important;
-  z-index: 10000;
-
-  .tooltip-inner {
-    background: black;
-    color: white;
-    border-radius: 16px;
-    padding: 5px 10px 4px;
-  }
-
-  .tooltip-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: black;
-    z-index: 1;
-  }
-
-  &[x-placement^='top'] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^='bottom'] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^='right'] {
-    margin-left: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^='left'] {
-    margin-right: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &.popover {
-    $color: #f9f9f9;
-
-    .popover-inner {
-      background: $color;
-      color: black;
-      padding: 24px;
-      border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, 0.1);
-    }
-
-    .popover-arrow {
-      border-color: $color;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.15s, visibility 0.15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.15s;
-  }
-}
-</style>

components/ModResult.vue

@@ -45,7 +45,7 @@
             d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
           />
         </svg>
-        <p>{{ $moment(createdAt).fromNow() }}</p>
+        <p>{{ $dayjs(createdAt).fromNow() }}</p>
       </div>
       <div class="result-image columns">
         <svg
@@ -63,7 +63,7 @@
             d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
           ></path>
         </svg>
-        <p>{{ $moment(updatedAt).fromNow() }}</p>
+        <p>{{ $dayjs(updatedAt).fromNow() }}</p>
       </div>
       <div class="result-image columns">
         <svg

nuxt.config.js

@@ -1,9 +1,4 @@
 export default {
-  /*
-   ** Nuxt rendering mode
-   ** See https://nuxtjs.org/api/configuration-mode
-   */
-  mode: 'universal',
   /*
    ** Nuxt target
    ** See https://nuxtjs.org/api/configuration-target
@@ -126,7 +121,6 @@ export default {
     '@nuxtjs/eslint-module',
     '@nuxtjs/svg',
     '@nuxtjs/color-mode',
-    '@nuxtjs/moment',
     'nuxt-ackee',
   ],
   /*
@@ -134,6 +128,7 @@ export default {
    */
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
+    '@nuxtjs/dayjs',
     '@nuxtjs/axios',
     '@nuxtjs/auth',
     '@nuxtjs/markdownit',
@@ -177,11 +172,10 @@ export default {
       },
     },
   },
-  moment: {
+  dayjs: {
-    defaultTimezone: 'America/Los_Angeles',
+    locales: ['en'],
-    timezone: true,
+    defaultLocale: 'en',
-    startYear: 2010,
+    plugins: ['relativeTime'],
-    endYear: 2030,
   },
   markdownit: {
     injected: true,

package-lock.json

@@ -2002,6 +2002,15 @@
         }
       }
     },
+    "@nuxtjs/dayjs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/dayjs/-/dayjs-1.2.0.tgz",
+      "integrity": "sha512-3SmiHKV8yaMAKII9pj7iYdboH8Xi9ekIXb21JaAQV+qIpLnb107w1EAO1y9Mylc0VVRA0GvxCHr9crPZ7cuuZw==",
+      "requires": {
+        "consola": "^2.3.2",
+        "dayjs": "^1.8.9"
+      }
+    },
     "@nuxtjs/eslint-config": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/eslint-config/-/eslint-config-3.1.0.tgz",
@@ -2049,18 +2058,6 @@
         "markdown-it": "^8.3.1"
       }
     },
-    "@nuxtjs/moment": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/moment/-/moment-1.6.1.tgz",
-      "integrity": "sha512-Mo2/3NQB0XryMQuNCTVnAclrDvt9I9sr6dwVm56KhYCoiWTKgQ78tDV9tmrxw7lahw1IBwyPGhw+3pwkM4phAA==",
-      "dev": true,
-      "requires": {
-        "moment": "^2.25.3",
-        "moment-locales-webpack-plugin": "^1.2.0",
-        "moment-timezone": "^0.5.28",
-        "moment-timezone-data-webpack-plugin": "^1.3.0"
-      }
-    },
     "@nuxtjs/proxy": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.0.1.tgz",
@@ -4614,6 +4611,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.1.tgz",
+      "integrity": "sha512-01NCTBg8cuMJG1OQc6PR7T66+AFYiPwgDvdJmvJBn29NGzIG+DIFxPLNjHzwz3cpFIvG+NcwIjP9hSaPVoOaDg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -7721,12 +7723,6 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
-    "lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-      "dev": true
-    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -8249,111 +8245,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "dev": true
-    },
-    "moment-locales-webpack-plugin": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
-      "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
-      "dev": true,
-      "requires": {
-        "lodash.difference": "^4.5.0"
-      }
-    },
-    "moment-timezone": {
-      "version": "0.5.31",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.31.tgz",
-      "integrity": "sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==",
-      "dev": true,
-      "requires": {
-        "moment": ">= 2.9.0"
-      }
-    },
-    "moment-timezone-data-webpack-plugin": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.3.0.tgz",
-      "integrity": "sha512-0V0xnHZpdHLsSerIQ2yNEPBC3uJWfU/zNT3nB0PO+tjmGHuNeUWqNDiw7ZpLo54uER6/OAE75EJ7ThmlwkGuZw==",
-      "dev": true,
-      "requires": {
-        "find-cache-dir": "^3.0.0",
-        "make-dir": "^3.0.0"
-      },
-      "dependencies": {
-        "find-cache-dir": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^3.0.2",
-            "pkg-dir": "^4.1.0"
-          }
-        },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-          "dev": true,
-          "requires": {
-            "semver": "^6.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxtjs/auth": "^4.9.1",
     "@nuxtjs/axios": "^5.12.2",
+    "@nuxtjs/dayjs": "^1.2.0",
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
     "nuxt": "^2.14.5",
@@ -24,7 +25,6 @@
     "@nuxtjs/eslint-config": "^3.1.0",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@nuxtjs/markdownit": "^1.2.10",
-    "@nuxtjs/moment": "^1.6.1",
     "@nuxtjs/svg": "^0.1.12",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.9.0",

pages/dashboard/projects.vue

@@ -20,31 +20,42 @@
         </tr>
       </thead>
       <tbody>
-        <tr>
+        <tr v-for="mod in mods" :key="mod.id">
           <td>
-            <img class="rounded-md" src="~/assets/images/aof-mini.png" />
+            <img class="rounded-md" :src="mod.icon_url" />
           </td>
-          <td>Finite Water</td>
+          <td>{{ mod.title }}</td>
           <td>Owner</td>
           <td><span class="badge green">Active</span></td>
-          <td>274</td>
+          <td>{{ mod.downloads }}</td>
-          <td>Nov 4, 2019</td>
+          <td>{{ $dayjs(mod.published).format('YYYY-MM-DD') }}</td>
-        </tr>
-        <tr>
-          <td>
-            <img class="rounded-md" src="~/assets/images/aof-mini.png" />
-          </td>
-          <td>Vivatech</td>
-          <td>Contributor</td>
-          <td><span class="badge green">Active</span></td>
-          <td>2,381</td>
-          <td>Jul 31, 2019</td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
 
+<script>
+import axios from 'axios'
+
+export default {
+  async fetch() {
+    try {
+      const res = await axios.get(
+        `https://api.modrinth.com/api/v1/${this.$auth.user.id}/mods`
+      )
+
+      this.mods = res.data
+    } catch (err) {}
+  },
+  data() {
+    return {
+      mods: [],
+    }
+  },
+}
+</script>
+
 <style lang="scss">
 .section-header {
   display: flex;

pages/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <header class="columns">
-      <nuxt-link to="/" no-prefetch
+      <nuxt-link to="/"
         ><img class="logo" src="~/assets/images/logo.svg" alt="logo"
       /></nuxt-link>
       <div class="links">
-        <nuxt-link to="/" no-prefetch>Home</nuxt-link>
+        <nuxt-link to="/">Home</nuxt-link>
-        <nuxt-link to="/mods" no-prefetch>Mods</nuxt-link>
+        <nuxt-link to="/mods">Mods</nuxt-link>
-        <nuxt-link to="/modpacks" no-prefetch>Packs</nuxt-link>
+        <nuxt-link to="/modpacks">Packs</nuxt-link>
-        <nuxt-link to="/about" no-prefetch>About</nuxt-link>
+        <nuxt-link to="/about">About</nuxt-link>
       </div>
     </header>
     <div class="main-hero columns">
@@ -231,7 +231,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .left,
 .right {
   width: 50%;

pages/mod/create.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="content">
     <h2>Create Mod</h2>
-    <InputLabel
-      label="Name"
-      tooltip="The name of the mod"
-      :required="true"
-    ></InputLabel>
     <input v-model="name" type="text" />
     <input v-model="namespace" type="text" />
     <input v-model="description" type="text" />
@@ -21,10 +16,8 @@
 
 <script>
 import axios from 'axios'
-import InputLabel from '@/components/InputLabel'
 
 export default {
-  components: { InputLabel },
   data() {
     return {
       name: '',
@@ -89,7 +82,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 input {
   width: 200px;
   margin-right: auto;

pages/mods.vue

@@ -377,6 +377,8 @@ export default {
       await this.onSearchChange(newPageNumber)
     },
     async onSearchChange(newPageNumber) {
+      if (this.query === null) return
+
       try {
         const params = [
           `limit=${this.maxResults}`,