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

changed back button to be one unique button

Browse Source
This commit is contained in:
hugogogo
2022-12-16 16:30:55 +01:00
parent b73bc14ac9
commit ca06dddaaf
13 changed files with 142 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,18 +21,23 @@
<div class="close" id="chat_box">
<button class="chat_item chat_chat btn" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close btn" id="chat_close" onclick="layout('close')" title="close" ></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 btn" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</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 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_user" id="chat_user" >placeholder</p>
<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 btn" id="chat_back_home" onclick="layout('home')" 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 btn" id="chat_back_user" onclick="layout('user')" title="go_back" ></button>
<button class="chat_item chat_chat btn" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close btn" id="chat_close" onclick="layout('close')" title="close" ></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 btn" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</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 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_user" id="chat_user" >placeholder</p>
<div class="chat_item chat_back" id="chat_back"></button>
<button class="btn back_room" onclick="layout('room')" title="go back room"></button>
<button class="btn back_home" onclick="layout('home')" title="go back home"></button>
<button class="btn back_new" onclick="layout('new')" title="go back new"></button>
<button class="btn back_user" onclick="layout('user')" title="go back user"></button>
<button class="btn back_settings" onclick="layout('settings')" title="go back settings"></button>
<button class="btn back_room_set" onclick="layout('room_set')" title="go back room settings"></button>
</div>
<!-- --------------------------------
@@ -110,16 +115,16 @@
<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
<!-- placeholders -------
-->
<button class="chat_user btn" onclick="layout('user')">
<button class="chat_user btn" onclick="layout('user _settings')">
<p class="__left blocked">user 1</p>
</button>
<button class="chat_user btn" onclick="layout('user')">
<button class="chat_user btn" onclick="layout('user _settings')">
<p class="__left blocked">user 2</p>
</button>
<button class="chat_user btn" onclick="layout('user')">
<button class="chat_user btn" onclick="layout('user _settings')">
<p class="__left blocked">user 3</p>
</button>
<button class="chat_user btn" onclick="layout('user')">
<button class="chat_user btn" onclick="layout('user _settings')">
<p class="__left blocked">user 4</p>
</button>
<!-- END placeholders -->
@@ -136,16 +141,16 @@
</div>
<!-- placeholders -------
-->
<button class="chat_room_name btn" onclick="layout('room')">
<button class="chat_room_name btn" onclick="layout('user _room_set')">
<p class="__left">user 1</p>
</button>
<button class="chat_room_name btn" onclick="layout('room')">
<button class="chat_room_name btn" onclick="layout('user _room_set')">
<p class="__left blocked">user 2</p>
</button>
<button class="chat_room_name btn" onclick="layout('room')">
<button class="chat_room_name btn" onclick="layout('user _room_set')">
<p class="__left">user 3</p>
</button>
<button class="chat_room_name btn" onclick="layout('room')">
<button class="chat_room_name btn" onclick="layout('user _room_set')">
<p class="__left">user 4</p>
</button>
<!-- END placeholders -->

5
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -77,10 +77,7 @@ input.vanish {
.chat_item#chat_send { grid-area: send;}
.chat_item#chat_create { grid-area: create;}
.chat_item#chat_user { grid-area: user;}
.chat_item#chat_back_home { grid-area: back_home;}
.chat_item#chat_back_room { grid-area: back_room;}
.chat_item#chat_back_new { grid-area: back_new;}
.chat_item#chat_back_user { grid-area: back_user;}
.chat_item#chat_back { grid-area: back;}
.chat_item#chat_panel_home { grid-area: panel_home;}
.chat_item#chat_panel_new { grid-area: panel_new;}
.chat_item#chat_panel_msg { grid-area: panel_msg;}

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

@@ -1,16 +1 @@
#chat_box button.chat_item._back {
width: 30px;
background-color: transparent;
}
.chat_item._back::before {
content: "";
position: absolute;
top: calc(50% - 6px - 1px);
left: 6px;
width: 14px;
height: 14px;
border-left: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}

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

@@ -21,7 +21,7 @@
}
/* style btn when it's a list
/* BTN LIST
add or remove '.btn' to toggle the hover effect
*/
#chat_box .list_btn button {
@@ -32,3 +32,24 @@
background-color: rgb(240, 240, 240);
}
/* BACK
*/
#chat_box .chat_item.chat_back button {
width: 30px;
height: 100%;
background-color: transparent;
display: none;
}
#chat_box .chat_item.chat_back button::before {
content: "";
position: absolute;
top: calc(50% - 6px - 1px);
left: 6px;
width: 14px;
height: 14px;
border-left: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}

12
tests_hugo/chat_node/chat_client/style/layout_create.css
View File

@@ -1,17 +1,25 @@
#chat_box.create {
grid:
' back_new create close ' auto
' back create close ' auto
' panel_create panel_create panel_create ' 1fr
/ auto 1fr auto ;
}
#chat_box.create .chat_item#chat_back_new,
#chat_box.create .chat_item#chat_back,
#chat_box.create .chat_item#chat_create,
#chat_box.create .chat_item#chat_close,
#chat_box.create .chat_item#chat_panel_create {
display: flex;
}
/* back btn
*/
#chat_box.create .chat_item.chat_back button.back_new {
display: flex;
}
/* title "create" appearance
*/
#chat_box.create .chat_item.chat_create {

