You've already forked AstralRinth
forked from didirus/AstralRinth
Add version filter controls to Changelog and Versions pages (#378)
This commit is contained in:
Prospector
@@ -1,87 +1,77 @@
|
||||
<template>
|
||||
<div class="content card">
|
||||
<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">
|
||||
<h2 class="name">
|
||||
<nuxt-link
|
||||
:to="`/${project.project_type}/${
|
||||
project.slug ? project.slug : project.id
|
||||
}/version/${encodeURIComponent(version.version_number)}`"
|
||||
>{{ version.name }}</nuxt-link
|
||||
<div class="content">
|
||||
<VersionFilterControl
|
||||
class="card"
|
||||
:versions="versions"
|
||||
@updateVersions="updateVersions"
|
||||
/>
|
||||
<div class="card">
|
||||
<div v-for="version in filteredVersions" :key="version.id">
|
||||
<div class="version-header">
|
||||
<span :class="'circle ' + version.version_type" />
|
||||
<div class="version-header-text">
|
||||
<h2 class="name">
|
||||
<nuxt-link
|
||||
:to="`/${project.project_type}/${
|
||||
project.slug ? project.slug : project.id
|
||||
}/version/${encodeURIComponent(version.version_number)}`"
|
||||
>{{ version.name }}</nuxt-link
|
||||
>
|
||||
</h2>
|
||||
<span v-if="members.find((x) => x.user.id === version.author_id)">
|
||||
by
|
||||
<nuxt-link
|
||||
class="text-link"
|
||||
:to="
|
||||
'/user/' +
|
||||
members.find((x) => x.user.id === version.author_id).user
|
||||
.username
|
||||
"
|
||||
>{{
|
||||
members.find((x) => x.user.id === version.author_id).user
|
||||
.username
|
||||
}}</nuxt-link
|
||||
>
|
||||
</span>
|
||||
<span>
|
||||
on
|
||||
{{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
|
||||
>
|
||||
</h2>
|
||||
<span v-if="members.find((x) => x.user.id === version.author_id)">
|
||||
by
|
||||
<nuxt-link
|
||||
class="text-link"
|
||||
:to="
|
||||
'/user/' +
|
||||
members.find((x) => x.user.id === version.author_id).user
|
||||
.username
|
||||
"
|
||||
>{{
|
||||
members.find((x) => x.user.id === version.author_id).user
|
||||
.username
|
||||
}}</nuxt-link
|
||||
>
|
||||
</span>
|
||||
<span>
|
||||
on {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
|
||||
</div>
|
||||
<a
|
||||
:href="$parent.findPrimary(version).url"
|
||||
class="iconified-button download"
|
||||
:title="`Download ${version.name}`"
|
||||
>
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
:href="$parent.findPrimary(version).url"
|
||||
class="iconified-button download"
|
||||
:title="`Download ${version.name}`"
|
||||
>
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
Download
|
||||
</a>
|
||||
<div
|
||||
v-highlightjs
|
||||
:class="'markdown-body ' + version.version_type"
|
||||
v-html="
|
||||
version.changelog
|
||||
? $xss($md.render(version.changelog))
|
||||
: 'No changelog specified.'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-highlightjs
|
||||
:class="'markdown-body ' + version.version_type"
|
||||
v-html="
|
||||
version.changelog
|
||||
? $xss($md.render(version.changelog))
|
||||
: 'No changelog specified.'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DownloadIcon from '~/assets/images/utils/download.svg?inline'
|
||||
import ThisOrThat from '~/components/ui/ThisOrThat'
|
||||
import VersionFilterControl from '~/components/ui/VersionFilterControl'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DownloadIcon,
|
||||
ThisOrThat,
|
||||
VersionFilterControl,
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
filteredVersions: this.versions,
|
||||
}
|
||||
},
|
||||
auth: false,
|
||||
@@ -105,18 +95,15 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateVersions(updatedVersions) {
|
||||
this.filteredVersions = updatedVersions
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
max-width: calc(100% - (2 * var(--spacing-card-lg)));
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.version-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="card buttons">
|
||||
<button
|
||||
v-if="currentMember"
|
||||
class="iconified-button"
|
||||
@@ -495,13 +495,7 @@ export default {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
background-color: var(--color-raised-bg);
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: var(--spacing-card-md);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-bg);
|
||||
}
|
||||
|
||||
&.brand-button-colors {
|
||||
background-color: var(--color-brand);
|
||||
|
||||
@@ -1,124 +1,134 @@
|
||||
<template>
|
||||
<div class="content card">
|
||||
<nuxt-link
|
||||
v-if="currentMember"
|
||||
to="version/create"
|
||||
class="iconified-button new-version"
|
||||
>
|
||||
<UploadIcon />
|
||||
Upload
|
||||
</nuxt-link>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th role="presentation"></th>
|
||||
<th>Version</th>
|
||||
<th>Supports</th>
|
||||
<th>Stats</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="version in versions" :key="version.id">
|
||||
<td>
|
||||
<a
|
||||
:href="$parent.findPrimary(version).url"
|
||||
class="download-button"
|
||||
:title="`Download ${version.name}`"
|
||||
>
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="info">
|
||||
<div class="top">
|
||||
<nuxt-link
|
||||
:to="`/${project.project_type}/${
|
||||
project.slug ? project.slug : project.id
|
||||
}/version/${encodeURIComponent(version.version_number)}`"
|
||||
>
|
||||
{{ version.name }}
|
||||
</nuxt-link>
|
||||
<div class="content">
|
||||
<div class="card" v-if="currentMember">
|
||||
<nuxt-link to="version/create" class="iconified-button new-version">
|
||||
<UploadIcon />
|
||||
Upload
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<VersionFilterControl
|
||||
class="card"
|
||||
:versions="versions"
|
||||
@updateVersions="updateVersions"
|
||||
/>
|
||||
<div class="card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th role="presentation"></th>
|
||||
<th>Version</th>
|
||||
<th>Supports</th>
|
||||
<th>Stats</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="version in filteredVersions" :key="version.id">
|
||||
<td>
|
||||
<a
|
||||
:href="$parent.findPrimary(version).url"
|
||||
class="download-button"
|
||||
:class="version.version_type"
|
||||
:title="`Download ${version.name}`"
|
||||
>
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="info">
|
||||
<div class="top">
|
||||
<nuxt-link
|
||||
:to="`/${project.project_type}/${
|
||||
project.slug ? project.slug : project.id
|
||||
}/version/${encodeURIComponent(version.version_number)}`"
|
||||
>
|
||||
{{ version.name }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<VersionBadge
|
||||
v-if="version.version_type === 'release'"
|
||||
type="release"
|
||||
color="green"
|
||||
/>
|
||||
<VersionBadge
|
||||
v-else-if="version.version_type === 'beta'"
|
||||
type="beta"
|
||||
color="yellow"
|
||||
/>
|
||||
<VersionBadge
|
||||
v-else-if="version.version_type === 'alpha'"
|
||||
type="alpha"
|
||||
color="red"
|
||||
/>
|
||||
<span class="divider" />
|
||||
<span class="version_number">{{
|
||||
version.version_number
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="mobile-info">
|
||||
<p>
|
||||
{{
|
||||
version.loaders
|
||||
.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
|
||||
.join(', ') +
|
||||
' ' +
|
||||
$formatVersion(version.game_versions)
|
||||
}}
|
||||
</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<strong>{{ $formatNumber(version.downloads) }}</strong>
|
||||
downloads
|
||||
</p>
|
||||
<p>
|
||||
Published on
|
||||
<strong>{{
|
||||
$dayjs(version.date_published).format('MMM D, YYYY')
|
||||
}}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<VersionBadge
|
||||
v-if="version.version_type === 'release'"
|
||||
type="release"
|
||||
color="green"
|
||||
/>
|
||||
<VersionBadge
|
||||
v-else-if="version.version_type === 'beta'"
|
||||
type="beta"
|
||||
color="yellow"
|
||||
/>
|
||||
<VersionBadge
|
||||
v-else-if="version.version_type === 'alpha'"
|
||||
type="alpha"
|
||||
color="red"
|
||||
/>
|
||||
<span class="divider" />
|
||||
<span class="version_number">{{ version.version_number }}</span>
|
||||
</div>
|
||||
<div class="mobile-info">
|
||||
<p>
|
||||
{{
|
||||
version.loaders
|
||||
.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
|
||||
.join(', ') +
|
||||
' ' +
|
||||
$formatVersion(version.game_versions)
|
||||
}}
|
||||
</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<strong>{{ $formatNumber(version.downloads) }}</strong>
|
||||
downloads
|
||||
</p>
|
||||
<p>
|
||||
Published on
|
||||
<strong>{{
|
||||
$dayjs(version.date_published).format('MMM D, YYYY')
|
||||
}}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
{{
|
||||
version.loaders
|
||||
.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
|
||||
.join(', ')
|
||||
}}
|
||||
</p>
|
||||
<p>{{ $formatVersion(version.game_versions) }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
<span>{{ $formatNumber(version.downloads) }}</span>
|
||||
downloads
|
||||
</p>
|
||||
<p>
|
||||
Published on
|
||||
<span>{{
|
||||
$dayjs(version.date_published).format('MMM D, YYYY')
|
||||
}}</span>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
{{
|
||||
version.loaders
|
||||
.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
|
||||
.join(', ')
|
||||
}}
|
||||
</p>
|
||||
<p>{{ $formatVersion(version.game_versions) }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
<span>{{ $formatNumber(version.downloads) }}</span>
|
||||
downloads
|
||||
</p>
|
||||
<p>
|
||||
Published on
|
||||
<span>{{
|
||||
$dayjs(version.date_published).format('MMM D, YYYY')
|
||||
}}</span>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UploadIcon from '~/assets/images/utils/upload.svg?inline'
|
||||
import DownloadIcon from '~/assets/images/utils/download.svg?inline'
|
||||
import VersionBadge from '~/components/ui/Badge'
|
||||
import VersionFilterControl from '~/components/ui/VersionFilterControl'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UploadIcon,
|
||||
DownloadIcon,
|
||||
VersionBadge,
|
||||
VersionFilterControl,
|
||||
},
|
||||
auth: false,
|
||||
props: {
|
||||
@@ -141,14 +151,20 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filteredVersions: this.versions,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateVersions(updatedVersions) {
|
||||
this.filteredVersions = updatedVersions
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
max-width: calc(100% - (2 * var(--spacing-card-lg)));
|
||||
}
|
||||
|
||||
.new-version {
|
||||
max-width: 5.25rem;
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
<section class="normal-page__content">
|
||||
<div class="card search-controls">
|
||||
<div class="iconified-input">
|
||||
<label class="hidden" for="search">Search Mods</label>
|
||||
<label class="hidden" for="search">Search</label>
|
||||
<SearchIcon aria-hidden="true" />
|
||||
<input
|
||||
id="search"
|
||||
|
||||
Reference in New Issue
Block a user