wip layout home room list

This commit is contained in:
lenovo
2022-12-14 21:55:53 +01:00
parent c1c7a0ce6a
commit 17d3fff002
5 changed files with 66 additions and 28 deletions

View File

@@ -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>

View File

@@ -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';

View File

@@ -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);
} }

View 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;
}

View File

@@ -52,3 +52,4 @@
*/ */
} }