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

renamed html for css, before full refont

Browse Source
This commit is contained in:
lenovo
2022-12-10 22:37:46 +01:00
parent 99016519ee
commit 3ced0ee2f2
8 changed files with 114 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,50 +12,34 @@
<input type="checkbox" class="vanish" id="chat_input">
<input type="button" class="vanish" id="new_room_form">
<div class="chat_box">
<div class="chat _box">
<div class="chat_item controls_area">
<!-- MENU -------------- -->
<div class="chat _item controls_area">
<!-- MENU
<div class="control rooms drop_down">
<p class="_title" tabindex=0>rooms</p>
<div class="_items" tabindex=0 id="rooms">
<label for="input_outside"><p class="room_name">test1</p></label>
<label for="input_outside"><p class="room_name">test2</p></label>
<label for="input_outside"><p class="room_name">test1</p></label>
<label for="input_outside"><p class="room_name">test2</p></label>
</div>
</div>
-------------- -->
<select class="control rooms">
<option class="_title">rooms</option>
</select>
<!-- MENU -------------- -->
<div class="control new">
<label for="new_room_form"><p>new</p></label>
</div>
<!-- MENU
<div class="control create drop_down">
<p class="_title" tabindex=0>new</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p onclick="create_room()">direct chat</p></label>
<div class="drop_down _push">
<p class="_title" tabindex=0>room</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p onclick="">public</p></label>
<label for="input_outside"><p onclick="">private</p></label>
<label for="input_outside"><p onclick="">protected</p></label>
</div>
</div>
</div>
</div>
-------------- -->
<!-- MENU -------------- -->
<div class="control settings">
<p onclick="">settings</p>
</div>
</div>
<label class="chat_item open_close button" for="chat_input">
<label class="chat _item open_close button" for="chat_input">
<p>chat</p>
</label>
<div class="chat_item main_window">
<div class="chat _item main_window">
<!-- THREAD ------------ -->
<div class="msg_box" id="msg_thread">
<!-- messages go there -->
@@ -63,23 +47,25 @@
<p id="msg_box_room_name">room name</p>
<!-- ACTION BOARD ------ -->
<div class="action_board" id="action_board">
<!-- CREATE ------------ -->
<div class="action_pannel _create" id="create" tabindex=0>
<p>new room</p>
<p class="_title">new room</p>
<input class="_search" type="text" onkeyup="search_room()" placeholder="type the name of a room">
<div class="_list">
<p>create a new group</p>
</div>
<label for="input_outside" class="close_croice"></label>
</div>
</div>
</div>
<div class="chat_item msg_write">
<div class="chat _item msg_write">
<div class="text_area" id="msg_write" contenteditable>
<!-- write message here -->
</div>
</div>
<button class="chat_item msg_send button" onclick="send_msg()">
<button class="chat _item msg_send button" onclick="send_msg()">
<p>send</p>
</button>

8
tests_hugo/chat_node/chat_client/style/action_board.css
View File

