morten/catpic.delivery
1
0
Fork 0
mirror of https://github.com/morten-olsen/catpic.delivery.git synced 2026-02-08 01:46:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Morten Olsen
2021-06-09 22:15:39 +02:00
parent ab1a5b5fc2
commit 75df75caec
4 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -15,7 +15,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<style> <style>
body, html { body, html, #root {
height: 100%; height: 100%;
} }

2
src/components/ComposeBar.tsx
View File

@@ -24,7 +24,7 @@ const ComposeArea = styled.div`
const Input = styled.input` const Input = styled.input`
flex: 1; flex: 1;
border: none; border: none;
font-size: 16px; font-size: 18px;
height: 30px; height: 30px;
background: #eee; background: #eee;
padding: 0 10px; padding: 0 10px;

10
src/containers/Connected.tsx
View File

@@ -6,10 +6,6 @@ import ComposeMessage from '../types/ComposeMessage';
import ComposeBar from '../components/ComposeBar'; import ComposeBar from '../components/ComposeBar';
const Wrapper = styled.div` const Wrapper = styled.div`
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -20,6 +16,10 @@ const MessageList = styled.div`
transform: scale(1, -1); transform: scale(1, -1);
`; `;
const Loading = styled.div`
transform: scale(1, -1);
`;
const Connected: React.FC<{}> = () => { const Connected: React.FC<{}> = () => {
const { send, messages } = useConnection(); const { send, messages } = useConnection();
@@ -45,7 +45,7 @@ const Connected: React.FC<{}> = () => {
{reverseMessages.map((message) => (message.content ? ( {reverseMessages.map((message) => (message.content ? (
<Message self={message.self} message={message.content} /> <Message self={message.self} message={message.content} />
):( ):(
<div>Loading</div> <Loading>Loading {Math.round(message.current / message.length * 100)}%</Loading>
)))} )))}
</MessageList> </MessageList>
<ComposeBar onSend={onSend} message={currentMessage} setMessage={setCurrentMessage} /> <ComposeBar onSend={onSend} message={currentMessage} setMessage={setCurrentMessage} />

4
src/containers/Welcome.tsx
View File

@@ -6,10 +6,6 @@ import useConnection from '../hooks/useConnection';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
`; `;