Fix #93, Fix #105, Add Mod Secondary Nav Bar, Add featured versions, Remove page transition, Make load bar smaller

2021-02-14 12:02:23 -07:00
parent 4d066a762f
commit 0b613812f7
12 changed files with 100 additions and 83 deletions
--- a/assets/images/utils/report.svg
+++ b/assets/images/utils/report.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
+</svg>
--- a/assets/styles/utils.scss
+++ b/assets/styles/utils.scss
@@ -5,3 +5,5 @@
 .w-100 {
  width: 100%;
 }
+
+html { margin-left: calc(100vw - 100%); }
--- a/components/ModPage.vue
+++ b/components/ModPage.vue
@@ -18,6 +18,23 @@
            <p class="description">
              {{ mod.description }}
            </p>
+            <div class="alt-nav">
+              <p>
+                <nuxt-link to="/mods"> Mods </nuxt-link>
+                >
+                <nuxt-link :to="'/mod/' + (mod.slug ? mod.slug : mod.id)">{{
+                  mod.title
+                }}</nuxt-link>
+                <span v-if="linkBar.length > 0"> ></span>
+                <nuxt-link
+                  v-for="(link, index) in linkBar"
+                  :key="index"
+                  :to="/mod/ + (mod.slug ? mod.slug : mod.id) + '/' + link[1]"
+                  >{{ link[0] }}
+                  <span v-if="index !== linkBar.length - 1"> > </span>
+                </nuxt-link>
+              </p>
+            </div>
          </div>
        </div>
        <Advertisement
@@ -175,7 +192,7 @@
                  v-if="mod.license.url ? mod.license.url : '#'"
                  :href="mod.license.url"
                >
-                  {{ mod.license.name }}</a
+                  {{ mod.license.id.toUpperCase() }}</a
                >
              </p>
            </div>
@@ -205,10 +222,10 @@
            </div>
          </div>
        </div>
-        <div v-if="versions.length > 0" class="section">
+        <div v-if="featuredVersions.length > 0" class="section">
          <h3>Featured Versions</h3>
          <div
-            v-for="version in versions"
+            v-for="version in featuredVersions"
            :key="version.id"
            class="featured-version"
          >
@@ -343,6 +360,12 @@ export default {
        return {}
      },
    },
+    featuredVersions: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
    versions: {
      type: Array,
      default() {
@@ -361,6 +384,12 @@ export default {
        return null
      },
    },
+    linkBar: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
  },
  methods: {
    formatNumber(x) {
@@ -417,9 +446,14 @@ export default {
    }
    .description {
      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
-      height: 100%;
      color: var(--color-text-dark);
    }
+    .alt-nav {
+      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
+      p {
+        margin: 0;
+      }
+    }
  }
 }

@@ -508,6 +542,7 @@ export default {
        width: 1.25rem;
        margin: auto;
      }
