trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Polished gifted dialog UI

Browse Source
This commit is contained in:
Jose Olarte III
2023-07-14 18:27:43 +08:00
parent 4ecea1ab0e
commit 3e52b504b0
3 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/GiftedDialog.vue
View File

@@ -1,41 +1,51 @@
<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-right">Sign & Send to publish to the world</p> <p class="text-center mb-2 italic">Sign & Send to publish to the world</p>
<div class="text-right"> <button
<button class="rounded border border-slate-400" @click="confirm"> class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
<span class="m-2">Sign & Send</span> @click="confirm"
</button> >
&nbsp; Sign &amp; Send
<button class="rounded border border-slate-400" @click="cancel"> </button>
<span class="m-2">Cancel</span> <button
</button> class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
</div> @click="cancel"
>
Cancel
</button>
</div> </div>
</div> </div>
</template> </template>
@@ -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>

2
src/main.ts
View File

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

1
src/router/index.ts
View File

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