Identicon responsive size fix + lint-fix

This commit is contained in:
Jose Olarte III
2025-03-17 17:59:59 +08:00
parent 66df9234fa
commit 96da4f6aec
2 changed files with 48 additions and 38 deletions

View File

@@ -21,7 +21,11 @@
<div>
<h3 class="font-semibold">
<a href="" class="hover:underline">
{{ record.giver.known ? record.giver.displayName : 'Anonymous Giver' }}
{{
record.giver.known
? record.giver.displayName
: "Anonymous Giver"
}}
</a>
</h3>
<p class="ms-auto text-xs text-slate-500 italic">
@@ -62,7 +66,7 @@
:class="[
!record.providerPlanName
? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover',
]"
/>
</template>
@@ -71,8 +75,8 @@
<template v-if="record.providerPlanName">
<ProjectIcon
:entityId="record.providerPlanName"
:iconSize="96"
class="rounded size-12 sm:size-24"
:iconSize="48"
class="rounded size-12 sm:size-24 *:w-full *:h-full"
/>
</template>
<!-- Identicon for DIDs -->
@@ -123,7 +127,7 @@
:class="[
!record.recipientProjectName
? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover',
]"
/>
</template>
@@ -132,8 +136,8 @@
<template v-if="record.recipientProjectName">
<ProjectIcon
:entityId="record.recipientProjectName"
:iconSize="96"
class="rounded size-12 sm:size-24"
:iconSize="48"
class="rounded size-12 sm:size-24 *:w-full *:h-full"
/>
</template>
<!-- Identicon for DIDs -->
@@ -183,9 +187,9 @@
:disabled="!canConfirm"
class="text-sm text-white px-3 py-1.5 ms-auto rounded-md"
:class="[
canConfirm
canConfirm
? 'bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)]'
: 'bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] opacity-50'
: 'bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] opacity-50',
]"
>
Confirm
@@ -321,20 +325,20 @@ export default class ActivityListItem extends Vue {
this.record.fullClaim?.["@type"],
this.record,
this.activeDid,
this.confirmerIdList
this.confirmerIdList,
);
return;
}
this.$emit('confirmClaim', this.record);
this.$emit("confirmClaim", this.record);
}
get friendlyDate(): string {
const date = new Date(this.record.issuedAt);
return date.toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric'
year: "numeric",
month: "short",
day: "numeric",
});
}
}