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"
--------------------------------- -->
<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">
<!-- placeholder -->
<div class="chat_msg bob">
@@ -56,61 +76,42 @@
</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 -->
panel new
</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 -->
panel settings
</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 -->
panel room settings
</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 -->
panel protected
</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 -->
panel create
</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 -->
panel user
</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 -->
panel mute
</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>

View File

@@ -17,6 +17,7 @@
@import 'chat_close.css';
@import 'chat_write.css';
@import 'chat_msg.css';
@import 'chat_room_list.css';
/*
@import '_chat_controls.css';

View File

@@ -1,3 +1,17 @@
/* p in chat_box
*/
#chat_box p {
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 @@
*/
}