Merge pull request #384 from conversionxl/pawel/feat/credential-fit

conversionxl · Jan 12, 2024 · d84380f · d84380f
2 parents 7d9589a + cae354f
commit d84380f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
@@ -1,5 +1,6 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 @use "./mixins";
+@import "../../cxl-lumo-styles/scss/typography";
 
 :host {
   color: var(--lumo-tint);
@@ -38,10 +39,8 @@
   }
 
   .completed {
+    align-items: center;
     display: flex;
-    margin-top: var(--lumo-space-l);
-    font-size: var(--lumo-font-size-xl);
-    font-weight: 700;
     color: var(--lumo-primary-color);
   }
 
@@ -101,15 +100,39 @@
 }
 
 :host([theme~="completed"]) {
+  &::before {
+    display: none;
+  }
+
   color: var(--lumo-shade);
   background-color: var(--lumo-tint);
 
-  @media #{mq.$medium} {
-    @include mixins.pesudo-element-full-width(var(--lumo-tint));
+  .container {
+    @media #{mq.$small} {
+      display: block;
+    }
+
+    @media #{mq.$medium} {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--lumo-space-m);
+    }
   }
 
   .credential {
     padding-top: 0;
     border-top: none;
+
+    @media #{mq.$small} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
+
+    @media #{mq.$medium} {
+      max-width: calc( var(--cxl-hero-certificate-max-width) / 2 );
+    }
+
+    @media #{mq.$large} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
   }
 }
diff --git a/packages/cxl-ui/src/components/cxl-certificate-header.js b/packages/cxl-ui/src/components/cxl-certificate-header.js
@@ -33,10 +33,10 @@ export class CXLCertificateHeaderElement extends LitElement {
       return nothing;
     }
 
-    return html`<div class="completed">
+    return html`<h2 class="completed">
       <span class="completed-icon"><vaadin-icon icon="lumo:checkmark"></vaadin-icon></span>
       Course completed
-    </div>`;
+    </h2>`;
   }
 
   // eslint-disable-next-line class-methods-use-this

diff --git a/packages/cxl-ui/src/components/cxl-credential.js b/packages/cxl-ui/src/components/cxl-credential.js
@@ -44,6 +44,13 @@ export class CXLCredentialElement extends LitElement {
 
   @property({ type: Number, attribute: 'code-scale' }) codeScale = 8;
 
+  /**
+   * Resize credential to fit the parent element.
+   *
+   * @type {boolean}
+   */
+  @property({ type: Boolean, attribute: 'fit-parent' }) fitParent = false;
+
   @query('#qr-code') qrCodeCanvas = null;
 
   defaultUrl ='https://cxl.com/institute/credential'
@@ -109,7 +116,10 @@ export class CXLCredentialElement extends LitElement {
    * device orientation. But it will adjust, if the page is reloaded after.
    */
   _handleScaling() {
-    const width = this.maxWidth || window.innerWidth - this.parentPadding;
+    const width = this.fitParent
+      ? this.parentElement.clientWidth - this.parentPadding
+      : this.maxWidth || window.innerWidth - this.parentPadding;
+
     const finalW = this._certWidth * this.scale;
     this.correctionFactor = width < finalW || this.maxWidth ? width / finalW : 1;
     this.style.height = `${this._certHeight * this.scale * this.correctionFactor}px`;