parent
50c5281e34
commit
af0ac4d462
45 changed files with 2442 additions and 1123 deletions
|
After Width: | Height: | Size: 642 B |
|
After Width: | Height: | Size: 686 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
@ -0,0 +1,70 @@ |
||||
import React from 'react'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import CircularProgress from '@material-ui/core/CircularProgress'; |
||||
|
||||
// Inspired by the former Facebook spinners.
|
||||
const useStylesFacebook = makeStyles((theme) => ({ |
||||
root: { |
||||
position: 'relative', |
||||
top: '2px', |
||||
right: '2px', |
||||
marginLeft: '6px', |
||||
|
||||
}, |
||||
bottom: { |
||||
color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], |
||||
}, |
||||
top: { |
||||
color: '#1ED81E', |
||||
animationDuration: '550ms', |
||||
position: 'absolute', |
||||
left: 0, |
||||
}, |
||||
circle: { |
||||
strokeLinecap: 'round', |
||||
}, |
||||
})); |
||||
|
||||
function FacebookCircularProgress(props) { |
||||
const classes = useStylesFacebook(); |
||||
|
||||
return ( |
||||
<div className={classes.root}> |
||||
<CircularProgress |
||||
variant="determinate" |
||||
className={classes.bottom} |
||||
size={34} |
||||
thickness={4} |
||||
{...props} |
||||
value={100} |
||||
/> |
||||
<CircularProgress |
||||
variant="indeterminate" |
||||
disableShrink |
||||
className={classes.top} |
||||
classes={{ |
||||
circle: classes.circle, |
||||
}} |
||||
size={34} |
||||
thickness={4} |
||||
{...props} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const useStyles = makeStyles({ |
||||
root: { |
||||
// flexGrow: 1,
|
||||
}, |
||||
}); |
||||
|
||||
export default function CustomizedProgressBars() { |
||||
const classes = useStyles(); |
||||
|
||||
return ( |
||||
<div className={classes.root}> |
||||
<FacebookCircularProgress /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
import React, { Component } from 'react'; |
||||
import Carousel from 'react-elastic-carousel'; |
||||
|
||||
import './ChatSuggest.scss'; |
||||
|
||||
export default class ChatSuggest extends Component { |
||||
render(){ |
||||
const {suggest} = this.props; |
||||
return ( |
||||
<div className="chat-suggest portrait-slider d-flex flex-column"> |
||||
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}> |
||||
{ |
||||
suggest.map(item => ( |
||||
<Suggest item={item} key={item.id} /> |
||||
)) |
||||
} |
||||
</Carousel> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
|
||||
class Suggest extends Component { |
||||
render(){ |
||||
const {item} = this.props; |
||||
return( |
||||
<div className="chat-suggest__item d-flex"> |
||||
{item.text} |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.chat-suggest{ |
||||
// border-bottom-right-radius: 40px; |
||||
// border-bottom-left-radius: 40px; |
||||
width : 100%; |
||||
// height : 40px; |
||||
padding : 2px 0px 0px; |
||||
align-items : flex-end; |
||||
&__item{ |
||||
padding : 8px 6px; |
||||
background-color : rgb(13, 214, 20); |
||||
border-radius: 5px; |
||||
margin : 5px; |
||||
width :100% !important; |
||||
justify-content : center; |
||||
color : white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.portrait-slider{ |
||||
width : 100% !important; |
||||
height: 100% !important; |
||||
position: relative; |
||||
padding : 20px 12px 0px; |
||||
margin-bottom: 10px; |
||||
justify-content: center !important; |
||||
} |
||||
|
||||
|
||||
|
||||
.rec-dot_active{ |
||||
background-color: white !important; |
||||
color: white !important; |
||||
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important; |
||||
} |
||||
|
||||
.Carousel-button-10{ |
||||
background-color: white !important; |
||||
} |
||||
.rec-pagination{ |
||||
z-index: 600; |
||||
position: absolute; |
||||
top: -12px !important; |
||||
// left: calc(50% - 20px) !important; |
||||
& button{ |
||||
background-color: grey; |
||||
margin : 2px !important; |
||||
box-shadow: 0px 0px 0px rgba(255,255,255,1); |
||||
} |
||||
} |
||||
|
||||
// .guuruq{ |
||||
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0%); |
||||
// } |
||||
|
||||
// .cJeRRR{ |
||||
// background-color: white !important; |
||||
|
||||
// } |
||||
|
||||
// .cJeRRR:hover, .cJeRRR:focus{ |
||||
// cursor: pointer; |
||||
// box-shadow: 0px 0px 0px rgba(255,255,255,1) !important; |
||||
// background-color: white !important; |
||||
// } |
||||
@ -0,0 +1,57 @@ |
||||
import React, {Component} from 'react'; |
||||
import {SortableContainer, SortableElement} from 'react-sortable-hoc'; |
||||
import arrayMove from 'array-move'; |
||||
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||
|
||||
const SortableItem = SortableElement(({value}) => <div className="message-2d__options--draggable d-flex">{value}</div>); |
||||
|
||||
const SortableList = SortableContainer(({items}) => { |
||||
return ( |
||||
<div className="message-2d__options d-flex flex-column"> |
||||
{items.map((value, index) => ( |
||||
<SortableItem key={`item-${value}`} index={index} value={value} /> |
||||
))} |
||||
</div> |
||||
); |
||||
}); |
||||
|
||||
export default class DraggableMessage extends Component { |
||||
state = { |
||||
items: ['استقلال', 'پرسپولیس', 'سپاهان'], |
||||
}; |
||||
|
||||
onSortEnd = ({oldIndex, newIndex}) => { |
||||
this.setState(({items}) => ({ |
||||
items: arrayMove(items, oldIndex, newIndex), |
||||
})); |
||||
}; |
||||
render() { |
||||
const {message, user1, user2} = this.props; |
||||
return ( |
||||
<div
|
||||
className="message-2d d-flex flex-column d-flex" |
||||
style={{
|
||||
marginRight: message.user.id === user1.id ? 0 : 40, |
||||
marginLeft: message.user.id === user1.id ? 40 : 0, |
||||
}} |
||||
> |
||||
<img
|
||||
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
|
||||
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }} |
||||
alt={message.id} |
||||
/> |
||||
<div
|
||||
className='message-2d__text d-flex' |
||||
> |
||||
{ |
||||
|
||||
message.text !== null ? |
||||
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null |
||||
} |
||||
</div> |
||||
<SortableList items={this.state.items} onSortEnd={this.onSortEnd} /> |
||||
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
import React, {Component} from 'react'; |
||||
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||
|
||||
|
||||
|
||||
export default class RadioMessage extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
value : null, |
||||
} |
||||
} |
||||
|
||||
handleRadioChange = (newValue) => { |
||||
this.setState({
|
||||
value: newValue |
||||
}); |
||||
}; |
||||
|
||||
render() { |
||||
const {message, user1, user2} = this.props; |
||||
return ( |
||||
<div
|
||||
className="message-2d d-flex flex-column d-flex" |
||||
style={{
|
||||
marginRight: message.user.id === user1.id ? 0 : 40, |
||||
marginLeft: message.user.id === user1.id ? 40 : 0, |
||||
}} |
||||
> |
||||
<img
|
||||
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
|
||||
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }} |
||||
alt={message.id} |
||||
/> |
||||
<div
|
||||
className='message-2d__text d-flex' |
||||
> |
||||
{ |
||||
message.text !== null ? |
||||
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null |
||||
} |
||||
</div> |
||||
<div className="message-2d__options d-flex flex-wrap justify-content-center"> |
||||
{ |
||||
message.options.map(item => ( |
||||
<div key={item.id} onClick={() => this.handleRadioChange(item.name)} className="message-2d__options--radio" style={{backgroundColor : item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',color : item.name === this.state.value ? 'white' : 'black'}}> |
||||
{item.name} |
||||
</div> |
||||
)) |
||||
} |
||||
</div> |
||||
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,94 @@ |
||||
import React, {Component} from 'react'; |
||||
import Grid from '@material-ui/core/Grid'; |
||||
import Slider from '@material-ui/core/Slider'; |
||||
import Input from '@material-ui/core/Input'; |
||||
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||
|
||||
|
||||
|
||||
export default class SliderMessage extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
value : 10, |
||||
} |
||||
} |
||||
|
||||
handleSliderChange = (event,newValue) => { |
||||
this.setState({
|
||||
value: newValue |
||||
}); |
||||
}; |
||||
|
||||
handleInputChange = (event) => { |
||||
this.setState({ |
||||
value : event.target.value === '' ? '' : Number(event.target.value) |
||||
}); |
||||
}; |
||||
|
||||
handleBlur = () => { |
||||
if (this.state.value < 0) { |
||||
this.setState({ value: 0}); |
||||
} else if (this.state.value > 20) { |
||||
this.setState({ value: 20}); |
||||
} |
||||
}; |
||||
render() { |
||||
const {message, user1, user2} = this.props; |
||||
return ( |
||||
<div
|
||||
className="message-2d d-flex flex-column d-flex" |
||||
style={{
|
||||
marginRight: message.user.id === user1.id ? 0 : 40, |
||||
marginLeft: message.user.id === user1.id ? 40 : 0, |
||||
}} |
||||
> |
||||
<img
|
||||
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
|
||||
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }} |
||||
alt={message.id} |
||||
/> |
||||
<div
|
||||
className='message-2d__text d-flex' |
||||
> |
||||
{ |
||||
|
||||
message.text !== null ? |
||||
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null |
||||
} |
||||
</div> |
||||
<Grid container spacing={2} alignItems="center"> |
||||
<Grid item xs> |
||||
<Slider |
||||
value={typeof this.state.value === 'number' ? this.state.value : 0} |
||||
onChange={this.handleSliderChange} |
||||
aria-labelledby="input-slider" |
||||
style={{marginTop:10}} |
||||
min={0} |
||||
max={20} |
||||
step={0.1} |
||||
/> |
||||
</Grid> |
||||
<Grid item> |
||||
<Input |
||||
value={this.state.value} |
||||
margin="dense" |
||||
onChange={(e) => this.handleInputChange(e)} |
||||
onBlur={() => this.handleBlur()} |
||||
inputProps={{ |
||||
step: 0.1, |
||||
min: 0, |
||||
max: 20, |
||||
type: 'number', |
||||
'aria-labelledby': 'input-slider', |
||||
}} |
||||
style={{width : 42, borderBottom : '2px solid #000099', paddingLeft :10,marginBottom :18, color : '#000099'}} |
||||
/> |
||||
</Grid> |
||||
</Grid> |
||||
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -1,11 +1,31 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.header{ |
||||
border-top-right-radius: 40px; |
||||
border-top-left-radius: 40px; |
||||
height: 80px; |
||||
.chat-header{ |
||||
height: 70px; |
||||
width: 100%; |
||||
justify-content : space-between; |
||||
align-items: flex-start; |
||||
padding : 30px 22px 0px; |
||||
padding : 10px 18px 10px; |
||||
position: relative; |
||||
&__title{ |
||||
direction:rtl; |
||||
position: absolute; |
||||
right: 10px; |
||||
margin-top: 8px; |
||||
align-items:center; |
||||
right: 60px; |
||||
& h1{ |
||||
font-size: 23px; |
||||
color: white; |
||||
} |
||||
& span{ |
||||
margin : 0px 5px; |
||||
width: 2px; |
||||
height:22px; |
||||
background-color:white; |
||||
position: relative; |
||||
bottom: 5px; |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,12 +1,114 @@ |
||||
import React, { Component } from 'react'; |
||||
import { MapContainer, TileLayer, Marker, Popup, Tooltip,Circle } from "react-leaflet"; |
||||
import L from 'leaflet'; |
||||
import NavigationIcon from '@material-ui/icons/Navigation'; |
||||
import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk'; |
||||
import MyLocationIcon from '@material-ui/icons/MyLocation'; |
||||
|
||||
import blueM from '../../../../assets/icons/marker-blue.png'; |
||||
import greenM from '../../../../assets/icons/marker-green.png'; |
||||
|
||||
import './Location.scss'; |
||||
const items = [{lat :35.73366050852552, lng : 51.414611756817976}]; |
||||
const selected = {}; |
||||
const green = new L.Icon({ |
||||
iconUrl: greenM, |
||||
iconRetinaUrl: greenM, |
||||
popupAnchor: [-0, -0], |
||||
iconSize: [25,38],
|
||||
}); |
||||
const blue = new L.Icon({ |
||||
iconUrl: blueM, |
||||
iconRetinaUrl: blueM, |
||||
popupAnchor: [-0, -0], |
||||
iconSize: [25,38],
|
||||
}); |
||||
export default class Location extends Component { |
||||
state = {}; |
||||
render(){ |
||||
return ( |
||||
<div className="location d-flex"> |
||||
<div className="location" style={{display: 'block !important' , height:"100%", }}> |
||||
<MapContainer |
||||
whenCreated={(map) =>{ |
||||
this.map=map; |
||||
map.locate({setView:true}) |
||||
map.on('locationfound',(e)=>{ |
||||
this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy}) |
||||
}) |
||||
} } |
||||
ref={this.myRef} |
||||
center={[35.73366050852552, 51.414611756817976]} |
||||
zoom={14} |
||||
scrollWheelZoom={true} |
||||
style={{ height: "100%", direction: "ltr" }} |
||||
> |
||||
{/* <LocateControlC > </LocateControlC> */} |
||||
{/* {this.state.c ? <LocateControl options={locateOptions} startDirectly/>:null} */} |
||||
<TileLayer |
||||
attribution="" |
||||
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" |
||||
// https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||
/> |
||||
<Marker position={[35.73366050852552, 51.414611756817976]}
|
||||
icon={blue} |
||||
eventHandlers={{ |
||||
// click: () => {
|
||||
// this.seter("value",e.id)
|
||||
// },
|
||||
}} |
||||
onClick={e=>console.log("sss")}> |
||||
<Tooltip direction="top" opacity={1} > |
||||
{'map'} |
||||
|
||||
</Tooltip> |
||||
</Marker> |
||||
{/* { |
||||
items.map((e) => ( |
||||
<Marker position={[e.lat, e.lon]}
|
||||
icon={selected && e.id==selected.id?green:blue} |
||||
eventHandlers={{ |
||||
click: () => { |
||||
this.seter("value",e.id) |
||||
}, |
||||
}} |
||||
onClick={e=>console.log("sss")}> |
||||
<Tooltip direction="top" opacity={1} > |
||||
{e.name} |
||||
|
||||
</Tooltip> |
||||
</Marker> |
||||
))} */} |
||||
{this.state.lat && this.state.lng && <> |
||||
<Circle center={[this.state.lat, this.state.lng]} pathOptions={{ fillColor: 'blue' }} radius={this.state.accuracy} /> |
||||
<Marker position={[this.state.lat, this.state.lng]}
|
||||
icon={blue} |
||||
eventHandlers={{ |
||||
// click: () => {
|
||||
// this.seter("value",e.id)
|
||||
// },
|
||||
}} |
||||
onClick={e=>console.log("sss")}> |
||||
<Tooltip direction="top" opacity={1} > |
||||
{'map'} |
||||
|
||||
</Tooltip> |
||||
</Marker> |
||||
</> |
||||
} |
||||
</MapContainer> |
||||
<div className="location__footer d-flex flex-row-reverse"> |
||||
<div className="location__footer--icon"> |
||||
<NavigationIcon style={{color : "white" , width : 35, height : 35}} /> |
||||
</div> |
||||
<span>10 کیلومتر</span> |
||||
<div className="location__footer--time d-flex flex-row-reverse align-items-center"> |
||||
<div>10 دقیقه</div> |
||||
<DirectionsWalkIcon style={{color : "white" , width : 30, height : 30, marginRight :5,marginLeft :10}} /> |
||||
</div> |
||||
</div> |
||||
<div className="location__current d-flex justify-content-center align-items-center"> |
||||
<MyLocationIcon style={{color : "white" , width : 35, height : 35}} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,49 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.location{ |
||||
width: 100%; |
||||
height: 100%; |
||||
// filter : hue-rotate(360deg); |
||||
position: relative; |
||||
&__footer{ |
||||
position: fixed; |
||||
bottom: 10px; |
||||
left: 5px; |
||||
width: calc(100% - 10px); |
||||
border-radius: 40px; |
||||
background: linear-gradient(90deg, rgb(102, 99, 245) 20%, rgb(186, 85, 204) 140%); |
||||
height: 66px; |
||||
align-items: center; |
||||
padding : 0px 7px; |
||||
justify-content: space-between; |
||||
color: white; |
||||
z-index: 1000; |
||||
&--icon{ |
||||
padding : 10px; |
||||
background-color: rgb(102, 33, 170); |
||||
border-radius: 100px; |
||||
} |
||||
&--time{ |
||||
font-size: 18px; |
||||
div{ |
||||
direction: rtl; |
||||
} |
||||
} |
||||
span{ |
||||
position: relative; |
||||
right:15px; |
||||
direction: rtl; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
&__current{ |
||||
position: fixed; |
||||
bottom: 84px; |
||||
width: 70px; |
||||
right: 5px; |
||||
background : rgb(220, 220, 220); |
||||
height:70px; |
||||
border-radius: 100px; |
||||
z-index: 1000; |
||||
} |
||||
} |
||||
} |
||||
@ -1,15 +1,105 @@ |
||||
import React, { Component } from 'react'; |
||||
import React, { Component,useEffect,useState,useRef } from 'react'; |
||||
import MenuIcon from '@material-ui/icons/Menu'; |
||||
import SearchIcon from '@material-ui/icons/Search'; |
||||
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; |
||||
import { makeStyles } from '@material-ui/core/styles'; |
||||
import { SwipeableDrawer } from '@material-ui/core'; |
||||
import NavbarDrawer from './NavbarDrawer/NavbarDrawer.js'; |
||||
import clsx from 'clsx'; |
||||
|
||||
import './Header.scss'; |
||||
export default class Header extends Component { |
||||
render(){ |
||||
return ( |
||||
<div className="header d-flex"> |
||||
<SearchIcon style={{color : "white" , width : 38, height : 38}} /> |
||||
<MenuIcon style={{color : "white" , width : 38, height : 38}} /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const useStyles = makeStyles({ |
||||
list: { |
||||
width: window.innerWidth * 0.8, |
||||
}, |
||||
fullList: { |
||||
width: 'auto', |
||||
direction: 'rtl', |
||||
textAlign: 'right' |
||||
}, |
||||
}); |
||||
|
||||
|
||||
export default function Header(props) { |
||||
const classes = useStyles(); |
||||
|
||||
const [state, setState] = useState({ |
||||
top: false, |
||||
left: false, |
||||
bottom: false, |
||||
right: false, |
||||
searchFlag : false, |
||||
}); |
||||
|
||||
const inputRef5 = useRef(); |
||||
|
||||
useEffect(() =>{ |
||||
if(state['searchFlag'] === true){ |
||||
inputRef5.current.focus(); |
||||
} |
||||
}); |
||||
|
||||
const list = (props, anchor) => ( |
||||
<div |
||||
className={clsx(classes.list, { |
||||
[classes.fullList]: anchor === 'top' || anchor === 'bottom', |
||||
})} |
||||
role="presentation" |
||||
onClick={toggleDrawer(anchor, false)} |
||||
onKeyDown={toggleDrawer(anchor, false)} |
||||
> |
||||
<NavbarDrawer setShare={props.setShare} user={props.user} logout={props.logout} needUpdate={props.needUpdate} /> |
||||
</div> |
||||
); |
||||
|
||||
const toggleDrawer = (anchor, open) => (event) => { |
||||
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { |
||||
return; |
||||
} |
||||
|
||||
setState({ [anchor]: open }); |
||||
}; |
||||
|
||||
return ( |
||||
<div className="header d-flex"> |
||||
{ |
||||
state['searchFlag'] === true ?
|
||||
<div className="header__search d-flex"> |
||||
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}> |
||||
<ArrowRightAltIcon style={{color : "rgb(111,108,255)" , width : 38, height : 38}} /> |
||||
</div> |
||||
<input
|
||||
type="search"
|
||||
ref={inputRef5} |
||||
placeholder="بنویس ..." |
||||
/> |
||||
</div> : |
||||
<> |
||||
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}> |
||||
<SearchIcon style={{color : "white" , width : 38, height : 38}} /> |
||||
</div> |
||||
<div className="chat-header__title d-flex"> |
||||
<h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1> |
||||
<span style={{position : "relative", top : -3}}></span> |
||||
<h1 style={{fontSize :17,position : "relative", top : 2}}>داستانبازی</h1> |
||||
</div> |
||||
<div onClick={toggleDrawer('right', true)}> |
||||
<MenuIcon style={{color : "white" , width : 38, height : 38,position : "relative", top : 0}} /> |
||||
</div> |
||||
|
||||
<SwipeableDrawer |
||||
anchor='right' |
||||
open={state['right']} |
||||
onClose={toggleDrawer('right', false)} |
||||
onOpen={toggleDrawer('right', true)} |
||||
> |
||||
{list(props,'right')} |
||||
</SwipeableDrawer> |
||||
</> |
||||
} |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
||||
|
||||
@ -1,11 +1,39 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.header{ |
||||
border-top-right-radius: 40px; |
||||
border-top-left-radius: 40px; |
||||
height: 70px; |
||||
height: 60px; |
||||
width: 100%; |
||||
justify-content : space-between; |
||||
align-items: flex-end; |
||||
align-items: center; |
||||
padding : 0px 15px; |
||||
position: relative; |
||||
&__search{ |
||||
width: 100vw; |
||||
background-color: rgb(255, 255, 255); |
||||
direction : rtl; |
||||
align-items : center; |
||||
position: fixed; |
||||
top : 0px; |
||||
left : 0px; |
||||
height : 60px; |
||||
z-index: 550; |
||||
input{ |
||||
width: 100%; |
||||
position: relative; |
||||
padding : 8px 10px 8px 10px; |
||||
border : 0px; |
||||
border-radius: 2px; |
||||
color : black; |
||||
font-size: 18px; |
||||
text-align: right; |
||||
background-color: inherit; |
||||
&:focus{ |
||||
outline:none; |
||||
} |
||||
&::placeholder{ |
||||
color: grey; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,98 @@ |
||||
.navbar-drawer{ |
||||
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important; |
||||
text-align: right !important; |
||||
direction: rtl; |
||||
padding : 30px 10px 10px 10px; |
||||
&__header{ |
||||
height: 80px; |
||||
width: 100%; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding : 0px 8px; |
||||
&--right{ |
||||
& h1{ |
||||
margin-bottom: 0px; |
||||
font-size: 24px; |
||||
color : white; |
||||
letter-spacing: -1px; |
||||
} |
||||
& div{ |
||||
color : white; |
||||
font-size: 12px; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
& img{ |
||||
width : 22px; |
||||
height : 22px; |
||||
position: relative; |
||||
bottom :35px; |
||||
} |
||||
} |
||||
&__bottom{ |
||||
width:100%; |
||||
&--link{ |
||||
width:100%; |
||||
align-items: center; |
||||
padding : 15px 10px; |
||||
& img{ |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
& .badge{ |
||||
background-color: rgb(160, 60, 209); |
||||
margin:5px; |
||||
} |
||||
} |
||||
&--button{ |
||||
width: 100%; |
||||
height: 100px; |
||||
color: white; |
||||
padding : 15px 10px; |
||||
cursor: pointer; |
||||
& img{ |
||||
width: 20px; |
||||
height: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
} |
||||
&--version{ |
||||
position: absolute; |
||||
bottom : 5px; |
||||
left : 0px; |
||||
width :100%; |
||||
height : 32px; |
||||
font-size: 14px; |
||||
justify-content:center; |
||||
align-items:center; |
||||
& span{ |
||||
color : #cfcfcf; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.MuiPaper-root{ |
||||
background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111,108,255) 72%) !important; |
||||
&::-webkit-scrollbar{ |
||||
display: none; |
||||
width: 0px; |
||||
} |
||||
} |
||||
|
||||
|
||||
.navbar-drawer__bottom a{ |
||||
width: 100%; |
||||
height: 100px; |
||||
color : white; |
||||
} |
||||
|
||||
|
||||
.navbar-drawer__bottom--link |
||||
|
||||
.navbar-drawer__bottom--link div{ |
||||
font-size: 16px; |
||||
} |
||||
Loading…
Reference in new issue