forked from jsnbuchanan/crowd-funder-for-time-pwa
In-progress: homeview design refresh
I had to comment out line 544 because it was causing errors (and seemed redundant?)
This commit is contained in:
Jose Olarte III
@@ -186,23 +186,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
|
||||
<div class="mt-4 mb-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<h2 class="text-xl font-bold">
|
||||
<h2 class="text-xl font-bold flex items-center gap-4">
|
||||
Latest Activity
|
||||
<button @click="openFeedFilters()">
|
||||
<span class="text-xs text-white">
|
||||
<fa
|
||||
v-if="resultsAreFiltered()"
|
||||
icon="filter"
|
||||
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
|
||||
/>
|
||||
<fa
|
||||
v-else
|
||||
icon="filter"
|
||||
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
|
||||
/>
|
||||
</span>
|
||||
<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()"
|
||||
>
|
||||
<fa 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()"
|
||||
>
|
||||
<fa icon="filter" class="fa-fw" />
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
@@ -249,19 +249,123 @@
|
||||
</div>
|
||||
|
||||
<InfiniteScroll @reached-bottom="loadMoreGives">
|
||||
<ul id="listLatestActivity" class="border-t border-slate-300">
|
||||
<li
|
||||
class="border-b border-slate-300 py-2"
|
||||
v-for="record in feedData"
|
||||
:key="record.jwtId"
|
||||
>
|
||||
<ul id="listLatestActivity" class="space-y-4">
|
||||
<li v-for="record in feedData" :key="record.jwtId">
|
||||
<div
|
||||
class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
|
||||
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
|
||||
v-if="record.jwtId == feedLastViewedClaimId"
|
||||
>
|
||||
You've already seen all the following
|
||||
<span class="block w-fit mx-auto -mb-2.5 bg-white px-2"
|
||||
>You've already seen all the following</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4"
|
||||
>
|
||||
<div class="relative flex justify-between gap-4 mb-3">
|
||||
<!-- Source -->
|
||||
<a
|
||||
href=""
|
||||
class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
|
||||
>
|
||||
<div class="relative w-fit mx-auto">
|
||||
<!-- If source is unknown/anonymous… -->
|
||||
<fa
|
||||
icon="circle-question"
|
||||
class="text-slate-300 text-5xl sm:text-8xl"
|
||||
/>
|
||||
<!-- Otherwise… -->
|
||||
<!-- If user, add class="rounded-full". Otherwise, add class="rounded" -->
|
||||
<span
|
||||
class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
|
||||
>
|
||||
<fa icon="user" class="fa-fw text-white" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-2">[SOURCE_NAME]</div>
|
||||
</a>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div
|
||||
class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center"
|
||||
>
|
||||
<hr class="grow border-t-[25px] border-slate-300" />
|
||||
<div
|
||||
class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Destination -->
|
||||
<a
|
||||
href=""
|
||||
class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
|
||||
>
|
||||
<div class="relative w-fit mx-auto">
|
||||
<!-- If user, add class="rounded-full". Otherwise, add class="rounded" -->
|
||||
<img
|
||||
src="https://placehold.co/600x400?text=(Project Image)"
|
||||
class="size-12 sm:size-24 object-cover rounded"
|
||||
/>
|
||||
<span
|
||||
class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
|
||||
>
|
||||
<fa icon="hammer" class="fa-fw text-white" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-2">
|
||||
[DESTINATION_NAME]
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="font-medium">
|
||||
<a
|
||||
@click="onClickLoadClaim(record.jwtId)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
{{ giveDescription(record) }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-sm">[SUB_DESCRIPTION]</p>
|
||||
</div>
|
||||
|
||||
<!-- Record Image -->
|
||||
<div
|
||||
v-if="record.image"
|
||||
class="bg-cover"
|
||||
:style="'background-image: url(' + record.image + ');'"
|
||||
>
|
||||
<a
|
||||
class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
|
||||
@click="openImageViewer(record.image)"
|
||||
>
|
||||
<img
|
||||
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
|
||||
:src="record.image"
|
||||
@load="cacheImageData($event, record.image)"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
|
||||
>
|
||||
<!-- Claim Details Link -->
|
||||
<a @click="onClickLoadClaim(record.jwtId)" class="cursor-pointer">
|
||||
<fa icon="circle-info" class="fa-fw text-slate-500" />
|
||||
</a>
|
||||
|
||||
<!-- Timestamp -->
|
||||
<span
|
||||
class="ms-auto text-xs text-slate-500 italic"
|
||||
title="8888-88-88 88:88:88"
|
||||
>[TIMESTAMP]</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="grid grid-cols-12">
|
||||
<span class="pt-1 col-span-1 justify-self-start">
|
||||
<span>
|
||||
@@ -282,7 +386,6 @@
|
||||
</span>
|
||||
</span>
|
||||
<span class="col-span-10 justify-self-stretch overflow-hidden">
|
||||
<!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
|
||||
<span
|
||||
v-if="
|
||||
record.giver.profileImageUrl ||
|
||||
@@ -314,7 +417,6 @@
|
||||
class="inline-block align-middle border border-slate-300 rounded-md ml-1"
|
||||
/>
|
||||
</span>
|
||||
-->
|
||||
<span class="pl-2 block break-words">
|
||||
{{ giveDescription(record) }}
|
||||
</span>
|
||||
@@ -359,6 +461,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</li>
|
||||
</ul>
|
||||
</InfiniteScroll>
|
||||
@@ -436,6 +539,7 @@ import {
|
||||
OnboardPage,
|
||||
registerSaveAndActivatePasskey,
|
||||
} from "../libs/util";
|
||||
// import { fa0 } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
interface GiveRecordWithContactInfo extends GiveSummaryRecord {
|
||||
giver: {
|
||||
|
||||
Reference in New Issue
Block a user