forked from snxraven/LinkUp-P2P-Chat
make things look better on screen
This commit is contained in:
parent
f43b615021
commit
1608a44ac7
10
index.html
10
index.html
@ -29,10 +29,14 @@
|
||||
<div id="user-info">
|
||||
<!-- User info will be populated dynamically -->
|
||||
</div>
|
||||
<label for="connection-topic">Enter connection topic:</label>
|
||||
<input type="text" id="join-chat-room-topic" placeholder="Enter connection topic">
|
||||
<button id="create-chat-room">Create</button>
|
||||
<button id="join-chat-room">Join</button> <!-- Changed id -->
|
||||
<div id="or">
|
||||
- or -
|
||||
</div>
|
||||
<div id="join-chat-room-container">
|
||||
<!-- <label for="connection-topic">Enter Your Connection Topic:</label> -->
|
||||
<input type="text" id="join-chat-room-topic" placeholder="topic">
|
||||
<button id="join-chat-room">Join</button> <!-- Changed id -->
|
||||
</div>
|
||||
<div id="chat" class="hidden">
|
||||
<div id="header">
|
||||
|
24
style.css
24
style.css
@ -122,6 +122,24 @@ main {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#join-chat-room-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem; /* Add margin between this container and the previous content */
|
||||
}
|
||||
|
||||
#join-chat-room-container label {
|
||||
margin-right: 0.5rem; /* Add margin to the right of the label */
|
||||
}
|
||||
|
||||
#join-chat-room-container input {
|
||||
margin-right: 0.5rem; /* Add margin to the right of the input field */
|
||||
}
|
||||
|
||||
#join-chat-room-container button {
|
||||
margin-left: 0.5rem; /* Add margin to the left of the button */
|
||||
}
|
||||
|
||||
#details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -130,6 +148,10 @@ main {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#submit-button {
|
||||
margin-left: 1rem; /* Added left margin */
|
||||
}
|
||||
|
||||
#messages {
|
||||
flex: 1;
|
||||
min-height: 200px; /* Ensures minimum height to prevent squishing */
|
||||
@ -144,11 +166,13 @@ main {
|
||||
#message-form {
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
margin-right: 1rem; /* Added right margin */
|
||||
}
|
||||
|
||||
#message {
|
||||
flex: 1;
|
||||
margin-right: 0.5rem;
|
||||
padding-right: 0.5rem; /* Added right padding */
|
||||
}
|
||||
|
||||
#user-info {
|
||||
|
Loading…
Reference in New Issue
Block a user