engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use css grid to make chatroom big.

Browse source
This commit is contained in:
Russell Ballestrini 2023-06-09 10:52:57 -04:00
parent 020813fc30
commit 6909622c09
1 changed files with 38 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

71
templates/chat.html
View file

@ -13,43 +13,48 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 75vh;
margin: 0;
}
#chat-container {
background-color: #ffffff;
border-radius: 5px;
padding: 15px;
width: 100%;
max-width: 600px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
#chat {
height: 300px;
overflow-y: scroll;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
#message {
width: 98%;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 5px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: grid;
place-items: center;
}
#chat-container {
display: grid;
grid-template-rows: 1fr auto;
width: 100%;
height: 90vh;
background-color: #ffffff;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
#chat {
overflow-y: auto;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
min-width: 400px;
}
#message {
width: 100%;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="chat-container">
<h2>{{ room }}</h2>
<div id="chat"></div>
<form id="message-form">
<input id="message" type="text" placeholder="Type your message...">