From 7cb4e626998401af23b1388673449ffe62dbe0d4 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Sun, 9 Apr 2023 00:10:52 -0700
Subject: [PATCH 1/5] Fix versions and changelog pagination, add manual page
 input

---
 components/ui/Pagination.vue    | 76 +++++++++++++++++++++++++++++++--
 pages/[type]/[id]/changelog.vue |  1 -
 pages/[type]/[id]/versions.vue  |  1 -
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 77671cdbb7..8a4b8d2ded 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -19,9 +19,32 @@
       }"
       class="page-number-container"
     >
-      <div v-if="item === '-'" class="has-icon">
-        <GapIcon />
-      </div>
+      <template v-if="item === '-'">
+        <input
+          v-if="field === index"
+          id="page-field"
+          :ref="`pageInput-` + index"
+          v-model="fieldValue"
+          type="text"
+          class="page-input"
+          autocomplete="false"
+          @blur="
+            () => {
+              field = null
+            }
+          "
+          @input="switchPage(fieldValue)"
+          @change="switchPage(fieldValue)"
+        />
+        <button
+          v-else
+          class="has-icon square-button gap"
+          @click="openField(index)"
+          @focus="openField(index)"
+        >
+          <GapIcon />
+        </button>
+      </template>
       <a
         v-else
         :class="{
@@ -78,6 +101,13 @@ export default {
     },
   },
   emits: ['switch-page'],
+  data() {
+    return {
+      field: null,
+      fieldValue: this.page,
+      prevFieldValue: this.page,
+    }
+  },
   computed: {
     pages() {
       let pages = []
@@ -102,13 +132,35 @@ export default {
         pages = Array.from({ length: this.count }, (_, i) => i + 1)
       }
 
+      if (this.field !== null && pages[this.field] !== '-') {
+        pages.splice(this.field, 0, '-')
+      }
+
       return pages
     },
   },
+  watch: {
+    fieldValue() {
+      this.fieldValue = Math.min(Math.max(this.fieldValue, 1), this.count)
+      if (isNaN(this.fieldValue)) {
+        this.fieldValue = this.prevFieldValue
+      }
+      this.prevFieldValue = this.fieldValue
+    },
+  },
   methods: {
     switchPage(newPage) {
       this.$emit('switch-page', newPage)
     },
+    openField(index) {
+      this.field = index
+      this.fieldValue = this.page
+      this.$nextTick(() => {
+        const input = this.$refs[`pageInput-${index}`][0]
+        input.focus()
+        input.select()
+      })
+    },
   },
 }
 </script>
@@ -194,4 +246,22 @@ a,
     padding: 0.5rem 0;
   }
 }
