compare UX cleanup (#43)

* compare UX cleanup

* add custom keys array to config, create constants for font sizes and breakpoints

* - update README

Co-authored-by: Shaun Maharaj <Shaun.Maharaj@elasticpath.com>

Author: yulia-dnistrian

README.md

@@ -85,6 +85,7 @@ Parameters that require configuration are in the `./src/config.ts` file:
 |`stripeKey`| Required| String| Stripe publishable API key.|
 |`categoryPageSize`| Required| String| Maximum number of products to display on a category page.|
 |`maxCompareProducts`| Required| String| Maximum number of products to display in compare view.|
+|`compareKeys`| Required| Array| An array of all product attributes to display in compare view.|
 |`algoliaAppId`| Required| String| Algolia application identifier.|
 |`algoliaApiKey`| Required| String| Algolia API key used to read records.|
 |`algoliaIndexName`| Required| String| Name of Algolia index used for search functions.|

src/AccountDropdown.scss

@@ -47,17 +47,17 @@
     display: inline-block;
     padding: 7px 0;
     color: $thirdComplimentColor;
-    font-size: 13px;
+    font-size: $sizeSmall;
     line-height: 19px;
   }
 
   &__iteminfo {
-    font-size: 13px;
+    font-size: $sizeSmall;
     font-weight: bold;
   }
 
   &__emailinfo {
-    font-size: 12px;
+    font-size: $sizeXSmall;
     font-style: italic;
     color: $firstComplimentTextColor;
   }

src/Address.scss

@@ -4,7 +4,7 @@
   position: relative;
 
   &__title {
-    font-size: 24px;
+    font-size: $sizeLarge;
     font-weight: bold;
   }
 
@@ -20,7 +20,7 @@
   &__container {
     width: 50%;
     margin-bottom: 20px;
-    @media (max-width: 767px) {
+    @media (max-width: $mobileWidth - 1px) {
       width: 100%;
     }
   }

src/AddressForm.scss

@@ -13,7 +13,7 @@
   }
 
   &__title {
-    font-size: 15px;
+    font-size: $sizeInitialLarger;
   }
 
   &__content {
@@ -97,7 +97,7 @@
   }
 }
 
-@media (max-width: 575px) {
+@media (max-width: $mobileSmallWidth - 1px) {
   .addressform {
     .epform {
       &__group {

src/AppFooter.scss

@@ -20,7 +20,7 @@
   &__title {
     text-transform: uppercase;
     font-weight: bold;
-    font-size: 16px;
+    font-size: $sizeMedium;
     margin-bottom: 20px;
   }
 

src/Availability.scss

@@ -1,8 +1,10 @@
+@import './theme/common';
+
 .availability {
   display: inline-block;
   margin-top: 10px;
   text-transform: uppercase;
-  font-size: 10px;
+  font-size: $sizeXXSmall;
   padding: 5px 10px;
   border: 1px solid hsl(0, 0, 80%);
   border-radius: 16px;

src/Category.scss

@@ -14,7 +14,7 @@
 
   #{$block}__breadcrumbs {
     margin-top: 20px;
-    font-size: 15px;
+    font-size: $sizeInitialLarger;
     font-weight: bold;
     color: hsl(0, 0%, 45%);
 
@@ -29,7 +29,7 @@
     flex: 0;
     margin-top: 20px;
     margin-bottom: 80px;
-    font-size: 26px;
+    font-size: $sizeXLarge;
     font-weight: bold;
   }
 
@@ -54,15 +54,15 @@
     align-items: center;
   }
 
-  @media (min-width: 380px) {
+  @media (min-width: $mobileXSmallWidth - 101px) {
     #{$block}__productlist {
       #{$block}__product {
         flex: 0 0 50%;
       }
     }
   }
 
-  @media (min-width: 576px) {
+  @media (min-width: $mobileSmallWidth) {
     #{$block}__productlist {
       width: 540px;
 
@@ -72,7 +72,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: $mobileWidth) {
     #{$block}__productlist {
       width: 720px;
 
@@ -82,12 +82,18 @@
     }
   }
 
-  @media (min-width: 992px) {
+  @media (min-width: $tabletSmallWidth) {
     padding-left: $maxScrollWidth;
     padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
 
     #{$block}__productlist {
       width: 800px;
     }
   }
+
+  @media (min-width: $fullHDWidth) {
+    #{$block}__productlist {
+      width: 1000px;
+    }
+  }
 }

src/CompareOverlay.scss

@@ -8,45 +8,55 @@ $animLength: 0.2s;
   $block: &;
 
   position: fixed;
-  width: 100%;
+  right: 0;
   bottom: -100%;
-  background-color: white;
-  box-shadow: 0 0 10px hsla(0, 0, 0, 0.3);
   transition: bottom 0.1s ease-out;
-  padding: 10px 15px;
   z-index: 10;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
+
+  #{$block}__content {
+    background-color: white;
+    box-shadow: 0 0 10px hsla(0, 0, 0, 0.3);
+    padding: 0 25px 25px;
+  }
 
   &--visible {
     bottom: 0;
   }
 
