diff --git a/components/ModResult.vue b/components/ModResult.vue
index 5a4e2dc9c..92b1b6954 100644
--- a/components/ModResult.vue
+++ b/components/ModResult.vue
@@ -426,6 +426,7 @@ export default {
grid-column: 2;
max-height: 150px;
font-size: 11pt;
+ margin: auto 0;
}
.mod-name {
@@ -445,7 +446,6 @@ export default {
grid-template-rows: 20px 20px;
margin-top: 5px;
grid-column: 2;
- align-self: flex-end;
align-items: flex-start;
align-self: flex-start;
@@ -486,9 +486,8 @@ export default {
.categories {
display: flex;
flex-direction: row;
- margin: 0 0 5px 0;
grid-column: 1;
- margin-bottom: auto;
+ margin: 0 0 auto;
}
.categories p {
@@ -526,7 +525,7 @@ export default {
@media screen and (min-width: 900px) {
.result {
grid-template-columns: 90px auto;
- grid-template-rows: auto auto 30px;
+ grid-template-rows: auto auto 35px;
}
.result-infos {
@@ -564,7 +563,7 @@ export default {
}
.mod-name {
- font-size: 16pt;
+ font-size: 18pt;
}
.result-summary {
@@ -582,13 +581,13 @@ export default {
}
.categories {
- margin: auto 0 5px auto;
+ margin: 0 5px 10px auto;
grid-row: 3;
grid-column: 3;
}
.mod-name {
- font-size: 18pt;
+ font-size: 20pt;
}
}
diff --git a/components/SearchFilter.vue b/components/SearchFilter.vue
new file mode 100644
index 000000000..4a19daffd
--- /dev/null
+++ b/components/SearchFilter.vue
@@ -0,0 +1,70 @@
+
+
+
+ {{ displayName }}
+
+
+
+
+
+
diff --git a/pages/mods.vue b/pages/mods.vue
index 28ffa9b30..d9d89678c 100644
--- a/pages/mods.vue
+++ b/pages/mods.vue
@@ -25,25 +25,23 @@
-
-
-
-
-
+
+ {{
+ option.display
+ }}
+
@@ -73,27 +71,18 @@
/>
-
-
-
-
Categories
-
- Technology
-
-
+
- Adventure
-
-
+
+
- Magic
-
-
+
+
- Utility
-
-
+
- Decoration
-
-
+
+
- Library
-
-
+
+
- Cursed
-
-
+
- Worldgen
-
-
+
+
- Storage
-
-
+
+
- Food
-
-
+
- Equipment
-
-
+
+
- Misc
-
+
Loaders
-
- Forge
-
-
- Fabric
-
+
+
+
+
Platforms
-
- Modrinth
-
-
- Curseforge
-
+
+
+
+
Versions
1)
- document.getElementById('max-results').value = this.maxResults
- },
methods: {
async fillInitialVersions() {
try {
@@ -452,33 +493,16 @@ export default {
await this.onSearchChange(1)
},
async toggleFacet(elementName, sendRequest) {
- const element = process.client
- ? document.getElementById(elementName)
- : null
const index = this.facets.indexOf(elementName)
if (index !== -1) {
- if (process.client) element.classList.remove('filter-active')
this.facets.splice(index, 1)
} else {
- if (process.client) element.classList.add('filter-active')
this.facets.push(elementName)
}
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) {
if (process.client) window.scrollTo(0, 0)
@@ -486,7 +510,10 @@ export default {
},
async onSearchChange(newPageNumber) {
try {
- const params = [`limit=${this.maxResults}`, `index=${this.sortType}`]
+ const params = [
+ `limit=${this.maxResults}`,
+ `index=${this.sortType.name}`,
+ ]
if (this.query.length > 0) {
params.push(`query=${this.query.replace(/ /g, '+')}`)
@@ -560,8 +587,8 @@ export default {
url += `&f=${encodeURIComponent(this.facets)}`
if (this.selectedVersions.length > 0)
url += `&v=${encodeURIComponent(this.selectedVersions)}`
- if (this.sortType !== 'relevance')
- url += `&s=${encodeURIComponent(this.sortType)}`
+ if (this.sortType.name !== 'relevance')
+ url += `&s=${encodeURIComponent(this.sortType.name)}`
if (this.maxResults > 5)
url += `&m=${encodeURIComponent(this.maxResults)}`
@@ -596,13 +623,6 @@ export default {
.iconified-input {
width: 100%;
}
- .iconified-select {
- width: 100%;
- margin-left: 0;
- select {
- width: 100%;
- }
- }
.sort-paginate {
display: flex;
width: 100%;
@@ -612,13 +632,6 @@ export default {
.iconified-input {
width: auto;
}
- .iconified-select {
- width: auto;
- margin-left: 1em;
- select {
- width: auto;
- }
- }
.sort-paginate {
display: block;
width: auto;
@@ -644,6 +657,7 @@ export default {
display: inline-block;
button {
background: var(--color-bg);
+ color: var(--color-text);
border: 2px solid var(--color-grey-3);
border-radius: var(--size-rounded-sm);
padding: 0.5rem;
@@ -664,7 +678,6 @@ export default {
right: -100vw;
max-height: 100vh;
min-width: 15%;
- overflow-y: auto;
top: 3.5rem;
height: calc(100vh - 3.5rem);
transition: right 150ms;
@@ -724,37 +737,6 @@ export default {
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
@media screen and (min-width: 900px) {
.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 {
overflow-x: hidden;
}
-.multiselect__tags {
- background: var(--color-bg);
-}
-
+.multiselect__tags,
.multiselect__spinner {
background: var(--color-bg);
}
-.multiselect__spinner::before {
- border-top-color: var(--color-brand);
-}
-
+.multiselect__spinner::before,
.multiselect__spinner::after {
border-top-color: var(--color-brand);
}
+.multiselect__option--selected.multiselect__option--highlight,
+.multiselect__option,
+.multiselect__single,
.multiselect__input {
color: var(--color-text);
background: var(--color-bg);
}
-.multiselect__option {
- color: var(--color-text);
- background: var(--color-bg);
-}
-
-.multiselect__option--highlight {
- background: var(--color-brand);
-}
-
+.multiselect__option--highlight,
.multiselect__tag {
background: var(--color-brand);
}