From 396f737612ddb590d480ca3555e538c6bff045ca Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Mon, 26 Aug 2024 18:19:53 -0700
Subject: [PATCH] Fix version page layout

---
 .../pages/[type]/[id]/version/[version].vue   | 290 +++++++++---------
 1 file changed, 148 insertions(+), 142 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index fe9fa59ae..48b02d0bf 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -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"
@@ -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..."
           />
+          <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 }}
+            <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>
@@ -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 {
@@ -1529,6 +1533,8 @@ export default defineNuxtComponent({
 }
 
 .version-page__metadata {
+  grid-area: metadata;
+
   h4 {
     margin: 1rem 0 0.25rem 0;
   }