parent
fe5f0c818c
commit
d542c25603
94 changed files with 1112 additions and 647 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,85 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: { |
||||||
|
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
|
}, |
||||||
|
mobile: { |
||||||
|
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Document(props) { |
||||||
|
const { parent, name } = props; |
||||||
|
console.log({ parent, name }); |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="support__document d-flex justify-content-center align-items-center mb-3"> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name={name} |
||||||
|
onChange={(e) => |
||||||
|
parent.onChange(e.target.name, e.target.files[0], "file") |
||||||
|
} |
||||||
|
/> |
||||||
|
{parent.state.file ? ( |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
fontSize: fontSize.mobile.span, |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
{parent.state.file?.name || "تصویر بارگزاری شد"} |
||||||
|
</span> |
||||||
|
) : ( |
||||||
|
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
|
در صورت نیاز تصویر مرتبط را انتخاب کنید. |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<div className="support__document d-flex justify-content-center-align-items-center"> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name={name} |
||||||
|
onChange={(e) => |
||||||
|
parent.onChange(e.target.name, e.target.files[0], "file") |
||||||
|
} |
||||||
|
/>{" "} |
||||||
|
{parent.state.file ? ( |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
fontSize: fontSize.mobile.span, |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
{parent.state.file?.name || "فایل ثبت شد"} |
||||||
|
</span> |
||||||
|
) : ( |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
fontSize: fontSize.mobile.span, |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
در صورت نیاز تصویر مرتبط را انتخاب کنید. |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
.support { |
||||||
|
&__document { |
||||||
|
color: gray !important; |
||||||
|
margin: 10px auto; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
border-radius: 10px; |
||||||
|
border: 2px dashed #d1d1d1; |
||||||
|
position: relative; |
||||||
|
input { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: #afafaf; |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,278 @@ |
|||||||
|
.support { |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
min-height: calc(100vh - 288px); |
||||||
|
overflow-x: hidden; |
||||||
|
padding-top: 60px; |
||||||
|
&__forms { |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 30px; |
||||||
|
margin-bottom: 80px; |
||||||
|
&--right { |
||||||
|
width: 45%; |
||||||
|
.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; |
||||||
|
font-size: calc(100vw / 85) !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: numeralMedium; |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
color: #6f7074; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
align-self: flex-start; |
||||||
|
margin-top: 30px; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
color: white; |
||||||
|
background-color: #6cbe44; |
||||||
|
border-radius: 6px; |
||||||
|
padding: 5px 25px; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
max-width: 110px; |
||||||
|
border: 0px; |
||||||
|
&:hover { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--left { |
||||||
|
width: 45%; |
||||||
|
height: 100%; |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
margin-bottom: 0px; |
||||||
|
color: #6f7074; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
margin-bottom: 0px; |
||||||
|
color: #6f7074; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.contact__map { |
||||||
|
width: 100%; |
||||||
|
height: 430px; |
||||||
|
border-radius: 20px; |
||||||
|
img { |
||||||
|
transform: scale(0.4); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-support { |
||||||
|
width: 100vw; |
||||||
|
max-width: 550px; |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
overflow-x: hidden; |
||||||
|
padding-top: 70px; |
||||||
|
padding-bottom: 50px; |
||||||
|
&__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: 0px !important; |
||||||
|
width: fit-content; |
||||||
|
padding: 0px 6px !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: white; |
||||||
|
max-width: 120px; |
||||||
|
text-align: center; |
||||||
|
color: #797979 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
font-family: numeralLight !important; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 0.54) !important; |
||||||
|
border-color: #c4c4c5 !important; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
letter-spacing: -2px; |
||||||
|
color: #6cbe44; |
||||||
|
font-family: numeralMedium; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
color: #6f7074; |
||||||
|
} |
||||||
|
|
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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…
Reference in new issue