1
tests_hugo/chat_node/chat_client/style/layout_home.css
View File

@@ -12,6 +12,7 @@
display: flex;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */

12
tests_hugo/chat_node/chat_client/style/layout_mute.css
View File

@@ -1,17 +1,25 @@
#chat_box.mute {
grid:
' back_user user close ' auto
' back user close ' auto
' panel_mute panel_mute panel_mute ' 1fr
/ auto 1fr auto ;
}
#chat_box.mute .chat_item#chat_back_user,
#chat_box.mute .chat_item#chat_back,
#chat_box.mute .chat_item#chat_user,
#chat_box.mute .chat_item#chat_close,
#chat_box.mute .chat_item#chat_panel_mute {
display: flex;
}
/* back btn
*/
#chat_box.mute .chat_item.chat_back button.back_user {
display: flex;
}
/* title "mute" appearance
*/
#chat_box.mute .chat_item.chat_user {

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

@@ -1,11 +1,11 @@
#chat_box.new {
grid:
' back_home new close ' auto
' back new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto ;
}
#chat_box.new .chat_item#chat_back_home,
#chat_box.new .chat_item#chat_back,
#chat_box.new .chat_item#chat_new,
#chat_box.new .chat_item#chat_close,
#chat_box.new .chat_item#chat_panel_new {
@@ -13,6 +13,13 @@
}
/* back btn
*/
#chat_box.new .chat_item.chat_back button.back_home {
display: flex;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */

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

@@ -1,17 +1,25 @@
#chat_box.protected {
grid:
' back_new room_name close ' auto
' back room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
/ auto 1fr auto ;
}
#chat_box.protected .chat_item#chat_back_new,
#chat_box.protected .chat_item#chat_back,
#chat_box.protected .chat_item#chat_room_name,
#chat_box.protected .chat_item#chat_close,
#chat_box.protected .chat_item#chat_panel_protected {
display: flex;
}
/* back btn
*/
#chat_box.protected .chat_item.chat_back button.back_new {
display: flex;
}
/* button "<room_name>" appearance
add or remove '.chat_item' to toggle the hover effect
*/
@@ -25,12 +33,14 @@
margin-top: 30px;
}
/* form
*/
#chat_box.protected form {
margin: 0px auto;
}
/* submit button
https://www.fileformat.info/info/unicode/category/So/list.htm
U+21AA RIGHTWARDS ARROW WITH HOOK ↪

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

@@ -1,12 +1,12 @@
#chat_box.room {
grid:
' back_home room_name room_name close ' auto
' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto ;
}
#chat_box.room .chat_item#chat_back_home,
#chat_box.room .chat_item#chat_back,
#chat_box.room .chat_item#chat_room_name,
#chat_box.room .chat_item#chat_close,
#chat_box.room .chat_item#chat_panel_msg,
@@ -16,6 +16,13 @@
}
/* back btn
*/
#chat_box.room .chat_item.chat_back button.back_home {
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */

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

@@ -1,11 +1,11 @@
#chat_box.room_set {
grid:
' back_room room_name close ' auto
' back room_name close ' auto
' panel_room_set panel_room_set panel_room_set ' 1fr
/ auto 1fr auto ;
}
#chat_box.room_set .chat_item#chat_back_room,
#chat_box.room_set .chat_item#chat_back,
#chat_box.room_set .chat_item#chat_room_name,
#chat_box.room_set .chat_item#chat_close,
#chat_box.room_set .chat_item#chat_panel_room_set {
@@ -13,6 +13,13 @@
}
/* back btn
*/
#chat_box.room_set .chat_item.chat_back button.back_room {
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */

12
tests_hugo/chat_node/chat_client/style/layout_settings.css
View File

@@ -1,17 +1,25 @@
#chat_box.settings {
grid:
' back_home settings close ' auto
' back settings close ' auto
' panel_settings panel_settings panel_settings ' 1fr
/ auto 1fr auto ;
}
#chat_box.settings .chat_item#chat_back_home,
#chat_box.settings .chat_item#chat_back,
#chat_box.settings .chat_item#chat_settings,
#chat_box.settings .chat_item#chat_close,
#chat_box.settings .chat_item#chat_panel_settings {
display: flex;
}
/* back btn
*/
#chat_box.settings .chat_item.chat_back button.back_home {
display: flex;
}
/* button "settings" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */

26
tests_hugo/chat_node/chat_client/style/layout_user.css
View File

@@ -1,17 +1,39 @@
#chat_box.user {
grid:
' back_room user close ' auto
' back user close ' auto
' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto ;
}
#chat_box.user .chat_item#chat_back_room,
#chat_box.user .chat_item#chat_back,
#chat_box.user .chat_item#chat_user,
#chat_box.user .chat_item#chat_close,
#chat_box.user .chat_item#chat_panel_user {
display: flex;
}
/* back btn
*/
#chat_box.user .chat_item.chat_back button.back_room {
display: flex;
}
/* from settings */
#chat_box._settings .chat_item.chat_back button.btn {
display: none;
}
#chat_box._settings .chat_item.chat_back button.back_settings {
display: flex;
}
/* from room settings */
#chat_box._room_set .chat_item.chat_back button.btn {
display: none;
}
#chat_box._room_set .chat_item.chat_back button.back_room_set {
display: flex;
}
/* title "user" appearance
*/
#chat_box.user .chat_item.chat_user {