Fix misplaced buttons on versions page (#646)

pages/_type/_id/version.vue

@@ -1,6 +1,82 @@
 <template>
   <div>
-    <header class="card">
+    <div v-if="showKnownErrors" class="known-errors card">
+      <ul>
+        <li v-if="version.version_number === ''">
+          Your version must have a version number.
+        </li>
+        <li v-if="version.game_versions.length === 0">
+          Your version must have the supported Minecraft versions selected.
+        </li>
+        <li v-if="newFiles.length === 0 && version.files.length === 0">
+          Your version must have a file uploaded.
+        </li>
+        <li
+          v-if="
+            version.loaders.length === 0 &&
+            project.project_type !== 'resourcepack'
+          "
+        >
+          Your version must have the supported mod loaders selected.
+        </li>
+      </ul>
+    </div>
+    <div class="content card">
+      <ConfirmPopup
+        ref="delete_version_popup"
+        title="Are you sure you want to delete this version?"
+        description="This will remove this version forever (like really forever)."
+        :has-to-type="false"
+        proceed-label="Delete version"
+        @proceed="deleteVersion()"
+      />
+      <div class="columns">
+        <nuxt-link
+          v-if="mode === 'version'"
+          class="iconified-button back-button"
+          :to="`/${project.project_type}/${
+            project.slug ? project.slug : project.id
+          }/${
+            $nuxt.context.from
+              ? $nuxt.context.from.name === 'type-id-changelog'
+                ? 'changelog'
+                : 'versions'
+              : 'versions'
+          }`"
+        >
+          <BackIcon aria-hidden="true" />
+          Back to list
+        </nuxt-link>
+      </div>
+      <div v-if="version">
+        <div v-if="mode === 'version'" class="version-header">
+          <h2>{{ version.name }}</h2>
+
+          <div v-if="version.featured" class="featured">
+            <StarIcon aria-hidden="true" />
+            Featured
+          </div>
+          <div
+            v-else-if="featuredVersions.find((x) => x.id === version.id)"
+            class="featured"
+          >
+            <StarIcon aria-hidden="true" />
+            Auto-featured
+          </div>
+        </div>
+        <div
+          v-if="mode === 'edit' || mode === 'create'"
+          class="version-data-inputs"
+        >
+          <input
+            v-model="version.name"
+            class="full-width-input"
+            type="text"
+            placeholder="Enter an optional version name..."
+          />
+          <Checkbox v-model="version.featured" label="Featured" />
+          <hr class="card-divider" />
+        </div>
         <div v-if="mode === 'edit'" class="header-buttons buttons columns">
           <h3 class="column-grow-1">Edit version</h3>
           <nuxt-link
@@ -21,7 +97,10 @@
             Save
           </button>
         </div>
-      <div v-else-if="mode === 'create'" class="header-buttons buttons columns">
+        <div
+          v-else-if="mode === 'create'"
+          class="header-buttons buttons columns"
+        >
           <h3 class="column-grow-1">Create version</h3>
           <nuxt-link
             v-if="$auth.user"
@@ -81,84 +160,6 @@
             Edit
           </nuxt-link>
         </div>
-      <div v-if="showKnownErrors" class="known-errors">
-        <ul>
-          <li v-if="version.version_number === ''">
-            Your version must have a version number.
-          </li>
-          <li v-if="version.game_versions.length === 0">
-            Your version must have the supported Minecraft versions selected.
-          </li>
-          <li v-if="newFiles.length === 0 && version.files.length === 0">
-            Your version must have a file uploaded.
-          </li>
-          <li
-            v-if="
-              version.loaders.length === 0 &&
-              project.project_type !== 'resourcepack'
-            "
-          >
-            Your version must have the supported mod loaders selected.
-          </li>
-        </ul>
-      </div>
-    </header>
-    <div class="content card">
-      <ConfirmPopup
-        ref="delete_version_popup"
-        title="Are you sure you want to delete this version?"
-        description="This will remove this version forever (like really forever)."
-        :has-to-type="false"
-        proceed-label="Delete version"
-        @proceed="deleteVersion()"
-      />
-      <div class="columns">
-        <nuxt-link
-          v-if="mode === 'version'"
-          class="iconified-button back-button"
-          :to="`/${project.project_type}/${
-            project.slug ? project.slug : project.id
-          }/${
-            $nuxt.context.from
-              ? $nuxt.context.from.name === 'type-id-changelog'
-                ? 'changelog'
-                : 'versions'
-              : 'versions'
-          }`"
-        >
-          <BackIcon aria-hidden="true" />
-          Back to list
-        </nuxt-link>
-      </div>
-      <div v-if="version">
-        <div v-if="mode === 'version'" class="version-header">
-          <h2>{{ version.name }}</h2>
-
-          <div v-if="version.featured" class="featured">
-            <StarIcon aria-hidden="true" />
-            Featured
-          </div>
-          <div
-            v-else-if="featuredVersions.find((x) => x.id === version.id)"
-            class="featured"
-          >
-            <StarIcon aria-hidden="true" />
-            Auto-featured
-          </div>
-        </div>
-        <div
-          v-if="mode === 'edit' || mode === 'create'"
-          class="version-data-inputs"
-        >
-          <input
-            v-model="version.name"
-            class="full-width-input"
-            type="text"
-            placeholder="Enter an optional version name..."
-          />
-          <Checkbox v-model="version.featured" label="Featured" />
-          <hr class="card-divider" />
-        </div>
         <section v-if="mode === 'edit' || mode === 'create'">
           <h3>Changelog</h3>
           <ThisOrThat