wip: postRecord uses bootstrap

azuki774 · Aug 15, 2024 · b4cdde0 · b4cdde0
1 parent 87eea8c
commit b4cdde0
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/components/PostRecord.vue b/components/PostRecord.vue
@@ -47,16 +47,23 @@ const postButton = async (): Promise<void> => {
 
 <template>
   <container>
-    <select v-model="selector">
-      <option v-for="category in categoryList" :key="category.category_id">
-        {{ category.category_name }}
-      </option>
-    </select>
+    <Row justify-content="md-center">
+      <Col col="md-auto">
+      <select v-model="selector">
+        <option v-for="category in categoryList" :key="category.category_id">
+          {{ category.category_name }}
+        </option>
+      </select>
+      </Col>
 
-    <input v-model="priceBox" type="number" />
+      <Col col="md-auto">
+      <input v-model="priceBox" type="number" />
+      </Col>
+    </Row>
 
-    <div class="col">
-      <button @click="postButton" name="postButton" class="sendbutton" type="submit">Post</button>
-    </div>
+    <Col display="grid" gap="2" margin="x-auto" col="6">
+    <b-button button="primary" size="lg" @click="postButton" name="postButton" class="sendbutton"
+      type="submit">Post</b-button>
+    </Col>
   </container>
 </template>