Merge pull request #626 from azkyakhan/#621

Refactored styling of product page (#621)

CHANGELOG.md

@@ -93,6 +93,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed: set missing require for `phoneNumber` on the Checkout
 
 
+### Changed / Improved
+- Replaced flex with css grid in product galley and info(#621)
+- Removed margin from product rating(#621)
+- Renamed class of guide, compare and save actions(#621)
+- Updated margin of product additional info tabs(#621)
+- Formatted HTML markup and reordered CSS styles(#621)
+
 ## [1.0.4] - 04.01.2020
 
 ### Added

components/atoms/a-product-rating.vue

@@ -47,12 +47,11 @@ export default {
   &__rating {
     display: flex;
     align-items: center;
-    margin: var(--spacer-xs) 0 0 0;
   }
+
   &__count {
     color: var(--c-text);
-    text-decoration: none;
-    margin: 0 0 0 var(--spacer-xs);
+    margin-left: var(--spacer-xs);
   }
 }
 </style>

components/molecules/m-product-add-to-cart.vue

@@ -6,6 +6,7 @@
       :message="alert.message"
       :type="alert.type"
     />
+
     <SfAddToCart v-model="qty">
       <template #add-to-cart-btn>
         <AAddToCart
@@ -15,6 +16,7 @@
           :disabled="isAddToCartDisabled"
         />
       </template>
+
       <template #quantity-select-input>
         <AProductQuantity
           class="sf-add-to-cart__select-quantity"

components/molecules/m-product-additional-info.vue

@@ -8,6 +8,7 @@
     <SfTab :title="$t('Description')">
       <div itemprop="description" v-html="product.description" />
     </SfTab>
+
     <SfTab :title="$t('Read reviews')" ref="reviewTab">
       <div class="review-header">
         <SfHeading
@@ -25,6 +26,7 @@
       <SfDivider v-show="reviewsCount" />
       <MReviewList v-show="reviewsCount" :reviews="reviews" />
     </SfTab>
+
     <SfTab v-if="attributes.length" :title="$t('Additional Information')">
       <AProductAttribute
         v-for="(attribute, i) in attributes"
@@ -102,13 +104,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .product {
   &__tabs {
     margin: var(--spacer-lg) auto var(--spacer-2xl);
     @include for-desktop {
-      margin-top: var(--spacer-2xl);
+      margin-top: var(--spacer-xl);
       --tabs-content-tab-padding: var(--spacer-xl) 0 0 0;
     }
   }
@@ -117,10 +120,6 @@ export default {
   }
 }
 
-[itemprop="description"] > *:first-child {
-  margin-top: 0;
-}
-
 .review-header {
   display: flex;
   justify-content: space-between;

components/molecules/m-product-gallery.vue

@@ -74,7 +74,4 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.m-product-gallery {
-  flex: 1;
-}
 </style>

components/molecules/m-product-options-configurable.vue

@@ -6,6 +6,7 @@
       :message="product.errors | formatProductMessages"
       type="danger"
     />
+
     <template v-for="attribute in productAttributes">
       <SfSelect
         :key="attribute.id"
@@ -23,6 +24,7 @@
           <SfProductOption :label="attributeOption.label" />
         </SfSelectOption>
       </SfSelect>
+
       <div v-else :key="attribute.id" class="product__colors">
         <p class="product__color-label">
           {{ attribute.label }}:
@@ -114,43 +116,27 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
-.m-product-options-configurable {
-  border-bottom: 1px solid #f1f2f3;
-  padding-bottom: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  @include for-desktop {
-    border: 0;
-    padding-bottom: 0;
-  }
-}
-.attribute {
-  margin-bottom: var(--spacer-xl);
-}
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .product {
   &__select-size {
-    flex: 100%;
-    @include for-desktop {
-      margin: 0;
-    }
+    width: 100%;
+    margin-top: var(--spacer-base);
   }
+
   &__colors {
     display: flex;
-    flex: 100%;
-    order: 1;
+    width: 100%;
     align-items: center;
-    margin: var(--spacer-xl) 0 0;
-    @include for-desktop {
-      margin: var(--spacer-xl) 0 0;
-    }
   }
+
   &__color-label {
-    margin: 0 var(--spacer-base) 0 0;
+    margin-right: var(--spacer-base);
   }
+
   &__color {
+    border: 1px solid var(--c-light);
     margin: 0 var(--spacer-2xs);
   }
 }

components/molecules/m-product-short-info.vue

@@ -6,6 +6,7 @@
         :level="3"
         class="sf-heading--no-underline sf-heading--left"
       />
+
       <SfIcon
         icon="drag"
         size="xl"
@@ -26,6 +27,7 @@
         {{ $t("Read all {count} review", { count: reviewsCount }) }}
       </AProductRating>
     </div>
+
     <div
       class="product__description desktop-only"
       v-html="product.short_description || product.description"
@@ -78,32 +80,47 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
+
 @import "~@storefront-ui/shared/styles/helpers/typography";
 
 .product {
   &__header {
     display: flex;
     justify-content: space-between;
-    @include for-desktop {
-      margin: 0 auto;
-    }
   }
+
   &__drag-icon {
     animation: moveicon 1s ease-in-out infinite;
   }
+
+  @keyframes moveicon {
+  0% {
+    transform: translate3d(0, 0, 0);
+   }
+  50% {
+    transform: translate3d(0, 30%, 0);
+   }
+  100% {
+    transform: translate3d(0, 0, 0);
+   }
+ }
+
   &__price-and-rating {
     margin: var(--spacer-xs) 0 var(--spacer-base);
     align-items: center;
     @include for-desktop {
       display: flex;
       justify-content: space-between;
-      margin: var(--spacer-sm) 0 var(--spacer-lg) 0;
+      margin: var(--spacer-sm) 0 var(--spacer-lg);
     }
   }
+
   &__description {
-    color: var(--c-link);
+    color: var(--c-text);
     @include font(
       --product-description-font,
       var(--font-light),
@@ -113,16 +130,9 @@ export default {
     );
   }
 }
-
-@keyframes moveicon {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  50% {
-    transform: translate3d(0, 30%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
+.a-product-rating {
+  @include for-mobile {
+    margin-top: var(--spacer-xs);
   }
 }
 </style>

components/organisms/o-product-details.vue

@@ -4,10 +4,12 @@
     <meta itemprop="price" :content="parseFloat(product.price_incl_tax).toFixed(2)">
     <meta itemprop="availability" :content="availability">
     <meta itemprop="url" :content="product.url_path">
+
     <MProductGallery
       :gallery="gallery"
       :configuration="productConfiguration"
     />
+
     <div class="product__info">
       <MProductShortInfo
         :product="product"
@@ -17,10 +19,11 @@
       <SfButton
         v-show="sizeOption"
         @click.native="openSizeGuide"
-        class="sf-button--text desktop-only product__guide"
+        class="sf-button--text desktop-only secondary-action"
       >
         {{ $t('Size guide') }}
       </SfButton>
+
       <div>
         <MProductOptionsConfigurable
           v-if="product.type_id =='configurable'"
@@ -45,6 +48,7 @@
           :stock="productStock"
         />
       </div>
+
       <MProductAdditionalInfo
         :product="product"
         :reviews="reviews"
@@ -53,6 +57,7 @@
     </div>
   </div>
 </template>
+
 <script>
 import get from 'lodash-es/get'
 import config from 'config';
@@ -146,42 +151,34 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
-.product {
-  @include for-desktop {
-    display: flex;
-  }
-  &__info {
-    margin: var(--spacer-sm) auto var(--spacer-xs);
-    padding: 0 var(--spacer-sm);
-    @include for-desktop {
-      max-width: 32.625rem;
-      margin: 0 0 0 var(--spacer-2xl);
-      padding: 0;
-    }
+.o-product-details {
+  @include for-desktop{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacer-2xl);
   }
-  &__add-to-cart {
-    margin: var(--spacer-base) 0 0;
-    @include for-desktop {
-      margin-top: var(--spacer-sm);
-    }
+}
+
+.product__info {
+  margin: var(--spacer-sm) auto var(--spacer-xs);
+  padding: 0 var(--spacer-sm);
+  @include for-desktop {
+    margin: 0;
   }
-  &__guide,
-  &__compare,
-  &__save {
+}
+
+.secondary-action {
     display: block;
     margin: var(--spacer-xl) 0 var(--spacer-base) auto;
-  }
 }
 
-.section {
-  border-bottom: 1px solid #f1f2f3;
-  padding-bottom: 1var(--spacer-xs);
-  @include for-desktop {
-    border: 0;
-    padding-bottom: 0;
-  }
+.m-product-add-to-cart {
+   margin: var(--spacer-base) 0;
 }
+
 </style>