Merge pull request #10 from blockchain-certificates/feat/transaction-id

Change Transaction ID display

src/components/atoms/CardCertificate/CardCertificate.js

@@ -32,12 +32,12 @@ export default function CardCertificate ({
       <div class='buv-c-card__title-wrapper'>
         <h1 class$=${titleClass}>${certificateTitle}</h1>
         <h2 class$='${titleClass}  buv-c-card__recipient'>${recipientName}</h2>
-        <span class='buv-o-small-text'>Issued on <time datetime$='${issuedOn}'>${issueDate}</time> by ${issuerName}</span>
+        <span class='buv-o-text-12'>Issued on <time datetime$='${issuedOn}'>${issueDate}</time> by ${issuerName}</span>
       </div>
       ${
   hideRecordLink
     ? ''
-    : html`<a class='buv-o-small-text  buv-o-link  buv-c-card__record-link' href='${recordLink}' target='_blank'>
+    : html`<a class='buv-o-text-12  buv-o-link  buv-c-card__record-link' href='${recordLink}' target='_blank'>
         <span class='buv-o-link__text--underline'>View Record</span>
     </a>`
 }

src/components/atoms/CertificateDetails/CertificateDetails.js

@@ -23,26 +23,28 @@ export default function CertificateDetails ({
     {
       title: 'Issuer',
       value: issuerName
-    },
-    {
-      title: 'Transaction ID',
-      value: isValidLink(transactionLink)
-        ? html`<a href='${transactionLink}' target='_blank' class='buv-c-certificate-details__link'>${transactionId}</a>`
-        : html`<span>No transaction ID</span>`
     }
   ];
 
   const definitionListDetails = details.map(detail => html`
-    <div class='buv-c-certificate-details__group  buv-o-small-text'>
-        <dt class='buv-c-certificate-details__title'>${detail.title}</dt>
+    <div class='buv-c-certificate-details__group'>
+        <dt class='buv-c-certificate-details__title  buv-o-text-11'>${detail.title}</dt>
         <dd class='buv-c-certificate-details__value'>${detail.value}</dd>
     </div>
   `);
 
   return html`
     ${CSS}
-    <dl class='buv-c-certificate-details'>
+    <dl class='buv-c-certificate-details  buv-o-text-12'>
         ${definitionListDetails}
+        <div class='buv-c-certificate-details__standalone  buv-o-text-11'>
+          ${
+  isValidLink(transactionLink)
+    ? html`<dt class='buv-c-certificate-details--inline'>Transaction ID:</dt>
+                  <dd class='buv-c-certificate-details--inline'>${transactionId}</dd>`
+    : html`<span>No transaction ID</span>`
+}
+        </div>
     </dl>
   `;
 }

src/components/atoms/CertificateDetails/_components.certificate-details.scss

@@ -4,18 +4,25 @@
 .buv-c-certificate-details {
   display: flex;
   margin: 0;
+  position: relative;
+  padding-bottom: 60px;
+  color: rgba(110, 126, 142, 1);
 
   @media only screen and (max-width: 520px) {
     flex-direction: column;
+    padding-bottom: 0;
   }
 }
 
 .buv-c-certificate-details__group {
   box-sizing: border-box;
   padding-right: 15px;
-  max-width: 25%;
-  color: rgba(110, 126, 142, 1);
+  max-width: 33%;
   margin-top: 15px;
+
+  @media only screen and (max-width: 520px) {
+    max-width: 100%;
+  }
 }
 
 .buv-c-certificate-details__title {
@@ -27,10 +34,19 @@
   margin: 0;
 }
 
-.buv-c-certificate-details__link {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: $successColor;
+.buv-c-certificate-details__standalone {
+  position: absolute;
+  top: 80px;
+  width: 125%;
+
+  @media only screen and (max-width: 520px) {
+    position: initial;
+    margin-top: 15px;
+  }
+}
+
+.buv-c-certificate-details--inline {
+  display: inline-block;
+  margin: 0 0 5px;
+  word-break: break-word;
 }

src/components/atoms/DragAndDrop/_components.drag-and-drop-css.js

@@ -1,3 +1,3 @@
 import {html} from '@polymer/lit-element';
-export default html`<style>.buv-o-small-text{font-size:12px}.buv-o-large-text{font-size:15px;line-height:20px}.buv-c-drag-and-drop__droparea{z-index:100;background-color:rgba(0,0,0,0.1);display:none;position:absolute;top:0;left:0;width:100%;height:100%}.buv-c-drag-and-drop__droparea.is-active{display:block}
+export default html`<style>.buv-o-text-12{font-size:12px}.buv-o-text-15{font-size:15px;line-height:20px}.buv-c-drag-and-drop__droparea{z-index:100;background-color:rgba(0,0,0,0.1);display:none;position:absolute;top:0;left:0;width:100%;height:100%}.buv-c-drag-and-drop__droparea.is-active{display:block}
 </style>`;

src/components/atoms/FileUpload/FileUpload.js

@@ -8,7 +8,7 @@ export default function FileUpload ({ onChange = () => {}, hideFileUpload = fals
 
   return html`
     ${CSS}
-    <label for='buv-json-file-upload' class='buv-o-link  buv-o-link--contrast  buv-o-small-text'>
+    <label for='buv-json-file-upload' class='buv-o-link  buv-o-link--contrast  buv-o-text-12'>
         <span class='buv-o-link__text--underline'>Choose JSON file</span>
         <input
           type='file'
@@ -18,5 +18,5 @@ export default function FileUpload ({ onChange = () => {}, hideFileUpload = fals
           onchange='${(e) => { onChange(e.target.files[0]); }}'
         />
     </label>
-    <span class="buv-o-small-text">(you can also drag & drop your file).</span>`;
+    <span class="buv-o-text-12">(you can also drag & drop your file).</span>`;
 }

src/components/atoms/FinalVerificationStep/FinalVerificationStep.js

@@ -21,7 +21,7 @@ export default function FinalVerificationStep ({ chain = '', transactionLink = '
   return html`
     ${CSS}
     <dt class$='${titleClasses}'>${title}</dt>
-    <dd class='buv-c-verification-substep buv-u-excluded-from-flow buv-u-full-width buv-o-small-text'>
+    <dd class='buv-c-verification-substep buv-u-excluded-from-flow buv-u-full-width buv-o-text-12'>
       ${details}
     </dd>
   `;

src/components/atoms/FullCertificateV1/FullCertificateV1.js

@@ -19,7 +19,7 @@ export default function FullCertificate ({
   const signatureList = certificateSignatures.map(signature => html`
     <li class='buv-c-full-certificate-signatures__signature'>
         <img class='buv-c-full-certificate-img--secondary' src='${signature.image}' alt='Signed by ${signature.jobTitle}'/>
-        <span class='buv-o-small-text'>${signature.jobTitle}</span>
+        <span class='buv-o-text-12'>${signature.jobTitle}</span>
     </li>
   `);