product comments module post and list refactoring

Oksydan · Nov 2, 2023 · fc13dfe · fc13dfe
1 parent 6cb2b5b
commit fc13dfe
Show file tree

Hide file tree

Showing 11 changed files with 503 additions and 337 deletions.
diff --git a/_dev/css/theme/components/product/_comments-pagination.scss b/_dev/css/theme/components/product/_comments-pagination.scss
diff --git a/_dev/css/theme/components/product/_index.scss b/_dev/css/theme/components/product/_index.scss
@@ -5,4 +5,3 @@
 @import "stars";
 @import "products-list";
 @import "product-slider";
-@import "comments-pagination";
diff --git a/_dev/css/theme/components/product/_stars.scss b/_dev/css/theme/components/product/_stars.scss
@@ -5,17 +5,27 @@
   top: 0;
   left: 0;
   display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+
+  &.star-content-empty {
+    position: static;
+  }
 
   .star,
   .star-on,
   .star-hover {
+    flex: 0 0 auto;
     display: block;
-    flex: auto;
     width: 20px;
     height: 20px;
     margin-left: 3px;
     background: url("../img/icons/star_gray.svg") no-repeat 0 0 transparent;
     background-size: 20px;
+
+    &:first-child {
+      margin-left: 0;
+    }
   }
 
   .star-on,
@@ -35,18 +45,20 @@
       height: 16px;
       margin-left: 2px;
       background-size: 16px;
+
+      &:first-child {
+        margin-left: 0;
+      }
     }
   }
 }
 
 .grade-stars {
   position: relative;
   display: inline-block;
-  min-width: 120px;
   height: 20px;
 
   &.small-stars {
-    min-width: 70px;
     height: 16px;
   }
 }
@@ -61,6 +73,6 @@
   background: rgba($white, 0.4);
 
   .grade-stars {
-    display: block;
+    display: inline-block;
   }
 }
diff --git a/_dev/js/theme/windowExpose.js b/_dev/js/theme/windowExpose.js
@@ -13,6 +13,8 @@ import { getAllSiblingsBeforeElement, getAllSiblingsAfterElement } from '../util
 import { fromSerializeObject, fromSerialize, formSerializeArray } from '../utils/form/formSerialize';
 import useToggleDisplay from '../utils/display/useToggleDisplay';
 
+const { hide, show, toggle } = useToggleDisplay();
+
 exposeToWindow('eventHandlerOn', on);
 exposeToWindow('eventHandlerOne', one);
 exposeToWindow('eventHandlerOff', off);
@@ -31,3 +33,6 @@ exposeToWindow('fromSerializeObject', fromSerializeObject);
 exposeToWindow('fromSerialize', fromSerialize);
 exposeToWindow('formSerializeArray', formSerializeArray);
 exposeToWindow('useToggleDisplay', useToggleDisplay);
+exposeToWindow('hide', hide);
+exposeToWindow('show', show);
+exposeToWindow('toggle', toggle);