Skip to content

Commit

Permalink
feat: enhance chat UI by adding padding, adjusting margins, and impro…
Browse files Browse the repository at this point in the history
…ving layout consistency
  • Loading branch information
milyin committed Dec 12, 2024
1 parent 5565324 commit 5c42fda
Showing 2 changed files with 16 additions and 9 deletions.
24 changes: 16 additions & 8 deletions zenoh-ts/examples/chat/assets/index.css
Original file line number Diff line number Diff line change
@@ -2,12 +2,14 @@ body {
font-family: Arial, sans-serif;
margin: 0; /* Remove default margin */
overflow: hidden; /* Prevent vertical scrollbar */
padding: 10px; /* Add padding from page borders */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.chat-container {
display: flex;
flex-direction: column;
height: 100vh;
height: calc(100vh - 20px); /* Adjust height to account for body padding */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

@@ -18,7 +20,7 @@ body {
padding: 10px;
background-color: #f0f0f0;
border-radius: 8px; /* Round corners */
margin-bottom: 10px; /* Small padding around */
margin-bottom: 5px; /* Reduce padding between panels */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

@@ -44,10 +46,16 @@ body {
overflow-y: auto; /* Make user list scrollable */
background-color: #f0f0f0;
border-radius: 8px; /* Round corners */
margin-right: 10px; /* Small padding around */
margin-right: 5px; /* Reduce padding between panels */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.user-list ul {
margin: 0; /* Remove default margin */
padding-left: 0; /* Remove default left padding */
list-style-type: none; /* Remove default list style */
}

.chat-panel {
width: 80%;
display: flex;
@@ -64,15 +72,15 @@ body {
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto; /* Make chat log scrollable */
margin-bottom: 10px;
margin-bottom: 5px; /* Reduce padding between panels */
background-color: #fff;
border-radius: 8px; /* Round corners */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.chat-input {
display: flex;
margin-bottom: 10px; /* Add space below message input field */
margin-bottom: 5px; /* Reduce padding between panels */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

@@ -94,7 +102,7 @@ body {
display: flex;
flex-direction: column;
border-radius: 8px; /* Round corners */
margin-top: 10px; /* Small padding around */
margin-top: 5px; /* Reduce padding between panels */
}

.technical-log-panel.hidden {
@@ -104,8 +112,8 @@ body {
.technical-log {
border-top: 1px solid #ccc;
padding-top: 10px;
margin-top: 10px;
height: calc(100% - 40px);
margin: 0;
height: 100%;
/* Adjust height to fit within the panel */
overflow-y: auto;
background-color: #fff;
1 change: 0 additions & 1 deletion zenoh-ts/examples/chat/assets/index.html
Original file line number Diff line number Diff line change
@@ -28,7 +28,6 @@
</div>
<div class="main-panel">
<div class="user-list">
<h3>Online</h3>
<ul id="users">
<!-- User list items will be added here -->
</ul>

0 comments on commit 5c42fda

Please sign in to comment.