reza added mobile contact

master
RezaAshrafi77 3 years ago
parent eae2f124b3
commit 667285aad1
  1. 71
      src/views/Contact/index.js
  2. 150
      src/views/Contact/index.scss

@ -16,10 +16,15 @@ const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p : window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80,
span : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
}
}
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
},
};
export default class Contact extends Component {
render() {
return (
@ -58,11 +63,15 @@ export default class Contact extends Component {
style={{ width: "55%", justifyContent: "space-between" }}
>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.desktop.span }}>02163462405</span>
<span style={{ fontSize: fontSize.desktop.span }}>
02163462405
</span>
<img src={contact} alt="تماس" className="m-1" />
</div>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.desktop.span }}>Info@Danovin.ir</span>
<span style={{ fontSize: fontSize.desktop.span }}>
Info@Danovin.ir
</span>
<img src={home} alt="خانه" className="m-1" />
</div>
</div>
@ -75,6 +84,56 @@ export default class Contact extends Component {
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-contact d-flex flex-column align-items-center">
<Navbar page={"contact"} />
<div className="mobile-contact__form d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>تماس با ما</h1>
<p style={{ fontSize: fontSize.mobile.p }}>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
</p>
<Input label={"نامونام خانوادگی"} name={"name"} />
<Input label={"شماره تماس"} name={"mobile"} />
<Select options={["همه", "پرفروش"]} />
<Input label={"موضوع پیام"} name={"subject"} />
<textarea
placeholder="متن پیام"
name="description"
rows="5"
></textarea>
<button>ارسال</button>
</div>
<div className="mobile-contact__address d-flex flex-column">
<div className="mobile-contact__address--location d-flex align-items-center">
<img src={location} alt="آدرس" className="m-1" />
<p style={{ fontSize: fontSize.mobile.p }}>
تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
</p>
</div>
<div
className="d-flex align-items-center mt-1"
style={{ width: "55%", justifyContent: "space-between" }}
>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}>
02163462405
</span>
<img src={contact} alt="تماس" className="m-1" />
</div>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}>
Info@Danovin.ir
</span>
<img src={home} alt="خانه" className="m-1" />
</div>
</div>
<div className="mobile-contact__address--map d-flex align-items-center mt-3">
<Location />
</div>
</div>
</div>
) : null}
</>
);
}

@ -148,10 +148,158 @@
width: 100%;
height: 430px;
border-radius: 20px;
img{
img {
transform: scale(0.4);
}
}
}
}
}
.mobile-contact {
width: 100vw;
max-width: 550px;
margin: 0px auto;
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
&__form {
width: 100%;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
.MuiOutlinedInput-notchedOutline {
top: 0px !important;
}
.MuiOutlinedInput-notchedOutline {
border-color: #cecece !important;
border-width: 1px !important;
color: green !important;
border-radius: 10px !important;
}
.MuiOutlinedInput-input {
padding: 20px 14px !important;
}
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display: inline !important;
position: absolute;
text-align: right !important;
right: 10px;
top: 12px;
padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important;
}
.MuiInputLabel-shrink {
text-align: right !important;
display: inline;
position: absolute;
right: -5px;
top: -8px;
transform: translate(0px, 0px) scale(0.75) !important;
padding-right: 15px !important;
}
label {
background-color: white;
max-width: 120px;
text-align: center;
color: #797979 !important;
letter-spacing: -1px;
}
.Mui-focused {
color: rgba(0, 0, 0, 0.54) !important;
border-color: #c4c4c5 !important;
}
h1 {
letter-spacing: -2px;
color: #6cbe44;
font-family: numeralBold;
}
p {
font-family: numeralLight;
color: #6f7074;
letter-spacing: -1px;
}
button {
align-self: flex-start;
margin-top: 30px;
font-family: numeralLight;
text-decoration: none;
color: white;
background-color: #6cbe44;
border-radius: 6px;
padding: 8px 25px;
width: 100%;
border: 0px;
&:hover {
color: white;
}
}
textarea {
width: 350px;
font-family: numeralLight;
border-radius: 10px;
margin-top: 20px;
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
&::placeholder {
color: #797979;
}
&:focus {
outline: 0px;
}
}
.MuiFormControl-root {
select {
font-family: numeralLight;
height: 100%;
direction: rtl;
border: 1px solid #cecece !important;
text-align: center !important;
border-radius: 10px !important;
color: #76797e !important;
&:focus {
background-color: white !important;
}
option {
padding: 5px !important;
}
}
.MuiNativeSelect-icon {
display: none;
}
.MuiNativeSelect-select {
padding: 8px 10px 8px 100px !important;
}
}
}
&__address {
width: 100%;
p {
font-family: numeralLight;
margin-bottom: 0px;
color: #6f7074;
}
span {
font-family: numeralLight;
margin-bottom: 0px;
color: #6f7074;
margin-right: 5px;
}
&--map {
width: 100%;
height: 180px;
border-radius: 20px;
img {
transform: scale(0.4);
}
}
}
}

Loading…
Cancel
Save