for certificate: fix the canvas to fit in the middle vertically, add amount, and position things better

src/views/ClaimCertificateView.vue

@@ -1,21 +1,13 @@
 <template>
   <section id="Content">
-    <div v-if="claimData">
+    <div class="flex items-center justify-center h-screen">
-      <canvas ref="claimCanvas"></canvas>
+      <div v-if="claimData">
+        <canvas class="w-full block mx-auto" ref="claimCanvas"></canvas>
+      </div>
     </div>
   </section>
 </template>
 
-<style scoped>
-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
-
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { nextTick } from "vue";
@@ -116,9 +108,13 @@ export default class ClaimCertificateView extends Vue {
           // Draw claim type
           ctx.font = "bold 20px Arial";
           const claimTypeText =
-            this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
+            claimData.claimType === "GiveAction"
-              claimData.claimType || "",
+            ? "Gift"
-            );
+            : claimData.claimType === "PlanAction"
+              ? "Project"
+              : this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
+                  claimData.claimType || "",
+                );
           const claimTypeWidth = ctx.measureText(claimTypeText).width;
           ctx.fillText(
             claimTypeText,
@@ -126,8 +122,8 @@ export default class ClaimCertificateView extends Vue {
             CANVAS_HEIGHT * 0.33,
           );
 
-          if (claimData.claim.agent) {
+          if (claimData.claimType === "GiveAction" && claimData.claim.agent) {
-            const presentedText = "Presented to ";
+            const presentedText = "Thanks To ";
             ctx.font = "14px Arial";
             const presentedWidth = ctx.measureText(presentedText).width;
             ctx.fillText(
@@ -146,7 +142,7 @@ export default class ClaimCertificateView extends Vue {
             ctx.fillText(
               agentText,
               (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
-              CANVAS_HEIGHT * 0.4,
+              CANVAS_HEIGHT * 0.41,
             );
           }
 
@@ -162,16 +158,29 @@ export default class ClaimCertificateView extends Vue {
             ctx.fillText(
               descriptionLine,
               (CANVAS_WIDTH - descriptionWidth) / 2,
-              CANVAS_HEIGHT * 0.45,
+              CANVAS_HEIGHT * 0.495,
             );
           }
 
+          if (claimData.claim.object?.amountOfThisGood && claimData.claim.object?.unitCode) {
+            const amount = claimData.claim.object.amountOfThisGood;
+            const unit = claimData.claim.object.unitCode;
+            const amountText = serverUtil.displayAmount(unit, amount);
+            const amountWidth = ctx.measureText(amountText).width;
+            // if there was no description then put this in that spot, otherwise put it below the description
+            const yPos = descriptionText ? CANVAS_HEIGHT * 0.525 : CANVAS_HEIGHT * 0.495;
+            ctx.font = "14px Arial";
+            ctx.fillText(amountText, (CANVAS_WIDTH - amountWidth) / 2, yPos);
+          }
+
           // Draw claim issuer & recipient
           if (claimData.issuer) {
             ctx.font = "14px Arial";
-            const issuerText =
+            let fullIssuer = serverUtil.didInfoForCertificate(claimData.issuer, allContacts);
-              "Issued by " +
+            if (fullIssuer.length > 15) {
-              serverUtil.didInfoForCertificate(claimData.issuer, allContacts);
+              fullIssuer = fullIssuer.substring(0, 30) + "...";
+            }
+            const issuerText = "Issued by " + fullIssuer;
             ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
           }
           if (confirmerIds.length > 0) {

src/views/ClaimView.vue

@@ -17,11 +17,11 @@
     </div>
 
     <!-- Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4 w-full">
-      <div class="block flex gap-4 overflow-hidden">
+      <div class="block flex gap-4 overflow-hidden w-full">
-        <div class="overflow-hidden w-full">
+        <div class="w-full">
-          <div class="flex justify-between">
+          <div class="flex columns-3">
-            <h2 class="text-md font-bold">
+            <h2 class="text-md font-bold w-full">
               {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
               <button
                 v-if="
@@ -39,7 +39,7 @@
                 <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
             </h2>
-            <div>
+            <div class="flex justify-center w-full">
               <router-link
                 :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
                 class="text-blue-500 mt-2"
@@ -49,7 +49,7 @@
               </router-link>
             </div>
             <!-- show link icon to copy this URL to the clipboard -->
-            <div>
+            <div class="flex justify-end w-full">
               <button
                 title="Copy Link"
                 @click="