eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Make Search fully SSR

Browse Source
This commit is contained in:
Jai A
2020-09-22 08:21:07 -07:00
parent 8a2f45ec23
commit fb38573b7e
3 changed files with 250 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/ModResult.vue
View File

@@ -426,6 +426,7 @@ export default {
grid-column: 2; grid-column: 2;
max-height: 150px; max-height: 150px;
font-size: 11pt; font-size: 11pt;
margin: auto 0;
} }
.mod-name { .mod-name {
@@ -445,7 +446,6 @@ export default {
grid-template-rows: 20px 20px; grid-template-rows: 20px 20px;
margin-top: 5px; margin-top: 5px;
grid-column: 2; grid-column: 2;
align-self: flex-end;
align-items: flex-start; align-items: flex-start;
align-self: flex-start; align-self: flex-start;
@@ -486,9 +486,8 @@ export default {
.categories { .categories {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0 0 5px 0;
grid-column: 1; grid-column: 1;
margin-bottom: auto; margin: 0 0 auto;
} }
.categories p { .categories p {
@@ -526,7 +525,7 @@ export default {
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
.result { .result {
grid-template-columns: 90px auto; grid-template-columns: 90px auto;
grid-template-rows: auto auto 30px; grid-template-rows: auto auto 35px;
} }
.result-infos { .result-infos {
@@ -564,7 +563,7 @@ export default {
} }
.mod-name { .mod-name {
font-size: 16pt; font-size: 18pt;
} }
.result-summary { .result-summary {
@@ -582,13 +581,13 @@ export default {
} }
.categories { .categories {
margin: auto 0 5px auto; margin: 0 5px 10px auto;
grid-row: 3; grid-row: 3;
grid-column: 3; grid-column: 3;
} }
.mod-name { .mod-name {
font-size: 18pt; font-size: 20pt;
} }
} }

70
components/SearchFilter.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<p
class="filter"
:class="{ 'filter-active': activeFilters.includes(facetName) }"
@click="toggle"
>
<slot></slot>
{{ displayName }}
</p>
</template>
<script>
export default {
name: 'SearchFilter',
props: {
facetName: {
type: String,
default: '',
},
displayName: {
type: String,
default: '',
},
activeFilters: {
type: Array,
default() {
return []
},
},
},
methods: {
toggle() {
this.$emit('toggle', this.facetName)
},
},
}
</script>
<style lang="scss">
.filter {
display: flex;
align-items: center;
cursor: pointer;
padding: 2px 2px 2px 20px;
margin: 0 0 0 5px;
border-left: 4px solid var(--color-grey-3);
border-radius: 0 0.25rem 0.25rem 0;
color: var(--color-grey-5);
font-size: 1rem;
letter-spacing: 0.02rem;
svg {
margin-right: 5px;
height: 1rem;
flex-shrink: 0;
}
&:hover,
&:focus {
background-color: var(--color-grey-1);
color: var(--color-text);
}
}
.filter-active {
background-color: var(--color-grey-1);
color: var(--color-text);
border-left: 4px solid var(--color-brand);
}
</style>

361
pages/mods.vue
View File

@@ -25,25 +25,23 @@
</svg> </svg>
</div> </div>
<div class="sort-paginate"> <div class="sort-paginate">
<div class="iconified-select"> <Multiselect
<select id="sort-type" @input="changeSortType"> v-model="sortType"
<option value="relevance" selected>Relevance</option> class="sort-types"
<option value="downloads">Total Downloads</option> placeholder="Select one"
<option value="newest">Newest</option> track-by="display"
<option value="updated">Updated</option> label="display"
</select> :options="sortTypes"
:searchable="false"
<svg :close-on-select="true"
viewBox="0 0 24 24" :show-labels="false"
fill="none" :allow-empty="false"
stroke="currentColor" @input="onSearchChange(1)"
stroke-width="2" >
stroke-linecap="round" <template slot="singleLabel" slot-scope="{ option }">{{
stroke-linejoin="round" option.display
> }}</template>
<polyline points="6 9 12 15 18 9"></polyline> </Multiselect>
</svg>
</div>
<div class="mobile-filters-button"> <div class="mobile-filters-button">
<button @click="toggleFiltersMenu">Filter...</button> <button @click="toggleFiltersMenu">Filter...</button>
</div> </div>
@@ -73,27 +71,18 @@
/> />
</div> </div>
<section v-if="pages.length > 1" class="search-bottom"> <section v-if="pages.length > 1" class="search-bottom">
<div class="iconified-select"> <Multiselect
<select id="max-results" @input="changeMaxResults"> v-model="maxResults"
<option value="5" selected>5</option> class="max-results"
<option value="10">10</option> placeholder="Select one"
<option value="15">15</option> :options="[5, 10, 15, 20, 50, 100]"
<option value="20">20</option> :searchable="false"
<option value="50">50</option> :close-on-select="true"
<option value="100">100</option> :show-labels="false"
</select> :allow-empty="false"
@input="onSearchChange(currentPage)"
<svg >
viewBox="0 0 24 24" </Multiselect>
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<pagination <pagination
:current-page="currentPage" :current-page="currentPage"
:pages="pages" :pages="pages"
@@ -110,9 +99,11 @@
</button> </button>
<button @click="clearFilters">Clear Filters</button> <button @click="clearFilters">Clear Filters</button>
<h3>Categories</h3> <h3>Categories</h3>
<p <SearchFilter
id="categories:technology" :active-filters="facets"
@click="toggleFacet('categories:technology')" display-name="Technology"
facet-name="categories:technology"
@toggle="toggleFacet"
> >
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -129,11 +120,12 @@
<line x1="6" y1="16" x2="6.01" y2="16"></line> <line x1="6" y1="16" x2="6.01" y2="16"></line>
<line x1="10" y1="16" x2="10.01" y2="16"></line> <line x1="10" y1="16" x2="10.01" y2="16"></line>
</svg> </svg>
Technology </SearchFilter>
</p> <SearchFilter
<p :active-filters="facets"
id="categories:adventure" display-name="Adventure"
@click="toggleFacet('categories:adventure')" facet-name="categories:adventure"
@toggle="toggleFacet"
> >
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -148,9 +140,13 @@
points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
></polygon> ></polygon>
</svg> </svg>
Adventure </SearchFilter>
</p> <SearchFilter
<p id="categories:magic" @click="toggleFacet('categories:magic')"> :active-filters="facets"
display-name="Magic"
facet-name="categories:magic"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -163,9 +159,13 @@
d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z" d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z"
/> />
</svg> </svg>
Magic </SearchFilter>
</p> <SearchFilter
<p id="categories:utility" @click="toggleFacet('categories:utility')"> :active-filters="facets"
display-name="Utility"
facet-name="categories:utility"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -177,11 +177,12 @@
<rect x="2" y="7" width="20" height="14" rx="2" ry="2" /> <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /> <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg> </svg>
Utility </SearchFilter>
</p> <SearchFilter
<p :active-filters="facets"
id="categories:decoration" display-name="Decoration"
@click="toggleFacet('categories:decoration')" facet-name="categories:decoration"
@toggle="toggleFacet"
> >
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -194,9 +195,13 @@
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" /> <polyline points="9 22 9 12 15 12 15 22" />
</svg> </svg>
Decoration </SearchFilter>
</p> <SearchFilter
<p id="categories:library" @click="toggleFacet('categories:library')"> :active-filters="facets"
display-name="Library"
facet-name="categories:library"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -210,9 +215,13 @@
d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
></path> ></path>
</svg> </svg>
Library </SearchFilter>
</p> <SearchFilter
<p id="categories:cursed" @click="toggleFacet('categories:cursed')"> :active-filters="facets"
display-name="Cursed"
facet-name="categories:cursed"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -235,11 +244,12 @@
<line x1="9" y1="4.5" x2="8" y2="2.5" /> <line x1="9" y1="4.5" x2="8" y2="2.5" />
<line x1="15" y1="4.5" x2="16" y2="2.5" /> <line x1="15" y1="4.5" x2="16" y2="2.5" />
</svg> </svg>
Cursed </SearchFilter>
</p> <SearchFilter
<p :active-filters="facets"
id="categories:worldgen" display-name="Worldgen"
@click="toggleFacet('categories:worldgen')" facet-name="categories:worldgen"
@toggle="toggleFacet"
> >
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -253,9 +263,13 @@
d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z" d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z"
/> />
</svg> </svg>
Worldgen </SearchFilter>
</p> <SearchFilter
<p id="categories:storage" @click="toggleFacet('categories:storage')"> :active-filters="facets"
display-name="Storage"
facet-name="categories:storage"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -268,9 +282,13 @@
<rect x="1" y="3" width="22" height="5"></rect> <rect x="1" y="3" width="22" height="5"></rect>
<line x1="10" y1="12" x2="14" y2="12"></line> <line x1="10" y1="12" x2="14" y2="12"></line>
</svg> </svg>
Storage </SearchFilter>
</p> <SearchFilter
<p id="categories:food" @click="toggleFacet('categories:food')"> :active-filters="facets"
display-name="Food"
facet-name="categories:food"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -285,11 +303,12 @@
<line x1="10" y1="1" x2="10" y2="4"></line> <line x1="10" y1="1" x2="10" y2="4"></line>
<line x1="14" y1="1" x2="14" y2="4"></line> <line x1="14" y1="1" x2="14" y2="4"></line>
</svg> </svg>
Food </SearchFilter>
</p> <SearchFilter
<p :active-filters="facets"
id="categories:equipment" display-name="Equipment"
@click="toggleFacet('categories:equipment')" facet-name="categories:equipment"
@toggle="toggleFacet"
> >
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -309,9 +328,13 @@
<path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" /> <path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" />
<path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" /> <path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" />
</svg> </svg>
Equipment </SearchFilter>
</p> <SearchFilter
<p id="categories:misc" @click="toggleFacet('categories:misc')"> :active-filters="facets"
display-name="Misc"
facet-name="categories:misc"
@toggle="toggleFacet"
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
@@ -326,22 +349,37 @@
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
></path> ></path>
</svg> </svg>
Misc </SearchFilter>
</p>
<h3>Loaders</h3> <h3>Loaders</h3>
<p id="categories:forge" @click="toggleFacet('categories:forge')"> <SearchFilter
Forge :active-filters="facets"
</p> display-name="Forge"
<p id="categories:fabric" @click="toggleFacet('categories:fabric')"> facet-name="categories:forge"
Fabric @toggle="toggleFacet"
</p> >
</SearchFilter>
<SearchFilter
:active-filters="facets"
display-name="Fabric"
facet-name="categories:fabric"
@toggle="toggleFacet"
>
</SearchFilter>
<h3>Platforms</h3> <h3>Platforms</h3>
<p id="host:modrinth" @click="toggleFacet('host:modrinth')"> <SearchFilter
Modrinth :active-filters="facets"
</p> display-name="Modrinth"
<p id="host:curseforge" @click="toggleFacet('host:curseforge')"> facet-name="host:modrinth"
Curseforge @toggle="toggleFacet"
</p> >
</SearchFilter>
<SearchFilter
:active-filters="facets"
display-name="Curseforge"
facet-name="host:curseforge"
@toggle="toggleFacet"
>
</SearchFilter>
<h3>Versions</h3> <h3>Versions</h3>
</section> </section>
<multiselect <multiselect
@@ -370,6 +408,7 @@ import Multiselect from 'vue-multiselect'
import axios from 'axios' import axios from 'axios'
import SearchResult from '@/components/ModResult' import SearchResult from '@/components/ModResult'
import Pagination from '@/components/Pagination' import Pagination from '@/components/Pagination'
import SearchFilter from '@/components/SearchFilter'
const config = { const config = {
headers: { headers: {
@@ -382,6 +421,7 @@ export default {
SearchResult, SearchResult,
Pagination, Pagination,
Multiselect, Multiselect,
SearchFilter,
}, },
data() { data() {
return { return {
@@ -392,7 +432,13 @@ export default {
results: [], results: [],
pages: [], pages: [],
currentPage: 1, currentPage: 1,
sortType: 'relevance', sortTypes: [
{ display: 'Relevance', name: 'relevance' },
{ display: 'Total Downloads', name: 'downloads' },
{ display: 'Newest', name: 'newest' },
{ display: 'Updated', name: 'updated' },
],
sortType: { display: 'Relevance', name: 'relevance' },
maxResults: 5, maxResults: 5,
} }
}, },
@@ -417,11 +463,6 @@ export default {
await this.fillInitialVersions() await this.fillInitialVersions()
await this.onSearchChange(this.currentPage) await this.onSearchChange(this.currentPage)
}, },
mounted() {
document.getElementById('sort-type').value = this.sortType
if (this.pages.length > 1)
document.getElementById('max-results').value = this.maxResults
},
methods: { methods: {
async fillInitialVersions() { async fillInitialVersions() {
try { try {
@@ -452,33 +493,16 @@ export default {
await this.onSearchChange(1) await this.onSearchChange(1)
}, },
async toggleFacet(elementName, sendRequest) { async toggleFacet(elementName, sendRequest) {
const element = process.client
? document.getElementById(elementName)
: null
const index = this.facets.indexOf(elementName) const index = this.facets.indexOf(elementName)
if (index !== -1) { if (index !== -1) {
if (process.client) element.classList.remove('filter-active')
this.facets.splice(index, 1) this.facets.splice(index, 1)
} else { } else {
if (process.client) element.classList.add('filter-active')
this.facets.push(elementName) this.facets.push(elementName)
} }
if (!sendRequest) await this.onSearchChange(1) if (!sendRequest) await this.onSearchChange(1)
}, },
async changeSortType() {
if (process.client)
this.sortType = document.getElementById('sort-type').value
await this.onSearchChange(1)
},
async changeMaxResults() {
if (process.client)
this.maxResults = document.getElementById('max-results').value
await this.onSearchChangeToTop(1)
},
async onSearchChangeToTop(newPageNumber) { async onSearchChangeToTop(newPageNumber) {
if (process.client) window.scrollTo(0, 0) if (process.client) window.scrollTo(0, 0)
@@ -486,7 +510,10 @@ export default {
}, },
async onSearchChange(newPageNumber) { async onSearchChange(newPageNumber) {
try { try {
const params = [`limit=${this.maxResults}`, `index=${this.sortType}`] const params = [
`limit=${this.maxResults}`,
`index=${this.sortType.name}`,
]
if (this.query.length > 0) { if (this.query.length > 0) {
params.push(`query=${this.query.replace(/ /g, '+')}`) params.push(`query=${this.query.replace(/ /g, '+')}`)
@@ -560,8 +587,8 @@ export default {
url += `&f=${encodeURIComponent(this.facets)}` url += `&f=${encodeURIComponent(this.facets)}`
if (this.selectedVersions.length > 0) if (this.selectedVersions.length > 0)
url += `&v=${encodeURIComponent(this.selectedVersions)}` url += `&v=${encodeURIComponent(this.selectedVersions)}`
if (this.sortType !== 'relevance') if (this.sortType.name !== 'relevance')
url += `&s=${encodeURIComponent(this.sortType)}` url += `&s=${encodeURIComponent(this.sortType.name)}`
if (this.maxResults > 5) if (this.maxResults > 5)
url += `&m=${encodeURIComponent(this.maxResults)}` url += `&m=${encodeURIComponent(this.maxResults)}`
@@ -596,13 +623,6 @@ export default {
.iconified-input { .iconified-input {
width: 100%; width: 100%;
} }
.iconified-select {
width: 100%;
margin-left: 0;
select {
width: 100%;
}
}
.sort-paginate { .sort-paginate {
display: flex; display: flex;
width: 100%; width: 100%;
@@ -612,13 +632,6 @@ export default {
.iconified-input { .iconified-input {
width: auto; width: auto;
} }
.iconified-select {
width: auto;
margin-left: 1em;
select {
width: auto;
}
}
.sort-paginate { .sort-paginate {
display: block; display: block;
width: auto; width: auto;
@@ -644,6 +657,7 @@ export default {
display: inline-block; display: inline-block;
button { button {
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text);
border: 2px solid var(--color-grey-3); border: 2px solid var(--color-grey-3);
border-radius: var(--size-rounded-sm); border-radius: var(--size-rounded-sm);
padding: 0.5rem; padding: 0.5rem;
@@ -664,7 +678,6 @@ export default {
right: -100vw; right: -100vw;
max-height: 100vh; max-height: 100vh;
min-width: 15%; min-width: 15%;
overflow-y: auto;
top: 3.5rem; top: 3.5rem;
height: calc(100vh - 3.5rem); height: calc(100vh - 3.5rem);
transition: right 150ms; transition: right 150ms;
@@ -724,37 +737,6 @@ export default {
display: block; display: block;
} }
p {
display: flex;
align-items: center;
cursor: pointer;
padding: 2px 2px 2px 20px;
margin: 0 0 0 5px;
border-left: 4px solid var(--color-grey-3);
border-radius: 0 0.25rem 0.25rem 0;
color: var(--color-grey-5);
font-size: 1rem;
letter-spacing: 0.02rem;
svg {
margin-right: 5px;
height: 1rem;
flex-shrink: 0;
}
&:hover,
&:focus {
background-color: var(--color-grey-1);
color: var(--color-text);
}
}
.filter-active {
background-color: var(--color-grey-1);
color: var(--color-text);
border-left: 4px solid var(--color-brand);
}
// Large screens that don't collapse // Large screens that don't collapse
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
.filter-button-done { .filter-button-done {
@@ -816,40 +798,45 @@ select {
} }
} }
.sort-types {
min-width: 200px;
padding-y: 1rem;
border: 2px solid var(--color-grey-3);
border-radius: var(--size-rounded-sm);
.multiselect__tags {
padding: 10px 50px 0 8px;
border: none;
}
}
.max-results {
max-width: 80px;
}
.multiselect__content-wrapper { .multiselect__content-wrapper {
overflow-x: hidden; overflow-x: hidden;
} }
.multiselect__tags { .multiselect__tags,
background: var(--color-bg);
}
.multiselect__spinner { .multiselect__spinner {
background: var(--color-bg); background: var(--color-bg);
} }
.multiselect__spinner::before { .multiselect__spinner::before,
border-top-color: var(--color-brand);
}
.multiselect__spinner::after { .multiselect__spinner::after {
border-top-color: var(--color-brand); border-top-color: var(--color-brand);
} }
.multiselect__option--selected.multiselect__option--highlight,
.multiselect__option,
.multiselect__single,
.multiselect__input { .multiselect__input {
color: var(--color-text); color: var(--color-text);
background: var(--color-bg); background: var(--color-bg);
} }
.multiselect__option { .multiselect__option--highlight,
color: var(--color-text);
background: var(--color-bg);
}
.multiselect__option--highlight {
background: var(--color-brand);
}
.multiselect__tag { .multiselect__tag {
background: var(--color-brand); background: var(--color-brand);
} }