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

chat controls css kind of working

Browse Source
This commit is contained in:
lenovo
2022-12-05 21:47:09 +01:00
parent 3d9c9f56f4
commit 7fd77539f4
6 changed files with 104 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,35 +8,44 @@
<body>
<input type="button" class="input_outside" id="input_outside">
<input type="checkbox" id="chat_input" style="display: none;"/>
<div class="chat_box">
<div class="chat_item controls_area">
<div class="control list drop_down_menu" tabindex=0>
<!--
<p class="drop_down_title">list</p>
<p class="drop_down_items">directs</p>
<p class="drop_down_items">rooms</p>
-->
<div class="drop_down_title" tabindex=0><p>list</p></div>
<div class="drop_down_items" tabindex=0>
<p>directs chats</p>
<p>rooms</p>
<div class="control list drop_down">
<p class="_title" tabindex=0>list</p>
<div class="_items" tabindex=0>
<div class="drop_down _push">
<p class="_title" tabindex=0>directs chats</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>test1</p></label>
<label for="input_outside"><p>test2</p></label>
</div>
</div>
<div class="drop_down _push">
<p class="_title" tabindex=0>rooms</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>test1</p></label>
<label for="input_outside"><p>test2</p></label>
</div>
</div>
</div>
</div>
<div class="control create drop_down_menu" tabindex=0>
<!--
<p class="drop_down_title">create</p>
<p class="drop_down_items">direct</p>
<p class="drop_down_items">room</p>
-->
<div class="drop_down_title" tabindex=0><p>create</p></div>
<div class="drop_down_items" tabindex=0>
<p>direct chat</p>
<p>room</p>
<div class="control create drop_down">
<p class="_title" tabindex=0>create</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>direct chat</p></label>
<label for="input_outside"><p>room</p></label>
</div>
</div>
<div class="control join">
<p>join</p>
</div>

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

@@ -48,7 +48,7 @@
border: 1px solid green;
}
.chat_box .chat_item * {
.chat_box .chat_item > * {
display: flex;
}
/* buttons settings */

83
tests_hugo/chat_node/chat_client/style/drop_down_menu.css
View File

@@ -1,18 +1,24 @@
.drop_down_menu,
.drop_down_menu * {
/* * * * * * * * * * * * * * * * * * * *
MENU APPEARENCE
*/
.drop_down,
.drop_down * {
display: flex;
flex-direction: column;
margin: auto;
position: relative;
cursor: pointer;
}
.drop_down_menu {
.drop_down {
z-index: 1;
}
.drop_down_menu .drop_down_title {
.drop_down ._title {
padding: 5px;
pointer-events: none;
}
.drop_down_menu .drop_down_items {
.drop_down ._items {
position: absolute;
top: 100%;
left: 0%;
@@ -20,23 +26,62 @@
min-width: 100%;
background-color: white;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: visibility 0.3s;
border: 1px solid blue;
}
.drop_down_menu .drop_down_items > * {
.drop_down ._items > * {
margin: 0px;
}
.drop_down ._title {
text-align: center;
}
.drop_down label {
margin: 0px;
padding: 0px;
}
.drop_down p {
padding: 5px;
margin: 0px;
margin-left: 0px;
cursor: pointer;
}
.drop_down_menu:focus {
/* * * * * * * * * * * * * * * * * * * *
SUB MENU APPEARENCE
*/
.drop_down._push ._title {
text-align: left;
}
.drop_down_menu:focus .drop_down_title {
pointer-events: auto;
}
.drop_down_menu:focus .drop_down_items {
opacity: 1;
visibility: visible;
}
.drop_down_menu:focus .drop_down_items > * {
.drop_down._push > ._items {
position: relative;
width: auto;
margin: 0px;
margin-left: 10px;
}
/* * * * * * * * * * * * * * * * * * * *
DROP MECHANISM
*/
input.input_outside {
opacity: 0;
position: absolute;
pointer-events: none;
}
.drop_down > ._title {
pointer-events: auto;
}
.drop_down > ._items {
display: none;
}
.drop_down:focus-within > ._title {
pointer-events: none;
}
.drop_down:focus-within > ._items {
display: flex;
}

3
tests_hugo/chat_node/chat_client/style/globals.css
View File

@@ -1,3 +0,0 @@
.cursor_pointer {
cursor: pointer;
}

9
tests_hugo/chat_node/chat_client/style/msg_controls.css
View File

@@ -4,8 +4,9 @@
margin: auto;
cursor: pointer;
}
.chat_item.controls_area .control p {
.chat_item.controls_area .control > p {
margin: 0px;
padding: 5px;
}
.chat_item.controls_area .control.list {
}
@@ -14,3 +15,9 @@
.chat_item.controls_area .control.join {
}
.chat_item.controls_area .control p:hover {
background-color: rgb(210, 210, 210);
}
.chat_item.controls_area .control p:active {
background-color: rgb(180, 180, 180);
}