Fix scaling issue

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>Nov 4, 2019</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>
+          <td>{{ mod.downloads }}</td>
+          <td>{{ $dayjs(mod.published).format('YYYY-MM-DD') }}</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="/mods" no-prefetch>Mods</nuxt-link>
-        <nuxt-link to="/modpacks" no-prefetch>Packs</nuxt-link>
-        <nuxt-link to="/about" no-prefetch>About</nuxt-link>
+        <nuxt-link to="/">Home</nuxt-link>
+        <nuxt-link to="/mods">Mods</nuxt-link>
+        <nuxt-link to="/modpacks">Packs</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}`,