From 58ea914b5d60bf0b85638c33273ae2593b32ef29 Mon Sep 17 00:00:00 2001
From: Thilo Wischmeyer <thwischm@gmail.com>
Date: Mon, 15 Feb 2021 16:30:49 +0100
Subject: [PATCH] Made spacing in label ui a little more consistent
---
.../feedback_labels/FeedbackLabelForm.vue | 91 +++++++------------
.../feedback_labels/FeedbackLabelList.vue | 6 +-
.../feedback_labels/FeedbackLabelTab.vue | 12 ++-
.../feedback_labels/FeedbackLabelUpdater.vue | 51 +++++------
4 files changed, 65 insertions(+), 95 deletions(-)
diff --git a/frontend/src/components/feedback_labels/FeedbackLabelForm.vue b/frontend/src/components/feedback_labels/FeedbackLabelForm.vue
index b954e9d1..347267e3 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 44111fd3..aad407c2 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 0e0c8114..93da0293 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 088e1d8c..b26e45af 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">
--
GitLab