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

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))"
         />