Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pagination fixes, change displayed results to 6

Browse Source
This commit is contained in:
Jai A 2020-09-07 13:01:42 -07:00
parent fc6246c5cb
commit 89dfaf1d5d
3 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/global.scss
View File

@ -53,7 +53,7 @@ a {
h2 { h2 {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5rem; margin-bottom: 1.25rem;
} }
h3 { h3 {

3
components/ModResult.vue
View File

@ -371,8 +371,7 @@ export default {
<style lang="scss"> <style lang="scss">
.results { .results {
margin-top: 20px; margin-top: 10px;
margin-bottom: 50px;
} }
.result { .result {

62
pages/mods.vue
View File

@ -10,7 +10,7 @@
type="search" type="search"
name="search" name="search"
placeholder="Search mods" placeholder="Search mods"
@input="onSearchChange(true)" @input="onSearchChange(1)"
/> />
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -24,6 +24,24 @@
<line x1="21" y1="21" x2="16.65" y2="16.65" /> <line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg> </svg>
</div> </div>
<!--<div class="iconified-select column-grow-1">
<select id="sort-type" @input="changeSortType">
<option value="relevance" selected>Relevance</option>
<option value="downloads">Total Downloads</option>
<option value="newest">Newest</option>
<option value="updated">Updated</option>
</select>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>-->
<div <div
v-if="pages.length > 1" v-if="pages.length > 1"
class="pagination column-grow-1 columns paginates" class="pagination column-grow-1 columns paginates"
@ -36,7 +54,7 @@
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@click="currentPage !== 1 ? switchPage(currentPage - 1) : null" @click="currentPage !== 1 ? onSearchChange(currentPage - 1) : null"
> >
<polyline points="15 18 9 12 15 6"></polyline> <polyline points="15 18 9 12 15 6"></polyline>
</svg> </svg>
@ -46,7 +64,7 @@
:class="{ :class="{
'active-page-number': currentPage !== item, 'active-page-number': currentPage !== item,
}" }"
@click="currentPage !== item ? switchPage(item) : null" @click="currentPage !== item ? onSearchChange(item) : null"
> >
<span v-if="pages[index - 1] + 1 !== item && item !== 1">...</span> <span v-if="pages[index - 1] + 1 !== item && item !== 1">...</span>
<span :class="{ 'disabled-page-number': currentPage === item }">{{ <span :class="{ 'disabled-page-number': currentPage === item }">{{
@ -66,7 +84,7 @@
stroke-linejoin="round" stroke-linejoin="round"
@click=" @click="
currentPage !== pages[pages.length - 1] currentPage !== pages[pages.length - 1]
? switchPage(currentPage + 1) ? onSearchChange(currentPage + 1)
: null : null
" "
> >
@ -328,10 +346,11 @@ export default {
results: [], results: [],
pages: [], pages: [],
currentPage: 1, currentPage: 1,
sortType: 'relevance',
} }
}, },
async created() { async created() {
await this.onSearchChange() await this.onSearchChange(1)
}, },
methods: { methods: {
async toggleFilter(elementName) { async toggleFilter(elementName) {
@ -346,16 +365,14 @@ export default {
this.filters.push(element.id) this.filters.push(element.id)
} }
await this.onSearchChange(true) await this.onSearchChange(1)
}, },
async switchPage(pageNumber) { async changeSortType() {
this.currentPage = pageNumber this.sortType = document.getElementById('sort-type').value
await this.onSearchChange(false) await this.onSearchChange(1)
}, },
async onSearchChange(resetPageNumber) { async onSearchChange(newPageNumber) {
if (resetPageNumber) this.currentPage = 1
const config = { const config = {
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
@ -364,7 +381,7 @@ export default {
try { try {
let url = 'https://api.modrinth.com/api/v1/mod' let url = 'https://api.modrinth.com/api/v1/mod'
const params = [] const params = ['limit=6', `index=${this.sortType}`]
if (this.query.length > 0) { if (this.query.length > 0) {
params.push(`query=${this.query.replace(/ /g, '+')}`) params.push(`query=${this.query.replace(/ /g, '+')}`)
@ -380,8 +397,8 @@ export default {
params.push(`facets=${JSON.stringify(facets)}`) params.push(`facets=${JSON.stringify(facets)}`)
} }
if (this.currentPage !== 1) { if (newPageNumber !== 1) {
params.push(`offset=${(this.currentPage - 1) * 10}`) params.push(`offset=${(newPageNumber - 1) * 6}`)
} }
if (params.length > 0) { if (params.length > 0) {
@ -393,10 +410,19 @@ export default {
const res = await axios.get(url, config) const res = await axios.get(url, config)
this.results = res.data.hits this.results = res.data.hits
const pageAmount = Math.ceil(res.data.nb_hits / res.data.limit) const pageAmount = Math.ceil(res.data.total_hits / res.data.limit)
this.currentPage = newPageNumber
if (pageAmount > 4) { if (pageAmount > 4) {
if (this.currentPage > 4) { if (this.currentPage + 1 >= pageAmount) {
this.pages = [
1,
pageAmount - 3,
pageAmount - 2,
pageAmount - 1,
pageAmount,
]
} else if (this.currentPage > 4) {
this.pages = [ this.pages = [
1, 1,
this.currentPage - 1, this.currentPage - 1,
@ -506,10 +532,12 @@ export default {
} }
.active-page-number { .active-page-number {
user-select: none;
cursor: pointer; cursor: pointer;
} }
.disabled-page-number { .disabled-page-number {
user-select: none;
cursor: default; cursor: default;
padding: 2px 3px; padding: 2px 3px;
border-radius: 3px; border-radius: 3px;