Compare commits

..

2 commits

Author SHA1 Message Date
Finn 2252a49467 finish ticket page looks wise 2021-08-22 16:37:16 +02:00
Finn d88bd657ef finish ticket page looks wise 2021-08-22 16:37:12 +02:00
2 changed files with 29 additions and 7 deletions

View file

@ -1,7 +1,6 @@
<template> <template>
<div id="content" class="app-upschooling"> <div id="content" class="app-upschooling">
<AppNavigation> <AppNavigation />
</AppNavigation>
<AppContent> <AppContent>
<Ticket /> <Ticket />
</AppContent> </AppContent>

View file

@ -1,23 +1,32 @@
<template> <template>
<div class="single-ticket"> <div class="single-ticket">
<div class="header-bar">
<button>
{{ t('upschooling', 'Ticket Schließen') }}
</button>
<button>
{{ t('upschooling', 'Speichern') }}
</button>
</div>
<h2>Ticket "ding"</h2> <h2>Ticket "ding"</h2>
<HeaderlessKeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" /> <KeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
<br> <br>
<label for="description">Beschreibung</label> <label for="description">{{ t('upschooling', 'Beschreibung') }}</label>
<textarea id="description" v-model.trim.lazy="description" /> <textarea id="description" v-model.trim.lazy="description" rows="15" />
<br> <br>
<button @click="save"> <button @click="save">
Speichern Speichern
</button> </button>
<hr> <hr>
<div class="placeholder" />
</div> </div>
</template> </template>
<script> <script>
import HeaderlessKeyValueTable from './components/HeaderlessKeyValueTable' import KeyValueTable from './components/KeyValueTable'
export default { export default {
name: 'Ticket', name: 'Ticket',
components: { HeaderlessKeyValueTable }, components: { KeyValueTable },
data() { data() {
return { return {
description: '', description: '',
@ -32,5 +41,19 @@ export default {
<style scoped> <style scoped>
textarea { textarea {
width: 100%; width: 100%;
margin: 0;
resize: vertical;
}
.placeholder {
height: 400px;
width: 100%;
background: #f0f0f0;
}
.header-bar {
display: flex;
width: 100%;
flex-direction: row-reverse;
} }
</style> </style>