diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index a38bdc9..bfbfd0a 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -59,6 +59,9 @@
color: black;
border: 2px solid black;
}
+#chat-input::placeholder {
+ color: grey;
+}
#chat-online-content {
padding: 0;
width: 100%;
@@ -136,6 +139,7 @@
position: relative;
display: inline-flex;
flex: 0 0 auto;
+ align-items: center;
}
.status-circle {
position: absolute;
@@ -194,13 +198,16 @@
}
.unread-count {
- float: right;
color: white;
background-color: darkcyan;
- border-radius: 2px;
- padding: 0 0.5em;
- align-self: flex-end;
border-radius: 50%;
+ align-self: center;
+ flex: 0 0 1.25rem;
+ height: 1.25rem;
+ font-size: smaller;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
#setting-content {
display: none;
diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 1991402..5a4ed07 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -98,7 +98,7 @@
-
+
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index dfebd2f..a8f30b8 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -106,6 +106,16 @@
#setting {
position: relative;
}
+ #setting-button {
+ height: 2.3em;
+ width: 2.5em;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ padding-top: 2px;
+ }
.status-user {
display: flex;
flex-direction: column;
@@ -128,7 +138,7 @@
#chat-input {
padding: 10px 20px;
font-size: 16px;
- border-radius: 20px;
+ border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
width: 80%;
@@ -168,12 +178,12 @@
}
.info-pic {
border-radius: 50%;
- margin-left: 1em;
- margin-top: 3px;
}
#chat-info {
height: 3em;
- padding-bottom: 0.25em;
+ padding-left: 0.75em;
+ display: flex;
+ align-items: center;
}
@media (min-width: 800px) {
diff --git a/templates/chat/chat_js.html b/templates/chat/chat_js.html
index 9e8c3ba..7643a79 100644
--- a/templates/chat/chat_js.html
+++ b/templates/chat/chat_js.html
@@ -559,16 +559,14 @@
register_setting();
color_selected_room();
- // Adjust textarea height to fit the content
- $(document).ready(function() {
- $('#chat-input').on('input', function() {
- if (this.scrollHeight > this.clientHeight) {
- this.style.height = 'auto';
- this.style.height = (this.scrollHeight) + 'px';
- } else {
- $(this).css('height', '80%');
- }
- });
+ $('#chat-input').on('input', function() {
+ if (this.scrollHeight > this.clientHeight) {
+ this.style.height = (this.scrollHeight) + 'px';
+ $(this).css('border-radius', '30px');
+ } else {
+ $(this).css('height', '80%');
+ }
});
+ $('#submit-button').on('click', submit_chat);
});
\ No newline at end of file
diff --git a/templates/chat/online_status.html b/templates/chat/online_status.html
index d82159d..73dea74 100644
--- a/templates/chat/online_status.html
+++ b/templates/chat/online_status.html
@@ -5,8 +5,10 @@
{{_('Lobby')}}
-
- {{unread_count_lobby if unread_count_lobby}}
+
+ {% if unread_count_lobby and unread_count_lobby > 0 %}
+ {{unread_count_lobby}}
+ {% endif %}
{% for section in status_sections %}
@@ -37,9 +39,11 @@
{% endif %}
-
- {{user.unread_count if user.unread_count}}
-
+ {% if user.unread_count and user.unread_count > 0 %}
+
+ {{user.unread_count}}
+
+ {% endif %}
{% endfor %}
diff --git a/templates/chat/user_online_status.html b/templates/chat/user_online_status.html
index 06c6a2e..b391c54 100644
--- a/templates/chat/user_online_status.html
+++ b/templates/chat/user_online_status.html
@@ -1,11 +1,15 @@
{% if other_user %}
-
+
+{% else %}
+
+
 }})
+
{% endif %}
{% if other_user %}
@@ -21,9 +25,9 @@
{% if other_user %}
-