wip layout home room list
This commit is contained in:
@@ -41,7 +41,27 @@
|
|||||||
id="msg_thread"
|
id="msg_thread"
|
||||||
--------------------------------- -->
|
--------------------------------- -->
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
|
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
|
||||||
|
<div id="chat_room_list" class="__first_child_vanish">
|
||||||
|
<div class="chat_room_name" id="chat_home_no_room_yet">
|
||||||
|
<p>/ you have no chat room yet /</p>
|
||||||
|
</div>
|
||||||
|
<!-- placeholders
|
||||||
|
-->
|
||||||
|
<button class="chat_room_name">
|
||||||
|
<p>a room</p>
|
||||||
|
</button>
|
||||||
|
<button class="chat_room_name">
|
||||||
|
<p>another room</p>
|
||||||
|
</button>
|
||||||
|
<div class="chat_room_name">
|
||||||
|
<p>placeholder</p>
|
||||||
|
</div>
|
||||||
|
<!-- END placeholders -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
|
||||||
<div id="chat_msg_thread">
|
<div id="chat_msg_thread">
|
||||||
<!-- placeholder -->
|
<!-- placeholder -->
|
||||||
<div class="chat_msg bob">
|
<div class="chat_msg bob">
|
||||||
@@ -56,61 +76,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
|
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
|
||||||
<div id="chat_room_list" class="_first_child_vanish">
|
|
||||||
<div class="chat_room_name">
|
|
||||||
<p>you don't have any chat yet</p>
|
|
||||||
</div>
|
|
||||||
<!-- placeholders -->
|
|
||||||
<div class="chat_room_name">
|
|
||||||
<p>placeholder</p>
|
|
||||||
</div>
|
|
||||||
<div class="chat_room_name">
|
|
||||||
<p>placeholder</p>
|
|
||||||
</div>
|
|
||||||
<div class="chat_room_name">
|
|
||||||
<p>placeholder</p>
|
|
||||||
</div>
|
|
||||||
<!-- END placeholders -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
|
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel new
|
panel new
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
|
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel settings
|
panel settings
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
|
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel room settings
|
panel room settings
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
|
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel protected
|
panel protected
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
|
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel create
|
panel create
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
|
<div class="chat_item chat_panel chat_panel_user" id="chat_panel_user">
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel user
|
panel user
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
|
<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
panel mute
|
panel mute
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
|
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
|
||||||
<div class="text_area" contenteditable></div>
|
<div class="text_area" contenteditable></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
@import 'chat_close.css';
|
@import 'chat_close.css';
|
||||||
@import 'chat_write.css';
|
@import 'chat_write.css';
|
||||||
@import 'chat_msg.css';
|
@import 'chat_msg.css';
|
||||||
|
@import 'chat_room_list.css';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@import '_chat_controls.css';
|
@import '_chat_controls.css';
|
||||||
|
|||||||
@@ -1,3 +1,17 @@
|
|||||||
|
|
||||||
|
/* p in chat_box
|
||||||
|
*/
|
||||||
#chat_box p {
|
#chat_box p {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* show first child only if it's alone
|
||||||
|
*/
|
||||||
|
#chat_box .__first_child_vanish > *#chat_home_no_room_yet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#chat_box .__first_child_vanish > *#chat_home_no_room_yet:only-child {
|
||||||
|
display: flex;
|
||||||
|
color: rgb(100, 100, 100);
|
||||||
}
|
}
|
||||||
|
|||||||
21
tests_hugo/chat_node/chat_client/style/chat_room_list.css
Normal file
21
tests_hugo/chat_node/chat_client/style/chat_room_list.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
/* chat home rooms list
|
||||||
|
*/
|
||||||
|
#chat_box .chat_item#chat_panel_home #chat_room_list {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat_box #chat_panel_home .chat_room_name {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* add or remove '.chat_item' to toggle the hover effect */
|
||||||
|
#chat_box button.chat_room_name {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat_box #chat_panel_home .chat_room_name p {
|
||||||
|
margin: 0px;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -52,3 +52,4 @@
|
|||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user