From 34ce510fbd8a684b70af8480ca408255d697c623 Mon Sep 17 00:00:00 2001
From: Jai A <jai.a@tuta.io>
Date: Tue, 20 Oct 2020 22:33:49 -0700
Subject: [PATCH] Mod pages base

---
 assets/images/utils/download.svg |   5 +
 assets/images/utils/external.svg |   1 +
 assets/images/utils/info.svg     |   1 +
 assets/images/utils/save.svg     |   1 +
 assets/images/utils/version.svg  |   1 +
 assets/styles/components.scss    |  53 +++++
 assets/styles/global.scss        |   6 +-
 components/ModResult.vue         |  19 +-
 layouts/default.vue              |   1 +
 pages/mod/_id.vue                |  74 ------
 pages/mod/_id/index.vue          | 394 +++++++++++++++++++++++++++++++
 pages/mod/_id/versions.vue       |   0
 pages/mod/create.vue             |   6 +-
 pages/user/_id.vue               |   8 +-
 14 files changed, 474 insertions(+), 96 deletions(-)
 create mode 100644 assets/images/utils/download.svg
 create mode 100644 assets/images/utils/external.svg
 create mode 100644 assets/images/utils/info.svg
 create mode 100644 assets/images/utils/save.svg
 create mode 100644 assets/images/utils/version.svg
 delete mode 100644 pages/mod/_id.vue
 create mode 100644 pages/mod/_id/index.vue
 create mode 100644 pages/mod/_id/versions.vue

diff --git a/assets/images/utils/download.svg b/assets/images/utils/download.svg
new file mode 100644
index 000000000..ea67b61ce
--- /dev/null
+++ b/assets/images/utils/download.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+  <polyline points="7 10 12 15 17 10"></polyline>
+  <line x1="12" y1="15" x2="12" y2="3"></line>
+</svg>
diff --git a/assets/images/utils/external.svg b/assets/images/utils/external.svg
new file mode 100644
index 000000000..0520b0f94
--- /dev/null
+++ b/assets/images/utils/external.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
diff --git a/assets/images/utils/info.svg b/assets/images/utils/info.svg
new file mode 100644
index 000000000..79010d768
--- /dev/null
+++ b/assets/images/utils/info.svg
@@ -0,0 +1 @@
+<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>
diff --git a/assets/images/utils/save.svg b/assets/images/utils/save.svg
new file mode 100644
index 000000000..a7be5d637
--- /dev/null
+++ b/assets/images/utils/save.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
diff --git a/assets/images/utils/version.svg b/assets/images/utils/version.svg
new file mode 100644
index 000000000..92c6a2e61
--- /dev/null
+++ b/assets/images/utils/version.svg
@@ -0,0 +1 @@
+<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="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 6065a199f..76f401d92 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -54,3 +54,56 @@
     color: #675027;
   }
 }
