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

layout mute ok

Browse Source
This commit is contained in:
simplonco
2022-12-26 15:55:39 +01:00
parent b46432e2bf
commit 7bb53b1312
8 changed files with 1772 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -229,5 +229,20 @@
}
/* __check_change_next
*/
.chat_box :global(.__check_change_next:checked ~ .__to_show) {
display: flex;
}
.chat_box :global(.__check_change_next:checked ~ .__to_block),
.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
pointer-events: none;
color: rgb(100, 100, 100);
}
.chat_box :global(.__to_show) {
display: none;
}
</style>

18
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
View File

@@ -37,10 +37,10 @@
<input id="chat_private" type="radio" name="chat_create_type">
<label for="chat_private" class="_radio"><p>private</p></label>
<!-- [ ] protected -->
<input id="chat_protected" class="_check_change_next" type="radio" name="chat_create_type">
<input id="chat_protected" class="__check_change_next" type="radio" name="chat_create_type">
<label for="chat_protected" class="_radio"><p>protected</p></label>
<!-- [x] protected -->
<div class="__content _is_hidden">
<div class="__to_show">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
<p>confirm password :</p>
@@ -100,17 +100,11 @@
background-color: rgb(200, 200, 200);
}
/* change next element on check
/* submit
*/
form ._check_change_next:checked ~ ._is_hidden {
display: flex;
}
form ._check_change_next:checked ~ ._is_not_gray {
pointer-events: none;
color: rgb(100, 100, 100);
}
form ._is_hidden {
display: none;
form input[type=submit] {
margin-top: 20px;
}

60
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
View File

@@ -27,13 +27,13 @@
<!-- panel_mute -->
<!-- MUTE -->
<div class="chat_item chat_panel chat_panel_mute" id="chat_panel_mute">
<div class="panel panel_mute __border_top">
<p class="__center">mute this user for a time :</p>
<form>
<!-- forever -->
<input id="chat_mute_forever" type="checkbox" class="_check_change_next"></input>
<input id="chat_mute_forever" class="__check_change_next" type="checkbox">
<label for="chat_mute_forever" class="_checkbox"><p>forever</p></label>
<div class="__content _is_not_gray">
<div class="__to_block">
<!-- minutes -->
<label for="chat_mute_minutes" class="_select">
<p>minutes :</p>
@@ -202,6 +202,60 @@
}
/* checkbox
*/
form input[type=checkbox] {
display: none;
}
form label._checkbox {
margin: 0px auto 0px 10px;
padding-left: 10px;
cursor: pointer;
}
form label._checkbox::after {
content: "";
position: absolute;
top: calc(50% - 6px);
left: 0px;
width: 12px;
height: 12px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
form input[type=checkbox]:checked
+ label._checkbox::after {
background-color: rgb(200, 200, 200);
}
/* select
*/
form label._select {
flex-direction: row;
}
form label._select p {
margin: 0px;
}
form select {
margin: auto auto auto 10px;
background-color: rgb(220, 220, 220);
border: none;
padding: 5px;
cursor: pointer;
}
form select:hover {
background-color: rgb(200, 200, 200);
}
/* submit
*/
form input[type=submit] {
margin-top: 20px;
}
</style>

7
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte
View File

@@ -53,6 +53,13 @@
}
/* submit
*/
form input[type=submit] {
margin-top: 20px;
}
</style>

43
srcs/requirements/svelte/api_front/src/styles/chat/chat_form.css
View File

@@ -20,50 +20,7 @@
}
/* select
*/
#chat_box .chat_item form label._select {
flex-direction: row;
margin-left: auto;
}
#chat_box .chat_item form select {
margin: auto 0px;
background-color: rgb(220, 220, 220);
border: none;
padding: 5px;
cursor: pointer;
}
#chat_box .chat_item form select:hover {
background-color: rgb(200, 200, 200);
}
/* checkbox
<input id="chat_mute_forever" type="checkbox" class="_checkbox"></input>
<label for="chat_mute_forever">forever</label>
*/
#chat_box .chat_item form input[type=checkbox] {
display: none;
}
#chat_box .chat_item form label._checkbox {
margin: 0px 0px 0px auto;
padding-right: 10px;
cursor: pointer;
}
#chat_box .chat_item form label._checkbox::after {
content: "";
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 12px;
height: 12px;
border: 2px solid rgb(150, 150, 150);
box-sizing: border-box;
cursor: pointer;
}
#chat_box .chat_item form input[type=checkbox]:checked
+ label._checkbox::after {
background-color: rgb(200, 200, 200);
}