Fix #9, Fix #42, Fix #48, Fix #95, Fix #96, Fix #97, Fix #99, Fix #119. Fix 120

2021-03-26 22:07:15 -07:00
parent 98df1f5312
commit e6ece10716
13 changed files with 221 additions and 104 deletions
--- a/assets/images/utils/exit.svg
+++ b/assets/images/utils/exit.svg
@@ -1 +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="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -362,6 +362,10 @@
    &:active,
    &:hover {
      background: var(--color-button-bg-hover);
+
+      .multiselect__spinner {
+        background: var(--color-button-bg-hover);
+      }
    }
    .multiselect__single {
      background: transparent;
@@ -393,4 +397,13 @@
      }
    }
  }
+  .multiselect__spinner {
+    background: var(--color-dropdown-bg);
+
+    &:active,
+    &:hover {
+      background: var(--color-button-bg-hover);
+    }
+  }
+
 }
--- a/assets/styles/injected.scss
+++ b/assets/styles/injected.scss
@@ -39,8 +39,7 @@
  color: var(--color-text);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02rem;
-  margin: 0;
-  margin-bottom: 0.25em;
+  margin: 0 0 0.25em;
  text-transform: uppercase;
 }

--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="layout">
-    <header>
+    <header class="site-header">
      <section class="navbar columns">
        <section class="logo column">
          <NuxtLink to="/">
@@ -160,9 +160,6 @@ export default {
      return `${this.userUrl}/teams`
    },
  },
-  mounted() {
-    this.themeAds()
-  },
  methods: {
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen
@@ -177,14 +174,6 @@ export default {
    changeTheme() {
      this.$colorMode.preference =
        this.$colorMode.value === 'dark' ? 'light' : 'dark'
-
-      this.themeAds()
-    },
-    themeAds() {
-      const elements = document.getElementsByClassName('ethical-ad')
-      for (const elem of elements) {
-        elem.className = 'ethical-ad loaded ' + this.$colorMode.preference
-      }
    },
  },
 }
