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

global style for button list

Browse Source
This commit is contained in:
hugogogo
2022-12-16 13:43:05 +01:00
parent e91103132c
commit 41184ecdce
4 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,18 +21,18 @@
<div class="close" id="chat_box"> <div class="close" id="chat_box">
<button class="chat_item chat_chat" id="chat_chat" onclick="layout('home')" ><p>chat</p></button> <button class="chat_item chat_chat _btn" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close" id="chat_close" onclick="layout('close')" title="close" ></button> <button class="chat_item chat_close _btn" id="chat_close" onclick="layout('close')" title="close" ></button>
<button class="chat_item chat_new" id="chat_new" onclick="layout('new')" title="new" ><p>new</p></button> <button class="chat_item chat_new _btn" id="chat_new" onclick="layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</p></button> <button class="chat_item chat_settings _btn" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button> <button class="chat_item chat_room_name _btn" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button>
<button class="chat_item chat_send" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button> <button class="chat_item chat_send _btn" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p> <p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >placeholder</p> <p class="chat_item chat_user" id="chat_user" >placeholder</p>
<button class="chat_item _back chat_back_room" id="chat_back_room" onclick="layout('room')" title="go_back" ></button> <button class="chat_item _back chat_back_room _btn" id="chat_back_room" onclick="layout('room')" title="go_back" ></button>
<button class="chat_item _back chat_back_home" id="chat_back_home" onclick="layout('home')" title="go_back" ></button> <button class="chat_item _back chat_back_home _btn" id="chat_back_home" onclick="layout('home')" title="go_back" ></button>
<button class="chat_item _back chat_back_new" id="chat_back_new" onclick="layout('new')" title="go_back" ></button> <button class="chat_item _back chat_back_new _btn" id="chat_back_new" onclick="layout('new')" title="go_back" ></button>
<button class="chat_item _back chat_back_user" id="chat_back_user" onclick="layout('user')" title="go_back" ></button> <button class="chat_item _back chat_back_user _btn" id="chat_back_user" onclick="layout('user')" title="go_back" ></button>
<!-- -------------------------------- <!-- --------------------------------
@@ -42,19 +42,19 @@
<!-- HOME --> <!-- 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_api_room_list" class="chat_api"> <div id="chat_api_room_list" class="chat_api __list_btn">
<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>
<!-- placeholders ------- <!-- placeholders -------
--> -->
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">a room</p> <p class="__left">a room</p>
</button> </button>
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">another room</p> <p class="__left">another room</p>
</button> </button>
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">placeholder</p> <p class="__left">placeholder</p>
</button> </button>
<!-- END placeholders --> <!-- END placeholders -->
@@ -80,24 +80,24 @@
<!-- NEW --> <!-- 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 class="chat_create_btn"><p>create</p></button> <button class="chat_create_btn _btn"><p>create</p></button>
<p>join room :</p> <p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms"> <div id="chat_api_publics_rooms" class="chat_api chat_public_rooms __list_btn">
<div class="chat_public_rooms __show_if_only_child"> <div class="chat_public_rooms __show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p> <p class="__center">/ there are no public rooms yet /</p>
</div> </div>
<!-- placeholders ------- <!-- placeholders -------
--> -->
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">join room</p> <p class="__left">join room</p>
</button> </button>
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">one room</p> <p class="__left">one room</p>
</button> </button>
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">another room</p> <p class="__left">another room</p>
</button> </button>
<button class="chat_room_name" onclick="layout('room')"> <button class="chat_room_name _btn" onclick="layout('room')">
<p class="__left">one more room</p> <p class="__left">one more room</p>
</button> </button>
<!-- END placeholders --> <!-- END placeholders -->
@@ -106,8 +106,27 @@
<!-- SETTINGS --> <!-- 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 --> <p>blocked users :</p>
panel settings <div id="chat_api_blocked_users" class="chat_api chat_blocked_users __list_btn">
<div class="__show_if_only_child">
<p class="__center">/ you haven't block any one /</p>
</div>
<!-- placeholders -------
-->
<button class="chat_user _blocked _btn" onclick="layout('user')">
<p class="__left">user 1</p>
</button>
<button class="chat_user _blocked _btn" onclick="layout('user')">
<p class="__left">user 2</p>
</button>
<button class="chat_user _blocked _btn" onclick="layout('user')">
<p class="__left">user 3</p>
</button>
<button class="chat_user _blocked _btn" onclick="layout('user')">
<p class="__left">user 4</p>
</button>
<!-- END placeholders -->
</div>
</div> </div>
<!-- ROOM SET --> <!-- ROOM SET -->

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

@@ -45,3 +45,16 @@
} }
/* style btn when it's a list
*/
/* add or remove '._btn' to toggle the hover effect */
#chat_box .chat_item .__list_btn button {
margin: 0px;
background-color: transparent;
}
#chat_box .chat_item .__list_btn {
background-color: rgb(240, 240, 240);
}

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

@@ -1,14 +0,0 @@
#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-left: 0px;
}

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

@@ -29,19 +29,4 @@
} }
/* buttons "<rooms_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.new .chat_public_rooms button {
margin: 0px;
background-color: transparent;
}
/* buttons "<rooms_name>" appearance
*/
#chat_box.new #chat_api_publics_rooms {
background-color: rgb(240, 240, 240);
}