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
id="chat_msg_thread"
id="msg_thread"
--------------------------------- -->
<!-- HOME -->
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<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">
<p class="__center">/ you have no chat room yet /</p>
</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 -------
---- 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>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_msg_thread">
<!-- placeholder -->
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders -------
-->
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
@@ -72,44 +74,73 @@
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- -->
<!-- END placeholders -->
</div>
</div>
<!-- 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>
<!-- SETTINGS -->
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<!-- content -->
panel settings
</div>
<!-- ROOM SET -->
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
<!-- content -->
panel room settings
</div>
<!-- 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">
<!-- content -->
panel create
</div>
<!-- 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">
<!-- content -->
panel mute
</div>
<!-- WRITE -->
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
<div class="text_area" contenteditable></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 div_thread = document.getElementById('chat_msg_thread');
const div_thread = document.getElementById('chat_api_msg_thread');
//console.log("received 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 {
text-align: center;
}
#chat_box p.__left {
text-align: left;
}
#chat_box p.__right {
text-align: right;
}
/* default align items
*/
#chat_box .chat_item > * {
margin: 0px;
}

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

@@ -7,6 +7,10 @@
border: none;
background-color: rgb(220, 220, 220);
}
#chat_box button p {
width: 100%;
text-align: center;
}
#chat_box button.chat_item:hover,
#chat_box .chat_item button:hover {
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;
border: 1px solid black;
}
.chat_item#chat_panel_msg #chat_msg_thread {
.chat_item#chat_panel_msg #chat_api_msg_thread {
flex-direction: column;
width: 100%;
padding: 0px 5px;
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;
margin: 5px auto;
padding: 5px;
@@ -22,20 +22,20 @@
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;
background-color: rgb(210, 210, 210);
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;
}
.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;
font-size: 12px;
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;
}
@@ -44,12 +44,12 @@
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-left: auto;
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;
}
@@ -58,14 +58,14 @@
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;
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;
}
.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;
font-size: 12px;
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 {
margin: 0px;
}

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

@@ -21,7 +21,12 @@
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;
}