optimised checkout modal (express button) layout and applied bugfixes…

…, including to related components
netzkollektiv · Jul 17, 2024 · 4444cdd · 4444cdd
1 parent a0691c0
commit 4444cdd
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 29 deletions.
diff --git a/src/components/easycredit-box-listing/easycredit-box-listing.scss b/src/components/easycredit-box-listing/easycredit-box-listing.scss
@@ -42,7 +42,7 @@
                 z-index: 4;
             }
 
-            &.circle {
+            &.ec-circle {
                 z-index: 1;
             }
         }
@@ -118,7 +118,7 @@
             opacity: 1;
         }
 
-        .circle {
+        .ec-circle {
             animation-name: circle-rotation-out;
             animation-duration: 1s;
             opacity: 0;

diff --git a/src/components/easycredit-box-listing/easycredit-box-listing.tsx b/src/components/easycredit-box-listing/easycredit-box-listing.tsx
@@ -60,8 +60,8 @@ export class EasycreditBoxListing {
           ['layout-' + this.listingLayout]: this.listingLayout !== '',
         }} ref={(el) => this.listingElement = el as HTMLElement}>
             <div class="ec-box-listing__image" style={{backgroundImage: `url(${this.backgroundSrc()})`}}>
-                <div class="circle"></div>
-                <div class="circle circle-secondary"></div>
+                <div class="ec-circle"></div>
+                <div class="ec-circle ec-circle-secondary"></div>
 
                 <div class="ec-box-listing__image-logo"></div>
 

diff --git a/src/components/easycredit-box-modal/easycredit-box-modal.scss b/src/components/easycredit-box-modal/easycredit-box-modal.scss
@@ -94,7 +94,7 @@
                 z-index: 4;
             }
 
-            &.circle {
+            &.ec-circle {
                 z-index: 1;
             }
         }
@@ -159,10 +159,10 @@
             width: 100%;
             height: 220px;
 
-            .circle {
+            .ec-circle {
                 width: $circle-width-33;
             }
-            .circle-secondary {
+            .ec-circle-secondary {
                 width: $circle-width-33-secondary;
             }
         }

diff --git a/src/components/easycredit-box-modal/easycredit-box-modal.tsx b/src/components/easycredit-box-modal/easycredit-box-modal.tsx
@@ -60,8 +60,8 @@ export class EasycreditBoxModal {
           <div class="ec-box-modal__close" onClick={() => this.toggle()}></div>
 
           <div class="ec-box-modal__image" style={{backgroundImage: `url(${this.backgroundSrc()})`}}>
-            <div class="circle"></div>
-            <div class="circle circle-secondary"></div>
+            <div class="ec-circle"></div>
+            <div class="ec-circle ec-circle-secondary"></div>
 
             <div class="ec-box-modal__image-logo"></div>
           </div>

diff --git a/src/components/easycredit-express-button/easycredit-express-button.tsx b/src/components/easycredit-express-button/easycredit-express-button.tsx
@@ -100,8 +100,8 @@ export class EasycreditExpressButton {
               size="medium"
           >
               <div slot="content">
-                  <div class="checkout-modal-wrapper row">
-                      <div class="col col-method">
+                  <div class="checkout-modal-wrapper ec-row">
+                      <div class="ec-col ec-col-method">
                           <div class="container">
                               <easycredit-logo
                                 payment-type={METHODS.INSTALLMENT}
@@ -110,7 +110,7 @@ export class EasycreditExpressButton {
                               {
                                 this.isEnabled(METHODS.INSTALLMENT) &&
                                 this.isEnabled(METHODS.BILL) &&
-                                <div class="switch">
+                                <div class="ec-switch">
                                     <button onClick={() => this.switchPaymentType(METHODS.INSTALLMENT)}
                                       class={{ 'active': this.selectedPaymentType === METHODS.INSTALLMENT }} >Ratenkauf</button>
                                     <button onClick={() => this.switchPaymentType(METHODS.BILL)}
@@ -128,13 +128,13 @@ export class EasycreditExpressButton {
                               <easycredit-checkout-totals amount={this.amount} selectedInstallment={this.selectedInstallment} installmentPlans={this.installmentPlans}></easycredit-checkout-totals>
                           </div>
 
-                          <div class="background">
-                            <div class="circle"></div>
-                            <div class="circle circle-secondary"></div>
+                          <div class="ec-background">
+                            <div class="ec-circle"></div>
+                            <div class="ec-circle ec-circle-secondary"></div>
                           </div>
                       </div>
 
-                      <div class="col col-agreement">
+                      <div class="ec-col ec-col-agreement">
                           <div class="container">
                               {this.selectedPaymentType === METHODS.INSTALLMENT &&
                                   <span slot="heading">Weiter zum Ratenkauf</span>
@@ -144,7 +144,7 @@ export class EasycreditExpressButton {
                               }
 
                               <p><strong>Mit Klick auf Akzeptieren stimmen Sie der Datenübermittlung zu:</strong></p>
-                              <easycredit-checkout-privacy-approval slot="content" webshop-id={this.webshopId} />
+                              <easycredit-checkout-privacy-approval webshop-id={this.webshopId} />
                           </div>
                       </div>
                   </div>

diff --git a/src/globals/base.scss b/src/globals/base.scss
@@ -405,7 +405,7 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
     opacity: 0;
   }
 }
-.circle {
+.ec-circle {
   position: absolute;
   z-index: 1;
   box-sizing: border-box;
@@ -446,7 +446,7 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
     background-size: contain;
   }
 
-  &.circle-secondary {
+  &.ec-circle-secondary {
     width: $circle-width-66-secondary;
     bottom: auto;
     left: auto;
@@ -538,17 +538,17 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
 }
 
 // Cols
-.row {
+.ec-row {
   display: block;
 
-  .col {
+  .ec-col {
     box-sizing: border-box;
   }
 
   @media (min-width: $breakpoint-sm-up) {
     display: flex;
 
-    .col {
+    .ec-col {
       flex: 0 0 50%;
       width: 50%;
     }
@@ -568,7 +568,7 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
     }
   }
 
-  .col {
+  .ec-col {
     @media (min-width: $breakpoint-sm-up) {
       overflow: hidden auto;
     }
@@ -577,7 +577,7 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
       padding: 40px 40px 60px;
     }
 
-    &.col-method {
+    &.ec-col-method {
       color: $white;
 
       > :not(.background) {
@@ -589,7 +589,7 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
         z-index: 1;
       }
 
-      .background {
+      .ec-background {
         position: absolute;
         left: 0;
         top: 0;
@@ -604,14 +604,14 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
         overflow: hidden;
         background-color: $ec-darkblue;
 
-        .circle {
+        .ec-circle {
           width: $circle-width-66;
 
           &:after {
             @include background-svg($circle-secondary);
           }
         }
-        .circle-secondary {
+        .ec-circle-secondary {
           width: $circle-width-66-secondary;
 
           &:after {
@@ -625,7 +625,7 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
         margin-bottom: 40px;
       }
 
-      .switch {
+      .ec-switch {
         display: inline-flex;
         flex-wrap: nowrap;
         margin-bottom: 20px;
@@ -650,7 +650,9 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
           overflow: hidden;
 
           font-size: $font-size-xs;
+          line-height: normal;
           font-weight: bold;
+          color: $font-color;
 
           &.active {
             background-color: $ec-darkblue;
@@ -659,14 +661,19 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
         }
       }
     }
-    &.col-agreement {
+    &.ec-col-agreement {
       .container {
         padding: 60px 50px 100px;
       }
 
       span[slot="heading"] {
         @extend .h3;
       }
+
+      p {
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
     }
   }