42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip layout new almost done

Browse Source
This commit is contained in:
lenovo
2022-12-16 11:48:54 +01:00
parent 3241a9dc0f
commit e84ca9592a
7 changed files with 80 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -37,33 +37,35 @@
<!-- -------------------------------- <!-- --------------------------------
PANELS PANELS
id="chat_msg_thread"
id="msg_thread"
--------------------------------- --> --------------------------------- -->
<!-- HOME -->
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home"> <div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<p class="__center">list of your rooms :</p> <p class="__center">list of your rooms :</p>
<div id="chat_room_list"> <div id="chat_api_room_list" class="chat_api">
<div class="chat_room_name __show_if_only_child"> <div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p> <p class="__center">/ you have no chat room yet /</p>
</div> </div>
<button class="chat_room_name" onclick="layout('room')">
<p>a room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p>another room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p>placeholder</p>
</button>
<!-- placeholders ------- <!-- placeholders -------
---- END placeholders --> -->
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">a room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">placeholder</p>
</button>
<!-- END placeholders -->
</div> </div>
</div> </div>
<!-- MSG -->
<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_api_msg_thread" class="chat_api">
<!-- placeholder --> <!-- placeholders -------
-->
<div class="chat_msg bob"> <div class="chat_msg bob">
<p class="name">bob</p> <p class="name">bob</p>
<p class="msg">hello</p> <p class="msg">hello</p>
@@ -72,44 +74,73 @@
<p class="name">me</p> <p class="name">me</p>
<p class="msg">hello</p> <p class="msg">hello</p>
</div> </div>
<!-- --> <!-- END placeholders -->
</div> </div>
</div> </div>
<!-- NEW -->
<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">
<button id="create_new_room_btn"><p>create</p></button> <button class="chat_create_btn"><p>create</p></button>
<p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api">
<div class="chat_public_rooms __show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders -------
-->
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">join room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">one room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name" onclick="layout('room')">
<p class="__left">one more room</p>
</button>
<!-- END placeholders -->
</div>
</div> </div>
<!-- SETTINGS -->
<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>
<!-- ROOM SET -->
<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>
<!-- PROTECTED -->
<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>
<!-- USER -->
<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>
<!-- WRITE -->
<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>

2
tests_hugo/chat_node/chat_client/chat_add_msg.js
View File

@@ -1,6 +1,6 @@
const add_message = (from, message ) => { const add_message = (from, message ) => {
const div_thread = document.getElementById('chat_msg_thread'); const div_thread = document.getElementById('chat_api_msg_thread');
//console.log("received message:"); //console.log("received message:");
//console.log(`[${message}]`); //console.log(`[${message}]`);

11
tests_hugo/chat_node/chat_client/style/chat__global.css
View File

@@ -24,12 +24,21 @@
} }
/* text center /* text align
*/ */
#chat_box p.__center { #chat_box p.__center {
text-align: center; text-align: center;
} }
#chat_box p.__left {
text-align: left;
}
#chat_box p.__right {
text-align: right;
}
/* default align items
*/
#chat_box .chat_item > * { #chat_box .chat_item > * {
margin: 0px; margin: 0px;
} }

4
tests_hugo/chat_node/chat_client/style/chat_buttons.css
View File

@@ -7,6 +7,10 @@
border: none; border: none;
background-color: rgb(220, 220, 220); background-color: rgb(220, 220, 220);
} }
#chat_box button p {
width: 100%;
text-align: center;
}
#chat_box button.chat_item:hover, #chat_box button.chat_item:hover,
#chat_box .chat_item button:hover { #chat_box .chat_item button:hover {
background-color: rgb(200, 200, 200); background-color: rgb(200, 200, 200);

22
tests_hugo/chat_node/chat_client/style/chat_msg.css
View File

@@ -3,13 +3,13 @@
overflow: scroll; overflow: scroll;
border: 1px solid black; border: 1px solid black;
} }
.chat_item#chat_panel_msg #chat_msg_thread { .chat_item#chat_panel_msg #chat_api_msg_thread {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding: 0px 5px; padding: 0px 5px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
white-space: pre-wrap; white-space: pre-wrap;
margin: 5px auto; margin: 5px auto;
padding: 5px; padding: 5px;
@@ -22,20 +22,20 @@
ALL MSG ALL MSG
*/ */
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
margin-left: 0px; margin-left: 0px;
background-color: rgb(210, 210, 210); background-color: rgb(210, 210, 210);
max-width: 80%; max-width: 80%;
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p {
padding: 0px; padding: 0px;
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p.name { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
margin: 0px; margin: 0px;
font-size: 12px; font-size: 12px;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg p.msg { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
margin: 5px 0px; margin: 5px 0px;
} }
@@ -44,12 +44,12 @@
MSG PERSO MSG PERSO
*/ */
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.me { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me {
margin-right: 0px; margin-right: 0px;
margin-left: auto; margin-left: auto;
background-color: rgb(210, 110, 10); background-color: rgb(210, 110, 10);
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.me p.name { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
display: none; display: none;
} }
@@ -58,14 +58,14 @@
MSG SERVER MSG SERVER
*/ */
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
margin-left: auto; margin-left: auto;
background-color: transparent; background-color: transparent;
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER p.name { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
display: none; display: none;
} }
.chat_item#chat_panel_msg #chat_msg_thread .chat_msg.SERVER p.msg { .chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
margin: 0px auto; margin: 0px auto;
font-size: 12px; font-size: 12px;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);

6
tests_hugo/chat_node/chat_client/style/chat_room_list.css
View File

@@ -1,10 +1,4 @@
/* 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 { #chat_box #chat_panel_home .chat_room_name {
margin: 0px; margin: 0px;
} }

7
tests_hugo/chat_node/chat_client/style/layout_new.css
View File

@@ -21,7 +21,12 @@
pointer-events: none; pointer-events: none;
} }
#chat_box.new .chat_item button#create_new_room_btn { #chat_box.new .chat_item button {
margin: 0px;
background-color: transparent;
}
#chat_box.new .chat_item button.chat_create_btn {
margin: 10px 0px; margin: 10px 0px;
} }