forked from trent_larson/crowd-funder-for-time-pwa
UI: wording and spacing consistencies
- Added grouped conditional spacing to ensure a top margin before fulfills links - Brought over icons and wording from ConfirmGiftView to ClaimView
This commit is contained in:
Jose Olarte III
@@ -106,69 +106,87 @@
|
||||
</div>
|
||||
|
||||
<!-- Fullfills Links -->
|
||||
|
||||
<!-- fullfills links for a give -->
|
||||
<div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4">
|
||||
<router-link
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(detailsForGive?.fulfillsPlanHandleId)
|
||||
"
|
||||
class="text-blue-500 mt-2"
|
||||
>
|
||||
Fulfills a bigger plan...
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- Show offer fulfillment if this give fulfills an offer -->
|
||||
<div v-if="offerFulfillment?.offerHandleId">
|
||||
<!-- router-link to /claim/ only changes URL path -->
|
||||
<a
|
||||
class="text-blue-500 mt-4 cursor-pointer"
|
||||
@click="showDifferentClaimPage(offerFulfillment.offerHandleId)"
|
||||
>
|
||||
Fulfills
|
||||
{{
|
||||
capitalizeAndInsertSpacesBeforeCaps(
|
||||
offerFulfillment.offerType || "Offer",
|
||||
)
|
||||
}}...
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- fullfills links for an offer -->
|
||||
<div v-if="detailsForOffer?.fulfillsPlanHandleId">
|
||||
<router-link
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(detailsForOffer?.fulfillsPlanHandleId)
|
||||
"
|
||||
class="text-blue-500 mt-4"
|
||||
>
|
||||
Offered to a bigger plan...
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Providers -->
|
||||
<div v-if="providersForGive?.length > 0" class="mt-4">
|
||||
<span>Other assistance provided by:</span>
|
||||
<ul class="ml-4">
|
||||
<li
|
||||
v-for="provider of providersForGive"
|
||||
:key="provider.identifier"
|
||||
class="list-disc ml-4"
|
||||
<div class="mt-4 empty:hidden">
|
||||
<!-- fullfills links for a give -->
|
||||
<div v-if="detailsForGive?.fulfillsPlanHandleId">
|
||||
<router-link
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(detailsForGive?.fulfillsPlanHandleId)
|
||||
"
|
||||
class="text-blue-500 mt-2"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<div class="grow overflow-hidden">
|
||||
<a
|
||||
class="text-blue-500 mt-4 cursor-pointer"
|
||||
@click="handleProviderClick(provider)"
|
||||
>
|
||||
an activity...
|
||||
</a>
|
||||
This fulfills a bigger plan
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Show offer fulfillment if this give fulfills an offer -->
|
||||
<div v-if="offerFulfillment?.offerHandleId">
|
||||
<!-- router-link to /claim/ only changes URL path -->
|
||||
<a
|
||||
class="text-blue-500 mt-4 cursor-pointer"
|
||||
@click="showDifferentClaimPage(offerFulfillment.offerHandleId)"
|
||||
>
|
||||
This fulfills
|
||||
{{
|
||||
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
|
||||
offerFulfillment.offerType || "Offer",
|
||||
)
|
||||
}}
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- fullfills links for an offer -->
|
||||
<div v-if="detailsForOffer?.fulfillsPlanHandleId">
|
||||
<router-link
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(detailsForOffer?.fulfillsPlanHandleId)
|
||||
"
|
||||
class="text-blue-500 mt-4"
|
||||
>
|
||||
Offered to a bigger plan
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Providers -->
|
||||
<div v-if="providersForGive?.length > 0">
|
||||
<span>Other assistance provided by:</span>
|
||||
<ul class="ml-4">
|
||||
<li
|
||||
v-for="provider of providersForGive"
|
||||
:key="provider.identifier"
|
||||
class="list-disc ml-4"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<div class="grow overflow-hidden">
|
||||
<a
|
||||
class="text-blue-500 mt-4 cursor-pointer"
|
||||
@click="handleProviderClick(provider)"
|
||||
>
|
||||
an activity
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -789,6 +807,27 @@ export default class ClaimView extends Vue {
|
||||
this.canShare = !!navigator.share;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats type string for display by adding spaces before capitals
|
||||
* Optionally adds a prefix
|
||||
*
|
||||
* @param text - Text to format
|
||||
* @param prefix - Optional prefix to add
|
||||
* @returns Formatted string
|
||||
*/
|
||||
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(text: string): string {
|
||||
const word = this.capitalizeAndInsertSpacesBeforeCaps(text);
|
||||
if (word) {
|
||||
// if the word starts with a vowel, use "an" instead of "a"
|
||||
const firstLetter = word[0].toLowerCase();
|
||||
const vowels = ["a", "e", "i", "o", "u"];
|
||||
const particle = vowels.includes(firstLetter) ? "an" : "a";
|
||||
return particle + " " + word;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// insert a space before any capital letters except the initial letter
|
||||
// (and capitalize initial letter, just in case)
|
||||
capitalizeAndInsertSpacesBeforeCaps(text: string): string {
|
||||
|
||||
@@ -96,44 +96,46 @@
|
||||
</div>
|
||||
|
||||
<!-- Fullfills Links -->
|
||||
|
||||
<!-- fullfills links for a give -->
|
||||
<div v-if="giveDetails?.fulfillsPlanHandleId" class="mt-2">
|
||||
<router-link
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
|
||||
"
|
||||
class="text-blue-500 mt-2 cursor-pointer"
|
||||
>
|
||||
This fulfills a bigger plan
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- Show offer fulfillment if this give fulfills an offer -->
|
||||
<div v-if="offerFulfillment?.offerHandleId">
|
||||
<!-- router-link to /claim/ only changes URL path -->
|
||||
<router-link
|
||||
:to="
|
||||
'/claim/' +
|
||||
encodeURIComponent(offerFulfillment.offerHandleId || '')
|
||||
"
|
||||
class="text-blue-500 mt-2 cursor-pointer"
|
||||
>
|
||||
This fulfills
|
||||
{{
|
||||
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
|
||||
offerFulfillment.offerType || "Offer",
|
||||
)
|
||||
}}
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</router-link>
|
||||
<div class="mt-4">
|
||||
<!-- fullfills links for a give -->
|
||||
<div v-if="giveDetails?.fulfillsPlanHandleId">
|
||||
<router-link
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
|
||||
"
|
||||
class="text-blue-500 mt-2 cursor-pointer"
|
||||
>
|
||||
This fulfills a bigger plan
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Show offer fulfillment if this give fulfills an offer -->
|
||||
<div v-if="offerFulfillment?.offerHandleId">
|
||||
<!-- router-link to /claim/ only changes URL path -->
|
||||
<router-link
|
||||
:to="
|
||||
'/claim/' +
|
||||
encodeURIComponent(offerFulfillment.offerHandleId || '')
|
||||
"
|
||||
class="text-blue-500 mt-2 cursor-pointer"
|
||||
>
|
||||
This fulfills
|
||||
{{
|
||||
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
|
||||
offerFulfillment.offerType || "Offer",
|
||||
)
|
||||
}}
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user