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

Giver-recipient display fixes

Browse Source 
- Truncate very long texts (such as dids)
- Stacked layout in mobile, row layout in wider screens
- Minor design adjustments
This commit is contained in:
Jose Olarte III
2025-06-24 19:19:51 +08:00
parent ce04312baa
commit fe4ae90849
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/GiftedDetailsView.vue
View File

@@ -103,8 +103,8 @@
<div class="mt-4 sm:flex justify-between gap-2">
<!-- First Column for Giver -->
<div class="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
<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"
@@ -116,7 +116,7 @@
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 truncate">
<label class="text-sm truncate">
{{
giverDid
? "This was provided by " + giverName + "."
@@ -126,12 +126,12 @@
<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"
@@ -143,7 +143,7 @@
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 truncate">
<label class="text-sm truncate">
{{
providerProjectId
? "This was provided by " + providerProjectName + "."
@@ -153,19 +153,19 @@
<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="sm: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="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
<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"
@@ -177,7 +177,7 @@
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 truncate">
<label class="text-sm truncate">
{{
recipientDid
? "This was given to " + recipientName + "."
@@ -187,12 +187,12 @@
<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"
@@ -204,7 +204,7 @@
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 truncate">
<label class="text-sm truncate">
{{
fulfillsProjectId
? "This was given to " + fulfillsProjectName + ". "
@@ -214,7 +214,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>