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

WIP: adjustments to bring closer to original mockups

gifting-ui-2025-05
Jose Olarte III 4 weeks ago
parent
579cecbe6e
commit
b511f9cd24
2 changed files with 32 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/components/GiftedDialog.vue
  2. 26
      src/views/HomeView.vue

32
src/components/GiftedDialog.vue
View File

@ -10,10 +10,6 @@
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
>
<li @click="openDialog()">
<img
src="../assets/blank-square.svg"
class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
/>
<font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
<h3
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
@ -21,11 +17,11 @@
Unnamed
</h3>
</li>
<li v-if="allContacts.length === 0" class="text-sm">
<li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic">
(Add friends to see more people worthy of recognition.)
</li>
<li
v-for="contact in allContacts.slice(0, 6)"
v-for="contact in allContacts.slice(0, 10)"
:key="contact.did"
@click="openDialog(contact)"
class="cursor-pointer"
@ -33,14 +29,13 @@
<div class="relative w-fit mx-auto">
<EntityIcon
:contact="contact"
:icon-size="64"
class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
/>
<div
class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
>
<font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
<font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
</div>
</div>
<h3
@ -51,9 +46,8 @@
</li>
<li>
<router-link
v-if="allContacts.length >= 6"
:to="{ name: 'contact-gift' }"
class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
class="cursor-pointer"
>
<font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
<h3
@ -88,7 +82,7 @@
<input
v-model="description"
type="text"
class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
class="block w-full rounded border border-slate-400 px-3 py-2 mb-4 placeholder:italic"
:placeholder="prompt || 'What was given?'"
/>
<div class="flex mb-4">
@ -96,7 +90,7 @@
class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
@click="amountInput === '0' ? null : decrement()"
>
<i class="fa-solid fa-chevron-left"></i>
<font-awesome icon="chevron-left" />
</button>
<input
id="inputGivenAmount"
@ -108,7 +102,7 @@
class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
@click="increment()"
>
<i class="fa-solid fa-chevron-right"></i>
<font-awesome icon="chevron-right" />
</button>
<select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
@ -119,7 +113,6 @@
<option value="ETH">ETH</option>
</select>
</div>
<button class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4">Photo &amp; more options&hellip;</button>
<router-link
:to="{
name: 'gifted-details',
@ -180,8 +173,13 @@ import * as libsUtil from "../libs/util";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
import { Contact } from "../db/tables/contacts";
import { retrieveAccountDids } from "../libs/util";
import EntityIcon from "../components/EntityIcon.vue";
@Component
@Component({
components: {
EntityIcon,
},
})
export default class GiftedDialog extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;

26
src/views/HomeView.vue
View File

@ -125,7 +125,7 @@ Raymer * @version 1.0.0 */
@click="openGiftedPrompts()"
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
>
<font-awesome icon="lightbulb" />
<font-awesome icon="lightbulb" class="block text-center w-[1em]" />
</button>
</div>
@ -157,36 +157,26 @@ Raymer * @version 1.0.0 */
<GiftedPrompts ref="giftedPrompts" />
<FeedFilters ref="feedFilters" />
<div class="relative">
<button
v-if="isRegistered"
class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
@click="openDialog()"
>
<font-awesome icon="plus" class="fa-fw" />
</button>
</div>
<!-- Results List -->
<div class="mt-4 mb-4">
<div class="flex items-center mb-4">
<h2 class="text-xl font-bold flex items-center gap-4">
<div class="flex gap-2 items-center mb-3">
<h2 class="text-xl font-bold">
Latest Activity
</h2>
<button
v-if="resultsAreFiltered()"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openFeedFilters()"
>
<font-awesome icon="filter" class="fa-fw" />
<font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
</button>
<button
v-else
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openFeedFilters()"
>
<font-awesome icon="filter" class="fa-fw" />
<font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
</button>
</h2>
</div>
<div

Write Preview
Loading…
Cancel
Save