+      flex-shrink: 0;
    }
    .info {
      @extend %column;
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -191,16 +191,6 @@ export default {
 </script>

 <style lang="scss">
-.page-enter-active,
-.page-leave-active {
-  transition: ease-in-out 100ms;
-}
-
-.page-enter,
-.page-leave-to {
-  opacity: 0;
-}
-
 .layout {
  background-color: var(--color-bg);
  display: block;
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -175,6 +175,6 @@ export default {
  },
  loading: {
    color: 'green',
-    height: '5px',
+    height: '2px',
  },
 }
--- a/pages/mod/_id/index.vue
+++ b/pages/mod/_id/index.vue
@@ -1,9 +1,10 @@
 <template>
  <ModPage
    :mod="mod"
-    :versions="versions"
+    :featured-versions="featuredVersions"
    :members="members"
    :current-member="currentMember"
+    :link-bar="[['Description', '']]"
  >
    <div
      v-compiled-markdown="mod.body"
@@ -41,14 +42,11 @@ export default {
        mod.body = (await axios.get(mod.body_url)).data
      }

-      const [members, versions] = (
+      const [members, featuredVersions] = (
        await Promise.all([
          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
          axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-              mod.versions
-            )}`,
-            config
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
          ),
        ])
      ).map((it) => it.data)
@@ -74,11 +72,7 @@ export default {

      return {
        mod,
-        versions: versions.sort(
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
+        featuredVersions,
        members,
        currentMember,
      }
--- a/pages/mod/_id/newversion.vue
+++ b/pages/mod/_id/newversion.vue
@@ -1,9 +1,10 @@
 <template>
  <ModPage
    :mod="mod"
-    :versions="versions"
+    :featured-versions="featuredVersions"
    :members="members"
    :current-member="currentMember"
+    :link-bar="[['New Version', 'newversion']]"
  >
    <div class="new-version">
      <div class="controls">
@@ -151,14 +152,16 @@ export default {
        )
      ).data

-      const [members, versions, selectableLoaders, selectableVersions] = (
+      const [
+        members,
+        featuredVersions,
+        selectableLoaders,
+        selectableVersions,
+      ] = (
        await Promise.all([
          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
          axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-              mod.versions
-            )}`,
-            config
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
          ),
          axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
          axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
@@ -186,11 +189,7 @@ export default {

      return {
        mod,
-        versions: versions.sort(
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
+        featuredVersions,
        members,
        selectableLoaders,
        selectableVersions,
--- a/pages/mod/_id/settings.vue
+++ b/pages/mod/_id/settings.vue
@@ -1,9 +1,10 @@
 <template>
  <ModPage
    :mod="mod"
-    :versions="versions"
    :members="members.filter((it) => it.accepted)"
    :current-member="currentMember"
+    :featured-versions="featuredVersions"
+    :link-bar="[['Settings', 'settings']]"
  >
    <div class="section-header columns">
      <h3 class="column-grow-1">General</h3>
@@ -260,17 +261,14 @@ export default {
        )
      ).data

-      const [members, versions] = (
+      const [members, featuredVersions] = (
        await Promise.all([
          axios.get(
            `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
            config
          ),
          axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-              mod.versions
-            )}`,
-            config
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
          ),
        ])
      ).map((it) => it.data)
@@ -298,11 +296,7 @@ export default {

      return {
        mod,
-        versions: versions.sort(
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
+        featuredVersions,
        members,
        currentMember,
      }
--- a/pages/mod/_id/version/_version/edit.vue
+++ b/pages/mod/_id/version/_version/edit.vue
@@ -2,8 +2,14 @@
  <ModPage
    :mod="mod"
    :versions="versions"
+    :featured-versions="featuredVersions"
    :members="members"
    :current-member="currentMember"
+    :link-bar="[
+      ['Versions', 'versions'],
+      [version.name, 'versions/' + version.id],
+      ['Edit Version', 'versions/' + version.id + '/edit'],
+    ]"
  >
    <div class="new-version">
      <div class="controls">
@@ -135,14 +141,18 @@ export default {
        )
      ).data

-      const [members, versions, selectableLoaders, selectableVersions] = (
+      const [
+        members,
+        versions,
+        featuredVersions,
+        selectableLoaders,
+        selectableVersions,
+      ] = (
        await Promise.all([
          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(`https://api.modrinth.com/api/v1/mod/${mod.id}/version`),
          axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-              mod.versions
-            )}`,
-            config
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
          ),
          axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
          axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
@@ -184,11 +194,8 @@ export default {

      return {
        mod,
-        versions: versions.sort(
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
+        versions,
+        featuredVersions,
        members,
        version,
        primaryFile,
--- a/pages/mod/_id/version/_version/index.vue
+++ b/pages/mod/_id/version/_version/index.vue
@@ -4,6 +4,11 @@
    :versions="versions"
    :members="members"
    :current-member="currentMember"
+    :featured-versions="featuredVersions"
+    :link-bar="[
+      ['Versions', 'versions'],
+      [version.name, 'versions/' + version.id],
+    ]"
  >
    <div class="version">
      <div class="version-header">
@@ -150,14 +155,12 @@ export default {
        )
      ).data

-      const [members, versions] = (
+      const [members, versions, featuredVersions] = (
        await Promise.all([
          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(`https://api.modrinth.com/api/v1/mod/${mod.id}/version`),
          axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-              mod.versions
-            )}`,
-            config
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
          ),
        ])
      ).map((it) => it.data)
@@ -197,11 +200,8 @@ export default {

      return {
        mod,
-        versions: versions.sort(
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
+        versions,
+        featuredVersions,
        members,
        version,
        primaryFile,
--- a/pages/mod/_id/versions.vue
+++ b/pages/mod/_id/versions.vue
@@ -2,8 +2,10 @@
  <ModPage
    :mod="mod"
    :versions="versions"
+    :featured-versions="featuredVersions"
    :members="members"
    :current-member="currentMember"
+    :link-bar="[['Versions', 'versions']]"
  >
    <table>
      <thead>
@@ -109,17 +111,13 @@ export default {
        )
      ).data

-      const [members, versions, selectableLoaders, selectableVersions] = (
+      const [members, versions, featuredVersions] = (
        await Promise.all([
          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(`https://api.modrinth.com/api/v1/mod/${mod.id}/version`),
          axios.get(
-            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
-              mod.versions
-            )}`,
-            config
+            `https://api.modrinth.com/api/v1/mod/${mod.id}/version?featured=true`
          ),
-          axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
-          axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
        ])
      ).map((it) => it.data)

@@ -144,14 +142,9 @@ export default {

      return {
        mod,
-        versions: versions.sort(
-          (a, b) =>
-            new Date(b.date_published).getTime() -
-            new Date(a.date_published).getTime()
-        ),
+        versions,
+        featuredVersions,
        members,
-        selectableLoaders,
-        selectableVersions,
        currentMember,
      }
    } catch {
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -107,7 +107,7 @@ export default {

      let mods = []
      res = await axios.get(
-        `https://api.modrinth.com/api/v1/user/${data.params.id}/mods`,
+        `https://api.modrinth.com/api/v1/user/${user.id}/mods`,
        config
      )
      if (res.data) {