vue component content order

src/components/HomeCard.vue

@@ -1,26 +1,3 @@
-<template>
-  <ion-card>
-    <ion-card-header class="two-column">
-      <div class="header-column">
-        <ion-card-title>HOME</ion-card-title>
-        <ion-card-title>Board</ion-card-title>
-        <ion-card-subtitle>{{ version }}</ion-card-subtitle>
-      </div>
-      <div style="flex-grow: 1"></div>
-      <div>
-        <ion-button @click="disconnect">Disconnect</ion-button>
-      </div>
-    </ion-card-header>
-
-    <ion-card-content>
-      <ion-button @click="update" v-if="showUpdater">Update</ion-button>
-      <br>
-      <ion-button @click="openArchive">View older versions</ion-button>
-      <br>
-      <ion-button @click="settings">Settings</ion-button>
-    </ion-card-content>
-  </ion-card>
-</template>
 <script setup lang="ts">
 import useArchiveStore from "@/stores/archive";
 import updater from "@/utils/updater";
@@ -57,6 +34,30 @@ onBeforeMount(async () => {
 });
 </script>
 
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>HOME</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>{{ version }}</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button @click="disconnect">Disconnect</ion-button>
+      </div>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-button @click="update" v-if="showUpdater">Update</ion-button>
+      <br>
+      <ion-button @click="openArchive">View older versions</ion-button>
+      <br>
+      <ion-button @click="settings">Settings</ion-button>
+    </ion-card-content>
+  </ion-card>
+</template>
+
 <style scoped>
 
 .two-column {

src/views/HomePage.vue

@@ -1,28 +1,3 @@
-<template>
-  <ion-page>
-    <ion-header :translucent="true">
-      <ion-toolbar>
-        <ion-title>Updater</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Updater</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="disconnect" @update="showDetails" @settings="showSettings"></home-card>
-      <scan-card v-else-if="shownCard == 0" @connect="goHome"></scan-card>
-      <details-card v-else-if="shownCard == 2" @back="goBack" @choose="showFlash" @disconnect="disconnect"></details-card>
-      <archive-card v-else-if="shownCard == 3" @back="goBack" @details="showDetails" @disconnect="disconnect"></archive-card>
-      <flash-card v-else-if="shownCard == 4" @back="goBack" @home="goHome"></flash-card>
-      <settings-card v-else-if="shownCard == 5" @back="goBack" @disconnect="disconnect"></settings-card>
-    </ion-content>
-  </ion-page>
-</template>
-
 <script setup lang="ts">
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import HomeCard from "@/components/HomeCard.vue";
@@ -80,6 +55,31 @@ async function disconnect() {
 }
 </script>
 
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>Updater</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Updater</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="disconnect" @update="showDetails" @settings="showSettings"></home-card>
+      <scan-card v-else-if="shownCard == 0" @connect="goHome"></scan-card>
+      <details-card v-else-if="shownCard == 2" @back="goBack" @choose="showFlash" @disconnect="disconnect"></details-card>
+      <archive-card v-else-if="shownCard == 3" @back="goBack" @details="showDetails" @disconnect="disconnect"></archive-card>
+      <flash-card v-else-if="shownCard == 4" @back="goBack" @home="goHome"></flash-card>
+      <settings-card v-else-if="shownCard == 5" @back="goBack" @disconnect="disconnect"></settings-card>
+    </ion-content>
+  </ion-page>
+</template>
+
 <style scoped>
 #container {
   text-align: center;