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

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
pull/167/head
Jose Olarte III 1 week ago
parent
a1388539c1
commit
693173f09d
2 changed files with 138 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 157
      src/views/ClaimView.vue
  2. 76
      src/views/ConfirmGiftView.vue

157
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 -->
<div v-if="detailsForGive?.fulfillsPlanHandleId">
<router-link
:to="
'/project/' +
encodeURIComponent(detailsForGive?.fulfillsPlanHandleId)
"
class="text-blue-500 mt-2"
>
This fulfills a bigger plan
<font-awesome
icon="arrow-up-right-from-square"
class="fa-fw"
/>
</router-link>
</div>
<!-- fullfills links for a give --> <!-- Show offer fulfillment if this give fulfills an offer -->
<div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4"> <div v-if="offerFulfillment?.offerHandleId">
<router-link <!-- router-link to /claim/ only changes URL path -->
:to=" <a
'/project/' + class="text-blue-500 mt-4 cursor-pointer"
encodeURIComponent(detailsForGive?.fulfillsPlanHandleId) @click="showDifferentClaimPage(offerFulfillment.offerHandleId)"
" >
class="text-blue-500 mt-2" This fulfills
> {{
Fulfills a bigger plan... capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
</router-link> offerFulfillment.offerType || "Offer",
</div> )
<!-- Show offer fulfillment if this give fulfills an offer --> }}
<div v-if="offerFulfillment?.offerHandleId"> <font-awesome
<!-- router-link to /claim/ only changes URL path --> icon="arrow-up-right-from-square"
<a class="fa-fw"
class="text-blue-500 mt-4 cursor-pointer" />
@click="showDifferentClaimPage(offerFulfillment.offerHandleId)" </a>
> </div>
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 --> <!-- fullfills links for an offer -->
<div v-if="providersForGive?.length > 0" class="mt-4"> <div v-if="detailsForOffer?.fulfillsPlanHandleId">
<span>Other assistance provided by:</span> <router-link
<ul class="ml-4"> :to="
<li '/project/' +
v-for="provider of providersForGive" encodeURIComponent(detailsForOffer?.fulfillsPlanHandleId)
:key="provider.identifier" "
class="list-disc ml-4" class="text-blue-500 mt-4"
> >
<div class="flex gap-4"> Offered to 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>
<!-- 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 {

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

Write Preview
Loading…
Cancel
Save