@@ -1,5 +1,5 @@
.chat_box .chat_item.main_window .action_board {
.chat._item.main_window .action_board {
position: absolute;
top: 0px;
left: 0px;
@@ -9,7 +9,7 @@
background-color: transparent;
pointer-events: none;
}
.chat_box .chat_item.main_window .action_board .action_pannel {
.chat._item.main_window .action_board .action_pannel {
/*
display: none;
visibility: hidden;
@@ -50,7 +50,7 @@ label.close_croice::after {
*/
/* show action board and _create */
input#new_room_form:focus ~ .chat_box #action_board ._create,
input#new_room_form:focus ~ .chat._box #action_board ._create,
#action_board ._create:focus-within {
/*
display: flex;
@@ -64,7 +64,7 @@ input#new_room_form:focus ~ .chat_box #action_board ._create,
#action_board ._create {
height: 100%;
}
#action_board ._create p {
#action_board ._create ._title {
text-align: center;
}
#action_board ._create ._search {

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

@@ -1,46 +1,45 @@
@import 'chat_buttons.css';
@import 'chat_thread.css';
@import 'chat_write.css';
@import 'chat_controls.css';
@import 'action_board.css';
@import 'msg_thread.css';
@import 'msg_write.css';
@import 'msg_controls.css';
@import 'drop_down_menu.css';
/* vanish elements wihtout display:none; */
input.vanish {
opacity: 0;
position: absolute;
pointer-events: none;
}
/**
* GRID
*/
/* Hide scrollbar */
.chat_box * {
.chat._box * {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat_box *::-webkit-scrollbar {
.chat._box *::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* global settings */
.chat_box * {
/*
* GRID
*/
.chat._box * {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat_box .chat_item.controls_area { grid-area: controls;}
.chat_box .chat_item.open_close { grid-area: open_close;}
.chat_box .chat_item.main_window { grid-area: main_window;}
.chat_box .chat_item.msg_write { grid-area: msg_write;}
.chat_box .chat_item.msg_send { grid-area: msg_send;}
.chat_box {
.chat._item.controls_area { grid-area: controls;}
.chat._item.open_close { grid-area: open_close;}
.chat._item.main_window { grid-area: main_window;}
.chat._item.msg_write { grid-area: msg_write;}
.chat._item.msg_send { grid-area: msg_send;}
.chat._box {
position: fixed;
bottom: 20px;
right: 20px;
@@ -57,52 +56,35 @@ input.vanish {
border: 1px solid green;
}
.chat_box .chat_item > * {
.chat._item > * {
display: flex;
}
/* buttons settings */
.chat_box .chat_item.button {
display: flex;
width: auto;
padding: 10px;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
.chat_box .chat_item.button p {
margin: auto;
}
.chat_box .chat_item.button:focus,
.chat_box .chat_item.button:hover {
background-color: rgb(200, 200, 200);
}
.chat_box .chat_item.button:active {
background-color: rgb(220, 220, 220);
}
/* collapse settings */
.chat_box .chat_item:not(.open_close) {
/*
* COLLAPSE
*/
.chat._item:not(.open_close) {
display: none;
}
#chat_input:checked ~
.chat_box {
.chat._box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
#chat_input:checked ~
.chat_box .chat_item {
.chat._box .chat._item {
display: flex;
}
#chat_input:checked ~
.chat_box .chat_item.open_close p {
.chat._box .chat._item.open_close p {
display: none;
}
#chat_input:checked ~
.chat_box .chat_item.open_close {
/*
*/
.chat._box .chat._item.open_close {
width: 30px;
height: 20px;
padding: 0px;
@@ -111,8 +93,7 @@ input.vanish {
border: none;
}
#chat_input:checked ~
.chat_box .chat_item.open_close::before {
--collapse_width: 20px;
.chat._box .chat._item.open_close::before {
content: "";
position: absolute;
left: 50%;

25
tests_hugo/chat_node/chat_client/style/chat_buttons.css Normal file
View File

@@ -0,0 +1,25 @@
/*
* BUTTONS
*/
.chat._box .button {
display: flex;
width: auto;
padding: 10px;
cursor: pointer;
outline: none;
border: none;
background-color: rgb(220, 220, 220);
}
.chat._box .button p {
margin: auto;
}
.chat._box .button:focus,
.chat._box .button:hover {
background-color: rgb(200, 200, 200);
}
.chat_box .button:active {
background-color: rgb(220, 220, 220);
}

24
tests_hugo/chat_node/chat_client/style/chat_controls.css Normal file
View File

@@ -0,0 +1,24 @@
.chat._item.controls_area {
flex-direction: row;
}
.chat._item.controls_area .control {
margin: auto;
cursor: pointer;
}
.chat._item.controls_area .control p {
margin: 0px;
padding: 5px;
cursor: pointer;
}
.chat._item.controls_area .control label {
margin: 0px;
padding: 0px;
}
.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);
}

24
tests_hugo/chat_node/chat_client/style/msg_thread.css → tests_hugo/chat_node/chat_client/style/chat_thread.css
View File

@@ -1,15 +1,15 @@
.chat_box .chat_item.main_window {
.chat._item.main_window {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid blue;
}
.chat_box .chat_item .msg_box {
.chat._item .msg_box {
flex-direction: column;
width: 100%;
padding: 5px;
}
.chat_box #msg_thread div {
.chat._box #msg_thread div {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
@@ -21,7 +21,7 @@
ROOM NAME
*/
.chat_box #msg_box_room_name {
.chat._box #msg_box_room_name {
position: absolute;
top: 0px;
left: 0px;
@@ -38,17 +38,17 @@
ALL MSG
*/
.chat_box #msg_thread div {
.chat._box #msg_thread div {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
.chat_box #msg_thread div p.name {
.chat._box #msg_thread div p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_box #msg_thread div p.msg {
.chat._box #msg_thread div p.msg {
margin: 5px 0px;
}
@@ -57,12 +57,12 @@
MSG PERSO
*/
.chat_box #msg_thread div.me {
.chat._box #msg_thread div.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
.chat_box #msg_thread div.me p.name {
.chat._box #msg_thread div.me p.name {
display: none;
}
@@ -71,14 +71,14 @@
MSG SERVER
*/
.chat_box #msg_thread div.SERVER {
.chat._box #msg_thread div.SERVER {
margin-left: auto;
background-color: transparent;
}
.chat_box #msg_thread div.SERVER p.name {
.chat._box #msg_thread div.SERVER p.name {
display: none;
}
.chat_box #msg_thread div.SERVER p.msg {
.chat._box #msg_thread div.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);

4
tests_hugo/chat_node/chat_client/style/msg_write.css → tests_hugo/chat_node/chat_client/style/chat_write.css
View File

@@ -1,4 +1,4 @@
.chat_box .chat_item .text_area {
.chat._item .text_area {
display: block;
position: absolute;
bottom: 0px;
@@ -15,6 +15,6 @@
background-color: white;
border: 1px solid red;
}
.chat_box .chat_item .text_area div {
.chat._item .text_area div {
display: block ruby;
}

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

@@ -1,121 +0,0 @@
.chat_item.controls_area {
flex-direction: row;
}
.chat_item.controls_area .control {
margin: auto;
cursor: pointer;
}
.chat_item.controls_area .control p {
margin: 0px;
padding: 5px;
cursor: pointer;
}
.chat_item.controls_area .control label {
margin: 0px;
padding: 0px;
}
.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);
}
/* * * * * * * * * * * * * * * * * * * *
MENU APPEARENCE
*/
.drop_down,
.drop_down * {
display: flex;
flex-direction: column;
margin: auto;
position: relative;
cursor: pointer;
}
.drop_down {
z-index: 1;
}
.drop_down ._title {
padding: 5px;
}
.drop_down ._items {
position: absolute;
top: 100%;
left: 0%;
width: auto;
min-width: 100%;
background-color: white;
white-space: nowrap;
border: 1px solid blue;
}
.drop_down p {
margin-left: 0px;
}
.drop_down ._items > * {
margin: 0px;
}
.drop_down ._title {
text-align: center;
}
/* * * * * * * * * * * * * * * * * * * *
DROP ARROW
*/
.drop_down ._title {
padding-right: 20px !important;
}
.drop_down ._title::after {
content: "";
position: absolute;
top: calc(50% - 4px);
right: 5px;
width: 0px;
height: 10px;
border: 5px solid transparent;
border-top: 10px solid rgb(120, 120, 120);
}
/* * * * * * * * * * * * * * * * * * * *
SUB MENU APPEARENCE
*/
.drop_down._push ._title {
text-align: left;
}
.drop_down._push > ._items {
position: relative;
width: auto;
margin: 0px;
margin-left: 10px;
}
/* * * * * * * * * * * * * * * * * * * *
DROP MECHANISM
*/
.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;
}