diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 7a01e546..ed03ddf7 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -4,28 +4,11 @@
+
-
-
diff --git a/tests_hugo/chat_node/chat_client/chat_test_layouts.js b/tests_hugo/chat_node/chat_client/chat_test_layouts.js
new file mode 100644
index 00000000..6f4df1a9
--- /dev/null
+++ b/tests_hugo/chat_node/chat_client/chat_test_layouts.js
@@ -0,0 +1,32 @@
+/*
+*/
+let test = document.createElement('form');
+test.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+document.body.prepend(test);
+
+function chat_layout_toggle(layout_class) {
+ document.getElementById('chat_box').classList.toggle(layout_class);
+};
+function chat_layout_replace(_old, _new) {
+ let chat = document.getElementById('chat_box');
+ chat.classList.remove(_old);
+ chat.classList.add(_new);
+};
+
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index 5cf37623..862b4f71 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -16,6 +16,7 @@ cxv
@import 'layout_user.css';
@import 'layout_mute.css';
+@import 'chat_panels.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
@import 'chat_close.css';
@@ -38,16 +39,6 @@ input.vanish {
}
*/
-/* Hide scrollbar
-*/
-#chat_box * {
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
-}
-#chat_box *::-webkit-scrollbar {
- display: none; /* Chrome, Safari and Opera */
-}
-
/*
/* GRID
diff --git a/tests_hugo/chat_node/chat_client/style/chat__global.css b/tests_hugo/chat_node/chat_client/style/chat__global.css
index 90a13e89..2c5e8bf1 100644
--- a/tests_hugo/chat_node/chat_client/style/chat__global.css
+++ b/tests_hugo/chat_node/chat_client/style/chat__global.css
@@ -1,5 +1,16 @@
+/* Hide scrollbar
+*/
+#chat_box * {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+#chat_box *::-webkit-scrollbar {
+ display: none; /* Chrome, Safari and Opera */
+}
+
+
/* p in chat_box
*/
#chat_box p {
diff --git a/tests_hugo/chat_node/chat_client/style/chat_panels.css b/tests_hugo/chat_node/chat_client/style/chat_panels.css
new file mode 100644
index 00000000..37722b3b
--- /dev/null
+++ b/tests_hugo/chat_node/chat_client/style/chat_panels.css
@@ -0,0 +1,3 @@
+#chat_box .chat_panel {
+ overflow-y: scroll;
+}
diff --git a/tests_hugo/chat_node/chat_client/style/layout_user.css b/tests_hugo/chat_node/chat_client/style/layout_user.css
index 5af342f1..9f2f20d2 100644
--- a/tests_hugo/chat_node/chat_client/style/layout_user.css
+++ b/tests_hugo/chat_node/chat_client/style/layout_user.css
@@ -2,6 +2,7 @@
#chat_box.user {
grid:
' back user close ' auto
+ ' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto ;
}
@@ -20,6 +21,14 @@
}
+/* room_name appearance
+*/
+#chat_box.user button.chat_item#chat_room_name {
+ background-color: transparent;
+ border-top: 1px solid black;
+}
+
+
/* back btn
*/
#chat_box.user .chat_item.chat_back button.back_home {display: flex;}
@@ -47,18 +56,18 @@
/* toggle buttons according to chat_box class
*/
/* block/unblock */
-#chat_box.user #chat_user_unblock {display: none;}
-#chat_box.user._blocked #chat_user_block {display: none;}
-#chat_box.user._blocked #chat_user_unblock {display: flex;}
-/* admin */
-#chat_box.user #chat_user_admin {display: none;}
-#chat_box.user._admin #chat_user_admin {display: flex;}
-/* mute if from room */
-#chat_box.user #chat_mute_btn {display: none;}
-#chat_box.user._room_set #chat_mute_btn {display: flex;}
+#chat_box.user #chat_user_unblock {display: none;}
+#chat_box.user._blocked #chat_user_block {display: none;}
+#chat_box.user._blocked #chat_user_unblock {display: flex;}
+/* admin if from room */
+#chat_box.user #chat_user_admin {display: none;}
+#chat_box.user._room_set._admin #chat_user_admin {display: flex;}
+/* room_name if from room */
+#chat_box.user #chat_room_name {display: none;}
+#chat_box.user._room_set #chat_room_name {display: flex;}
/* mute/unmute */
-#chat_box.user #chat_user_unmute {display: none;}
-#chat_box.user._muted #chat_user_mute {display: none;}
-#chat_box.user._muted #chat_user_unmute {display: flex;}
+#chat_box.user #chat_user_unmute {display: none;}
+#chat_box.user._muted #chat_user_mute {display: none;}
+#chat_box.user._muted #chat_user_unmute {display: flex;}