reza changed products design for mobile

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js

@@ -82,7 +82,7 @@ class NavbarDrawer extends Component {
               <div className="navbar-drawer__bottom--link d-flex">
                 {item.icon}
                 <div>{item.name}</div>
-                {item.badge && <div class="badge">{item.badge}</div>}
+                {item.message && <div class="badge">{item.message}</div>}
               </div>
             </Link>
           ))}
@@ -124,54 +124,63 @@ NavbarDrawer.defaultProps = {
       link: "/",
       icon: <img src={mobileHome} alt="صفحه اصلی" />,
       toast: "",
+      message : "",
     },
     {
       name: "واقعیت افزوده",
       link: "/",
       icon: <img src={mobileAr} alt="واقعیت افزوده" />,
       toast: "",
+      message : "",
     },
     {
       name: "بارکد خوان",
       link: "/qr-scan",
       icon: <img src={qrcode} alt="بارکد خوان" />,
       toast: "",
+      message : "",
     },
     {
       name: "کتاب الکترونیک",
       link: "/activation",
       icon: <img src={mobileBlog} alt="کتاب الکترونیک" />,
       toast: "",
+      message : "",
     },
     {
       name: "فروشگاه",
       link: "/products",
       icon: <img src={mobileBasket} alt="فروشگاه" />,
       toast: "",
+      message : "",
     },
     {
       name: "بلاگ",
       link: "/blog",
       icon: <img src={mobileBlog} alt="بلاگ" />,
       toast: "",
+      message : "",
     },
     {
       name: "پیام رسان",
       link: "/chatroom",
       icon: <img src={mobileMail} alt="بلاگ" />,
       toast: "",
+      message : "",
     },
     {
       name: "ویرایش مشخصات",
       link: "/profile",
       icon: <img src={mobileProfile} alt="ویرایش مشخصات" />,
       toast: "",
+      message : "4 پیام",
     },
     {
       name: "گزارش ایراد",
       link: "/",
       icon: <img src={mobileDanger} alt="گزارش ایراد" />,
       toast: "",
+      message : "",
       // onClick: this.props.logout,
     },
     {
@@ -179,6 +188,7 @@ NavbarDrawer.defaultProps = {
       link: "/",
       icon: <img src={mobileLogout} alt="خروج" />,
       toast: "",
+      message : "",
       // onClick: this.props.logout,
     },
   ],

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss

@@ -74,14 +74,18 @@
       width: 100%;
       align-items: center;
       padding: 15px 10px;
+      position: relative;
       & img {
         width: 20px;
         height: 20px;
         margin-left: 20px;
       }
       & .badge {
-        background-color: rgb(160, 60, 209);
+        background-color: red;
         margin: 5px;
+        position: absolute;
+        left: 5px;
+        top: 12px;
       }
     }
     &--button {

src/views/Home/Navbar/Mobile/index.scss

@@ -6,7 +6,7 @@
   justify-content: space-between;
   align-items: center;
   background-color: white;
-  z-index: 200;
+  z-index: 400;
   padding: 15px 10px;
   &__menu{
     img{

src/views/Products/Filters/index.scss

@@ -1,3 +1,5 @@
 .products-filters{
   flex: 1;
+  position: sticky;
+  top: 0px;
 }

src/views/Products/Product/index.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
+import basket from "../../../assets/icons/basket.png";
+
 import "./index.scss";
 
 const maxMobileSize = 550;
@@ -21,36 +23,41 @@ const fontSize = {
 }
 export default class Product extends Component {
   render() {
-    const { product } = this.props;
+    const { product, id } = this.props;
     return (
       <>
         {window.innerWidth < 1000 ? (
-          <article className="mobile-products-product d-flex flex-column">
-            <Link to={`/products/${product.id}`}>
-              <img src={product.image} alt={product.title} />
-              <h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.title}</h1>
-              <h2 style={{ fontSize: fontSize.mobile.h2 }}>{product.subTitle}</h2>
-              {product.price ? (
-                <div className="mobile-products-product__price d-flex flex-column align-items-center">
-                  {product.oldPrice ? (
-                    <div>
-                      <div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__price--old d-flex">
-                        {product.oldPrice} تومان
-                        <span></span>
-                      </div>
-                    </div>
-                  ) : null}
-                  <div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__price--price">
-                    {product.price} تومان
-                  </div>
-                </div>
-              ) : (
-                <div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__notAvailabe">
-                  ناموجود
-                </div>
-              )}
+          <div
+          className="mobile-mybooks__item d-flex flex-column"
+          style={{
+            borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0,
+            borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0,
+          }}
+        >
+          <img src={product.image} alt={"عکس مجصول"} />
+          <div className="mobile-mybooks__item--buttons d-flex flex-column">
+            <Link
+              style={{
+                background: product.status.digital ? "#FFEE00" : "#FFFFFF",
+                fontSize: fontSize.mobile.a,
+                color: product.status.ar ? "#4D4D4F" : "#4D4D4F",
+              }}
+            >
+              کتاب دیجیتال
+              { !product.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
             </Link>
-          </article>
+            <Link
+              style={{
+                background: product.status.ar ? "#00CC69" : "#FFFFFF",
+                color: product.status.ar ? "#FFFFFF" : "#4D4D4F",
+                fontSize: fontSize.mobile.a,
+              }}
+            >
+              واقعیت افزوده
+              { !product.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null}
+            </Link>
+          </div>
+        </div>
         ) : null}
         {window.innerWidth > 1000 ? (
           <article className="products-product d-flex flex-column align-items">
@@ -83,3 +90,4 @@ export default class Product extends Component {
     );
   }
 }
+

src/views/Products/index.js

@@ -75,7 +75,7 @@ export default class Products extends Component {
               </div>
               <div className="mobile-products__list d-flex flex-wrap">
                 {this.props.products.map((item, i) => (
-                  <Product product={item} key={i} />
+                  <Product product={item} key={i} id={i} />
                 ))}
               </div>
             </div>
@@ -118,6 +118,10 @@ Products.defaultProps = {
       price: "78.000",
       oldPrice: "",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 1,
@@ -127,6 +131,10 @@ Products.defaultProps = {
       price: "39.000",
       oldPrice: "59.000",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 2,
@@ -135,6 +143,10 @@ Products.defaultProps = {
       subTitle: "پایه ششم ابتدایی",
       price: "21.000",
       oldPrice: "",
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 3,
@@ -143,6 +155,10 @@ Products.defaultProps = {
       subTitle: "پایه دهم ابتدایی",
       price: "",
       oldPrice: "",
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 4,
@@ -151,6 +167,10 @@ Products.defaultProps = {
       subTitle: "پایه هفتم ابتدایی",
       price: "59.000",
       oldPrice: "",
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 5,
@@ -160,6 +180,10 @@ Products.defaultProps = {
       price: "78.000",
       oldPrice: "",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 6,
@@ -169,6 +193,10 @@ Products.defaultProps = {
       price: "39.000",
       oldPrice: "59.000",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 7,
@@ -178,6 +206,10 @@ Products.defaultProps = {
       price: "21.000",
       oldPrice: "",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 8,
@@ -187,6 +219,10 @@ Products.defaultProps = {
       price: "",
       oldPrice: "",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
     {
       id: 9,
@@ -196,6 +232,10 @@ Products.defaultProps = {
       price: "59.000",
       oldPrice: "",
       date: new Date(),
+      status: {
+        digital: true,
+        ar: true,
+      },
     },
   ],
 };