diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue index 9a206d104..95325810b 100644 --- a/src/views/ClaimView.vue +++ b/src/views/ClaimView.vue @@ -345,8 +345,15 @@ </div> <!-- Note that a similar section is found in ConfirmGiftView.vue --> - <div> - <h2 class="font-bold uppercase text-xl mt-8 mb-2">Details</h2> + <h2 + class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer" + @click="showVeriClaimDump = !showVeriClaimDump" + > + Details + <fa v-if="showVeriClaimDump" icon="chevron-up" /> + <fa v-else icon="chevron-down" /> + </h2> + <div v-if="showVeriClaimDump"> <div v-if=" serverUtil.containsHiddenDid(veriClaim) && @@ -448,50 +455,48 @@ This record is an edited version. The latest version is here. </span> <br /> - <button @click="showVeriClaimDump = !showVeriClaimDump" class="ml-2"> - Details - <fa v-if="showVeriClaimDump" icon="chevron-up" class="text-blue-400" /> - <fa v-else icon="chevron-down" class="text-blue-400" /> - </button> <!-- Keep the dump contents directly between > and < to avoid weird spacing. --> <pre v-if="showVeriClaimDump" class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md" >{{ veriClaimDump }}</pre > - </div> - <h2 class="text-xl mt-8 mb-2">Full Claim</h2> - <p class="mb-4"> - The full claim includes the claim as it was originally issued, including - the signature (ie. the proof of issuance by that person). - </p> - <div v-if="!fullClaim"> - <p v-if="fullClaimMessage" class="mb-4"> - {{ fullClaimMessage }} + <h2 class="text-xl mt-8 mb-2">Full Claim</h2> + <p class="mb-4"> + The full claim includes the claim as it was originally issued, including + the signature (ie. the proof of issuance by that person). </p> - <button - v-else - class="block w-full text-center text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2" - @click="showFullClaim(veriClaim.id as string)" - > - Load Full Claim Details - </button> - </div> - <div v-else> - <pre - class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md" - >{{ fullClaimDump }}</pre + <div v-if="!fullClaim"> + <p v-if="fullClaimMessage" class="mb-4"> + {{ fullClaimMessage }} + </p> + <button + v-else + class="text-blue-500 cursor-pointer" + @click="showFullClaim(veriClaim.id as string)" + > + <fa icon="file-lines" class="fa-fw" /> + Load Full Claim Details + </button> + </div> + <div v-else> + <pre + class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md" + >{{ fullClaimDump }}</pre + > + </div> + + <a + :href="apiServer + '/api/claim/' + veriClaim.id" + target="_blank" + class="text-blue-500 cursor-pointer" > + <fa icon="file-lines" class="fa-fw" /> + <fa icon="arrow-up-right-from-square" class="ml-1 fa-fw" /> + View on the Public Server + </a> </div> - - <a - :href="apiServer + '/api/claim/' + veriClaim.id" - target="_blank" - class="block w-full text-center text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2" - > - View on the Public Server - </a> </section> </template> diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue index d515221eb..e9df0524e 100644 --- a/src/views/ConfirmGiftView.vue +++ b/src/views/ConfirmGiftView.vue @@ -256,12 +256,12 @@ <!-- Note that a similar section is found in ClaimView.vue --> <h2 - class="font-bold uppercase text-xl text-blue-500 mt-8 mb-2 cursor-pointer" + class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer" @click="showVeriClaimDump = !showVeriClaimDump" > Details - <span v-if="!showVeriClaimDump"><fa icon="chevron-down" /></span> - <span v-else><fa icon="chevron-up" /></span> + <fa v-if="showVeriClaimDump" icon="chevron-up" /> + <fa v-else icon="chevron-down" /> </h2> <div v-if="showVeriClaimDump"> <div