ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix styling of stack header/new card input

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2019-08-11 12:01:57 +02:00
parent e16852ad17
commit 0e37354a6e
1 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/board/Stack.vue
View File

@@ -22,20 +22,19 @@
--> -->
<template> <template>
<div> <div class="stack">
<h3 v-if="!editing" @click="startEditing(stack)">{{ stack.title }} <div class="stack--header">
<button v-tooltip="t('deck', 'Delete')" class="icon-delete" <transition name="fade" mode="out-in">
@click="deleteStack(stack)" /> <h3 v-if="!editing" @click="startEditing(stack)">{{ stack.title }}</h3>
</h3> <form v-else>
<transition name="fade" mode="out-in">
<div id="card-add">
<form v-if="editing">
<input v-model="copiedStack.title" type="text" autofocus> <input v-model="copiedStack.title" type="text" autofocus>
<input type="button" class="icon-confirm" @click="finishedEdit(stack)"> <input type="button" class="icon-confirm" @click="finishedEdit(stack)">
</form> </form>
</div> </transition>
</transition> <Actions>
<ActionButton icon="icon-delete" @click="deleteStack(stack)">{{ t('deck', 'Delete stack') }}</ActionButton>
</Actions>
</div>
<!-- <container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)"> --> <!-- <container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)"> -->
<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="onDropCard"> <container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="onDropCard">
@@ -44,16 +43,13 @@
</draggable> </draggable>
</container> </container>
<div id="card-add"> <form class="stack--card-add" @submit.prevent="clickAddCard()">
<form> <label for="new-stack-input-main" class="hidden-visually">Add a new card</label>
<label for="new-stack-input-main" class="hidden-visually">Add a new card</label> <input id="new-stack-input-main" v-model="newCardTitle" type="text"
<input id="new-stack-input-main" v-model="newCardTitle" type="text" class="no-close"
class="no-close" placeholder="Add a new card">
placeholder="Add a new card" @keyup.enter="clickAddCard()"> <input class="icon-confirm" type="button" title="Submit">
<input class="icon-confirm" type="button" title="Submit" </form>
@click="clickAddCard()">
</form>
</div>
</div> </div>
</template> </template>
@@ -61,11 +57,14 @@
<script> <script>
import { Container, Draggable } from 'vue-smooth-dnd' import { Container, Draggable } from 'vue-smooth-dnd'
import { Actions, ActionButton } from 'nextcloud-vue'
import CardItem from '../cards/CardItem' import CardItem from '../cards/CardItem'
export default { export default {
name: 'Stack', name: 'Stack',
components: { components: {
Actions,
ActionButton,
CardItem, CardItem,
Container, Container,
Draggable Draggable
@@ -148,8 +147,25 @@ export default {
height: auto; height: auto;
} }
#card-add form { .stack--header {
display: flex;
h3, form {
flex-grow: 1;
display: flex; display: flex;
input[type=text] {
flex-grow: 1;
}
} }
}
.stack--card-add {
display: flex;
input[type=text] {
flex-grow: 1;
}
}
</style> </style>