Mobile Contact Page Made

main
Pedram Keshavarzi 3 years ago
parent d10c2169dd
commit 15f4dee690
  1. 13
      src/components/ShoppingCart/Product/index.js
  2. 4
      src/components/ShoppingCart/index.js
  3. 2
      src/components/header/MobileSideMenu/index.js
  4. 6
      src/components/input/index.js
  5. 99
      src/view/contact/index.js

@ -147,13 +147,18 @@ function Product({ product, grades, pushToCart, isMobile }) {
// </div> // </div>
return ( return (
<div className="flex bg-white justify-between items-center border-2 border-gray-300 p-4 rounded-xl m-2 " style={{ width: '90%' }}> <div className="flex bg-white justify-between items-center border-2 border-gray-300 p-4 rounded-xl m-2 " style={{ width: '90%' }}>
<div className="flex items-center"> <div className="flex items-center ">
<div className="text-sm h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> {product?.product?.book?.category} </div> <div className="text-sm h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> {product?.product?.book?.category} </div>
<h1 className="text-lg font-black px-2 text-black40"> {product?.product?.book?.name}</h1> <h1 className="text-lg font-black px-2 text-black40"> {product?.product?.book?.name}</h1>
</div> </div>
<div className="flex items-center"> <div className="flex items-center p-0 ">
<div className="text-sm text-black40" style={{ transform: 'translateX(-20px)' }} >
{product?.product?.price} تومان <div className="text-sm text-black40 flex items-center" style={{ transform: 'translateX(-20px)' }} >
{
product.count > 1 && <p className="ml-2 text-xs text-red52">{product?.count} عدد</p>
}
<p>{product?.product?.price} تومان</p>
</div> </div>
<div <div
className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52"

@ -223,7 +223,7 @@ function ShoppingCart({
<div className="w-full flex flex-col justify-start items-center bg-gray-200 rtl left-0 pt-24" style={{height: '100vh'}}> <div className="w-full flex flex-col justify-start items-center bg-gray-200 rtl left-0 pt-24" style={{height: '100vh'}}>
<div className="w-full flex items-center flex-col overflow-x-hidden overflow-scroll" style={{height: '35%'}}> <div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}>
{list.map((product, index) => ( {list.map((product, index) => (
<Product key={index} product={product} /> <Product key={index} product={product} />
@ -259,7 +259,7 @@ function ShoppingCart({
: :
<div className="flex flex-col justify-between items-center bg-gray-200 left-0 pt-24" style={{height: '100vh'}}> <div className="flex flex-col justify-between items-center bg-gray-200 left-0 pt-24" style={{height: '100vh'}}>
<div className="w-full flex items-center flex-col"> <div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}>
{list.map((product, index) => ( {list.map((product, index) => (
<Product key={index} product={product} /> <Product key={index} product={product} />

@ -71,7 +71,7 @@ const MobileSideMenu = ({
icon: mapIcon, icon: mapIcon,
activeIcon: mapIconActive, activeIcon: mapIconActive,
title: 'اطلاعات تماس', title: 'اطلاعات تماس',
link: '/contact' link: '/contacts'
}, },
{ {
icon: radarIcon, icon: radarIcon,

@ -42,8 +42,8 @@ const Input = ({
} }
}; };
return ( return (
<div style={style} className={`${className} Login-box-form-item w-full ml-4 h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7 mt-6 relative flex items-center flex-row-reverse`}> <div style={style} className={`${className} Login-box-form-item w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7 mt-6 relative flex items-center flex-row-reverse`}>
<div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 bg-white`}></div> <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 `}></div>
<div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none"> <div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none">
{title ? title : 'نام کاربری'} {title ? title : 'نام کاربری'}
</div> </div>
@ -51,7 +51,7 @@ const Input = ({
type={type ? type : 'text'} type={type ? type : 'text'}
name="Login-box-form-item-input-name" name="Login-box-form-item-input-name"
id={`Login-box-form-item-input-name${id}`} id={`Login-box-form-item-input-name${id}`}
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded text-red52`} className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-red52`}
style={{ direction: direction ? direction : "ltr", backgroundColor: bg }} style={{ direction: direction ? direction : "ltr", backgroundColor: bg }}
onFocus={() => focusHandler(id ? id : 0)} onFocus={() => focusHandler(id ? id : 0)}
onBlur={() => blurHandler(id ? id : 0)} onBlur={() => blurHandler(id ? id : 0)}

@ -1,9 +1,9 @@
import React from "react"; import React, { useState } from "react";
import Button from "../../components/Button"; import Button from "../../components/Button";
import Input from "../../components/input"; import Input from "../../components/input";
import Map from '../../components/Map' import Map from '../../components/Map'
import { connect } from "react-redux";
const ContactUs = () => { const ContactUs = ({isMobile}) => {
const departments = [ const departments = [
@ -27,15 +27,94 @@ const ContactUs = () => {
}, },
] ]
const [phase, setPhase] = useState(1);
return ( return (
isMobile ?
<div className="w-full flex flex-col py-20 px-4 pb-40">
<h1 className="w-full text-right text-red52 font-bold">تماس با ما</h1>
<div className="flex w-full rtl mt-4 justify-between py-1 bg-gray-100 border border-gray-300 rounded-xl">
<button className={`w-1/2 rounded-xl mx-1 h-12 ${phase == 1 ? 'bg-red5B font-bold text-white' : 'text-red5B'}`}
onClick={() => setPhase(1)}
>
فرم تماس با ما
</button>
<button className={`w-1/2 rounded-xl mx-1 font-bold h-12 ${phase == 2 ? 'bg-red5B text-white' : 'text-red5B'}`}
onClick={() => setPhase(2)}
>
اطلاعات تماس
</button>
</div>
{
phase == 1 ?
<div className="w-full rtl">
<form className="flex flex-col w-full">
<Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
<Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%', background: 'rgba(249, 249, 249, 0.75)' }} />
<select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
<textarea className="w-full border-gray-200 border p-3 rounded-lg text-gray-400 outline-red52" rows='7' cols='70' placeholder="متن پیام را اینجا تایپ کنید">
</textarea>
<div className="w-full flex" style={{direction: 'ltr'}}>
<Button title='ارسال پیام' className='w-full'/>
</div>
</form>
</div>
:
<div className="flex flex-col w-full rtl mr-32 mt-4">
<div className="w-full rounded-xl overflow-hidden my-4 " style={{height:'215px'}}>
<Map />
</div>
<div className="flex w-full text-right flex-col mb-4 items-start">
<div className="w-full p-2 border-b border-gray-200">
<h1 className="text-red52 text-md p-1 pr-0 font-black">آدرس ما</h1>
<p className="text-gray-400 text-sm">تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2</p>
</div>
<div className="w-full p-2 border-b border-gray-200">
<h1 className="text-red52 text-md p-1 pr-0 font-black">شماره تماس</h1>
<p className="text-gray-400 text-sm"> 02163462405 - 02163462406 </p>
</div>
<div className="w-full p-2 border-b border-gray-200">
<h1 className="text-red52 text-md p-1 pr-0 font-black"> ایمیل سازمانی </h1>
<p className="text-gray-400 text-sm">Info@Azmoonsample.ir</p>
</div>
<div className="w-full p-2 ">
<h1 className="text-red52 text-md p-1 pr-0 font-black"> شماره پیامک </h1>
<p className="text-gray-400 text-sm">300000000008762144</p>
<p className="text-gray-400 text-sm">توجه داشته باشید تمامی پیامک ها از سامانه آزمون از طریق همین سرشماره برای شما ارسال خواهد شد</p>
</div>
</div>
</div>
}
</div>
:
<div className=" w-full text-right" style={{ direction: 'rtl', marginTop: '6.5%', paddingRight: '8.5%' }}> <div className=" w-full text-right" style={{ direction: 'rtl', marginTop: '6.5%', paddingRight: '8.5%' }}>
<h1 className="w-2/3 border-b border-gray-300 text-3xl font-bold text-red52 py-4">تماس با ما</h1> <h1 className="w-2/3 border-b border-gray-300 text-3xl font-bold text-red52 py-4">تماس با ما</h1>
<div className="flex "> <div className="flex ">
<div className="w-1/3"> <div className="w-1/3">
<form className="flex flex-col w-full"> <form className="flex flex-col w-full">
<Input title='نام' gapSize='8' id={0} style={{ width: '50%' }} /> <Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
<Input title='ایمیل' gapSize='8' id={1} style={{ width: '50%' }} /> <Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%' }} />
<select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52"> <select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
{departments.map((item, index) => ( {departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option> <option key={`Grade__${index}`}>{item.title}</option>
@ -87,4 +166,12 @@ const ContactUs = () => {
); );
}; };
export default ContactUs; const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {
};
export default connect(mapStateToProps, mapDispatchToProps)(ContactUs);
Loading…
Cancel
Save