Fix a lot of bugs - see description (#343)

assets/styles/global.scss

@@ -2,6 +2,10 @@ html {
   @extend .light-mode;
 }
 
+body {
+  overflow-y: scroll;
+}
+
 .light-mode {
   --color-icon: #6b7280;
   --color-text: hsl(221, 39%, 11%);

assets/styles/layout.scss

@@ -55,7 +55,7 @@
   }
 
   .normal-page__content {
-    padding-left: 1rem;
+    padding-left: 0.75rem;
     width: 60rem;
   }
 }

components/ui/ProjectCard.vue

@@ -69,13 +69,19 @@
           <div v-if="downloads" class="stat">
             <DownloadIcon />
             <p>
-              <strong>{{ formatNumber(downloads) }}</strong> downloads
+              <strong>{{ formatNumber(downloads) }}</strong> download<span
+                v-if="downloads !== '1'"
+                >s</span
+              >
             </p>
           </div>
           <div v-if="follows" class="stat">
             <HeartIcon />
             <p>
-              <strong>{{ formatNumber(follows) }}</strong> followers
+              <strong>{{ formatNumber(follows) }}</strong> follower<span
+                v-if="follows !== '1'"
+                >s</span
+              >
             </p>
           </div>
           <div v-if="status" class="status">

nuxt.config.js

