Skip to content
Snippets Groups Projects
Commit 58ea914b authored by Thilo Wischmeyer's avatar Thilo Wischmeyer Committed by Thilo Wischmeyer
Browse files

Made spacing in label ui a little more consistent

parent 0486aabe
No related branches found
No related tags found
1 merge request!247Resolve "Update Vuetify"
<template> <template>
<v-row <div>
<v-text-field
justify="start" id="label-name"
> v-model="mutableName"
<v-col label="Name"
class="ml-3" />
cols="9" <v-textarea
> id="label-description"
<v-text-field v-model="mutableDescription"
id="label-name" label="Description"
v-model="mutableName" placeholder="The description can be seen when hovering above the label"
label="Name" auto-grow
/> />
</v-col> <compact-picker
<v-col v-model="mutableColour"
class="ml-3" style="width:85%;box-shadow:none;"
cols="9" />
> <v-btn
<v-textarea v-if="!is_update"
id="label-description" id="create-label-btn"
v-model="mutableDescription" :loading="loading"
label="Description" color="teal"
placeholder="The description can be seen when hovering above the label" @click="createLabel"
auto-grow
/>
</v-col>
<v-col
class="ml-2"
cols="12"
> >
<compact-picker Create
v-model="mutableColour" </v-btn>
style="width:85%;box-shadow:none;" <v-btn
/> v-else
</v-col> id="update-label-btn"
<v-col color="teal"
class="ml-1 mb-3" :loading="loading"
cols="4" @click="updateLabel"
> >
<v-btn Update
v-if="!is_update" </v-btn>
id="create-label-btn" </div>
: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>
</template> </template>
<script lang="ts"> <script lang="ts">
......
...@@ -31,10 +31,6 @@ export default { ...@@ -31,10 +31,6 @@ export default {
<style scoped> <style scoped>
div.label { div.label {
display: inline-block; display: inline-block;
margin: 8px 0 0 8px; margin: 0 8px 8px 0;
}
div.label:last-child {
margin-bottom: 8px;
} }
</style> </style>
...@@ -45,13 +45,19 @@ ...@@ -45,13 +45,19 @@
Update Update
</v-tab> </v-tab>
<v-tab-item> <v-tab-item>
<feedback-label-list /> <v-container>
<feedback-label-list />
</v-container>
</v-tab-item> </v-tab-item>
<v-tab-item> <v-tab-item>
<feedback-label-form /> <v-container>
<feedback-label-form />
</v-container>
</v-tab-item> </v-tab-item>
<v-tab-item> <v-tab-item>
<feedback-label-updater /> <v-container>
<feedback-label-updater />
</v-container>
</v-tab-item> </v-tab-item>
</v-tabs> </v-tabs>
</v-card> </v-card>
......
<template> <template>
<v-row> <div>
<v-col <v-autocomplete
class="mx-2" id="label-update-autocomplete"
cols="12" :items="feedbackLabels"
item-text="name"
item-value="pk"
append-icon="search"
placeholder="search for keywords"
@input="setLabel"
> >
<v-autocomplete <template #item="{ item }">
id="label-update-autocomplete" <div class="label-updater-item">
:items="feedbackLabels" <feedback-label-component v-bind="item" />
item-text="name" </div>
item-value="pk" </template>
append-icon="search" </v-autocomplete>
placeholder="search for keywords" <feedback-label-form
@input="setLabel"
>
<template #item="{ item }">
<div class="label-updater-item">
<feedback-label-component v-bind="item" />
</div>
</template>
</v-autocomplete>
</v-col>
<v-col
v-if="label.pk !== -1" v-if="label.pk !== -1"
cols="12" is_update
> v-bind="currentLabel"
<feedback-label-form @label-updated="setLabel"
is_update />
v-bind="currentLabel" </div>
@label-updated="setLabel"
/>
</v-col>
</v-row>
</template> </template>
<script lang="ts"> <script lang="ts">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment