Follow page, and edit button consistency (#123)

* WIP: Added base for follow page

* Updated style for moderation page, and added label for unfollow button (not sure about that one)

* Fixed overflow issue, and width of element

* Updated npm to restore the package-lock.json file

assets/styles/components.scss

@@ -309,6 +309,7 @@
 }
 
 .button {
+  //width: max-content;
   margin: auto 0;
   padding: 6px 20px;
   border-radius: var(--size-rounded-control);

components/DashboardPage.vue

@@ -11,6 +11,10 @@
             <NotificationsIcon />
             Notifications
           </nuxt-link>
+          <nuxt-link :to="'/dashboard/follows'" class="tab last">
+            <FollowIcon />
+            Followed Mods
+          </nuxt-link>
           <nuxt-link
             v-if="
               $auth.user.role === 'admin' || $auth.user.role === 'moderator'
@@ -39,6 +43,7 @@ import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 import NotificationsIcon from '~/assets/images/sidebar/notifications.svg?inline'
+import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 
 export default {
   name: 'DashboardPage',
@@ -47,6 +52,7 @@ export default {
     ModerationIcon,
     SettingsIcon,
     NotificationsIcon,
+    FollowIcon,
   },
 }
 </script>

components/ProjectCard.vue

@@ -212,6 +212,7 @@ export default {
   }
   .info {
     @extend %column;
+    flex-grow: 1;
     .top {
       @extend %row;
       flex-wrap: wrap;

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "knossos",
       "version": "1.0.0",
       "dependencies": {
         "@nuxtjs/auth": "^4.9.1",

pages/dashboard/follows.vue

@@ -0,0 +1,111 @@
+<template>
+  <DashboardPage>
+    <div class="section-header">
+      <h3 class="column-grow-1">Followed mods</h3>
+    </div>
+    <ModCard
+      v-for="(mod, index) in mods"
+      :id="mod.id"
+      :key="mod.id"
+      :author="mod.author"
+      :name="mod.title"
+      :description="mod.description"
+      :latest-version="mod.latest_version"
+      :created-at="mod.published"
+      :updated-at="mod.updated"
+      :downloads="mod.downloads.toString()"
+      :icon-url="mod.icon_url"
+      :author-url="mod.author_url"
+      :page-url="mod.page_url"
+      :categories="mod.categories"
+      :edit-mode="true"
+      :is-modrinth="true"
+    >
+      <div class="buttons">
+        <button
+          class="button column unfav-button iconified-button"
+          @click="unfavMod(index)"
+        >
+          <FollowIcon />
+          Unfollow
+        </button>
+      </div>
+    </ModCard>
+  </DashboardPage>
+</template>
+
+<script>
+import axios from 'axios'
+
+import ModCard from '@/components/ProjectCard'
+import DashboardPage from '@/components/DashboardPage'
+import FollowIcon from '~/assets/images/utils/heart.svg?inline'
+
+export default {
+  components: {
+    DashboardPage,
+    ModCard,
+    FollowIcon,
+  },
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local')
+          ? data.$auth.getToken('local')
+          : '',
+      },
+    }
+
+    const res = await axios.get(
+      `https://api.modrinth.com/api/v1/user/${data.$auth.user.id}/follows`,
+      config
+    )
+
+    const mods = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/mods?ids=${JSON.stringify(res.data)}`
+      )
+    ).data
+
+    return {
+      mods,
+    }
+  },
+  methods: {
+    async unfavMod(index) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local')
+            ? this.$auth.getToken('local')
+            : '',
+        },
+      }
+
+      await axios.delete(
+        `https://api.modrinth.com/api/v1/mod/${this.mods[index].id}/follow`,
+        config
+      )
+
+      this.mods.splice(index, 1)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  margin: 0.25rem 2rem 0.25rem 0;
+}
+
+.buttons {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.unfav-button {
+  margin-left: auto;
+  padding: 0.5rem;
+}
+</style>

pages/dashboard/moderation.vue

@@ -22,18 +22,20 @@
       :status="mod.status"
       :is-modrinth="true"
     >
-      <button
-        class="button column approve"
-        @click="changeModStatus(mod.id, 'approved', index)"
-      >
-        Approve
-      </button>
-      <button
-        class="button column reject"
-        @click="changeModStatus(mod.id, 'rejected', index)"
-      >
-        Reject
-      </button>
+      <div class="buttons">
+        <button
+          class="button column approve"
+          @click="changeModStatus(mod.id, 'approved', index)"
+        >
+          Approve
+        </button>
+        <button
+          class="button column reject"
+          @click="changeModStatus(mod.id, 'rejected', index)"
+        >
+          Reject
+        </button>
+      </div>
     </ModCard>
     <div class="section-header">
       <h3 class="column-grow-1">Reports</h3>
@@ -145,7 +147,14 @@ export default {
 
 <style lang="scss" scoped>
 .button {
-  margin: 0.25rem 0;
+  margin: 0 5rem 0.5rem auto;
+}
+
+.buttons {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .report {
@@ -156,6 +165,7 @@ export default {
     display: flex;
     align-items: center;
     flex-direction: row;
+    justify-content: center;
 
     .title {
       font-size: var(--font-size-lg);

pages/dashboard/projects.vue

@@ -26,7 +26,7 @@
       :is-modrinth="true"
     >
       <nuxt-link
-        class="button buttons column"
+        class="button column edit-button"
         :to="'/mod/' + mod.id + '/settings'"
       >
         Settings
@@ -75,6 +75,11 @@ export default {
 .mod-name {
   font-weight: bold;
 }
+
+.edit-button {
+  align-self: flex-end;
+  margin-right: 2rem;
+}
 // .buttonse {
 //   margin-left: 4.5rem;
 //   padding: 0.5rem 2rem 0.5rem 2rem;