@@ -27,7 +27,7 @@ export default {
         hid: 'description',
         name: 'description',
         content:
-          'Modrinth is a _type distribution platform. Modrinth is modern, easy to use, and built for modders. Modrinth currently supports Minecraft, including Forge and Fabric mod loaders.',
+          'Modrinth is a mod distribution platform. Modrinth is modern, easy to use, and built for modders. Modrinth currently supports Minecraft, including Forge and Fabric mod loaders.',
       },
 
       {
@@ -282,7 +282,7 @@ export default {
   },
   publicRuntimeConfig: {
     axios: {
-      browserBaseURL: process.env.BROWSER_BASE_URL,
+      browserBaseURL: process.env.BASE_URL,
     },
     ads: {
       ghostMode: process.env.ENABLE_ADS == null,

pages/_type/_id.vue

@@ -71,9 +71,13 @@
           <hr />
           <div class="stats">
             <span class="stat">{{ formatNumber(project.downloads) }}</span>
-            <span class="label">downloads</span>
+            <span class="label"
+              >download<span v-if="project.downloads !== 1">s</span></span
+            >
             <span class="stat">{{ formatNumber(project.followers) }}</span>
-            <span class="label">followers</span>
+            <span class="label"
+              >follower<span v-if="project.followers !== 1">s</span></span
+            >
           </div>
           <div class="dates">
             <div class="date">
@@ -89,7 +93,7 @@
               <span class="value">{{ $dayjs(project.updated).fromNow() }}</span>
             </div>
           </div>
-          <hr />
+          <hr v-if="$auth.user" />
           <div class="buttons">
             <nuxt-link
               v-if="$auth.user"
@@ -916,7 +920,7 @@ hr {
     margin-bottom: 0.25rem;
 
     img {
-      border-radius: var(--size-rounded-icon);
+      border-radius: var(--size-rounded-sm);
       height: 50px;
       width: 50px;
     }

pages/_type/_id/changelog.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="content card">
-    <div v-for="version in versions" :key="version.id">
+    <ThisOrThat class="filters" v-model="filterMode" :items="filters" />
+    <div
+      v-for="version in versions.filter((x) => x.loaders.includes(filterMode))"
+      :key="version.id"
+    >
       <div class="version-header">
         <span :class="'circle ' + version.version_type" />
         <div class="version-header-text">
@@ -59,10 +63,31 @@
 </template>
 <script>
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import ThisOrThat from '~/components/ui/ThisOrThat'
 
 export default {
   components: {
     DownloadIcon,
+    ThisOrThat,
+  },
+  data() {
+    return {
+      filters: [],
+      filterMode: '',
+    }
+  },
+  fetch() {
+    for (const version of this.versions) {
+      for (const loader of version.loaders) {
+        if (!this.filters.includes(loader)) {
+          this.filters.push(loader)
+        }
+
+        if (this.filterMode === '') {
+          this.filterMode = loader
+        }
+      }
+    }
   },
   auth: false,
   props: {
@@ -93,6 +118,10 @@ export default {
   max-width: calc(100% - (2 * var(--spacing-card-lg)));
 }
 
+.filters {
+  margin-bottom: 0.5rem;
+}
+
 .version-header {
   display: flex;
   align-items: center;

pages/_type/_id/gallery.vue

@@ -349,16 +349,16 @@ export default {
 .gallery-item {
   display: flex;
   flex-direction: column;
+  padding: 0;
 
   img {
     width: 100%;
-    margin-top: 0.5rem;
+    margin-top: 0;
     margin-bottom: 0;
+    border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
 
     min-height: 10rem;
     object-fit: cover;
-
-    border-radius: var(--size-rounded-card);
   }
 
   .gallery-body {

pages/_type/_id/version.vue

@@ -460,7 +460,7 @@
         <SmartFileInput
           v-if="mode === 'edit' || mode === 'create'"
           multiple
-          accept=".jar,application/java-archive,.zip,application/zip"
+          accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
           prompt="Upload files"
           @change="(x) => x.forEach((y) => newFiles.push(y))"
         />

pages/create/project.vue

@@ -652,13 +652,16 @@
           <div class="input-group">
             <Multiselect
               v-model="license"
-              placeholder="Select one"
+              placeholder="Choose license..."
-              track-by="short"
+              :loading="$tag.licenses.length === 0"
-              label="name"
-              :searchable="true"
               :options="$tag.licenses"
+              track-by="short"
+              label="short"
+              :multiple="false"
+              :searchable="true"
               :close-on-select="true"
               :show-labels="false"
+              :allow-empty="false"
             />
             <input v-model="license_url" type="url" placeholder="License URL" />
           </div>

pages/search.vue

@@ -14,7 +14,16 @@
           class="sidebar-menu"
           :class="{ 'sidebar-menu_open': sidebarMenuOpen }"
         >
-          <button class="iconified-button" @click="clearFilters">
+          <button
+            :disabled="
+              selectedLicenses.length === 0 &&
+              selectedEnvironments.length === 0 &&
+              selectedVersions.length === 0 &&
+              facets.length === 0
+            "
+            class="iconified-button"
+            @click="clearFilters"
+          >
             <ExitIcon />
             Clear filters
           </button>
@@ -104,17 +113,16 @@
           ></multiselect>
           <h3 class="sidebar-menu-heading">Licenses</h3>
           <Multiselect
-            v-model="displayLicense"
+            v-model="selectedLicenses"
             placeholder="Choose licenses..."
             :loading="$tag.licenses.length === 0"
-            :options="$tag.licenses"
+            :options="$tag.licenses.map((x) => x.short.toUpperCase())"
-            track-by="name"
+            :multiple="true"
-            label="name"
+            :searchable="true"
-            :searchable="false"
+            :close-on-select="false"
-            :close-on-select="true"
             :show-labels="false"
             :allow-empty="true"
-            @input="toggleLicense"
+            @input="onSearchChange(1)"
           />
         </div>
       </section>
@@ -257,8 +265,7 @@ export default {
     return {
       query: '',
 
-      displayLicense: '',
+      selectedLicenses: [],
-      selectedLicense: '',
 
       showSnapshots: false,
       selectedVersions: [],
@@ -291,7 +298,7 @@ export default {
     if (this.$route.query.f) {
       const facets = this.$route.query.f.split(',')
 
-      for (const facet of facets) await this.toggleFacet(facet, false)
+      for (const facet of facets) await this.toggleFacet(facet, true)
     }
     if (this.$route.query.v)
       this.selectedVersions = this.$route.query.v.split(',')
@@ -352,25 +359,10 @@ export default {
     },
   },
   methods: {
-    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.selectedLicenses = []
-      this.selectedLicense = null
       this.selectedVersions = []
       this.selectedEnvironments = []
       await this.onSearchChange(1)
@@ -432,6 +424,14 @@ export default {
             formattedFacets.push(versionFacets)
           }
 
+          if (this.selectedLicenses.length > 0) {
+            const licenseFacets = []
+            for (const facet of this.selectedLicenses) {
+              licenseFacets.push('license:' + facet.toLowerCase())
+            }
+            formattedFacets.push(licenseFacets)
+          }
+
           if (this.selectedEnvironments.length > 0) {
             let environmentFacets = []