trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 20 Releases 5 Wiki Activity

UI: wording and spacing consistencies

Browse Source 
- 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
2025-08-14 20:12:28 +08:00
parent a1388539c1
commit 693173f09d
2 changed files with 140 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/views/ClaimView.vue
View File

@@ -106,69 +106,87 @@
</div> </div>
<!-- Fullfills Links --> <!-- Fullfills Links -->
<div class="mt-4 empty:hidden">
<!-- fullfills links for a give --> <!-- fullfills links for a give -->
<div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4"> <div v-if="detailsForGive?.fulfillsPlanHandleId">
<router-link <router-link
:to=" :to="
'/project/' + '/project/' +
encodeURIComponent(detailsForGive?.fulfillsPlanHandleId) encodeURIComponent(detailsForGive?.fulfillsPlanHandleId)
" "
class="text-blue-500 mt-2" 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="flex gap-4"> This fulfills a bigger plan
<div class="grow overflow-hidden"> <font-awesome
<a icon="arrow-up-right-from-square"
class="text-blue-500 mt-4 cursor-pointer" class="fa-fw"
@click="handleProviderClick(provider)" />
> </router-link>
an activity... </div>
</a>
<!-- 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>
</div> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -789,6 +807,27 @@ export default class ClaimView extends Vue {
this.canShare = !!navigator.share; 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 // insert a space before any capital letters except the initial letter
// (and capitalize initial letter, just in case) // (and capitalize initial letter, just in case)
capitalizeAndInsertSpacesBeforeCaps(text: string): string { capitalizeAndInsertSpacesBeforeCaps(text: string): string {

78
src/views/ConfirmGiftView.vue
View File

@@ -96,44 +96,46 @@
</div> </div>
<!-- Fullfills Links --> <!-- Fullfills Links -->
<div class="mt-4">
<!-- fullfills links for a give --> <!-- fullfills links for a give -->
<div v-if="giveDetails?.fulfillsPlanHandleId" class="mt-2"> <div v-if="giveDetails?.fulfillsPlanHandleId">
<router-link <router-link
:to=" :to="
'/project/' + '/project/' +
encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '') encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
" "
class="text-blue-500 mt-2 cursor-pointer" class="text-blue-500 mt-2 cursor-pointer"
> >
This fulfills a bigger plan This fulfills a bigger plan
<font-awesome <font-awesome
icon="arrow-up-right-from-square" icon="arrow-up-right-from-square"
class="fa-fw" class="fa-fw"
/> />
</router-link> </router-link>
</div> </div>
<!-- Show offer fulfillment if this give fulfills an offer -->
<div v-if="offerFulfillment?.offerHandleId"> <!-- Show offer fulfillment if this give fulfills an offer -->
<!-- router-link to /claim/ only changes URL path --> <div v-if="offerFulfillment?.offerHandleId">
<router-link <!-- router-link to /claim/ only changes URL path -->
:to=" <router-link
'/claim/' + :to="
encodeURIComponent(offerFulfillment.offerHandleId || '') '/claim/' +
" encodeURIComponent(offerFulfillment.offerHandleId || '')
class="text-blue-500 mt-2 cursor-pointer" "
> class="text-blue-500 mt-2 cursor-pointer"
This fulfills >
{{ This fulfills
capitalizeAndInsertSpacesBeforeCapsWithAPrefix( {{
offerFulfillment.offerType || "Offer", capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
) offerFulfillment.offerType || "Offer",
}} )
<font-awesome }}
icon="arrow-up-right-from-square" <font-awesome
class="fa-fw" icon="arrow-up-right-from-square"
/> class="fa-fw"
</router-link> />
</router-link>
</div>
</div> </div>
</div> </div>
</div> </div>