reza changed products design for mobile

master
Reza_ashrafi 3 years ago
parent 1fb55dd23f
commit e2c5bb9eb8
  1. 12
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  2. 6
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  3. 2
      src/views/Home/Navbar/Mobile/index.scss
  4. 2
      src/views/Products/Filters/index.scss
  5. 60
      src/views/Products/Product/index.js
  6. 42
      src/views/Products/index.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,
},
],

@ -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 {

@ -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{

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

@ -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 {
);
}
}

@ -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,
},
},
],
};

Loading…
Cancel
Save