|
@ -1,43 +1,53 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div v-if="visible" class="dialog-overlay"> |
|
|
<div v-if="visible" class="dialog-overlay"> |
|
|
<div class="dialog"> |
|
|
<div class="dialog"> |
|
|
<h1 class="text-lg text-center"> |
|
|
<h1 class="text-xl font-bold text-center mb-4"> |
|
|
{{ message }} {{ giver?.name || "somebody not specified" }} |
|
|
{{ message }} {{ giver?.name || "somebody not specified" }} |
|
|
</h1> |
|
|
</h1> |
|
|
<input |
|
|
<input |
|
|
type="text" |
|
|
type="text" |
|
|
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" |
|
|
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2" |
|
|
placeholder="What was received" |
|
|
placeholder="What was received" |
|
|
v-model="description" |
|
|
v-model="description" |
|
|
/> |
|
|
/> |
|
|
<div class="flex flex-row"> |
|
|
<div class="flex flex-row mb-6"> |
|
|
<span class="py-4">Hours</span> |
|
|
<span |
|
|
|
|
|
class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center px-2 py-2" |
|
|
|
|
|
>Hours</span |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2" |
|
|
|
|
|
@click="decrement()" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="chevron-left" /> |
|
|
|
|
|
</div> |
|
|
<input |
|
|
<input |
|
|
type="text" |
|
|
type="text" |
|
|
class="block w-8 rounded border border-slate-400 ml-4 text-center" |
|
|
class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center" |
|
|
v-model="hours" |
|
|
v-model="hours" |
|
|
/> |
|
|
/> |
|
|
<div class="flex flex-col px-1"> |
|
|
<div |
|
|
<div> |
|
|
class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2" |
|
|
<fa icon="square-caret-up" size="2xl" @click="increment()" /> |
|
|
@click="increment()" |
|
|
</div> |
|
|
> |
|
|
<div> |
|
|
<fa icon="chevron-right" /> |
|
|
<fa icon="square-caret-down" size="2xl" @click="decrement()" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-center mb-2 italic">Sign & Send to publish to the world</p> |
|
|
<p class="text-right">Sign & Send to publish to the world</p> |
|
|
<button |
|
|
<div class="text-right"> |
|
|
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" |
|
|
<button class="rounded border border-slate-400" @click="confirm"> |
|
|
@click="confirm" |
|
|
<span class="m-2">Sign & Send</span> |
|
|
> |
|
|
|
|
|
Sign & Send |
|
|
</button> |
|
|
</button> |
|
|
|
|
|
<button |
|
|
<button class="rounded border border-slate-400" @click="cancel"> |
|
|
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" |
|
|
<span class="m-2">Cancel</span> |
|
|
@click="cancel" |
|
|
|
|
|
> |
|
|
|
|
|
Cancel |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
@ -106,12 +116,14 @@ export default class GiftedDialog extends Vue { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
padding: 1.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.dialog { |
|
|
.dialog { |
|
|
background-color: white; |
|
|
background-color: white; |
|
|
padding: 1rem; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
border-radius: 0.5rem; |
|
|
width: 50%; |
|
|
width: 100%; |
|
|
|
|
|
max-width: 500px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|