@@ -196,7 +185,7 @@ export default {
  display: block;
  height: 100vh;

-  header {
+  .site-header {
    height: var(--size-navbar-height);
    background-color: var(--color-raised-bg);
    max-width: 100vw;
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -38,6 +38,11 @@ export default {
        name: 'og:description',
        content: 'An open source modding platform',
      },
+      {
+        hid: 'og:title',
+        name: 'og:title',
+        content: 'Modrinth',
+      },
      { hid: 'og:type', name: 'og:type', content: 'website' },
      { hid: 'og:url', name: 'og:url', content: 'https://www.modrinth.com' },
      {
--- a/pages/dashboard/notifications.vue
+++ b/pages/dashboard/notifications.vue
@@ -101,7 +101,6 @@ export default {
          `https://api.modrinth.com/api/v1/notification/${notification.id}`,
          config
        )
-        await this.$router.replace('/' + notification.link)
      } catch (err) {
        this.$notify({
          group: 'main',
--- a/pages/dashboard/settings.vue
+++ b/pages/dashboard/settings.vue
@@ -129,14 +129,6 @@ export default {
    changeTheme() {
      this.$colorMode.preference =
        this.$colorMode.value === 'dark' ? 'light' : 'dark'
-
-      this.themeAds()
-    },
-    themeAds() {
-      const elements = document.getElementsByClassName('ethical-ad')
-      for (const elem of elements) {
-        elem.className = 'ethical-ad loaded ' + this.$colorMode.preference
-      }
    },
    gotoRevoke() {
      this.$router.replace('/dashboard/misc/revoke-token')
@@ -172,6 +164,8 @@ export default {
          data,
          config
        )
+
+        await this.$auth.fetchUser()
      } catch (err) {
        this.$notify({
          group: 'main',
--- a/pages/mod/_id/edit.vue
+++ b/pages/mod/_id/edit.vue
@@ -2,7 +2,7 @@
  <div class="page-container">
    <div class="page-contents">
      <header class="columns">
-        <h2 class="column-grow-1">Edit Mod</h2>
+        <h3 class="column-grow-1">Edit Mod</h3>
        <nuxt-link
          :to="'/mod/' + (mod.slug ? mod.slug : mod.id)"
          class="button column"
@@ -133,8 +133,6 @@
            <Multiselect
              v-model="clientSideType"
              placeholder="Select one"
-              track-by="id"
-              label="label"
              :options="sideTypes"
              :searchable="false"
              :close-on-select="true"
@@ -147,8 +145,6 @@
            <Multiselect
              v-model="serverSideType"
              placeholder="Select one"
-              track-by="id"
-              label="label"
              :options="sideTypes"
              :searchable="false"
              :close-on-select="true"
@@ -373,14 +369,8 @@ export default {

      return {
        mod,
-        clientSideType: {
-          label: mod.client_side,
-          id: mod.client_side,
-        },
-        serverSideType: {
-          label: mod.server_side,
-          id: mod.server_side,
-        },
+        clientSideType: mod.client_side.charAt(0) + mod.client_side.slice(1),
+        serverSideType: mod.server_side.charAt(0) + mod.server_side.slice(1),
        availableCategories,
        availableLoaders,
        availableGameVersions,
@@ -410,11 +400,7 @@ export default {
      icon: null,
      iconChanged: false,

-      sideTypes: [
-        { label: 'Optional', id: 'optional' },
-        { label: 'Required', id: 'required' },
-        { label: 'Unsupported', id: 'unsupported' },
-      ],
+      sideTypes: ['Required', 'Optional', 'Unsupported'],
    }
  },
  watch: {
@@ -459,8 +445,8 @@ export default {
          license_url: this.license_url,
          discord_url: this.mod.discord_url,
          license_id: this.license.short,
-          client_side: this.clientSideType.id,
-          server_side: this.serverSideType.id,
+          client_side: this.clientSideType.toLowerCase(),
+          server_side: this.serverSideType.toLowerCase(),
          slug: this.mod.slug,
          license: this.license.short,
          donation_urls: this.donationPlatforms.map((it, index) => {
@@ -591,7 +577,7 @@ header {
  grid-area: header;
  padding: var(--spacing-card-md) var(--spacing-card-lg);

-  h2 {
+  h3 {
    margin: auto 0;
    color: var(--color-text-dark);
    font-weight: var(--font-weight-extrabold);
--- a/pages/mod/_id/versions.vue
+++ b/pages/mod/_id/versions.vue
@@ -46,10 +46,21 @@
                version.id
              "
            >
-              {{ version.name }}
+              {{ version.name ? version.name : version.version_number }}
+            </nuxt-link>
+          </td>
+          <td>
+            <nuxt-link
+              :to="
+                '/mod/' +
+                (mod.slug ? mod.slug : mod.id) +
+                '/version/' +
+                version.id
+              "
+            >
+              {{ version.version_number }}
            </nuxt-link>
          </td>
-          <td>{{ version.version_number }}</td>
          <td>
            <FabricIcon v-if="version.loaders.includes('fabric')" />
            <ForgeIcon v-if="version.loaders.includes('forge')" />
--- a/pages/mod/create.vue
+++ b/pages/mod/create.vue
@@ -2,7 +2,7 @@
  <div class="page-container">
    <div class="page-contents">
      <header class="columns">
-        <h2 class="column-grow-1">Create a mod</h2>
+        <h3 class="column-grow-1">Create a mod</h3>
        <button
          title="Save draft"
          class="button column"
@@ -123,8 +123,6 @@
            <Multiselect
              v-model="clientSideType"
              placeholder="Select one"
-              track-by="id"
-              label="label"
              :options="sideTypes"
              :searchable="false"
              :close-on-select="true"
@@ -137,8 +135,6 @@
            <Multiselect
              v-model="serverSideType"
              placeholder="Select one"
-              track-by="id"
-              label="label"
              :options="sideTypes"
              :searchable="false"
              :close-on-select="true"
@@ -161,11 +157,13 @@
          You can type the of the long form of your description here. This
          editor supports markdown. You can find the syntax
          <a
+            class=""
            href="https://guides.github.com/features/mastering-markdown/"
            target="_blank"
            rel="noopener noreferrer"
            >here</a
-          >.
+          >. HTML can also be used inside your description, excluding scripts
+          and iframes.
        </span>
        <div class="columns">
          <div class="textarea-wrapper">
@@ -193,8 +191,8 @@
              <th>Version</th>
              <th>Mod Loader</th>
              <th>Minecraft Version</th>
-              <th>Status</th>
-              <th></th>
+              <th>Version Type</th>
+              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
@@ -217,18 +215,21 @@
              <td>{{ version.game_versions.join(', ') }}</td>
              <td>
                <span
-                  v-if="version.version_type === 'release'"
+                  v-if="version.release_channel === 'release'"
                  class="badge green"
                >
                  Release
                </span>
                <span
-                  v-if="version.version_type === 'beta'"
+                  v-if="version.release_channel === 'beta'"
                  class="badge yellow"
                >
                  Beta
                </span>
-                <span v-if="version.version_type === 'alpha'" class="badge red">
+                <span
+                  v-if="version.release_channel === 'alpha'"
+                  class="badge red"
+                >
                  Alpha
                </span>
              </td>
@@ -562,13 +563,9 @@ export default {
      license: null,
      license_url: null,

-      sideTypes: [
-        { label: 'Required', id: 'required' },
-        { label: 'Optional', id: 'optional' },
-        { label: 'Unsupported', id: 'unsupported' },
-      ],
-      clientSideType: { label: 'Required', id: 'required' },
-      serverSideType: { label: 'Required', id: 'required' },
+      sideTypes: ['Required', 'Optional', 'Unsupported'],
+      clientSideType: 'Required',
+      serverSideType: 'Required',

      donationLinks: [],
      donationPlatforms: [],
@@ -627,8 +624,8 @@ export default {
          source_url: this.source_url,
          wiki_url: this.wiki_url,
          discord_url: this.discord_url,
-          client_side: this.clientSideType.id,
-          server_side: this.serverSideType.id,
+          client_side: this.clientSideType.toLowerCase(),
+          server_side: this.serverSideType.toLowerCase(),
          license_id: this.license ? this.license.short : 'arr',
          license_url: this.license_url,
          is_draft: this.draft,
@@ -805,7 +802,7 @@ header {
  grid-area: header;
  padding: var(--spacing-card-md) var(--spacing-card-lg);

-  h2 {
+  h3 {
    margin: auto 0;
    color: var(--color-text-dark);
    font-weight: var(--font-weight-extrabold);
@@ -860,6 +857,10 @@ section.game-sides {
 section.description {
  grid-area: description;

+  span a {
+    text-decoration: underline;
+  }
+
  & > .columns {
    align-items: stretch;
    min-height: 10rem;
--- a/pages/mods.vue
+++ b/pages/mods.vue
@@ -64,26 +64,31 @@
        </section>
        <div class="results column-grow-4">
          <Advertisement />
-          <SearchResult
-            v-for="(result, index) in results"
-            :id="result.slug ? result.slug : result.mod_id.split('-')[1]"
-            :key="result.mod_id"
-            :author="result.author"
-            :name="result.title"
-            :description="result.description"
-            :latest-version="result.latest_version"
-            :created-at="result.date_created"
-            :updated-at="result.date_modified"
-            :downloads="result.downloads.toString()"
-            :icon-url="result.icon_url"
-            :author-url="result.author_url"
-            :page-url="result.page_url"
-            :categories="result.categories"
-            :is-ad="index === -1"
-            :is-modrinth="result.host === 'modrinth'"
-          />
-          <div v-if="results.length === 0" class="no-results">
-            <p>No results found for your query!</p>
+          <div v-if="results === null" class="no-results">
+            <p>Loading...</p>
+          </div>
+          <div v-else>
+            <SearchResult
+              v-for="(result, index) in results"
+              :id="result.slug ? result.slug : result.mod_id.split('-')[1]"
+              :key="result.mod_id"
+              :author="result.author"
+              :name="result.title"
+              :description="result.description"
+              :latest-version="result.latest_version"
+              :created-at="result.date_created"
+              :updated-at="result.date_modified"
+              :downloads="result.downloads.toString()"
+              :icon-url="result.icon_url"
+              :author-url="result.author_url"
+              :page-url="result.page_url"
+              :categories="result.categories"
+              :is-ad="index === -1"
+              :is-modrinth="result.host === 'modrinth'"
+            />
+            <div v-if="results.length === 0" class="no-results">
+              <p>No results found for your query!</p>
+            </div>
          </div>
        </div>
        <section v-if="pages.length > 1" class="search-bottom">
@@ -115,8 +120,13 @@
            <button class="filter-button-done" @click="toggleFiltersMenu">
              Done
            </button>
-            <button @click="clearFilters">Reset filters</button>
-            <h3>Categories</h3>
+            <div class="filter-clear-button">
+              <h3>Categories</h3>
+              <button class="iconified-button" @click="clearFilters">
+                <ExitIcon />
+                Clear filters
+              </button>
+            </div>
            <SearchFilter
              :active-filters="facets"
              display-name="Technology"
@@ -230,7 +240,7 @@
            >
              <ForgeLoader />
            </SearchFilter>
-            <h3>Versions</h3>
+            <h3>Minecraft Versions</h3>
            <SearchFilter
              :active-filters="showVersions"
              display-name="Include snapshots"
@@ -254,6 +264,20 @@
            placeholder="Choose versions..."
            @input="onSearchChange(1)"
          ></multiselect>
+          <h3>Licenses</h3>
+          <Multiselect
+            v-model="displayLicense"
+            placeholder="Choose licenses..."
+            :loading="licenses.length === 0"
+            :options="licenses"
+            track-by="name"
+            label="name"
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="true"
+            @input="toggleLicense"
+          />
        </div>
        <Advertisement format="rectangle" />
        <m-footer class="footer" />
@@ -287,6 +311,8 @@ import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
 import FabricLoader from '~/assets/images/categories/fabric.svg?inline'

 import SearchIcon from '~/assets/images/utils/search.svg?inline'
+import ExitIcon from '~/assets/images/utils/exit.svg?inline'
+
 import Advertisement from '~/components/Advertisement'

 export default {
@@ -313,6 +339,7 @@ export default {
    ForgeLoader,
    FabricLoader,
    SearchIcon,
+    ExitIcon,
  },
  async fetch() {
    if (this.$route.query.q) this.query = this.$route.query.q
@@ -325,8 +352,24 @@ export default {
      this.selectedVersions = this.$route.query.v.split(',')
    if (this.$route.query.s) {
      this.sortType.name = this.$route.query.s
-      this.sortType.display =
-        this.sortType.name.charAt(0).toUpperCase() + this.sortType.name.slice(1)
+
+      switch (this.sortType.name) {
+        case 'relevance':
+          this.sortType.display = 'Relevance'
+          break
+        case 'downloads':
+          this.sortType.display = 'Downloads'
+          break
+        case 'newest':
+          this.sortType.display = 'Recently created'
+          break
+        case 'updated':
+          this.sortType.display = 'Recently updated'
+          break
+        case 'follows':
+          this.sortType.display = 'Follow count'
+          break
+      }
    }
    if (this.$route.query.m) {
      this.maxResults = this.$route.query.m
@@ -334,26 +377,38 @@ export default {
    if (this.$route.query.o)
      this.currentPage = Math.ceil(this.$route.query.o / this.maxResults) + 1

-    await this.fillInitialVersions()
-    await this.onSearchChange(this.currentPage)
+    await Promise.all([
+      this.fillInitialVersions(),
+      this.fillInitialLicenses(),
+      this.onSearchChange(this.currentPage),
+    ])
  },
  data() {
    return {
      query: '',
+
+      displayLicense: '',
+      selectedLicense: '',
+      licenses: [],
+
      showVersions: [],
      selectedVersions: [],
      versions: [],
+
      facets: [],
-      results: [],
+      results: null,
      pages: [],
      currentPage: 1,
+
      sortTypes: [
        { display: 'Relevance', name: 'relevance' },
        { display: 'Download count', name: 'downloads' },
+        { display: 'Follow count', name: 'follows' },
        { display: 'Recently created', name: 'newest' },
        { display: 'Recently updated', name: 'updated' },
      ],
      sortType: { display: 'Relevance', name: 'relevance' },
+
      maxResults: 20,
      firstRun: true,
    }
@@ -383,9 +438,30 @@ export default {
        console.error(err)
      }
    },
+    async fillInitialLicenses() {
+      this.licenses = (
+        await axios.get('https://api.modrinth.com/api/v1/tag/license')
+      ).data
+    },
+    async toggleLicense(license) {
+      if (this.selectedLicense) {
+        const index = this.facets.indexOf(this.selectedLicense)
+
+        this.facets.splice(index, 1)
+      }
+
+      if (license) {
+        this.selectedLicense = `license:${license.short}`
+        this.facets.push(this.selectedLicense)
+      }
+
+      await this.onSearchChange(1)
+    },
    async clearFilters() {
      for (const facet of [...this.facets]) await this.toggleFacet(facet, true)

+      this.displayLicense = null
+      this.selectedLicense = null
      this.selectedVersions = []
      await this.onSearchChange(1)
    },
@@ -491,7 +567,7 @@ export default {
          if (this.maxResults > 20)
            url += `&m=${encodeURIComponent(this.maxResults)}`

-          window.history.pushState(new Date(), 'Mods', url)
+          window.history.replaceState(new Date(), 'Mods', url)
        }
      } catch (err) {
        // eslint-disable-next-line no-console
@@ -628,7 +704,7 @@ export default {
    margin-bottom: var(--spacing-card-md);
  }
  h3 {
-    @extend %large-label;
+    @extend %small-label;
    margin-top: 1.25em;
  }
  &.active {
@@ -658,15 +734,18 @@ export default {
 }

 .filter-group {
-  margin-top: 1em;
-
  button {
    cursor: pointer;
-    width: 100%;
+  }
+
+  .filter-clear-button {
+    display: flex;
+    justify-content: space-between;
  }

  .filter-button-done {
    display: block;
+    width: 100%;
  }

  // Large screens that don't collapse
--- a/pages/report/create.vue
+++ b/pages/report/create.vue
@@ -2,7 +2,7 @@
  <div class="page-container">
    <div class="page-contents">
      <header class="columns">
-        <h2 class="column-grow-1">File a report</h2>
+        <h3 class="column-grow-1">File a report</h3>
        <button
          title="Create"
          class="brand-button column"
@@ -209,7 +209,7 @@ header {
  grid-area: header;
  padding: var(--spacing-card-md) var(--spacing-card-lg);

-  h2 {
+  h3 {
    margin: auto 0;
    color: var(--color-text-dark);
    font-weight: var(--font-weight-extrabold);
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -160,6 +160,47 @@ export default {
  head() {
    return {
      title: this.user.username + ' - Modrinth',
+      meta: [
+        {
+          hid: 'og:type',
+          name: 'og:type',
+          content: 'website',
+        },
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          content: this.user.username,
+        },
+        {
+          hid: 'apple-mobile-web-app-title',
+          name: 'apple-mobile-web-app-title',
+          content: this.user.username,
+        },
+        {
+          hid: 'og:description',
+          name: 'og:description',
+          content: this.user.bio,
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content:
+            this.user.bio +
+            ' - View minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform that is compatible with CurseForge too!',
+        },
+        {
+          hid: 'og:url',
+          name: 'og:url',
+          content: `https://modrinth.com/user/${this.user.id}`,
+        },
+        {
+          hid: 'og:image',
+          name: 'og:image',
+          content: this.user.avatar_url
+            ? this.user.avatar_url
+            : 'https://cdn.modrinth.com/placeholder.png',
+        },
+      ],
    }
  },
 }