made buttons bigger and align them horizontally

This commit is contained in:
Aqqil Azman
2024-07-18 15:33:39 +08:00
parent 33e6bec752
commit f7bd74bee4
@@ -16,11 +16,11 @@
<div>Login Information</div>
<login-form-component></login-form-component>
<button @click="selectOrder(order, 'issue_login')" class="btn btn-primary">Login Issue</button>
<button @click="selectOrder(order, 'dummy_login')" class="btn btn-primary">Login Succesful</button>
<button @click="selectOrder(order, 'dummy_login')" class="btn btn-primary">Login Successful</button>
</div>
<div v-else-if="currentQuestionId === 'login_successful'">
<div>Order Information</div>
<button @click="selectOrder(order, 'error_order')" class="btn btn-primary">Can't very order?</button>
<button @click="selectOrder(order, 'error_order')" class="btn btn-primary">Can't verify order?</button>
<button @click="selectOrder(order, 'verify_order')" class="btn btn-primary">Order Verified</button>
</div>
<div v-else-if="currentQuestionId === 'order_verify'">
@@ -93,10 +93,12 @@
<button @click="submit" class="btn btn-primary">Submit issue</button>
</div>
<div v-else>
<div v-for="(answer, index) in currentQuestion.answers" :key="index">
<button @click="selectAnswer(answer.next)" class="btn btn-primary">
{{ answer.text }}
</button>
<div class="answer-container">
<div v-for="(answer, index) in currentQuestion.answers" :key="index" class="answer-item">
<button @click="selectAnswer(answer.next)" class="btn btn-primary">
{{ answer.text }}
</button>
</div>
</div>
</div>
</div>
@@ -315,10 +317,6 @@ export default {
margin: 20px;
}
.btn {
margin: 5px;
}
.box {
border: 1px solid #ddd;
padding: 20px;
@@ -331,20 +329,37 @@ export default {
}
.image-upload {
width: 80%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom:10px;
}
width: 80%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
.text-box {
width: 80%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
width: 80%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
.btn {
margin: 5px;
font-size: 18px; /* Adjust the font size */
padding: 12px 24px; /* Adjust the padding */
border-radius: 4px; /* Optional: adjust border radius */
}
.answer-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.answer-item {
margin: 10px;
}
</style>