From fbe55e815e22f231eaacd2527dc2403355b298d9 Mon Sep 17 00:00:00 2001 From: mahdi Date: Tue, 4 Jan 2022 12:41:50 +0330 Subject: [PATCH] update --- src/components/productDesign/ProductDesign.js | 23 ++-- .../vodProductDesign/VodProductDesign.js | 103 ++++++++++++++---- .../vodProductDesign/VodProductDesign.scss | 7 ++ 3 files changed, 100 insertions(+), 33 deletions(-) create mode 100644 src/components/vodProductDesign/VodProductDesign.scss diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js index 7e7353b..7341290 100644 --- a/src/components/productDesign/ProductDesign.js +++ b/src/components/productDesign/ProductDesign.js @@ -37,6 +37,7 @@ const ProductDesign = ({ verticalImg, horizontalImg, rangeWidth, + addToCartHolder, }) => { return (
@@ -153,13 +154,13 @@ const ProductDesign = ({

نسخه چاپی علموم تجربه هفتم

{productContent && (

این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد. @@ -206,13 +207,15 @@ const ProductDesign = ({

{/* add to cart */} - + {addToCartHolder && ( + + )}
)} {productTags && ( @@ -275,6 +278,8 @@ ProductDesign.defaultProps = { verticalImg: true, horizontalImg: false, + addToCartHolder: true, + productTitleColor: "text-productTitle", productExcerptTextColor: "text-productContent", diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js index 5238651..beb2d8d 100644 --- a/src/components/vodProductDesign/VodProductDesign.js +++ b/src/components/vodProductDesign/VodProductDesign.js @@ -3,6 +3,8 @@ import React from "react"; import StarRating from "../starRating/StarRating"; import ReactTooltip from "react-tooltip"; +import "./VodProductDesign.scss"; + import book from "../../assets/images/goldon.png"; import watermelon from "../../assets/images/watermelon.png"; @@ -31,11 +33,18 @@ const VodProductDesign = ({ productHolderBorder, productHolderBorderColor, productTitleColor, + productExcerptTextColor, productCat, + productCatTextColor, rangeHolder, priceTitle, productPriceAmountTitle, addToCartHolder, + productTitleCategoryHolder, + productTitleCategoryHolderAlignment, + priceStarHolder, + priceStarAlignment, + rangeWidth, }) => { return (
@@ -57,9 +66,9 @@ const VodProductDesign = ({
- {/* img */} + {/* product image */}
+ {/* icons on image */}
{discountPricePercent && (
@@ -87,7 +97,7 @@ const VodProductDesign = ({ )}
{/* play button */} -
+
{/* select Color */} @@ -124,34 +134,45 @@ const VodProductDesign = ({
)}
+ {/* product content */}
{/* content */} -
-

+
- نسخه چاپی علموم تجربه هفتم -

+

+ نسخه چاپی علموم تجربه هفتم +

+ {productCat && ( + + پایه سوم + + )} +
{productContent && ( -

+

این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد.

)} - {productCat && ( - - پایه سوم - - )}
{/* price */} -
+
{priceHolder && (
{/* price */} -
+
@@ -189,7 +210,7 @@ const VodProductDesign = ({
)} {star && ( -
+
39 @@ -211,8 +232,10 @@ const VodProductDesign = ({
)} {rangeHolder && ( -
-
+
+
)}
@@ -225,8 +248,15 @@ const VodProductDesign = ({ export default VodProductDesign; -// text colors i used: -// text-productPrice +// text colors i used for product title: +// text-darkCrimsonTextColor +// text-productTitle + +// text color i used for product excerpt: +// text-productContent + +// text color i used for product cat: +// text-darkCrimsonTextColor VodProductDesign.defaultProps = { // icons on product image @@ -235,7 +265,7 @@ VodProductDesign.defaultProps = { discount: true, discountPricePercent: true, // product price - discountPrice: true, + discountPrice: false, priceHolder: true, priceTitle: false, @@ -248,10 +278,35 @@ VodProductDesign.defaultProps = { addToCartHolder: false, productTitleColor: "text-darkCrimsonTextColor", + + productExcerptTextColor: "text-productContent", + + productCatTextColor: "text-darkCrimsonTextColor", + productPriceAmountTitle: "text-productPrice", + productTitleAlignment: "text-justify", + + // برای درصد دادن به عرض رنج + rangeWidth: "w-44", + + //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم productHolderBorder: "border", productHolderBorderColor: "border-grayBorderColor", - productTitleAlignment: "text-justify", priceDirection: "flex-row", + + productTitleCategoryHolder: "flex-row", + productTitleCategoryHolderAlignment: "items-center", + + // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم + // یادمون باشه که حتما رویه + // flex-col-reverse + // بزاریم + + // دیفالتش باید این باشه: + // priceStarHolder: flex-row + priceStarHolder: "flex-row", + // دیفالتش باید این باشه: + // priceStarHolder: items-center + priceStarAlignment: "items-center", }; diff --git a/src/components/vodProductDesign/VodProductDesign.scss b/src/components/vodProductDesign/VodProductDesign.scss new file mode 100644 index 0000000..379f5fc --- /dev/null +++ b/src/components/vodProductDesign/VodProductDesign.scss @@ -0,0 +1,7 @@ +.playBtnImg { + transition: all 0.4s; +} +.parent-img:hover .playBtnImg { + transition: all 0.4s; + transform: translateY(-10px) !important; +}