pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Mobile Contact Page Made

Browse Source
main
Pedram Keshavarzi 3 years ago
parent d10c2169dd
commit 15f4dee690
5 changed files with 108 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

13
src/components/ShoppingCart/Product/index.js
Unescape View File

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

4
src/components/ShoppingCart/index.js
Unescape View File

@ -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} />

2
src/components/header/MobileSideMenu/index.js
Unescape View File

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

6
src/components/input/index.js
Unescape View File

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

99
src/view/contact/index.js
Unescape View File

@ -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);
Write Preview
Loading…
Cancel
Save