Skip to content

Commit

Permalink
Fix version page layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prospector
Prospector committed Aug 27, 2024
1 parent 2dd8d5a commit 396f737
Showing 1 changed file with 149 additions and 143 deletions.
292 changes: 149 additions & 143 deletions apps/frontend/src/pages/[type]/[id]/version/[version].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,105 +467,73 @@
</div>
</template>
</div>
</div>
<div class="normal-page__sidebar version-page__metadata">
<AdPlaceholder
v-if="
(!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
tags.approvedStatuses.includes(project.status)
"
/>
<div class="universal-card full-width-inputs">
<h3>Metadata</h3>
<div>
<h4>Release channel</h4>
<Multiselect
v-if="isEditing"
v-model="version.version_type"
class="input"
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"
<div class="version-page__metadata">
<div class="universal-card full-width-inputs">
<h3>Metadata</h3>
<div>
<h4>Release channel</h4>
<Multiselect
v-if="isEditing"
v-model="version.version_type"
class="input"
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>
<span v-else>{{ version.version_number }}</span>
</div>
<div v-if="project.project_type !== 'resourcepack'">
<h4>Loaders</h4>
<Multiselect
v-if="isEditing"
v-model="version.loaders"
:options="
tags.loaders
.filter((x) =>
x.supported_project_types.includes(project.actualProjectType.toLowerCase()),
)
.map((it) => it.name)
"
:custom-label="(value) => $formatCategory(value)"
:loading="tags.loaders.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 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"
<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"
/>
</div>
<span v-else>{{ version.version_number }}</span>
</div>
<div v-if="project.project_type !== 'resourcepack'">
<h4>Loaders</h4>
<Multiselect
v-if="isEditing"
v-model="version.loaders"
:options="
showSnapshots
? tags.gameVersions.map((x) => x.version)
: tags.gameVersions
.filter((it) => it.version_type === 'release')
.map((x) => x.version)
tags.loaders
.filter((x) =>
x.supported_project_types.includes(project.actualProjectType.toLowerCase()),
)
.map((it) => it.name)
"
:loading="tags.gameVersions.length === 0"
:custom-label="(value) => $formatCategory(value)"
:loading="tags.loaders.length === 0"
:multiple="true"
:searchable="true"
:show-no-results="false"
Expand All @@ -574,57 +542,83 @@
: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
placeholder="Choose loaders..."
/>

<div class="member-info">
<nuxt-link :to="'/user/' + version.author.user.username" class="name">
<p>
{{ version.author.name }}
<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">
<nuxt-link :to="'/user/' + version.author.user.username" class="name">
<p>
{{ version.author.name }}
</p>
</nuxt-link>
<p v-if="version.author.role" class="role">
{{ version.author.role }}
</p>
</nuxt-link>
<p v-if="version.author.role" class="role">
{{ version.author.role }}
</p>
<p v-else-if="version.author_id === 'GVFjtWTf'" class="role">Archivist</p>
<p v-else-if="version.author_id === 'GVFjtWTf'" class="role">Archivist</p>
</div>
</div>
</div>
</div>
<div v-if="!isEditing">
<h4>Version ID</h4>
<CopyCode :text="version.id" />
<div v-if="!isEditing">
<h4>Version ID</h4>
<CopyCode :text="version.id" />
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1334,10 +1328,20 @@ export default defineNuxtComponent({
"title" auto
"changelog" auto
"dependencies" auto
"metadata" auto
"files" auto
"dummy" 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);
.version-page__title {
Expand Down Expand Up @@ -1529,6 +1533,8 @@ export default defineNuxtComponent({
}
.version-page__metadata {
grid-area: metadata;
h4 {
margin: 1rem 0 0.25rem 0;
}
Expand Down

0 comments on commit 396f737

Please sign in to comment.