feat(cxl-ui): Added paddin property to handle parent contaner sizes w…

…hen scaling
conversionxl · Jul 3, 2023 · c9f6f9e · c9f6f9e
1 parent 071a86f
commit c9f6f9e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/cxl-ui/scss/cxl-credential.scss b/packages/cxl-ui/scss/cxl-credential.scss
@@ -1,5 +1,6 @@
 :host {
   display: flex;
+  margin: auto;
 }
 
 .container {
@@ -57,7 +58,7 @@
     font-size: 20px;
     font-weight: 200;
     text-transform: lowercase;
-    letter-spacing: 0.09em;
+    letter-spacing: 2px;
   }
 
   #header {

diff --git a/packages/cxl-ui/src/components/cxl-credential.js b/packages/cxl-ui/src/components/cxl-credential.js
@@ -32,7 +32,9 @@ export class CXLCredentialElement extends LitElement {
 
   @property({ type: Number }) scale = 0.5;
 
-  @property({ type: Number }) maxWidth;
+  @property({ type: Number, attribute: 'max-width' }) maxWidth;
+
+  @property({ type: Number, attribute: 'parent-padding' }) parentPadding = 0;
 
   @query('#qr-code') qrCodeCanvas = null;
 
@@ -97,7 +99,7 @@ export class CXLCredentialElement extends LitElement {
    * device orientation. But it will adjust, if the page is reloaded after.
    */
   _handleScaling() {
-    const width = this.maxWidth || window.innerWidth;
+    const width = this.maxWidth  || window.innerWidth - this.parentPadding;
     const finalW = 1464 * this.scale;
     this.correctionFactor = width < finalW || this.maxWidth ? width / finalW : 1;
     this.style.height = `${1120 * this.scale * this.correctionFactor}px`;
@@ -128,8 +130,8 @@ export class CXLCredentialElement extends LitElement {
       this.setAttribute('theme', this.type === 'minidegree' ? 'dark' : 'light');
     }
 
-    if (changes.has('scale')) {
-      this._handleScaling();
+    if (changes.has('scale') || changes.has('correctionFactor')) {
+      requestAnimationFrame(() => this._handleScaling());
     }
   }
 
@@ -158,7 +160,7 @@ export class CXLCredentialElement extends LitElement {
           <div class="code">
             <div>
               <canvas id="qr-code"></canvas>
-              <div id="qr-code-text" class="thin">certificate/${this.credentialId}</div>
+              <div id="qr-code-text" class="thin">certificate : ${this.credentialId}</div>
             </div>
           </div>
         </section>