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,6 +41,26 @@
id="msg_thread" id="msg_thread"
--------------------------------- --> --------------------------------- -->
<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 class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_msg_thread"> <div id="chat_msg_thread">
<!-- placeholder --> <!-- placeholder -->
@@ -56,25 +76,6 @@
</div> </div>
</div> </div>
<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">
<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"> <div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<!-- content --> <!-- content -->
panel new panel new

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 @@
*/ */
} }