XCORNER-7 code refactor + rebase

xfiveco · Feb 2, 2024 · a2231c9 · a2231c9
1 parent 0fe80f5
commit a2231c9
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 31 deletions.
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -10,6 +10,7 @@
 @import 'objects/objects';
 @import 'components/components';
 @import 'utilities/utilities';
+@import 'widgets/widgets';
 
 // temporary styles
 // todo: remove later

diff --git a/assets/scss/widgets/reviews.scss b/assets/scss/widgets/reviews.scss
@@ -1,7 +1,7 @@
 $swiper-arrow-left-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTkgMTJINU01IDEyTDEyIDE5TTUgMTJMMTIgNSIgc3Ryb2tlPSIjNUE2NEMxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==';
 $swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNSAxMkgxOU0xOSAxMkwxMiA1TTE5IDEyTDEyIDE5IiBzdHJva2U9IiM1QTY0QzEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
 
-.reviews-carousel {
+.c-reviews-carousel {
     overflow: visible;
 
     .swiper-slide {
@@ -13,7 +13,7 @@ $swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL
     }
 }
 
-.review-card {
+.c-review-carousel__card {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -22,27 +22,27 @@ $swiper-arrow-right-purple: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL
     box-shadow: 0px 12px 48px 0px rgba(39, 39, 39, 0.04);
     background-color: $color-white;
     border-radius: 4px;
+}
 
-    .summary {
-        color: $color-black;
-        font-family: $font-regular;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 1.5;
-    }
+.c-review-carousel__summary {
+    color: $color-black;
+    font-family: $font-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+}
 
-    .name {
-        color: $color-black;
-        font-family: $font-semi-bold;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.4;
-    }
+.c-review-carousel__name {
+    color: $color-black;
+    font-family: $font-semi-bold;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.4;
 }
 
-.review-slide-navigation {
+.c-review-carousel__slide-navigation {
     margin: 48px auto;
     display: flex;
     justify-content: center;

diff --git a/assets/scss/widgets/widgets.scss b/assets/scss/widgets/widgets.scss
@@ -1,2 +1,2 @@
 @import './hero-slider';
-@import './reviews.scss';
+@import './reviews.scss';
diff --git a/widget-templates/Hero Slider/widget.html b/widget-templates/Hero Slider/widget.html
@@ -57,7 +57,7 @@
 
         slides.forEach(function(slide) {
             let info = slide.querySelector('.c-hero-slider__information');
-            let nav = document.querySelector('.c-hero-slider-navigation');
+            let nav = document.querySelector('.c-hero-slider__navigation');
 
             if(info && nav) {
                 let infoRect = info.getBoundingClientRect();

diff --git a/widget-templates/Reviews/widget.html b/widget-templates/Reviews/widget.html
@@ -1,33 +1,33 @@
 
 
 <style>
-    .reviews-carousel-{{_.id}} {
+    .c-reviews-carousel__{{_.id}} {
         margin-top: {{desktop_margin.top.value}}{{desktop_margin.top.type}};
         margin-bottom: {{desktop_margin.bottom.value}}{{desktop_margin.bottom.type}};
     }
 
     @media screen and (max-width: 767px) {
-        .reviews-carousel-{{_.id}} {
+        .c-reviews-carousel__{{_.id}} {
             margin-top: {{mobile_margin.top.value}}{{mobile_margin.top.type}};
             margin-bottom: {{mobile_margin.bottom.value}}{{mobile_margin.bottom.type}};
         }
     }
 </style>
 
-<section class="js-review-swiper c-carousel reviews-carousel reviews-carousel-{{_.id}}">
+<section class="js-review-swiper c-carousel c-reviews-carousel c-reviews-carousel__{{_.id}}">
     <div class="swiper-wrapper">
         {{#each slides}}
             <div class="swiper-slide">
-                <div class="review-card" data-rating="{{rating}}">
-                    <div class="rating-stars"></div>
-                    <div class="summary">{{summary}}</div>
-                    <div class="name">{{name}}</div>
+                <div class="c-review-carousel__card" data-rating="{{rating}}">
+                    <div class="c-review-carousel__rating-stars"></div>
+                    <div class="c-review-carousel__summary">{{summary}}</div>
+                    <div class="c-review-carousel__name">{{name}}</div>
                 </div>
             </div>
         {{/each}}
     </div>
 
-    <div class="review-slide-navigation">
+    <div class="c-review-carousel__slide-navigation">
         <div class="js-swiper-btn-prev"></div>
         <div class="js-swiper-pagination"></div>
         <div class="js-swiper-btn-next"></div>
@@ -36,7 +36,7 @@
 
 <script>
     function updateStarRatings() {
-        const reviewCards = document.querySelectorAll('.review-card');
+        const reviewCards = document.querySelectorAll('.c-review-carousel__card');
 
         reviewCards.forEach(card => {
             const rating = parseFloat(card.dataset.rating);
@@ -55,7 +55,7 @@
                 }
             }
 
-            card.querySelector('.rating-stars').innerHTML = html;
+            card.querySelector('.c-review-carousel__rating-stars').innerHTML = html;
         });
     }