diff --git a/frontend/src/components/feedback_labels/FeedbackLabelForm.vue b/frontend/src/components/feedback_labels/FeedbackLabelForm.vue index b954e9d18142f07439e58c5c7dc13a99943d5904..347267e35e13aac93ecc807634d620349a42ed44 100644 --- a/frontend/src/components/feedback_labels/FeedbackLabelForm.vue +++ b/frontend/src/components/feedback_labels/FeedbackLabelForm.vue @@ -1,63 +1,40 @@ <template> - <v-row - - justify="start" - > - <v-col - class="ml-3" - cols="9" - > - <v-text-field - id="label-name" - v-model="mutableName" - label="Name" - /> - </v-col> - <v-col - class="ml-3" - cols="9" - > - <v-textarea - id="label-description" - v-model="mutableDescription" - label="Description" - placeholder="The description can be seen when hovering above the label" - auto-grow - /> - </v-col> - <v-col - class="ml-2" - cols="12" + <div> + <v-text-field + id="label-name" + v-model="mutableName" + label="Name" + /> + <v-textarea + id="label-description" + v-model="mutableDescription" + label="Description" + placeholder="The description can be seen when hovering above the label" + auto-grow + /> + <compact-picker + v-model="mutableColour" + style="width:85%;box-shadow:none;" + /> + <v-btn + v-if="!is_update" + id="create-label-btn" + :loading="loading" + color="teal" + @click="createLabel" > - <compact-picker - v-model="mutableColour" - style="width:85%;box-shadow:none;" - /> - </v-col> - <v-col - class="ml-1 mb-3" - cols="4" + Create + </v-btn> + <v-btn + v-else + id="update-label-btn" + color="teal" + :loading="loading" + @click="updateLabel" > - <v-btn - v-if="!is_update" - id="create-label-btn" - :loading="loading" - color="teal" - @click="createLabel" - > - Create - </v-btn> - <v-btn - v-else - id="update-label-btn" - color="teal" - :loading="loading" - @click="updateLabel" - > - Update - </v-btn> - </v-col> - </v-row> + Update + </v-btn> + </div> </template> <script lang="ts"> diff --git a/frontend/src/components/feedback_labels/FeedbackLabelList.vue b/frontend/src/components/feedback_labels/FeedbackLabelList.vue index 44111fd35a9bf91422c2fea0d7c0ad73873a9f21..aad407c23efe7da70c5541401490b4c567de34ee 100644 --- a/frontend/src/components/feedback_labels/FeedbackLabelList.vue +++ b/frontend/src/components/feedback_labels/FeedbackLabelList.vue @@ -31,10 +31,6 @@ export default { <style scoped> div.label { display: inline-block; - margin: 8px 0 0 8px; -} - -div.label:last-child { - margin-bottom: 8px; + margin: 0 8px 8px 0; } </style> diff --git a/frontend/src/components/feedback_labels/FeedbackLabelTab.vue b/frontend/src/components/feedback_labels/FeedbackLabelTab.vue index 0e0c81141c62e81c72f6fe9dc953ff0d2b0f0972..93da029371763cc2983ee6fb96a7db62b4a1c5a4 100644 --- a/frontend/src/components/feedback_labels/FeedbackLabelTab.vue +++ b/frontend/src/components/feedback_labels/FeedbackLabelTab.vue @@ -45,13 +45,19 @@ Update </v-tab> <v-tab-item> - <feedback-label-list /> + <v-container> + <feedback-label-list /> + </v-container> </v-tab-item> <v-tab-item> - <feedback-label-form /> + <v-container> + <feedback-label-form /> + </v-container> </v-tab-item> <v-tab-item> - <feedback-label-updater /> + <v-container> + <feedback-label-updater /> + </v-container> </v-tab-item> </v-tabs> </v-card> diff --git a/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue b/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue index 088e1d8cb6c365bcb142b27d470c61c9e40d64d7..b26e45af846c2da8ffa6408cc543ed42ede94ac6 100644 --- a/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue +++ b/frontend/src/components/feedback_labels/FeedbackLabelUpdater.vue @@ -1,36 +1,27 @@ <template> - <v-row> - <v-col - class="mx-2" - cols="12" + <div> + <v-autocomplete + id="label-update-autocomplete" + :items="feedbackLabels" + item-text="name" + item-value="pk" + append-icon="search" + placeholder="search for keywords" + @input="setLabel" > - <v-autocomplete - id="label-update-autocomplete" - :items="feedbackLabels" - item-text="name" - item-value="pk" - append-icon="search" - placeholder="search for keywords" - @input="setLabel" - > - <template #item="{ item }"> - <div class="label-updater-item"> - <feedback-label-component v-bind="item" /> - </div> - </template> - </v-autocomplete> - </v-col> - <v-col + <template #item="{ item }"> + <div class="label-updater-item"> + <feedback-label-component v-bind="item" /> + </div> + </template> + </v-autocomplete> + <feedback-label-form v-if="label.pk !== -1" - cols="12" - > - <feedback-label-form - is_update - v-bind="currentLabel" - @label-updated="setLabel" - /> - </v-col> - </v-row> + is_update + v-bind="currentLabel" + @label-updated="setLabel" + /> + </div> </template> <script lang="ts">