parent
de82826d86
commit
72ff8b2ba8
19 changed files with 313 additions and 37 deletions
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,30 @@ |
||||
import React, { Component } from 'react'; |
||||
import ChatIcon from '@material-ui/icons/Chat'; |
||||
|
||||
import FileTabs from './FileTabs/FileTabs'; |
||||
|
||||
import './ChatInfo.scss'; |
||||
export default class ChatInfo extends Component { |
||||
render(){ |
||||
return ( |
||||
<div className="chat-info d-flex flex-column"> |
||||
<div className="chat-info__image d-flex"> |
||||
{/* <img src={} /> */} |
||||
<div className="chat-info__image--float d-flex"> |
||||
<ChatIcon style={{color : "white", width : 46, height : 46}} /> |
||||
</div> |
||||
</div> |
||||
<div className="chat-info__box d-flex flex-column"> |
||||
<div className="chat-info__box--status d-flex flex-column"> |
||||
<h1>محسن محمدی</h1> |
||||
<p>2 دقیقه پیش آنلاین بوده</p> |
||||
</div> |
||||
<div className="chat-info__box--description d-flex"> |
||||
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد </p> |
||||
</div> |
||||
<FileTabs /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,79 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.chat-info{ |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
position: relative; |
||||
direction : rtl; |
||||
&__image{ |
||||
width: 100%; |
||||
background-color: rgb(82, 82, 82); |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 290px; |
||||
position: relative; |
||||
&--float{ |
||||
position: absolute; |
||||
width:65px; |
||||
height : 65px; |
||||
bottom: +8px; |
||||
right : 40px; |
||||
background-color: rgb(139, 73, 186); |
||||
background: linear-gradient(180deg, rgb(186, 73, 182) 0%, rgb(76, 74, 189) 92%); |
||||
padding : 5px; |
||||
border-radius: 100px; |
||||
z-index: 200; |
||||
justify-content:center; |
||||
align-items:center; |
||||
box-shadow: 0px 0px 50px rgba(36, 0, 72, 0.8); |
||||
} |
||||
} |
||||
&__box{ |
||||
width: 100%; |
||||
z-index: 100; |
||||
height : calc(100% - 250px); |
||||
background-color: rgb(200, 183, 232); |
||||
border-top-left-radius: 40px; |
||||
border-top-right-radius: 40px; |
||||
direction: rtl; |
||||
padding : 20px 0px 0px 0px; |
||||
position: sticky; |
||||
transform: translateY(-40px); |
||||
top : -150px; |
||||
overflow-y: scroll; |
||||
&::-webkit-scrollbar{ |
||||
display: none; |
||||
} |
||||
&--status{ |
||||
width: 100%; |
||||
align-items: flex-end; |
||||
padding : 0px 30px; |
||||
h1{ |
||||
font-size: 19px; |
||||
margin: 0; |
||||
letter-spacing:-1px; |
||||
font-family: IRANSansNumeralLight; |
||||
color: black; |
||||
font-weight: 100; |
||||
} |
||||
p{ |
||||
font-size: 14px; |
||||
color: rgb(104, 42, 135); |
||||
margin : 0px; |
||||
} |
||||
} |
||||
&--description{ |
||||
width: 100%; |
||||
justify-content:center; |
||||
align-items: center; |
||||
margin-top: 20px; |
||||
& p{ |
||||
width: 100%; |
||||
max-width: 310px; |
||||
text-align: justify; |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import './FileTabs.scss'; |
||||
export default class FileTabs extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
type : 'media', |
||||
|
||||
} |
||||
} |
||||
|
||||
setType = (val) => { |
||||
this.setState({ |
||||
type : val, |
||||
}) |
||||
} |
||||
render(){ |
||||
return( |
||||
<div className="file-tabs d-flex flex-column"> |
||||
<div className="file-tabs__types d-flex"> |
||||
<li style={{borderBottom : this.state.type === 'media' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('media')}>Media</li> |
||||
<li style={{borderBottom : this.state.type === 'file' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('file')}>Files</li> |
||||
<li style={{borderBottom : this.state.type === 'link' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('link')}>Links</li> |
||||
<li style={{borderBottom : this.state.type === 'music' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('music')}>Music</li> |
||||
<li style={{borderBottom : this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('voice')}>Voice</li> |
||||
</div> |
||||
{ |
||||
this.state.type === 'media' ?
|
||||
<div className="file-tabs__media d-flex flex-wrap"> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
<div className="file-tabs__media--item"> |
||||
|
||||
</div> |
||||
</div> : null |
||||
} |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.file-tabs{ |
||||
width: 100%; |
||||
position: relative; |
||||
direction : rtl; |
||||
&__types{ |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
align-items:center; |
||||
padding : 3px calc((100vw - 310px)/2) 3px calc((100vw - 310px)/2); |
||||
direction : ltr; |
||||
border-top : 8px solid rgb(13, 84, 150); |
||||
& li{ |
||||
font-size: 16px; |
||||
list-style : none; |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
&__media{ |
||||
width: 100%; |
||||
&--item{ |
||||
width : calc(100% / 3); |
||||
height: 150px; |
||||
border : 2px solid rgb(200, 183, 232); |
||||
background-color : red; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -1,9 +1,34 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.chat-room{ |
||||
flex : 1; |
||||
background-color: rgb(15, 93, 209); |
||||
background: rgb(139, 73, 186); |
||||
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%); |
||||
border-radius: 40px; |
||||
max-height: 100vh; |
||||
height: 100vh; |
||||
overflow-y: hidden; |
||||
width: 100vw; |
||||
box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8); |
||||
&__status{ |
||||
border-top-left-radius: 40px; |
||||
border-top-right-radius: 40px; |
||||
height: 70px; |
||||
background : rgb(106, 103, 250); |
||||
position: relative; |
||||
align-items: center; |
||||
justify-content:center; |
||||
h1{ |
||||
font-size: 21px; |
||||
margin: 0; |
||||
letter-spacing:-1px; |
||||
font-family: IRANSansNumeralLight; |
||||
color: white; |
||||
font-weight: 100; |
||||
} |
||||
p{ |
||||
font-size: 14px; |
||||
color: white; |
||||
margin : 0px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,7 +1,8 @@ |
||||
@media screen and (max-width: 450px){ |
||||
.home{ |
||||
flex : 1; |
||||
background-color: rgb(15, 93, 209); |
||||
background: rgb(139, 73, 186); |
||||
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%); |
||||
border-radius: 40px; |
||||
height: 100vh; |
||||
} |
||||
|
||||
Loading…
Reference in new issue