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

form ok

Browse Source
This commit is contained in:
hugogogo
2022-12-16 19:42:12 +01:00
parent 72b4f72901
commit 044f5bc54a
5 changed files with 98 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -172,16 +172,35 @@
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
<p class="__center" id="chat_protected_title">this room is protected</p>
<form>
<label><p>password :</p></label>
<input type="password" id="pswd">
<label for="chat_pswd"><p>password :</p></label>
<input id="chat_pswd" type="password">
<input type="submit" value="&#x2BA1">
</form>
</div>
<!-- CREATE -->
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
<!-- content -->
panel create
<form>
<label for="chat_name"><p>name :</p></label>
<input id="chat_name">
<input id="chat_public" type="radio" name="chat_create_type" checked>
<label for="chat_public" class="_radio"><p>public</p></label>
<input id="chat_private" type="radio" name="chat_create_type">
<label for="chat_private" class="_radio"><p>private</p></label>
<input id="chat_protected" class="_check_show_next" type="radio" name="chat_create_type">
<label for="chat_protected" class="_radio"><p>protected</p></label>
<div class="__content _is_hidden">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password">
<p>confirm password :</p>
<input type="password">
</div>
<input type="submit" value="&#x2BA1">
</form>
</div>
<!-- USER -->

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

@@ -22,6 +22,7 @@ cxv
@import 'chat_write.css';
@import 'chat_msg.css';
@import 'chat_blocked.css';
@import 'chat_form.css';
/*
@import '_chat_controls.css';

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

@@ -1,4 +1,5 @@
/* p in chat_box
*/
#chat_box p {
@@ -7,6 +8,7 @@
font-family: Cantarell;
}
/* show child only if it's alone
*/
#chat_box .__show_if_only_child {
@@ -45,3 +47,10 @@
}
/* display content
*/
#chat_box .__content{
display: content;
}

65
tests_hugo/chat_node/chat_client/style/chat_form.css Normal file
View File

@@ -0,0 +1,65 @@
/* default element take all space on each line
*/
#chat_box .chat_item form {
margin: 0px auto;
}
#chat_box .chat_item form * {
margin: 0px;
}
/* radio elements style check
*/
#chat_box .chat_item form input[type=radio] {
display: none;
}
#chat_box .chat_item form label._radio {
margin: 0px 0px 0px auto;
padding-right: 10px;
cursor: pointer;
}
#chat_box .chat_item form label._radio::after {
content: "";
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
#chat_box .chat_item form input[type=radio]:checked
+ label._radio::after {
background-color: rgb(200, 200, 200);
}
/* hide and show next element on focus
*/
#chat_box form ._is_hidden {
display: none;
}
#chat_box form ._check_show_next:checked ~ ._is_hidden {
display: flex;
}
/* submit button
https://www.fileformat.info/info/unicode/category/So/list.htm
U+21AA RIGHTWARDS ARROW WITH HOOK ↪
U+21B3 DOWNWARDS ARROW WITH TIP RIGHTWARDS ↳
U+2BA1 DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS ⮡
U+2BB1 RIBBON ARROW DOWN RIGHT ⮱
U+2BA9 BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW ⮩
*/
#chat_box .chat_item form input[type=submit] {
padding: 0px 10px;
border: none;
margin: 10px 0px 0px auto;
cursor: pointer;
}

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

@@ -34,26 +34,3 @@
}
/* 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 ↪
U+21B3 DOWNWARDS ARROW WITH TIP RIGHTWARDS ↳
U+2BA1 DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS ⮡
U+2BB1 RIBBON ARROW DOWN RIGHT ⮱
U+2BA9 BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW ⮩
*/
#chat_box.protected input[type=submit] {
padding: 0px 10px;
border: none;
margin: 10px 0px 0px auto;
cursor: pointer;
}