You've already forked AstralRinth
forked from didirus/AstralRinth
Fix version page layout
This commit is contained in:
Prospector
@@ -467,105 +467,73 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="version-page__metadata">
|
||||||
<div class="normal-page__sidebar version-page__metadata">
|
<div class="universal-card full-width-inputs">
|
||||||
<AdPlaceholder
|
<h3>Metadata</h3>
|
||||||
v-if="
|
<div>
|
||||||
(!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
|
<h4>Release channel</h4>
|
||||||
tags.approvedStatuses.includes(project.status)
|
<Multiselect
|
||||||
"
|
v-if="isEditing"
|
||||||
/>
|
v-model="version.version_type"
|
||||||
<div class="universal-card full-width-inputs">
|
class="input"
|
||||||
<h3>Metadata</h3>
|
placeholder="Select one"
|
||||||
<div>
|
:options="['release', 'beta', 'alpha']"
|
||||||
<h4>Release channel</h4>
|
:custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
|
||||||
<Multiselect
|
:searchable="false"
|
||||||
v-if="isEditing"
|
:close-on-select="true"
|
||||||
v-model="version.version_type"
|
:show-labels="false"
|
||||||
class="input"
|
:allow-empty="false"
|
||||||
placeholder="Select one"
|
|
||||||
:options="['release', 'beta', 'alpha']"
|
|
||||||
:custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
|
|
||||||
:searchable="false"
|
|
||||||
:close-on-select="true"
|
|
||||||
:show-labels="false"
|
|
||||||
:allow-empty="false"
|
|
||||||
/>
|
|
||||||
<template v-else>
|
|
||||||
<Badge
|
|
||||||
v-if="version.version_type === 'release'"
|
|
||||||
class="value"
|
|
||||||
type="release"
|
|
||||||
color="green"
|
|
||||||
/>
|
|
||||||
<Badge
|
|
||||||
v-else-if="version.version_type === 'beta'"
|
|
||||||
class="value"
|
|
||||||
type="beta"
|
|
||||||
color="orange"
|
|
||||||
/>
|
|
||||||
<Badge
|
|
||||||
v-else-if="version.version_type === 'alpha'"
|
|
||||||
class="value"
|
|
||||||
type="alpha"
|
|
||||||
color="red"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4>Version number</h4>
|
|
||||||
<div v-if="isEditing" class="iconified-input">
|
|
||||||
<label class="hidden" for="version-number">Version number</label>
|
|
||||||
<HashIcon aria-hidden="true" />
|
|
||||||
<input
|
|
||||||
id="version-number"
|
|
||||||
v-model="version.version_number"
|
|
||||||
type="text"
|
|
||||||
autocomplete="off"
|
|
||||||
maxlength="54"
|
|
||||||
/>
|
/>
|
||||||
|
<template v-else>
|
||||||
|
<Badge
|
||||||
|
v-if="version.version_type === 'release'"
|
||||||
|
class="value"
|
||||||
|
type="release"
|
||||||
|
color="green"
|
||||||
|
/>
|
||||||
|
<Badge
|
||||||
|
v-else-if="version.version_type === 'beta'"
|
||||||
|
class="value"
|
||||||
|
type="beta"
|
||||||
|
color="orange"
|
||||||
|
/>
|
||||||
|
<Badge
|
||||||
|
v-else-if="version.version_type === 'alpha'"
|
||||||
|
class="value"
|
||||||
|
type="alpha"
|
||||||
|
color="red"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<span v-else>{{ version.version_number }}</span>
|
<div>
|
||||||
</div>
|
<h4>Version number</h4>
|
||||||
<div v-if="project.project_type !== 'resourcepack'">
|
<div v-if="isEditing" class="iconified-input">
|
||||||
<h4>Loaders</h4>
|
<label class="hidden" for="version-number">Version number</label>
|
||||||
<Multiselect
|
<HashIcon aria-hidden="true" />
|
||||||
v-if="isEditing"
|
<input
|
||||||
v-model="version.loaders"
|
id="version-number"
|
||||||
:options="
|
v-model="version.version_number"
|
||||||
tags.loaders
|
type="text"
|
||||||
.filter((x) =>
|
autocomplete="off"
|
||||||
x.supported_project_types.includes(project.actualProjectType.toLowerCase()),
|
maxlength="54"
|
||||||
)
|
/>
|
||||||
.map((it) => it.name)
|
</div>
|
||||||
"
|
<span v-else>{{ version.version_number }}</span>
|
||||||
:custom-label="(value) => $formatCategory(value)"
|
</div>
|
||||||
:loading="tags.loaders.length === 0"
|
<div v-if="project.project_type !== 'resourcepack'">
|
||||||
:multiple="true"
|
<h4>Loaders</h4>
|
||||||
:searchable="true"
|
<Multiselect
|
||||||
:show-no-results="false"
|
v-if="isEditing"
|
||||||
:close-on-select="false"
|
v-model="version.loaders"
|
||||||
:clear-on-select="false"
|
|
||||||
:show-labels="false"
|
|
||||||
:limit="6"
|
|
||||||
:hide-selected="true"
|
|
||||||
placeholder="Choose loaders..."
|
|
||||||
/>
|
|
||||||
<Categories v-else :categories="version.loaders" :type="project.actualProjectType" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4>Game versions</h4>
|
|
||||||
<template v-if="isEditing">
|
|
||||||
<multiselect
|
|
||||||
v-model="version.game_versions"
|
|
||||||
:options="
|
:options="
|
||||||
showSnapshots
|
tags.loaders
|
||||||
? tags.gameVersions.map((x) => x.version)
|
.filter((x) =>
|
||||||
: tags.gameVersions
|
x.supported_project_types.includes(project.actualProjectType.toLowerCase()),
|
||||||
.filter((it) => it.version_type === 'release')
|
)
|
||||||
.map((x) => x.version)
|
.map((it) => it.name)
|
||||||
"
|
"
|
||||||
:loading="tags.gameVersions.length === 0"
|
:custom-label="(value) => $formatCategory(value)"
|
||||||
|
:loading="tags.loaders.length === 0"
|
||||||
:multiple="true"
|
:multiple="true"
|
||||||
:searchable="true"
|
:searchable="true"
|
||||||
:show-no-results="false"
|
:show-no-results="false"
|
||||||
@@ -574,57 +542,83 @@
|
|||||||
:show-labels="false"
|
:show-labels="false"
|
||||||
:limit="6"
|
:limit="6"
|
||||||
:hide-selected="true"
|
:hide-selected="true"
|
||||||
placeholder="Choose versions..."
|
placeholder="Choose loaders..."
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
v-model="showSnapshots"
|
|
||||||
label="Show all versions"
|
|
||||||
description="Show all versions"
|
|
||||||
style="margin-top: 0.5rem"
|
|
||||||
:border="false"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<span v-else>{{ $formatVersion(version.game_versions) }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isEditing">
|
|
||||||
<h4>Downloads</h4>
|
|
||||||
<span>{{ version.downloads }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isEditing">
|
|
||||||
<h4>Publication date</h4>
|
|
||||||
<span>
|
|
||||||
{{ $dayjs(version.date_published).format("MMMM D, YYYY [at] h:mm A") }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isEditing && version.author">
|
|
||||||
<h4>Publisher</h4>
|
|
||||||
<div
|
|
||||||
class="team-member columns button-transparent"
|
|
||||||
@click="$router.push('/user/' + version.author.user.username)"
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
:src="version.author.avatar_url"
|
|
||||||
:alt="version.author.user.username"
|
|
||||||
size="sm"
|
|
||||||
circle
|
|
||||||
/>
|
/>
|
||||||
|
<Categories v-else :categories="version.loaders" :type="project.actualProjectType" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Game versions</h4>
|
||||||
|
<template v-if="isEditing">
|
||||||
|
<multiselect
|
||||||
|
v-model="version.game_versions"
|
||||||
|
:options="
|
||||||
|
showSnapshots
|
||||||
|
? tags.gameVersions.map((x) => x.version)
|
||||||
|
: tags.gameVersions
|
||||||
|
.filter((it) => it.version_type === 'release')
|
||||||
|
.map((x) => x.version)
|
||||||
|
"
|
||||||
|
:loading="tags.gameVersions.length === 0"
|
||||||
|
:multiple="true"
|
||||||
|
:searchable="true"
|
||||||
|
:show-no-results="false"
|
||||||
|
:close-on-select="false"
|
||||||
|
:clear-on-select="false"
|
||||||
|
:show-labels="false"
|
||||||
|
:limit="6"
|
||||||
|
:hide-selected="true"
|
||||||
|
placeholder="Choose versions..."
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
v-model="showSnapshots"
|
||||||
|
label="Show all versions"
|
||||||
|
description="Show all versions"
|
||||||
|
style="margin-top: 0.5rem"
|
||||||
|
:border="false"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<span v-else>{{ $formatVersion(version.game_versions) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="!isEditing">
|
||||||
|
<h4>Downloads</h4>
|
||||||
|
<span>{{ version.downloads }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="!isEditing">
|
||||||
|
<h4>Publication date</h4>
|
||||||
|
<span>
|
||||||
|
{{ $dayjs(version.date_published).format("MMMM D, YYYY [at] h:mm A") }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="!isEditing && version.author">
|
||||||
|
<h4>Publisher</h4>
|
||||||
|
<div
|
||||||
|
class="team-member columns button-transparent"
|
||||||
|
@click="$router.push('/user/' + version.author.user.username)"
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
:src="version.author.avatar_url"
|
||||||
|
:alt="version.author.user.username"
|
||||||
|
size="sm"
|
||||||
|
circle
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="member-info">
|
<div class="member-info">
|
||||||
<nuxt-link :to="'/user/' + version.author.user.username" class="name">
|
<nuxt-link :to="'/user/' + version.author.user.username" class="name">
|
||||||
<p>
|
<p>
|
||||||
{{ version.author.name }}
|
{{ version.author.name }}
|
||||||
|
</p>
|
||||||
|
</nuxt-link>
|
||||||
|
<p v-if="version.author.role" class="role">
|
||||||
|
{{ version.author.role }}
|
||||||
</p>
|
</p>
|
||||||
</nuxt-link>
|
<p v-else-if="version.author_id === 'GVFjtWTf'" class="role">Archivist</p>
|
||||||
<p v-if="version.author.role" class="role">
|
</div>
|
||||||
{{ version.author.role }}
|
|
||||||
</p>
|
|
||||||
<p v-else-if="version.author_id === 'GVFjtWTf'" class="role">Archivist</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-if="!isEditing">
|
||||||
<div v-if="!isEditing">
|
<h4>Version ID</h4>
|
||||||
<h4>Version ID</h4>
|
<CopyCode :text="version.id" />
|
||||||
<CopyCode :text="version.id" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1334,10 +1328,20 @@ export default defineNuxtComponent({
|
|||||||
"title" auto
|
"title" auto
|
||||||
"changelog" auto
|
"changelog" auto
|
||||||
"dependencies" auto
|
"dependencies" auto
|
||||||
|
"metadata" auto
|
||||||
"files" auto
|
"files" auto
|
||||||
"dummy" 1fr
|
|
||||||
/ 1fr;
|
/ 1fr;
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
grid-template:
|
||||||
|
"title title" auto
|
||||||
|
"changelog metadata" auto
|
||||||
|
"dependencies metadata" auto
|
||||||
|
"files metadata" auto
|
||||||
|
"dummy metadata" 1fr
|
||||||
|
/ 1fr 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
column-gap: var(--spacing-card-md);
|
column-gap: var(--spacing-card-md);
|
||||||
|
|
||||||
.version-page__title {
|
.version-page__title {
|
||||||
@@ -1529,6 +1533,8 @@ export default defineNuxtComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.version-page__metadata {
|
.version-page__metadata {
|
||||||
|
grid-area: metadata;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin: 1rem 0 0.25rem 0;
|
margin: 1rem 0 0.25rem 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user