+  .productmainimage {
+    width: 100%;
+  }
+
   #{$block}__products {
-    flex: 1;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
+    padding-top: 50px;
+    margin-bottom: 10px;
 
     #{$block}__product {
-      display: flex;
-      flex-direction: row;
-      margin: 5px 20px 5px 0;
-      height: 50px;
-      width: 175px;
+      position: relative;
+      margin: 5px 0 5px;
+      width: 160px;
       box-shadow: 0 0 2px hsla(0, 0, 0, 0.3);
 
+      + #{$block}__product {
+        margin-left: 20px;
+      }
+
       #{$block}__productimg {
-        flex: 0 0 50px;
+        height: 160px;
+        width: 160px;
+        margin-bottom: 10px;
       }
 
       #{$block}__productdetails {
         flex: 1;
         margin-left: 10px;
-        font-size: smaller;
+        font-size: $sizeInitial;
         align-self: center;
+        margin-bottom: 10px;
 
         #{$block}__productname {
           font-weight: bold;
@@ -61,45 +71,110 @@ $animLength: 0.2s;
       }
 
       #{$block}__removeproduct {
-        flex: 0 0 20px;
+        position: absolute;
+        top: -32px;
+        right: -3px;
 
         button {
+          padding: 0;
           color: hsl(0, 0, 30%);
           height: 100%;
 
+          &:hover {
+            background-color: transparent;
+          }
+
           svg {
             width: 20px;
             height: 20px;
+            fill: $buttonActiveColor;
           }
         }
       }
     }
   }
 
   #{$block}__btns {
-    flex: 0 0 auto;
+    min-height: 38px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding-right: 160px;
 
     button {
-      margin-bottom: 10px;
+      min-width: 160px;
+    }
+  }
+
+  #{$block}__removebtn {
+    margin-right: 20px;
+  }
+
+  #{$block}__comparebtn {
+    min-width: 160px;
+    position: fixed;
+    right: 25px;
+    bottom: -100%;
+  }
+
+  &--visible {
+    #{$block}__comparebtn {
+      bottom: 25px;
+    }
+  }
+
+  &--fadeout {
+    &:not(:hover) {
+      #{$block}__content {
+        display: none;
+      }
 
-      &:last-child {
-        margin-bottom: 0;
+      #{$block}__btns {
+        display: none;
       }
     }
   }
 
-  @media (min-width: 576px) {
+  @media (min-width: $tabletSmallWidth) {
     #{$block}__products {
       #{$block}__product {
-        width: 200px;
+        width: 180px;
+
+        #{$block}__productimg {
+          height: 180px;
+          width: 180px;
+        }
+
+        + #{$block}__product {
+          margin-left: 40px;
+        }
+      }
+    }
+
+    #{$block}__btns {
+      padding-right: 180px;
+
+      button {
+        min-width: 180px;
       }
     }
+
+    #{$block}__removebtn {
+      margin-right: 40px;
+    }
+
+    #{$block}__comparebtn {
+      min-width: 180px;
+    }
   }
 
-  @media (min-width: 768px) {
-    padding-left: $maxScrollWidth;
-    padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
+  @media (max-width: $mobileWidth - 1px) {
+    #{$block}__content {
+      display: none;
+    }
+
+    #{$block}__btns {
+      display: none;
+    }
   }
 }