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

wip layout room

Browse Source
This commit is contained in:
simplonco
2022-12-25 08:15:23 +01:00
parent 0c368d32dd
commit 7187d7dadd
10 changed files with 199 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
srcs/requirements/svelte/api_front/public/build/bundle.css
View File

@@ -7,7 +7,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
var(--violet),
var(--pink),
var(--purple)
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-1aq8ao.svelte-1aq8ao{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1aq8ao .grid_box.svelte-1aq8ao{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-1aq8ao.svelte-1aq8ao{padding:0px;width:auto;height:auto}#chat_box.svelte-1aq8ao .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1aq8ao .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1aq8ao .chat_panel{overflow-y:scroll}#chat_box.svelte-1aq8ao .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1aq8ao .__show_if_only_child{display:none}#chat_box.svelte-1aq8ao .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-1vu2j1b #settings {grid-area:settings}.grid_box.svelte-1vu2j1b #close {grid-area:close}.grid_box.svelte-1vu2j1b #new {grid-area:new}.grid_box.svelte-1vu2j1b #panel_home{grid-area:panel_home}.grid_box.svelte-1vu2j1b.svelte-1vu2j1b{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }.grid_box.svelte-1vu2j1b button#settings p{display:none}.grid_box.svelte-1vu2j1b button#settings{width:30px;height:100%}.grid_box.svelte-1vu2j1b button#settings:not(:hover){background-color:transparent}.grid_box.svelte-1vu2j1b button#settings::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}.grid_box.svelte-1vu2j1b button#new:not(:hover){background-color:transparent}.grid_box.svelte-1vu2j1b button#close p{display:none}.grid_box.svelte-1vu2j1b button#close{width:30px;height:100%;padding:0px;background-color:transparent}.grid_box.svelte-1vu2j1b button#close::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}#panel_home.svelte-1vu2j1b.svelte-1vu2j1b{border-top:1px solid black}#panel_home.svelte-1vu2j1b p.title.svelte-1vu2j1b{margin:10px auto 0px auto}#panel_home.svelte-1vu2j1b p.no_chat.svelte-1vu2j1b{margin:0px auto}button.svelte-ib15h9.svelte-ib15h9{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-ib15h9 p.svelte-ib15h9{width:100%;margin:auto;text-align:center}button.svelte-ib15h9.svelte-ib15h9:hover{background-color:rgb(200, 200, 200)}button.svelte-ib15h9.svelte-ib15h9:active{background-color:rgb(190, 190, 190)}button.list.svelte-ib15h9.svelte-ib15h9:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-ib15h9 p.svelte-ib15h9{text-align:left}
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-1dyzxml.svelte-1dyzxml{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1dyzxml .grid_box.svelte-1dyzxml{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-1dyzxml.svelte-1dyzxml{padding:0px;width:auto;height:auto}#chat_box.svelte-1dyzxml .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1dyzxml .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1dyzxml .chat_panel{overflow-y:scroll}#chat_box.svelte-1dyzxml .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1dyzxml .__show_if_only_child{display:none}#chat_box.svelte-1dyzxml .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-redhuf #settings {grid-area:settings}.grid_box.svelte-redhuf #close {grid-area:close}.grid_box.svelte-redhuf #new {grid-area:new}.grid_box.svelte-redhuf #panel_home{grid-area:panel_home}.grid_box.svelte-redhuf.svelte-redhuf{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }.grid_box.svelte-redhuf button#settings p{display:none}.grid_box.svelte-redhuf button#settings{width:30px;height:100%}.grid_box.svelte-redhuf button#settings:not(:hover){background-color:transparent}.grid_box.svelte-redhuf button#settings::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}.grid_box.svelte-redhuf button#new:not(:hover){background-color:transparent}.grid_box.svelte-redhuf button#close p{display:none}.grid_box.svelte-redhuf button#close{width:30px;height:100%;padding:0px;background-color:transparent}.grid_box.svelte-redhuf button#close::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}#panel_home.svelte-redhuf.svelte-redhuf{border-top:1px solid black}#panel_home.svelte-redhuf p.title.svelte-redhuf{margin:10px auto 0px auto}#panel_home.svelte-redhuf p.no_chat.svelte-redhuf{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}

127
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

@@ -2043,7 +2043,7 @@ var app = (function () {
const file$g = "src/pieces/Header.svelte";
// (24:39)
function create_if_block_1$1(ctx) {
function create_if_block_1$2(ctx) {
let button;
let mounted;
let dispose;
@@ -2073,7 +2073,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_if_block_1$1.name,
id: create_if_block_1$2.name,
type: "if",
source: "(24:39) ",
ctx
@@ -2141,7 +2141,7 @@ var app = (function () {
function select_block_type(ctx, dirty) {
if (/*$location*/ ctx[0] !== '/profile') return create_if_block$8;
if (/*$location*/ ctx[0] === '/profile') return create_if_block_1$1;
if (/*$location*/ ctx[0] === '/profile') return create_if_block_1$2;
}
let current_block_type = select_block_type(ctx);
@@ -2786,9 +2786,9 @@ var app = (function () {
button = element("button");
p = element("p");
if (default_slot) default_slot.c();
attr_dev(p, "class", "svelte-ib15h9");
attr_dev(p, "class", "svelte-8bk9pb");
add_location(p, file$e, 18, 1, 367);
attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-ib15h9"));
attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-8bk9pb"));
attr_dev(button, "id", /*my_id*/ ctx[0]);
add_location(button, file$e, 17, 0, 304);
},
@@ -2826,7 +2826,7 @@ var app = (function () {
}
}
if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-ib15h9"))) {
if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-8bk9pb"))) {
attr_dev(button, "class", button_class_value);
}
@@ -3137,19 +3137,19 @@ var app = (function () {
div0 = element("div");
p1 = element("p");
p1.textContent = "/ you have no chat room yet /";
attr_dev(p0, "class", "title svelte-1vu2j1b");
attr_dev(p0, "class", "title svelte-redhuf");
add_location(p0, file$d, 19, 2, 375);
attr_dev(p1, "class", "no_chat svelte-1vu2j1b");
attr_dev(p1, "class", "no_chat svelte-redhuf");
add_location(p1, file$d, 22, 4, 509);
attr_dev(div0, "class", "__show_if_only_child");
add_location(div0, file$d, 21, 3, 470);
attr_dev(div1, "class", "room_list");
attr_dev(div1, "id", "chat_api_room_list");
add_location(div1, file$d, 20, 2, 419);
attr_dev(div2, "class", "chat_panel svelte-1vu2j1b");
attr_dev(div2, "class", "chat_panel svelte-redhuf");
attr_dev(div2, "id", "panel_home");
add_location(div2, file$d, 18, 1, 332);
attr_dev(div3, "class", "grid_box svelte-1vu2j1b");
attr_dev(div3, "class", "grid_box svelte-redhuf");
add_location(div3, file$d, 6, 0, 81);
},
l: function claim(nodes) {
@@ -3318,7 +3318,7 @@ var app = (function () {
/* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */
const file$c = "src/pieces/chat/Chat.svelte";
// (33:1) {:else}
// (31:1) {:else}
function create_else_block$4(ctx) {
let div;
let button;
@@ -3326,7 +3326,7 @@ var app = (function () {
let current;
function button_layout_binding(value) {
/*button_layout_binding*/ ctx[3](value);
/*button_layout_binding*/ ctx[4](value);
}
let button_props = {
@@ -3347,8 +3347,8 @@ var app = (function () {
c: function create() {
div = element("div");
create_component(button.$$.fragment);
attr_dev(div, "class", "grid_box svelte-1aq8ao");
add_location(div, file$c, 33, 2, 676);
attr_dev(div, "class", "grid_box svelte-1dyzxml");
add_location(div, file$c, 31, 2, 614);
},
m: function mount(target, anchor) {
insert_dev(target, div, anchor);
@@ -3358,7 +3358,7 @@ var app = (function () {
p: function update(ctx, dirty) {
const button_changes = {};
if (dirty & /*$$scope*/ 128) {
if (dirty & /*$$scope*/ 256) {
button_changes.$$scope = { dirty, ctx };
}
@@ -3389,14 +3389,77 @@ var app = (function () {
block,
id: create_else_block$4.name,
type: "else",
source: "(33:1) {:else}",
source: "(31:1) {:else}",
ctx
});
return block;
}
// (30:1) {#if layout === "home"}
// (28:29)
function create_if_block_1$1(ctx) {
let roomlayout;
let updating_layout;
let current;
function roomlayout_layout_binding(value) {
/*roomlayout_layout_binding*/ ctx[3](value);
}
let roomlayout_props = {};
if (/*layout*/ ctx[1] !== void 0) {
roomlayout_props.layout = /*layout*/ ctx[1];
}
roomlayout = new RoomLayout({ props: roomlayout_props, $$inline: true });
binding_callbacks.push(() => bind(roomlayout, 'layout', roomlayout_layout_binding));
const block = {
c: function create() {
create_component(roomlayout.$$.fragment);
},
m: function mount(target, anchor) {
mount_component(roomlayout, target, anchor);
current = true;
},
p: function update(ctx, dirty) {
const roomlayout_changes = {};
if (!updating_layout && dirty & /*layout*/ 2) {
updating_layout = true;
roomlayout_changes.layout = /*layout*/ ctx[1];
add_flush_callback(() => updating_layout = false);
}
roomlayout.$set(roomlayout_changes);
},
i: function intro(local) {
if (current) return;
transition_in(roomlayout.$$.fragment, local);
current = true;
},
o: function outro(local) {
transition_out(roomlayout.$$.fragment, local);
current = false;
},
d: function destroy(detaching) {
destroy_component(roomlayout, detaching);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_if_block_1$1.name,
type: "if",
source: "(28:29) ",
ctx
});
return block;
}
// (25:1) {#if layout === "home"}
function create_if_block$6(ctx) {
let homelayout;
let updating_layout;
@@ -3452,14 +3515,14 @@ var app = (function () {
block,
id: create_if_block$6.name,
type: "if",
source: "(30:1) {#if layout === \\\"home\\\"}",
source: "(25:1) {#if layout === \\\"home\\\"}",
ctx
});
return block;
}
// (35:3) <Button bind:layout new_layout="home" my_id="chat">
// (33:3) <Button bind:layout new_layout="home" my_id="chat">
function create_default_slot$2(ctx) {
let t;
@@ -3479,7 +3542,7 @@ var app = (function () {
block,
id: create_default_slot$2.name,
type: "slot",
source: "(35:3) <Button bind:layout new_layout=\\\"home\\\" my_id=\\\"chat\\\">",
source: "(33:3) <Button bind:layout new_layout=\\\"home\\\" my_id=\\\"chat\\\">",
ctx
});
@@ -3492,12 +3555,13 @@ var app = (function () {
let if_block;
let div_class_value;
let current;
const if_block_creators = [create_if_block$6, create_else_block$4];
const if_block_creators = [create_if_block$6, create_if_block_1$1, create_else_block$4];
const if_blocks = [];
function select_block_type(ctx, dirty) {
if (/*layout*/ ctx[1] === "home") return 0;
return 1;
if (/*layout*/ ctx[1] === "room") return 1;
return 2;
}
current_block_type_index = select_block_type(ctx);
@@ -3507,10 +3571,10 @@ var app = (function () {
c: function create() {
div = element("div");
if_block.c();
attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1aq8ao"));
attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1dyzxml"));
attr_dev(div, "id", "chat_box");
set_style(div, "background-color", /*color*/ ctx[0]);
add_location(div, file$c, 27, 0, 530);
add_location(div, file$c, 22, 0, 417);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3547,7 +3611,7 @@ var app = (function () {
if_block.m(div, null);
}
if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1aq8ao"))) {
if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1dyzxml"))) {
attr_dev(div, "class", div_class_value);
}
@@ -3600,6 +3664,11 @@ var app = (function () {
$$invalidate(1, layout);
}
function roomlayout_layout_binding(value) {
layout = value;
$$invalidate(1, layout);
}
function button_layout_binding(value) {
layout = value;
$$invalidate(1, layout);
@@ -3631,7 +3700,13 @@ var app = (function () {
$$self.$inject_state($$props.$$inject);
}
return [color, layout, homelayout_layout_binding, button_layout_binding];
return [
color,
layout,
homelayout_layout_binding,
roomlayout_layout_binding,
button_layout_binding
];
}
class Chat extends SvelteComponentDev {

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

3
srcs/requirements/svelte/api_front/src/pieces/chat/Buttons.svelte
View File

@@ -11,6 +11,7 @@
export let my_class = "";
export let layout = "";
export let new_layout = "";
function update_layout() {
layout = new_layout;
console.log(layout);
@@ -48,6 +49,7 @@
background-color: rgb(190, 190, 190);
}
/* for btn list
*/
button.list:not(:hover) {
@@ -57,6 +59,5 @@
text-align: left;
}
</style>

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

@@ -22,17 +22,11 @@
but classes starting with "_" must be added to existing class
-->
<button class="chat_item chat_chat btn" id="chat_chat" onclick="chat_layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close btn" id="chat_close" onclick="chat_layout('close')" title="close" ></button>
<button class="chat_item chat_new btn" id="chat_new" onclick="chat_layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings btn" id="chat_settings" onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name btn" id="chat_room_name" onclick="chat_layout('room_set')" ><p>&lt;room_name&gt;</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >&lt;user_name&gt;</p>
<div class="chat_item chat_back" id="chat_back"></button>
<button class="btn back_room" onclick="chat_layout('room')" title="go back room"></button>
<button class="btn back_home" onclick="chat_layout('home')" title="go back home"></button>
<button class="btn back_new" onclick="chat_layout('new')" title="go back new"></button>
<button class="btn back_user" onclick="chat_layout('user')" title="go back user"></button>
<button class="btn back_settings" onclick="chat_layout('settings')" title="go back settings"></button>

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

@@ -11,13 +11,8 @@
let layout = "close";
/*
function update_layout(new_layout) {
last_layout = active_layout;
active_layout = new_layout;
}
layout close
layout home
layout close
layout home
layout room
layout new
layout settings
@@ -33,7 +28,10 @@
<div class={layout} id="chat_box" style="background-color: {color};">
{#if layout === "home"}
<HomeLayout bind:layout={layout} />
<HomeLayout bind:layout />
{:else if layout === "room"}
<RoomLayout bind:layout />
{:else}
<div class="grid_box">
@@ -86,22 +84,6 @@
GLOBAL STYLES
* * * * * * * * */
/* for grid_box and all childrens
*/
#chat_box :global(.grid_box) {
display: grid;
margin: 0px;
gap: 5px;
width: 100%;
height: 100%;
}
#chat_box :global(.grid_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
/* all grid elements names
:global(#chat_box #chat ){grid-area: chat;}
:global(#chat_box #close ){grid-area: close;}
@@ -124,6 +106,22 @@
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
*/
/* for grid_box and all childrens
*/
#chat_box :global(.grid_box) {
display: grid;
margin: 0px;
gap: 5px;
width: 100%;
height: 100%;
}
#chat_box :global(.grid_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
/* all panels
*/
#chat_box :global(.chat_panel) {
@@ -138,6 +136,12 @@
}
/* * * * * * * * * *
GLOBAL UTILITIES
* * * * * * * * * */
/* show child only if it's alone
*/
#chat_box :global(.__show_if_only_child) {

8
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -48,10 +48,10 @@
.grid_box :global(#new ) {grid-area: new;}
.grid_box :global(#panel_home) {grid-area: panel_home;}
.grid_box {
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
}

59
srcs/requirements/svelte/api_front/src/pieces/chat/RoomLayout.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script>
import Button from './Buttons.svelte';
export let layout;
</script>
<div class="grid_box">
<Button bind:layout new_layout="room_set" my_id="room_name">
&lt;room_name&gt;
</Button>
<Button bind:layout new_layout="close" my_id="close">
close
</Button>
<!-- <button class="btn back_home" onclick="chat_layout('home')" title="go back home"></button> -->
<Button bind:layout new_layout="home" my_id="back_home">
close
</Button>
</div>
<style>
/* grid layout "home"
*/
.grid_box :global(#back ) {grid-area: back;}
.grid_box :global(#room_name ) {grid-area: room_name;}
.grid_box :global(#close ) {grid-area: close;}
.grid_box :global(#panel_msg ) {grid-area: panel_msg;}
.grid_box :global(#send ) {grid-area: send;}
.grid_box :global(#panel_write ) {grid-area: panel_write;}
.grid_box {
grid:
' 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 ;
}
/* back btn
*/
#chat_box.room .chat_item.chat_back button.back_home {
display: flex;
}
/* button "<room_name>" appearance
*/
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}
</style>

58
srcs/requirements/svelte/api_front/src/styles/chat/layout_close.css
View File

@@ -1,58 +0,0 @@
#chat_box.close {
gap: 0px;
padding: 0px;
width: auto;
height: auto;
grid:
' chat ' auto
/ auto ;
}
#chat_box.close .chat_item#chat_chat {
display: flex;
}
/*
* COLLAPSE
.chat._item:not(.open_close) {
display: none;
}
#chat_input:checked ~
#chat_box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
#chat_input:checked ~
#chat_box .chat._item {
display: flex;
}
#chat_input:checked ~
#chat_box .chat._item.open_close p {
display: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close {
width: 30px;
height: 20px;
padding: 0px;
justify-self: end;
background-color: transparent;
border: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 15px;
background-color: black;
}
*/

33
srcs/requirements/svelte/api_front/src/styles/chat/layout_room.css
View File

@@ -1,34 +1 @@
#chat_box.room {
grid:
' 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,
#chat_box.room .chat_item#chat_room_name,
#chat_box.room .chat_item#chat_close,
#chat_box.room .chat_item#chat_panel_msg,
#chat_box.room .chat_item#chat_send,
#chat_box.room .chat_item#chat_panel_write {
display: flex;
}
/* 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 */
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}