parent
9368cfcf96
commit
1e2ab85cdc
35 changed files with 729 additions and 461 deletions
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -1,6 +1,7 @@ |
||||
.timer{ |
||||
.timer { |
||||
flex-direction: row; |
||||
direction: rtl !important; |
||||
margin-right: 10px; |
||||
color: #6CBE44; |
||||
color: #6cbe44; |
||||
font-family: numeralLight; |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import React from "react"; |
||||
|
||||
export default function GenderSwitch(props) { |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<div className="gender d-flex"> |
||||
<button onClick={}>پسر</button> |
||||
<button>دختر</button> |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="mobile-gender d-flex"> |
||||
<button>پسر</button> |
||||
<button>دختر</button> |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
@ -1,27 +1,40 @@ |
||||
import React from 'react'; |
||||
import TextField from '@material-ui/core/TextField'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import React from "react"; |
||||
import TextField from "@material-ui/core/TextField"; |
||||
import { makeStyles } from "@material-ui/core/styles"; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
export default function FormPropsTextFields(props) { |
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
'& .MuiTextField-root': { |
||||
|
||||
width: '100%', |
||||
position : 'relative', |
||||
marginRight : 10, |
||||
|
||||
"& .MuiTextField-root": { |
||||
width: "100%", |
||||
position: "relative", |
||||
marginRight: 10, |
||||
"& input": { |
||||
textAlign: props.align, |
||||
direction: props.align === "right" ? "rtl" : "ltr", |
||||
}, |
||||
}, |
||||
}, |
||||
})); |
||||
})); |
||||
|
||||
export default function FormPropsTextFields(props) { |
||||
const classes = useStyles(); |
||||
|
||||
const { parent, defaultValue } = props; |
||||
return ( |
||||
<form className={classes.root} noValidate autoComplete="off"> |
||||
<div> |
||||
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" /> |
||||
<TextField |
||||
id="outlined-basic" |
||||
name={props.name} |
||||
label={props.label} |
||||
variant="outlined" |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
defaultValue={defaultValue} |
||||
/> |
||||
</div> |
||||
</form> |
||||
); |
||||
} |
||||
|
||||
FormPropsTextFields.defaultProps = { |
||||
align: "right", |
||||
}; |
||||
|
||||
@ -0,0 +1,79 @@ |
||||
import React from "react"; |
||||
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
desktop: { |
||||
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||
}, |
||||
}; |
||||
|
||||
export default function Upload(props) { |
||||
const { parent } = props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3"> |
||||
{parent.state.file === null ? ( |
||||
<> |
||||
<input |
||||
type="file" |
||||
name="file" |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
/> |
||||
<AddAPhotoIcon |
||||
style={{ width: 40, height: 40, color: "white" }} |
||||
/> |
||||
</> |
||||
) : ( |
||||
<> |
||||
<input |
||||
type="file" |
||||
name="file" |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
/> |
||||
<img src={this.props.user.icon} alt={"کاربر"} /> |
||||
</> |
||||
)} |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<div className="auth-profile__upload d-flex justify-content-center-align-items-center"> |
||||
{parent.state.file === null ? ( |
||||
<> |
||||
<input |
||||
label={props.label} |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
name={props.name} |
||||
defaultValue="" |
||||
type="file" |
||||
/> |
||||
<AddAPhotoIcon |
||||
style={{ |
||||
width: 40, |
||||
height: 40, |
||||
color: "grey", |
||||
position: "absolute", |
||||
left: "calc(50% - 20px)", |
||||
top: "calc(50% - 20px)", |
||||
}} |
||||
/> |
||||
</> |
||||
) : ( |
||||
<> |
||||
<input |
||||
label={props.label} |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
name={props.name} |
||||
defaultValue="" |
||||
type="file" |
||||
/> |
||||
</> |
||||
)} |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
@ -1,19 +1,18 @@ |
||||
.home{ |
||||
.home { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding : 0px 10px; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
padding-top: 100px; |
||||
} |
||||
|
||||
|
||||
.mobile-home{ |
||||
.mobile-home { |
||||
width: 100vw; |
||||
max-width: 600px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 70px; |
||||
padding-top: 90px; |
||||
} |
||||
@ -1,32 +1,57 @@ |
||||
import React from 'react'; |
||||
import React from "react"; |
||||
|
||||
import './index.scss'; |
||||
export default function Links(props){ |
||||
return( |
||||
import "./index.scss"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
mobile: { |
||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, |
||||
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32, |
||||
}, |
||||
desktop: { |
||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 75, |
||||
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 95, |
||||
}, |
||||
}; |
||||
|
||||
export default function Links(props) { |
||||
return ( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
{window.innerWidth > 1000 ? ( |
||||
<div className="links-box d-flex flex-column" id="links"> |
||||
<h2>{props.data.title}</h2> |
||||
</div> : null |
||||
} |
||||
{ |
||||
window.innerWidth < 1000 ?
|
||||
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{props.data.title}</h2> |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="mobile-links-box d-flex flex-column" id="links"> |
||||
<h2><span></span>لینکها</h2> |
||||
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
||||
<span></span>لینکها |
||||
</h2> |
||||
<ul> |
||||
{props.data.links.map((item,i) => ( |
||||
{props.data.links.map((item, i) => ( |
||||
<Item data={item} key={i} /> |
||||
) )} |
||||
))} |
||||
</ul> |
||||
</div> : null |
||||
}
|
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
return( |
||||
<li><a href={props.data.link}>{props.data.title}</a></li> |
||||
return ( |
||||
<li> |
||||
<a |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop.a : fontSize.mobile.a, |
||||
}} |
||||
href={props.data.link} |
||||
> |
||||
{props.data.title} |
||||
</a> |
||||
</li> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
Loading…
Reference in new issue