+
+.markdown-body {
+  p {
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  h1, h2 {
+    padding: 10px 0 5px;
+    border-bottom: 1px solid var(--color-grey-3);
+  }
+
+  blockquote {
+    margin: 15px 0;
+    padding: 0 1em;
+    color: var(--color-grey-5);
+    border-left: .25em solid var(--color-grey-3);
+  }
+
+  a {
+    color: var(--color-link);
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  pre {
+    padding: 15px 10px;
+    border-radius: var(--size-rounded-sm);
+    background-color: var(--color-grey-1);
+
+    code {
+      font-size: 80%;
+      padding: 0;
+      border-radius: 0;
+    }
+  }
+
+  code {
+    padding: .2em .4em;
+    font-size: 60%;
+    border-radius: var(--size-rounded-sm);
+    background-color: var(--color-grey-1)
+  }
+
+  hr {
+    margin: 20px 0;
+    color: var(--color-grey-2);
+  }
+}
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 8f645020c..e9874032c 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -15,6 +15,8 @@
   --color-grey-5: #718096;
   --color-grey-6: #4a5568;
   --color-grey-7: #2d3748;
+
+  --color-link: #2089ff;
 }
 
 .dark-mode {
@@ -29,11 +31,13 @@
   --color-grey-7: #f7faf0;
   --color-grey-6: #f7f2eb;
   --color-grey-5: #ede9e4;
-  --color-grey-4: #dadcd5;
+  --color-grey-4: #b3b3b3;
   --color-grey-3: #797b76;
   --color-grey-2: #3b3937;
   --color-grey-1: #3a3b38;
   --color-grey-0: #1d1e1b;
+
+  --color-link: #4793d9;
 }
 
 body {
diff --git a/components/ModResult.vue b/components/ModResult.vue
index 17d1181b8..b4791f7f0 100644
--- a/components/ModResult.vue
+++ b/components/ModResult.vue
@@ -18,20 +18,7 @@
     </p>
     <div class="column-grow-1 columns result-infos">
       <div class="result-image columns">
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="#3cdb36"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-          <polyline points="7 10 12 15 17 10"></polyline>
-          <line x1="12" y1="15" x2="12" y2="3"></line>
-        </svg>
+        <DownloadIcon stroke="#3cdb36" />
         <p>{{ formatNumber(downloads) }}</p>
       </div>
       <div class="result-image columns">
@@ -133,6 +120,7 @@
 
 <script>
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
+import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 
 import TechCategory from '~/assets/images/categories/tech.svg?inline'
 import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
@@ -168,6 +156,7 @@ export default {
     ForgeLoader,
     FabricLoader,
     CalendarIcon,
+    DownloadIcon,
   },
   props: {
     id: {
@@ -441,7 +430,7 @@ export default {
 // Larger screens
 @media screen and (min-width: 1375px) {
   .result {
-    margin: 5px 0 5px 15px;
+    margin: 5px 0;
     grid-column: 1;
     grid-template-columns: 110px auto;
   }
diff --git a/layouts/default.vue b/layouts/default.vue
index 455133399..8027567a5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -480,6 +480,7 @@ export default {
               &:hover,
               &:focus {
                 background-color: var(--color-brand);
+                color: #fff;
               }
             }
           }
diff --git a/pages/mod/_id.vue b/pages/mod/_id.vue
deleted file mode 100644
index 4543e284d..000000000
--- a/pages/mod/_id.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="columns">
-    <div class="content column-grow-5">
-      <div class="mod-header">
-        <img
-          :src="
-            mod.icon_url
-              ? mod.icon_url
-              : 'https://cdn.modrinth.com/placeholder.png'
-          "
-          alt="mod-icon"
-        />
-      </div>
-      <div class="markdown-body" v-html="modBody"></div>
-    </div>
-    <section class="mod-info">
-      <h3>Mod Name</h3>
-    </section>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-import xss from 'xss'
-import marked from 'marked'
-
-export default {
-  auth: false,
-  /*
-  {                                                                                                                                                                                                                                                                                                                                                                           13:42:51
-  id: 'kN7Mtmyo',
-  team: 'eiP0Hzmw',
-  title: 'Gravestones',
-  description: 'A gravestones mod for fabric with tons ' +
-    'of config options, an API, and more!',
-  body_url: 'https://cdn.modrinth.com/file/modrinth/data/kN7Mtmyo/body.md',
-  published: '2020-10-16T21:17:54.858156Z',
-  updated: '2020-10-16T21:17:50.982804Z',
-  status: 'processing',
-  downloads: 0,
-  categories: [
-    'adventure',
-    'utility',
-    'library'
-  ],
-  versions: [
-    'XUky61nw'
-  ],
-  icon_url: 'https://cdn.modrinth.com/file/modrinth/mods/icons/kN7Mtmyo/gravestones.png',
-  issues_url: null,
-  source_url: null,
-  wiki_url: null
-}
-
-   */
-  async asyncData(data) {
-    let res = await axios.get(
-      `https://api.modrinth.com/api/v1/mod/${data.params.id}`
-    )
-    const mod = res.data
-
-    res = await axios.get(mod.body_url)
-    const body = xss(marked(res.data))
-
-    return {
-      mod,
-      modBody: body,
-    }
-  },
-}
-</script>
-
-<style lang="scss"></style>
diff --git a/pages/mod/_id/index.vue b/pages/mod/_id/index.vue
new file mode 100644
index 000000000..d590f36cd
--- /dev/null
+++ b/pages/mod/_id/index.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="columns">
+    <div class="content column-grow-5">
+      <div class="mod-header columns">
+        <img
+          :src="
+            mod.icon_url
+              ? mod.icon_url
+              : 'https://cdn.modrinth.com/placeholder.png'
+          "
+          alt="mod-icon"
+        />
+        <div class="mod-header-text">
+          <div class="columns title">
+            <h2>{{ mod.title }}</h2>
+            <p>by Author</p>
+          </div>
+          <p>{{ mod.description }}</p>
+        </div>
+      </div>
+      <div class="mod-navigation">
+        <nuxt-link :to="'/mod/' + mod.id">
+          <InfoIcon />
+          Description
+        </nuxt-link>
+        <nuxt-link :to="'/mod/' + mod.id + '/versions'">
+          <VersionIcon />
+          Versions
+        </nuxt-link>
+        <nuxt-link :to="'/mod/' + mod.id + '/settings'">
+          <SettingsIcon />
+          Settings
+        </nuxt-link>
+        <a v-if="mod.wiki_url" :href="mod.wiki_url">
+          <ExternalIcon />
+          Wiki
+        </a>
+        <a v-if="mod.issues_url" :href="mod.issues_url">
+          <ExternalIcon />
+          Issues
+        </a>
+        <a v-if="mod.source_url" :href="mod.source_url">
+          <ExternalIcon />
+          Source Code
+        </a>
+        <div class="filler" />
+      </div>
+      <div class="markdown-body" v-html="modBody"></div>
+    </div>
+    <section class="mod-info">
+      <div class="mod-stats">
+        <h3>Info</h3>
+        <p>{{ mod.downloads }} Downloads</p>
+        <p>Created {{ $dayjs(mod.published).fromNow() }}</p>
+        <p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
+      </div>
+      <div>
+        <h3>Members</h3>
+        <div class="team-member columns">
+          <img
+            src="https://cdn.modrinth.com/placeholder.png"
+            alt="profile-picture"
+          />
+          <div class="member-info">
+            <h4>Username</h4>
+            <p>Role</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3>Featured Versions</h3>
+        <div
+          v-for="version in versions"
+          :key="version.id"
+          class="featured-version columns"
+        >
+          <div class="version-info">
+            <div class="columns">
+              <h4>{{ version.name }}</h4>
+              <p v-if="version.version_type === 'release'" class="badge green">
+                Release
+              </p>
+              <p v-if="version.version_type === 'beta'" class="badge yellow">
+                Beta
+              </p>
+              <p v-if="version.version_type === 'alpha'" class="badge red">
+                Alpha
+              </p>
+            </div>
+            <div class="columns info-2">
+              <p class="version-number">
+                {{ version.version_number.substring(0, 5) }}
+              </p>
+              <FabricIcon
+                v-if="version.loaders.includes('fabric')"
+                stroke="#AC6C3A"
+              />
+              <ForgeIcon
+                v-if="version.loaders.includes('forge')"
+                stroke="#8B81E6"
+              />
+              <p v-if="version.game_versions.length > 0">
+                {{ version.game_versions[0].substring(0, 11) }}
+              </p>
+            </div>
+          </div>
+          <nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
+            <DownloadIcon />
+          </nuxt-link>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+import xss from 'xss'
+import marked from 'marked'
+
+import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import ExternalIcon from '~/assets/images/utils/external.svg?inline'
+import InfoIcon from '~/assets/images/utils/info.svg?inline'
+import VersionIcon from '~/assets/images/utils/version.svg?inline'
+import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
+
+import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
+import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
+
+export default {
+  auth: false,
+  components: {
+    ExternalIcon,
+    InfoIcon,
+    VersionIcon,
+    SettingsIcon,
+    ForgeIcon,
+    FabricIcon,
+    DownloadIcon,
+  },
+  /*
+{
+  "id": "HKjRLvnb",
+  "mod_id": "AmPXo0e2",
+  "author_id": "MpxzqsyW",
+  "name": "Initial Release",
+  "version_number": "v1.5",
+  "changelog_url": "https://cdn.modrinth.com/data/AmPXo0e2/changelogs/HKjRLvnb/body.md",
+  "date_published": "2020-10-19T04:11:03.377895Z",
+  "downloads": 0,
+  "version_type": "release",
+  "files": [],
+  "dependencies": [],
+  "game_versions": [
+    "1.16.3",
+    "1.16.2"
+  ],
+  "loaders": [
+    "fabric"
+  ]
+}
+  {                                                                                                                                                                                                                                                                                                                                                                           13:42:51
+  id: 'kN7Mtmyo',
+  team: 'eiP0Hzmw',
+  title: 'Gravestones',
+  description: 'A gravestones mod for fabric with tons ' +
+    'of config options, an API, and more!',
+  body_url: 'https://cdn.modrinth.com/file/modrinth/data/kN7Mtmyo/body.md',
+  published: '2020-10-16T21:17:54.858156Z',
+  updated: '2020-10-16T21:17:50.982804Z',
+  status: 'processing',
+  downloads: 0,
+  categories: [
+    'adventure',
+    'utility',
+    'library'
+  ],
+  versions: [
+    'XUky61nw'
+  ],
+  icon_url: 'https://cdn.modrinth.com/file/modrinth/mods/icons/kN7Mtmyo/gravestones.png',
+  issues_url: null,
+  source_url: null,
+  wiki_url: null
+}
+   */
+  async asyncData(data) {
+    let res = await axios.get(
+      `https://api.modrinth.com/api/v1/mod/${data.params.id}`
+    )
+    const mod = res.data
+
+    res = await axios.get(mod.body_url)
+    const body = xss(marked(res.data))
+
+    const versions = []
+
+    for (const version of mod.versions) {
+      res = await axios.get(
+        `https://api.modrinth.com/api/v1/version/${version}`
+      )
+
+      versions.push(res.data)
+    }
+
+    return {
+      mod,
+      modBody: body,
+      versions,
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.mod-header {
+  align-items: center;
+
+  img {
+    border-radius: var(--size-rounded-md);
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+  }
+
+  .mod-header-text {
+    margin-left: 15px;
+
+    .title {
+      align-items: end;
+
+      h2 {
+        margin: 0;
+      }
+
+      p {
+        margin: 0;
+        padding: 0 0 2px 5px;
+      }
+    }
+  }
+}
+
+.mod-navigation {
+  display: flex;
+  margin-top: 20px;
+  overflow-y: auto;
+
+  a {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 2px solid var(--color-grey-2);
+
+    svg {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &:focus {
+      border-bottom: 2px solid var(--color-grey-3);
+    }
+
+    &.nuxt-link-active {
+      border-bottom: 2px solid var(--color-brand);
+    }
+  }
+
+  .filler {
+    flex-grow: 1;
+    border-bottom: 2px solid var(--color-grey-2);
+  }
+}
+
+.markdown-body {
+  border-radius: var(--size-rounded-sm);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding: 20px;
+  box-shadow: 0 2px 3px 1px var(--color-grey-2);
+  background: var(--color-bg);
+}
+
+.mod-info {
+  top: 1rem;
+  height: calc(100vh - 2rem);
+  position: sticky;
+  min-width: 270px;
+  max-width: 270px;
+  margin: 1rem;
+  padding: 0 0.75rem 0 1rem;
+  overflow-y: auto;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-grey-2);
+  border-radius: var(--size-rounded-sm);
+
+  h3 {
+    color: #718096;
+    font-size: 0.8rem;
+    letter-spacing: 0.02rem;
+    margin: 1.5rem 0 0.5rem 0;
+    text-transform: uppercase;
+  }
+
+  .mod-stats {
+    margin-left: 5px;
+    p {
+      color: var(--color-grey-4);
+      margin: 3px;
+    }
+  }
+
+  .team-member {
+    margin-left: 5px;
+    border: 1px solid var(--color-grey-1);
+    border-radius: var(--size-rounded-sm);
+
+    img {
+      border-radius: var(--size-rounded-sm);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      height: 50px;
+      width: 50px;
+    }
+    .member-info {
+      margin: auto 20px;
+      h4 {
+        font-weight: normal;
+        margin: 0;
+      }
+      p {
+        color: var(--color-grey-4);
+        font-weight: lighter;
+        font-size: 12pt;
+        margin: 0;
+      }
+    }
+  }
+
+  .featured-version {
+    margin-left: 5px;
+    border: 1px solid var(--color-grey-1);
+    border-radius: var(--size-rounded-sm);
+
+    .version-info {
+      padding: 5px 10px;
+      h4 {
+        font-weight: normal;
+        margin: 0 10px 0 0;
+      }
+      .badge {
+        margin: 0;
+        display: inline-block;
+      }
+      .info-2 {
+        align-items: center;
+
+        p {
+          color: var(--color-grey-4);
+          font-weight: lighter;
+          margin: 0 10px 0 0;
+        }
+
+        svg {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    a {
+      display: table-cell;
+      margin-left: auto;
+      width: 40px;
+      height: 60px;
+      background-color: var(--color-grey-1);
+      color: var(--color-grey-3);
+
+      svg {
+        margin-top: 15px;
+        height: 30px;
+        width: 40px;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: var(--color-grey-3);
+        color: var(--color-grey-4);
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/pages/mod/create.vue b/pages/mod/create.vue
index 5020ee1d7..414ccd2af 100644
--- a/pages/mod/create.vue
+++ b/pages/mod/create.vue
@@ -114,7 +114,7 @@
               <TrashIcon />
             </button>
             <button title="Exit Version" @click="currentVersionIndex = -1">
-              <ExitIcon />
+              <SaveIcon />
             </button>
           </div>
         </div>
@@ -286,7 +286,7 @@ import Multiselect from 'vue-multiselect'
 import xss from 'xss'
 import marked from 'marked'
 
-import ExitIcon from '~/assets/images/utils/exit.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
@@ -297,7 +297,7 @@ export default {
     TrashIcon,
     EditIcon,
     PlusIcon,
-    ExitIcon,
+    SaveIcon,
   },
   async asyncData() {
     let res = await axios.get(`https://api.modrinth.com/api/v1/tag/category`)
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index e041bbed6..f6999c7d6 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -5,7 +5,7 @@
       <div class="info">
         <h1>{{ user.username }}</h1>
         <p class="joined-text">Joined {{ $dayjs(user.created).fromNow() }}</p>
-        <p class="bio" v-if="user.bio">{{ user.bio }}</p>
+        <p v-if="user.bio" class="bio">{{ user.bio }}</p>
         <p v-if="user.role === 'admin'" class="badge red">Admin</p>
         <p v-if="user.role === 'moderator'" class="badge yellow">Moderator</p>
         <p v-if="user.role === 'developer'" class="badge green">Developer</p>
@@ -83,7 +83,9 @@ export default {
   }
 
   .info {
-    margin-left: 15px;
+    @media screen and (min-width: 900px) {
+      margin-left: 15px;
+    }
 
     h1 {
       margin-bottom: 0;
@@ -91,7 +93,7 @@ export default {
 
     .joined-text {
       margin-top: 5px;
-      color: var(--color-grey-3);
+      color: var(--color-grey-4);
     }
 
     .bio {