Browse Source

WIP: adjustments to bring closer to original mockups

gifting-ui-2025-05
Jose Olarte III 4 weeks ago
parent
commit
b511f9cd24
  1. 32
      src/components/GiftedDialog.vue
  2. 44
      src/views/HomeView.vue

32
src/components/GiftedDialog.vue

@ -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;

44
src/views/HomeView.vue

@ -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
<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"
@click="openFeedFilters()"
>
<font-awesome icon="filter" class="fa-fw" />
</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"
@click="openFeedFilters()"
>
<font-awesome icon="filter" class="fa-fw" />
</button>
</h2>
<button
v-if="resultsAreFiltered()"
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="block text-center w-[1em] translate-y-[0.05em]" />
</button>
<button
v-else
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="block text-center w-[1em] translate-y-[0.05em]" />
</button>
</div>
<div

Loading…
Cancel
Save