Browse Source

Polished gifted dialog UI

pull/43/head
Jose Olarte III 1 year ago
parent
commit
3e52b504b0
  1. 54
      src/components/GiftedDialog.vue
  2. 2
      src/main.ts
  3. 1
      src/router/index.ts

54
src/components/GiftedDialog.vue

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

2
src/main.ts

@ -13,6 +13,7 @@ import {
faBurst,
faCalendar,
faChevronLeft,
faChevronRight,
faCircle,
faCircleCheck,
faCircleQuestion,
@ -53,6 +54,7 @@ library.add(
faBurst,
faCalendar,
faChevronLeft,
faChevronRight,
faCircle,
faCircleCheck,
faCircleQuestion,

1
src/router/index.ts

@ -166,7 +166,6 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "statistics" */ "../views/ContactGiftingView.vue"
),
},
];
/** @type {*} */

Loading…
Cancel
Save