forked from jsnbuchanan/crowd-funder-for-time-pwa
Merge branch 'gifting-periphery-improvements' into build-improvement
This commit is contained in:
Matthew Raymer
@@ -4,87 +4,91 @@
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
|
||||
<!-- Back -->
|
||||
<div
|
||||
v-if="!hideBackButton"
|
||||
class="text-lg text-center font-light relative px-7"
|
||||
>
|
||||
<h1
|
||||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
|
||||
@click="cancelBack()"
|
||||
>
|
||||
<font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
|
||||
<!-- Breadcrumb -->
|
||||
<div id="ViewBreadcrumb" class="mb-8">
|
||||
<h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
|
||||
<!-- Back -->
|
||||
<div
|
||||
v-if="!hideBackButton"
|
||||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
|
||||
@click="cancelBack()"
|
||||
>
|
||||
<font-awesome icon="chevron-left" class="fa-fw" />
|
||||
</div>
|
||||
What Was Given
|
||||
</h1>
|
||||
|
||||
<h2 class="text-lg font-normal text-center overflow-hidden">
|
||||
<div class="truncate">
|
||||
From
|
||||
{{
|
||||
providedByProject
|
||||
? providerProjectName
|
||||
: providedByGiver
|
||||
? giverName
|
||||
: "someone not named"
|
||||
}}
|
||||
</div>
|
||||
<div class="truncate">
|
||||
to
|
||||
{{
|
||||
givenToProject
|
||||
? fulfillsProjectName
|
||||
: givenToRecipient
|
||||
? recipientName
|
||||
: "someone not named"
|
||||
}}
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>
|
||||
|
||||
<h1 class="text-xl font-bold text-center mb-4">
|
||||
<span>
|
||||
From
|
||||
{{
|
||||
providedByProject
|
||||
? providerProjectName
|
||||
: providedByGiver
|
||||
? giverName
|
||||
: "someone not named"
|
||||
}}
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
to
|
||||
{{
|
||||
givenToProject
|
||||
? fulfillsProjectName
|
||||
: givenToRecipient
|
||||
? recipientName
|
||||
: "someone not named"
|
||||
}}</span
|
||||
>
|
||||
</h1>
|
||||
<textarea
|
||||
v-model="description"
|
||||
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
|
||||
placeholder="What was received"
|
||||
/>
|
||||
<div class="flex flex-row justify-center">
|
||||
<span
|
||||
class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
|
||||
@click="changeUnitCode()"
|
||||
>
|
||||
{{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
|
||||
</span>
|
||||
<div
|
||||
class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
|
||||
<div class="flex mb-4">
|
||||
<button
|
||||
class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
|
||||
@click="amountInput === '0' ? null : decrement()"
|
||||
>
|
||||
<font-awesome icon="chevron-left" />
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
id="inputGivenAmount"
|
||||
v-model="amountInput"
|
||||
type="number"
|
||||
class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
|
||||
class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
|
||||
/>
|
||||
<div
|
||||
class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
|
||||
<button
|
||||
class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
|
||||
@click="increment()"
|
||||
>
|
||||
<font-awesome icon="chevron-right" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<select
|
||||
v-model="unitCode"
|
||||
class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
|
||||
>
|
||||
<option
|
||||
v-for="(displayName, code) in unitOptions"
|
||||
:key="code"
|
||||
:value="code"
|
||||
>
|
||||
{{ displayName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-4" data-testId="imagery">
|
||||
<span v-if="imageUrl" class="flex justify-between">
|
||||
<span v-if="imageUrl" class="flex items-end gap-3">
|
||||
<a :href="imageUrl" target="_blank">
|
||||
<img
|
||||
:src="libsUtil.transformImageUrlForCors(imageUrl)"
|
||||
class="h-24 rounded-xl"
|
||||
/>
|
||||
<img :src="imageUrl" class="h-36 rounded-lg" />
|
||||
</a>
|
||||
<font-awesome
|
||||
icon="trash-can"
|
||||
class="text-red-500 fa-fw ml-8 mt-10"
|
||||
class="text-red-500 fa-fw cursor-pointer"
|
||||
@click="confirmDeleteImage"
|
||||
/>
|
||||
</span>
|
||||
@@ -98,22 +102,22 @@
|
||||
</div>
|
||||
<ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
|
||||
|
||||
<div class="mt-4 flex justify-between gap-2">
|
||||
<div class="mt-4 sm:flex justify-between gap-2">
|
||||
<!-- First Column for Giver -->
|
||||
<div class="flex-grow border border-slate-400 p-2 rounded-md">
|
||||
<div class="flex">
|
||||
<div class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
v-if="giverDid && !providedByProject"
|
||||
v-model="providedByGiver"
|
||||
type="checkbox"
|
||||
class="h-6 w-6 mr-2"
|
||||
class="flex-shrink-0 h-6 w-6 mr-2"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="square"
|
||||
class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
/>
|
||||
<label class="text-sm mt-1">
|
||||
<label class="text-sm truncate">
|
||||
{{
|
||||
giverDid
|
||||
? "This was provided by " + giverName + "."
|
||||
@@ -123,24 +127,24 @@
|
||||
<font-awesome
|
||||
v-if="!giverDid || providedByProject"
|
||||
icon="info-circle"
|
||||
class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
class="text-base cursor-pointer bg-white text-slate-500 ms-1"
|
||||
@click="notifyUserOfGiver()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
v-if="providerProjectId && !providedByGiver"
|
||||
v-model="providedByProject"
|
||||
type="checkbox"
|
||||
class="h-6 w-6 mr-2"
|
||||
class="flex-shrink-0 h-6 w-6 mr-2"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="square"
|
||||
class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
/>
|
||||
<label class="text-sm mt-1">
|
||||
<label class="text-sm truncate">
|
||||
{{
|
||||
providerProjectId
|
||||
? "This was provided by " + providerProjectName + "."
|
||||
@@ -150,31 +154,31 @@
|
||||
<font-awesome
|
||||
v-if="!providerProjectId || providedByGiver"
|
||||
icon="info-circle"
|
||||
class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
class="text-base cursor-pointer bg-white text-slate-500 ms-1"
|
||||
@click="notifyUserOfProvidingProject()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink flex justify-center items-center">
|
||||
<font-awesome icon="arrow-right" class="fa-fw h-7" />
|
||||
<div class="sm:flex-shrink flex justify-center items-center my-1 sm:my-0">
|
||||
<font-awesome icon="arrow-right" class="fa-fw h-7 rotate-90 sm:rotate-0" />
|
||||
</div>
|
||||
|
||||
<!-- Third Column for Recipient -->
|
||||
<div class="flex-grow border border-slate-400 p-2 rounded-md">
|
||||
<div class="flex">
|
||||
<div class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
v-if="recipientDid && !givenToProject"
|
||||
v-model="givenToRecipient"
|
||||
type="checkbox"
|
||||
class="h-6 w-6 mr-2"
|
||||
class="flex-shrink-0 h-6 w-6 mr-2"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="square"
|
||||
class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
/>
|
||||
<label class="text-sm mt-1">
|
||||
<label class="text-sm truncate">
|
||||
{{
|
||||
recipientDid
|
||||
? "This was given to " + recipientName + "."
|
||||
@@ -184,24 +188,24 @@
|
||||
<font-awesome
|
||||
v-if="!recipientDid || givenToProject"
|
||||
icon="info-circle"
|
||||
class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
class="text-base cursor-pointer bg-white text-slate-500 ms-1"
|
||||
@click="notifyUserOfRecipient()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
v-if="fulfillsProjectId && !givenToRecipient"
|
||||
v-model="givenToProject"
|
||||
type="checkbox"
|
||||
class="h-6 w-6 mr-2"
|
||||
class="flex-shrink-0 h-6 w-6 mr-2"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="square"
|
||||
class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
/>
|
||||
<label class="text-sm mt-1">
|
||||
<label class="text-sm truncate">
|
||||
{{
|
||||
fulfillsProjectId
|
||||
? "This was given to " + fulfillsProjectName + ". "
|
||||
@@ -211,7 +215,7 @@
|
||||
<font-awesome
|
||||
v-if="!fulfillsProjectId || givenToRecipient"
|
||||
icon="info-circle"
|
||||
class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
|
||||
class="text-base cursor-pointer bg-white text-slate-500 ms-1"
|
||||
@click="notifyUserFulfillsProject()"
|
||||
/>
|
||||
</div>
|
||||
@@ -232,11 +236,11 @@
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<p class="text-center mb-2 mt-6 italic">
|
||||
Sign & Send to publish to the world
|
||||
<p class="text-center text-sm my-4">
|
||||
<b class="font-medium">Sign & Send</b> to publish to the world
|
||||
<font-awesome
|
||||
icon="circle-info"
|
||||
class="pl-2 text-blue-500 cursor-pointer"
|
||||
class="fa-fw text-blue-500 text-base cursor-pointer"
|
||||
@click="explainData()"
|
||||
/>
|
||||
</p>
|
||||
@@ -902,5 +906,10 @@ export default class GiftedDetails extends Vue {
|
||||
7000,
|
||||
);
|
||||
}
|
||||
|
||||
// Computed property to get unit options
|
||||
get unitOptions() {
|
||||
return this.libsUtil.UNIT_SHORT;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user