waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use flex to keep the input box at the bottom

This commit is contained in:
Franck Royer 2021-04-26 17:33:12 +10:00
parent 2d3cc73569
commit a27080fc34
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web-chat/src/App.tsx
View File

@ -1,4 +1,3 @@
import { Paper } from '@material-ui/core';
import { multiaddr } from 'multiaddr'; import { multiaddr } from 'multiaddr';
import PeerId from 'peer-id'; import PeerId from 'peer-id';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -155,18 +154,14 @@ export default function App() {
}; };
return ( return (
<div className="App"> <div className="chat-app">
<div className="chat-room">
<WakuContext.Provider value={{ waku: stateWaku }}> <WakuContext.Provider value={{ waku: stateWaku }}>
<Paper>
<Room <Room
nick={nick} nick={nick}
lines={stateMessages} lines={stateMessages}
commandHandler={commandHandler} commandHandler={commandHandler}
/> />
</Paper>
</WakuContext.Provider> </WakuContext.Provider>
</div> </div>
</div>
); );
} }

22
web-chat/src/Room.tsx
View File

@ -1,4 +1,4 @@
import { Box, Grid, List, ListItem, ListItemText } from '@material-ui/core'; import { List, ListItem, ListItemText } from '@material-ui/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ChatMessage } from 'waku-chat/chat_message'; import { ChatMessage } from 'waku-chat/chat_message';
import { WakuMessage } from 'waku/waku_message'; import { WakuMessage } from 'waku/waku_message';
@ -38,24 +38,20 @@ export default function Room(props: Props) {
}; };
return ( return (
<Grid container spacing={2}> <div
<Grid item xs={12}> className="chat-container"
<Box style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
height={800}
maxHeight={800}
style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }}
> >
<div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}>
<Lines messages={props.lines} /> <Lines messages={props.lines} />
</Box> </div>
</Grid> <div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
<Grid item xs={12}>
<MessageInput <MessageInput
messageHandler={messageHandler} messageHandler={messageHandler}
sendMessage={sendMessage} sendMessage={sendMessage}
/> />
</Grid> </div>
</Grid> </div>
); );
} }