+
+.square-button.gap {
+  background: none;
+  box-shadow: none;
+  width: 3rem;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.page-input {
+  background: var(--color-raised-bg);
+  width: 3rem;
+  padding: var(--spacing-card-xs);
+  min-height: 0;
+  height: 2em;
+  box-sizing: border-box;
+  text-align: center;
+}
 </style>
diff --git a/pages/[type]/[id]/changelog.vue b/pages/[type]/[id]/changelog.vue
index 9fa4c2be05..e697a12b06 100644
--- a/pages/[type]/[id]/changelog.vue
+++ b/pages/[type]/[id]/changelog.vue
@@ -111,7 +111,6 @@ const filteredVersions = computed(() => {
   const selectedLoaders = getArrayOrString(route.query.l) ?? []
   const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
 
-  currentPage.value = 1
   return props.versions.filter(
     (projectVersion) =>
       (selectedGameVersions.length === 0 ||
diff --git a/pages/[type]/[id]/versions.vue b/pages/[type]/[id]/versions.vue
index 8357b99ad2..7435a6509d 100644
--- a/pages/[type]/[id]/versions.vue
+++ b/pages/[type]/[id]/versions.vue
@@ -158,7 +158,6 @@ const filteredVersions = computed(() => {
   const selectedLoaders = getArrayOrString(route.query.l) ?? []
   const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
 
-  currentPage.value = 1
   return props.versions.filter(
     (projectVersion) =>
       (selectedGameVersions.length === 0 ||

From 8fb13e38fcee7cd0af2ac7c00d4dfb9c48619e90 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Tue, 11 Apr 2023 10:57:52 -0700
Subject: [PATCH 2/5] Fix pagination bugs

---
 components/ui/Pagination.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 8a4b8d2ded..79170bbb5d 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -112,7 +112,7 @@ export default {
     pages() {
       let pages = []
 
-      if (this.count > 4) {
+      if (this.count > 7) {
         if (this.page + 3 >= this.count) {
           pages = [
             1,
@@ -123,7 +123,7 @@ export default {
             this.count - 1,
             this.count,
           ]
-        } else if (this.page > 4) {
+        } else if (this.page > 5) {
           pages = [1, '-', this.page - 1, this.page, this.page + 1, '-', this.count]
         } else {
           pages = [1, 2, 3, 4, 5, '-', this.count]

From 41a4756a906756aa566cc9b2344ac2a58d23bdd1 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Tue, 11 Apr 2023 14:06:21 -0700
Subject: [PATCH 3/5] Allow pagination input to be empty

---
 components/ui/Pagination.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 79170bbb5d..6be1ae73e2 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -141,16 +141,21 @@ export default {
   },
   watch: {
     fieldValue() {
-      this.fieldValue = Math.min(Math.max(this.fieldValue, 1), this.count)
+      this.fieldValue =
+        this.fieldValue === null || this.fieldValue === ''
+          ? null
+          : Math.min(Math.max(this.fieldValue, 1), this.count)
       if (isNaN(this.fieldValue)) {
-        this.fieldValue = this.prevFieldValue
+        this.fieldValue = null
       }
       this.prevFieldValue = this.fieldValue
     },
   },
   methods: {
     switchPage(newPage) {
-      this.$emit('switch-page', newPage)
+      if (newPage !== null && newPage !== '') {
+        this.$emit('switch-page', newPage)
+      }
     },
     openField(index) {
       this.field = index

From 58b1e7b1ea66492335ba18799eb84037018a9db3 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Tue, 11 Apr 2023 14:36:22 -0700
Subject: [PATCH 4/5] Improve styling of pagination gap

---
 assets/images/utils/gap.svg   |  2 +-
 assets/styles/components.scss |  1 +
 components/ui/Pagination.vue  | 10 +++++++---
 layouts/default.vue           |  1 -
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/images/utils/gap.svg b/assets/images/utils/gap.svg
index 44951634ce..0448e9cc99 100644
--- a/assets/images/utils/gap.svg
+++ b/assets/images/utils/gap.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="0 0 14 2">
 	<path d="M18,12H6" transform="translate(-5 -11)" fill="none" stroke="currentColor" stroke-linecap="round"
-		stroke-linejoin="round" stroke-width="2" />
+		stroke-linejoin="round" stroke-width="1" />
 </svg>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 60c5a06a7a..b73e7a3dd0 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -798,6 +798,7 @@
   @extend .button-base;
   background-color: transparent;
   border-radius: var(--size-rounded-sm);
+  transition: filter 0s;
 
   &:focus-visible:not(&:disabled),
   &:hover:not(&:disabled),
diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 6be1ae73e2..0614a7cb3d 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -38,7 +38,7 @@
         />
         <button
           v-else
-          class="has-icon square-button gap"
+          class="has-icon square-button button-transparent gap"
           @click="openField(index)"
           @focus="openField(index)"
         >
@@ -210,7 +210,7 @@ a {
   display: flex;
   align-items: center;
   svg {
-    width: 1em;
+    width: 1rem;
   }
 }
 
@@ -253,11 +253,15 @@ a,
 }
 
 .square-button.gap {
-  background: none;
   box-shadow: none;
   width: 3rem;
   box-sizing: border-box;
   margin: 0;
+  cursor: text !important;
+
+  &:hover {
+    border: 2px solid var(--color-divider);
+  }
 }
 
 .page-input {
diff --git a/layouts/default.vue b/layouts/default.vue
index 314a1fd914..2685f65e07 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -608,7 +608,6 @@ export default defineNuxtComponent({
             padding: 0.5rem;
             color: var(--color-text);
             border-radius: 2rem;
-            transition: filter 0.1s ease-in-out;
             border: 2px solid transparent;
             box-sizing: border-box;
 

From 1423ba2dbe1e55ba765968b1c59027579989f975 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Mon, 17 Apr 2023 18:52:09 -0700
Subject: [PATCH 5/5] Make pagination work way better on FF (and simplify code)

---
 components/ui/Pagination.vue | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 0614a7cb3d..4281041376 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -105,7 +105,6 @@ export default {
     return {
       field: null,
       fieldValue: this.page,
-      prevFieldValue: this.page,
     }
   },
   computed: {
@@ -139,22 +138,10 @@ export default {
       return pages
     },
   },
-  watch: {
-    fieldValue() {
-      this.fieldValue =
-        this.fieldValue === null || this.fieldValue === ''
-          ? null
-          : Math.min(Math.max(this.fieldValue, 1), this.count)
-      if (isNaN(this.fieldValue)) {
-        this.fieldValue = null
-      }
-      this.prevFieldValue = this.fieldValue
-    },
-  },
   methods: {
     switchPage(newPage) {
-      if (newPage !== null && newPage !== '') {
-        this.$emit('switch-page', newPage)
+      if (newPage !== null && newPage !== '' && !isNaN(newPage)) {
+        this.$emit('switch-page', Math.min(Math.max(newPage, 1), this.count))
       }
     },
     openField(index) {