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

finally global grid area is better

Browse Source
This commit is contained in:
simplonco
2022-12-24 20:51:29 +01:00
parent aea7d5a4fc
commit 2b0939ec05
8 changed files with 452 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,5 +7,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
var(--violet), var(--violet),
var(--pink), var(--pink),
var(--purple) 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-ajhpyu{display:grid;position:fixed;bottom:20px;right:20px;gap:5px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-ajhpyu{gap:0px;padding:0px;width:auto;height:auto;grid:' chat ' auto );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-z8twj9.svelte-z8twj9{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black;background-color:bisque}#chat_box.close.svelte-z8twj9 .grid_box.svelte-z8twj9{gap:0px;grid:' chat ' auto
/ auto }#chat_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box .chat_item{display:flex;width:100%;height:100%}#chat_box .chat_item#chat_chat {grid-area:chat}#chat_box .chat_item#chat_close {grid-area:close}#chat_box .chat_item#chat_new {grid-area:new}#chat_box .chat_item#chat_settings {grid-area:settings}#chat_box .chat_item#chat_room_name {grid-area:room_name}#chat_box .chat_item#chat_send {grid-area:send}#chat_box .chat_item#chat_create {grid-area:create}#chat_box .chat_item#chat_user {grid-area:user}#chat_box .chat_item#chat_back {grid-area:back}#chat_box .chat_item#chat_panel_home {grid-area:panel_home}#chat_box .chat_item#chat_panel_new {grid-area:panel_new}#chat_box .chat_item#chat_panel_msg {grid-area:panel_msg}#chat_box .chat_item#chat_panel_write {grid-area:panel_write}#chat_box .chat_item#chat_panel_settings {grid-area:panel_settings}#chat_box .chat_item#chat_panel_room_set {grid-area:panel_room_set}#chat_box .chat_item#chat_panel_protected {grid-area:panel_protected}#chat_box .chat_item#chat_panel_create {grid-area:panel_create}#chat_box .chat_item#chat_panel_user {grid-area:panel_user}#chat_box .chat_item#chat_panel_mute {grid-area:panel_mute}#chat_box p{padding:10px;font-size:15px}button.svelte-1ktx2vi{border-radius:10px}button.svelte-pm9a8r.svelte-pm9a8r{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-pm9a8r p.svelte-pm9a8r{width:100%;text-align:center}button.svelte-pm9a8r.svelte-pm9a8r:hover{background-color:rgb(200, 200, 200)}button.svelte-pm9a8r.svelte-pm9a8r:active{background-color:rgb(190, 190, 190)} / auto }#chat_box.close.svelte-z8twj9.svelte-z8twj9{padding:0px;width:auto;height:auto}#chat_box .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box .grid_box .chat_item{width:100%;height:100%}#chat_box .chat_item#chat_chat {grid-area:chat}#chat_box .chat_item#chat_close {grid-area:close}#chat_box .chat_item#chat_new {grid-area:new}#chat_box .chat_item#chat_settings {grid-area:settings}#chat_box .chat_item#chat_room_name {grid-area:room_name}#chat_box .chat_item#chat_send {grid-area:send}#chat_box .chat_item#chat_create {grid-area:create}#chat_box .chat_item#chat_user {grid-area:user}#chat_box .chat_item#chat_back {grid-area:back}#chat_box .chat_item#chat_panel_home {grid-area:panel_home}#chat_box .chat_item#chat_panel_new {grid-area:panel_new}#chat_box .chat_item#chat_panel_msg {grid-area:panel_msg}#chat_box .chat_item#chat_panel_write {grid-area:panel_write}#chat_box .chat_item#chat_panel_settings {grid-area:panel_settings}#chat_box .chat_item#chat_panel_room_set {grid-area:panel_room_set}#chat_box .chat_item#chat_panel_protected {grid-area:panel_protected}#chat_box .chat_item#chat_panel_create {grid-area:panel_create}#chat_box .chat_item#chat_panel_user {grid-area:panel_user}#chat_box .chat_item#chat_panel_mute {grid-area:panel_mute}#chat_box .grid_box p{padding:10px;font-size:15px}.grid_box.svelte-1tjf2m9{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }button.svelte-nupzli.svelte-nupzli{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-nupzli p.svelte-nupzli{width:100%;text-align:center}button.svelte-nupzli.svelte-nupzli:hover{background-color:rgb(200, 200, 200)}button.svelte-nupzli.svelte-nupzli:active{background-color:rgb(190, 190, 190)}

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

@@ -1885,7 +1885,7 @@ var app = (function () {
} }
/* src/pages/NotFound.svelte generated by Svelte v3.53.1 */ /* src/pages/NotFound.svelte generated by Svelte v3.53.1 */
const file$g = "src/pages/NotFound.svelte"; const file$h = "src/pages/NotFound.svelte";
function create_fragment$i(ctx) { function create_fragment$i(ctx) {
let h1; let h1;
@@ -1913,12 +1913,12 @@ var app = (function () {
a = element("a"); a = element("a");
h2 = element("h2"); h2 = element("h2");
h2.textContent = "Take me home →"; h2.textContent = "Take me home →";
add_location(h1, file$g, 4, 0, 64); add_location(h1, file$h, 4, 0, 64);
add_location(p0, file$g, 5, 0, 87); add_location(p0, file$h, 5, 0, 87);
add_location(p1, file$g, 7, 0, 192); add_location(p1, file$h, 7, 0, 192);
add_location(h2, file$g, 9, 4, 247); add_location(h2, file$h, 9, 4, 247);
attr_dev(a, "href", "/"); attr_dev(a, "href", "/");
add_location(a, file$g, 8, 0, 221); add_location(a, file$h, 8, 0, 221);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -2032,7 +2032,7 @@ var app = (function () {
/* src/pieces/Header.svelte generated by Svelte v3.53.1 */ /* src/pieces/Header.svelte generated by Svelte v3.53.1 */
const { console: console_1$6 } = globals; const { console: console_1$6 } = globals;
const file$f = "src/pieces/Header.svelte"; const file$g = "src/pieces/Header.svelte";
// (24:39) // (24:39)
function create_if_block_1$1(ctx) { function create_if_block_1$1(ctx) {
@@ -2045,7 +2045,7 @@ var app = (function () {
button = element("button"); button = element("button");
button.textContent = "Settings"; button.textContent = "Settings";
attr_dev(button, "class", "svelte-1gjmpio"); attr_dev(button, "class", "svelte-1gjmpio");
add_location(button, file$f, 24, 6, 927); add_location(button, file$g, 24, 6, 927);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, button, anchor); insert_dev(target, button, anchor);
@@ -2085,7 +2085,7 @@ var app = (function () {
button = element("button"); button = element("button");
button.textContent = "My Profile"; button.textContent = "My Profile";
attr_dev(button, "class", "svelte-1gjmpio"); attr_dev(button, "class", "svelte-1gjmpio");
add_location(button, file$f, 22, 6, 817); add_location(button, file$g, 22, 6, 817);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, button, anchor); insert_dev(target, button, anchor);
@@ -2161,19 +2161,19 @@ var app = (function () {
if (!src_url_equal(img.src, img_src_value = "/img/potato_logo.png")) attr_dev(img, "src", img_src_value); if (!src_url_equal(img.src, img_src_value = "/img/potato_logo.png")) attr_dev(img, "src", img_src_value);
attr_dev(img, "alt", "Potato Pong Logo"); attr_dev(img, "alt", "Potato Pong Logo");
attr_dev(img, "class", "svelte-1gjmpio"); attr_dev(img, "class", "svelte-1gjmpio");
add_location(img, file$f, 18, 2, 660); add_location(img, file$g, 18, 2, 660);
attr_dev(h1, "class", "svelte-1gjmpio"); attr_dev(h1, "class", "svelte-1gjmpio");
add_location(h1, file$f, 19, 2, 747); add_location(h1, file$g, 19, 2, 747);
attr_dev(button0, "class", "svelte-1gjmpio"); attr_dev(button0, "class", "svelte-1gjmpio");
add_location(button0, file$f, 31, 4, 1171); add_location(button0, file$g, 31, 4, 1171);
attr_dev(button1, "class", "svelte-1gjmpio"); attr_dev(button1, "class", "svelte-1gjmpio");
add_location(button1, file$f, 32, 4, 1244); add_location(button1, file$g, 32, 4, 1244);
attr_dev(button2, "class", "svelte-1gjmpio"); attr_dev(button2, "class", "svelte-1gjmpio");
add_location(button2, file$f, 33, 4, 1303); add_location(button2, file$g, 33, 4, 1303);
attr_dev(nav, "class", "svelte-1gjmpio"); attr_dev(nav, "class", "svelte-1gjmpio");
add_location(nav, file$f, 20, 2, 770); add_location(nav, file$g, 20, 2, 770);
attr_dev(header, "class", "svelte-1gjmpio"); attr_dev(header, "class", "svelte-1gjmpio");
add_location(header, file$f, 17, 0, 649); add_location(header, file$g, 17, 0, 649);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -2310,7 +2310,7 @@ var app = (function () {
} }
/* src/pieces/GenerateUserDisplay.svelte generated by Svelte v3.53.1 */ /* src/pieces/GenerateUserDisplay.svelte generated by Svelte v3.53.1 */
const file$e = "src/pieces/GenerateUserDisplay.svelte"; const file$f = "src/pieces/GenerateUserDisplay.svelte";
// (58:2) {#if user !== undefined} // (58:2) {#if user !== undefined}
function create_if_block$7(ctx) { function create_if_block$7(ctx) {
@@ -2411,49 +2411,49 @@ var app = (function () {
attr_dev(img, "class", "avatar svelte-16aefqu"); attr_dev(img, "class", "avatar svelte-16aefqu");
if (!src_url_equal(img.src, img_src_value = /*avatar*/ ctx[2])) attr_dev(img, "src", img_src_value); if (!src_url_equal(img.src, img_src_value = /*avatar*/ ctx[2])) attr_dev(img, "src", img_src_value);
attr_dev(img, "alt", "default user icon"); attr_dev(img, "alt", "default user icon");
add_location(img, file$e, 61, 4, 1964); add_location(img, file$f, 61, 4, 1964);
attr_dev(div0, "class", "username svelte-16aefqu"); attr_dev(div0, "class", "username svelte-16aefqu");
add_location(div0, file$e, 62, 4, 2028); add_location(div0, file$f, 62, 4, 2028);
attr_dev(path0, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z"); attr_dev(path0, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z");
attr_dev(path0, "class", "svelte-16aefqu"); attr_dev(path0, "class", "svelte-16aefqu");
add_location(path0, file$e, 67, 10, 2235); add_location(path0, file$f, 67, 10, 2235);
attr_dev(svg0, "viewBox", "0 0 512 512"); attr_dev(svg0, "viewBox", "0 0 512 512");
attr_dev(svg0, "class", "svelte-16aefqu"); attr_dev(svg0, "class", "svelte-16aefqu");
add_location(svg0, file$e, 66, 10, 2197); add_location(svg0, file$f, 66, 10, 2197);
attr_dev(span0, "class", "glitter-star svelte-16aefqu"); attr_dev(span0, "class", "glitter-star svelte-16aefqu");
add_location(span0, file$e, 65, 8, 2138); add_location(span0, file$f, 65, 8, 2138);
attr_dev(path1, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z"); attr_dev(path1, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z");
attr_dev(path1, "class", "svelte-16aefqu"); attr_dev(path1, "class", "svelte-16aefqu");
add_location(path1, file$e, 72, 10, 2728); add_location(path1, file$f, 72, 10, 2728);
attr_dev(svg1, "viewBox", "0 0 512 512"); attr_dev(svg1, "viewBox", "0 0 512 512");
attr_dev(svg1, "class", "svelte-16aefqu"); attr_dev(svg1, "class", "svelte-16aefqu");
add_location(svg1, file$e, 71, 10, 2690); add_location(svg1, file$f, 71, 10, 2690);
attr_dev(span1, "class", "glitter-star svelte-16aefqu"); attr_dev(span1, "class", "glitter-star svelte-16aefqu");
add_location(span1, file$e, 70, 8, 2631); add_location(span1, file$f, 70, 8, 2631);
attr_dev(path2, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z"); attr_dev(path2, "d", "M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z");
attr_dev(path2, "class", "svelte-16aefqu"); attr_dev(path2, "class", "svelte-16aefqu");
add_location(path2, file$e, 77, 10, 3221); add_location(path2, file$f, 77, 10, 3221);
attr_dev(svg2, "viewBox", "0 0 512 512"); attr_dev(svg2, "viewBox", "0 0 512 512");
attr_dev(svg2, "class", "svelte-16aefqu"); attr_dev(svg2, "class", "svelte-16aefqu");
add_location(svg2, file$e, 76, 10, 3183); add_location(svg2, file$f, 76, 10, 3183);
attr_dev(span2, "class", "glitter-star svelte-16aefqu"); attr_dev(span2, "class", "glitter-star svelte-16aefqu");
add_location(span2, file$e, 75, 8, 3124); add_location(span2, file$f, 75, 8, 3124);
attr_dev(span3, "class", "glitter-text svelte-16aefqu"); attr_dev(span3, "class", "glitter-text svelte-16aefqu");
add_location(span3, file$e, 80, 8, 3617); add_location(span3, file$f, 80, 8, 3617);
attr_dev(span4, "class", "glitter svelte-16aefqu"); attr_dev(span4, "class", "glitter svelte-16aefqu");
add_location(span4, file$e, 64, 6, 2107); add_location(span4, file$f, 64, 6, 2107);
attr_dev(div1, "class", "rank svelte-16aefqu"); attr_dev(div1, "class", "rank svelte-16aefqu");
add_location(div1, file$e, 63, 4, 2076); add_location(div1, file$f, 63, 4, 2076);
attr_dev(h4, "class", "svelte-16aefqu"); attr_dev(h4, "class", "svelte-16aefqu");
add_location(h4, file$e, 84, 6, 3722); add_location(h4, file$f, 84, 6, 3722);
add_location(p0, file$e, 85, 6, 3754); add_location(p0, file$f, 85, 6, 3754);
add_location(p1, file$e, 86, 6, 3797); add_location(p1, file$f, 86, 6, 3797);
add_location(p2, file$e, 87, 6, 3842); add_location(p2, file$f, 87, 6, 3842);
add_location(p3, file$e, 88, 6, 3885); add_location(p3, file$f, 88, 6, 3885);
attr_dev(section, "class", "main-stats svelte-16aefqu"); attr_dev(section, "class", "main-stats svelte-16aefqu");
add_location(section, file$e, 83, 4, 3687); add_location(section, file$f, 83, 4, 3687);
attr_dev(main, "class", "svelte-16aefqu"); attr_dev(main, "class", "svelte-16aefqu");
add_location(main, file$e, 58, 2, 1786); add_location(main, file$f, 58, 2, 1786);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, main, anchor); insert_dev(target, main, anchor);
@@ -2542,7 +2542,7 @@ var app = (function () {
div = element("div"); div = element("div");
if (if_block) if_block.c(); if (if_block) if_block.c();
attr_dev(div, "class", "outer svelte-16aefqu"); attr_dev(div, "class", "outer svelte-16aefqu");
add_location(div, file$e, 56, 0, 1737); add_location(div, file$f, 56, 0, 1737);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -2761,7 +2761,7 @@ var app = (function () {
/* src/pieces/chat/Buttons.svelte generated by Svelte v3.53.1 */ /* src/pieces/chat/Buttons.svelte generated by Svelte v3.53.1 */
const { console: console_1$5 } = globals; const { console: console_1$5 } = globals;
const file$d = "src/pieces/chat/Buttons.svelte"; const file$e = "src/pieces/chat/Buttons.svelte";
function create_fragment$f(ctx) { function create_fragment$f(ctx) {
let button; let button;
@@ -2778,11 +2778,11 @@ var app = (function () {
button = element("button"); button = element("button");
p = element("p"); p = element("p");
if (default_slot) default_slot.c(); if (default_slot) default_slot.c();
attr_dev(p, "class", "svelte-pm9a8r"); attr_dev(p, "class", "svelte-nupzli");
add_location(p, file$d, 18, 1, 367); add_location(p, file$e, 18, 1, 367);
attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-pm9a8r")); attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-nupzli"));
attr_dev(button, "id", /*my_id*/ ctx[0]); attr_dev(button, "id", /*my_id*/ ctx[0]);
add_location(button, file$d, 17, 0, 304); add_location(button, file$e, 17, 0, 304);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -2818,7 +2818,7 @@ var app = (function () {
} }
} }
if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-pm9a8r"))) { if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-nupzli"))) {
attr_dev(button, "class", button_class_value); attr_dev(button, "class", button_class_value);
} }
@@ -2956,14 +2956,69 @@ var app = (function () {
} }
/* src/pieces/chat/Layout_home.svelte generated by Svelte v3.53.1 */ /* src/pieces/chat/Layout_home.svelte generated by Svelte v3.53.1 */
const file$d = "src/pieces/chat/Layout_home.svelte";
// (7:0) <Button bind:layout new_layout="close" my_class="chat_item" my_id="#chat_close"> // (9:1) <Button bind:layout new_layout="settings" my_class="chat_item" my_id="chat_settings">
function create_default_slot_2$1(ctx) {
let t;
const block = {
c: function create() {
t = text("settings");
},
m: function mount(target, anchor) {
insert_dev(target, t, anchor);
},
d: function destroy(detaching) {
if (detaching) detach_dev(t);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot_2$1.name,
type: "slot",
source: "(9:1) <Button bind:layout new_layout=\\\"settings\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_settings\\\">",
ctx
});
return block;
}
// (12:1) <Button bind:layout new_layout="new" my_class="chat_item" my_id="chat_new">
function create_default_slot_1$1(ctx) {
let t;
const block = {
c: function create() {
t = text("new");
},
m: function mount(target, anchor) {
insert_dev(target, t, anchor);
},
d: function destroy(detaching) {
if (detaching) detach_dev(t);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_default_slot_1$1.name,
type: "slot",
source: "(12:1) <Button bind:layout new_layout=\\\"new\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_new\\\">",
ctx
});
return block;
}
// (15:1) <Button bind:layout new_layout="close" my_class="chat_item" my_id="chat_close">
function create_default_slot$3(ctx) { function create_default_slot$3(ctx) {
let t; let t;
const block = { const block = {
c: function create() { c: function create() {
t = text("home"); t = text("close");
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, t, anchor); insert_dev(target, t, anchor);
@@ -2977,7 +3032,7 @@ var app = (function () {
block, block,
id: create_default_slot$3.name, id: create_default_slot$3.name,
type: "slot", type: "slot",
source: "(7:0) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"chat_item\\\" my_id=\\\"#chat_close\\\">", source: "(15:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_close\\\">",
ctx ctx
}); });
@@ -2985,66 +3040,236 @@ var app = (function () {
} }
function create_fragment$e(ctx) { function create_fragment$e(ctx) {
let button; let div3;
let button0;
let updating_layout; let updating_layout;
let t0;
let button1;
let updating_layout_1;
let t1;
let button2;
let updating_layout_2;
let t2;
let div2;
let p0;
let t4;
let div1;
let div0;
let p1;
let t6;
let button3;
let p2;
let t8;
let button4;
let p3;
let t10;
let button5;
let p4;
let current; let current;
function button_layout_binding(value) { function button0_layout_binding(value) {
/*button_layout_binding*/ ctx[1](value); /*button0_layout_binding*/ ctx[1](value);
} }
let button_props = { let button0_props = {
new_layout: "settings",
my_class: "chat_item",
my_id: "chat_settings",
$$slots: { default: [create_default_slot_2$1] },
$$scope: { ctx }
};
if (/*layout*/ ctx[0] !== void 0) {
button0_props.layout = /*layout*/ ctx[0];
}
button0 = new Buttons({ props: button0_props, $$inline: true });
binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));
function button1_layout_binding(value) {
/*button1_layout_binding*/ ctx[2](value);
}
let button1_props = {
new_layout: "new",
my_class: "chat_item",
my_id: "chat_new",
$$slots: { default: [create_default_slot_1$1] },
$$scope: { ctx }
};
if (/*layout*/ ctx[0] !== void 0) {
button1_props.layout = /*layout*/ ctx[0];
}
button1 = new Buttons({ props: button1_props, $$inline: true });
binding_callbacks.push(() => bind(button1, 'layout', button1_layout_binding));
function button2_layout_binding(value) {
/*button2_layout_binding*/ ctx[3](value);
}
let button2_props = {
new_layout: "close", new_layout: "close",
my_class: "chat_item", my_class: "chat_item",
my_id: "#chat_close", my_id: "chat_close",
$$slots: { default: [create_default_slot$3] }, $$slots: { default: [create_default_slot$3] },
$$scope: { ctx } $$scope: { ctx }
}; };
if (/*layout*/ ctx[0] !== void 0) { if (/*layout*/ ctx[0] !== void 0) {
button_props.layout = /*layout*/ ctx[0]; button2_props.layout = /*layout*/ ctx[0];
} }
button = new Buttons({ props: button_props, $$inline: true }); button2 = new Buttons({ props: button2_props, $$inline: true });
binding_callbacks.push(() => bind(button, 'layout', button_layout_binding)); binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
const block = { const block = {
c: function create() { c: function create() {
create_component(button.$$.fragment); div3 = element("div");
create_component(button0.$$.fragment);
t0 = space();
create_component(button1.$$.fragment);
t1 = space();
create_component(button2.$$.fragment);
t2 = space();
div2 = element("div");
p0 = element("p");
p0.textContent = "list of your rooms :";
t4 = space();
div1 = element("div");
div0 = element("div");
p1 = element("p");
p1.textContent = "/ you have no chat room yet /";
t6 = space();
button3 = element("button");
p2 = element("p");
p2.textContent = "a room";
t8 = space();
button4 = element("button");
p3 = element("p");
p3.textContent = "another room";
t10 = space();
button5 = element("button");
p4 = element("p");
p4.textContent = "placeholder";
attr_dev(p0, "class", "__center");
add_location(p0, file$d, 19, 2, 484);
attr_dev(p1, "class", "__center");
add_location(p1, file$d, 22, 4, 644);
attr_dev(div0, "class", "chat_room_name __show_if_only_child");
add_location(div0, file$d, 21, 3, 590);
attr_dev(p2, "class", "__left");
add_location(p2, file$d, 27, 4, 824);
attr_dev(button3, "class", "chat_room_name btn");
attr_dev(button3, "onclick", "chat_layout('room')");
add_location(button3, file$d, 26, 3, 754);
attr_dev(p3, "class", "__left");
add_location(p3, file$d, 30, 4, 939);
attr_dev(button4, "class", "chat_room_name btn");
attr_dev(button4, "onclick", "chat_layout('room')");
add_location(button4, file$d, 29, 3, 869);
attr_dev(p4, "class", "__left");
add_location(p4, file$d, 33, 4, 1060);
attr_dev(button5, "class", "chat_room_name btn");
attr_dev(button5, "onclick", "chat_layout('room')");
add_location(button5, file$d, 32, 3, 990);
attr_dev(div1, "id", "chat_api_room_list");
attr_dev(div1, "class", "chat_api list_btn");
add_location(div1, file$d, 20, 2, 531);
attr_dev(div2, "class", "chat_item chat_panel chat_panel_home");
attr_dev(div2, "id", "chat_panel_home");
add_location(div2, file$d, 18, 1, 410);
attr_dev(div3, "class", "grid_box svelte-1tjf2m9");
add_location(div3, file$d, 6, 0, 81);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
mount_component(button, target, anchor); insert_dev(target, div3, anchor);
mount_component(button0, div3, null);
append_dev(div3, t0);
mount_component(button1, div3, null);
append_dev(div3, t1);
mount_component(button2, div3, null);
append_dev(div3, t2);
append_dev(div3, div2);
append_dev(div2, p0);
append_dev(div2, t4);
append_dev(div2, div1);
append_dev(div1, div0);
append_dev(div0, p1);
append_dev(div1, t6);
append_dev(div1, button3);
append_dev(button3, p2);
append_dev(div1, t8);
append_dev(div1, button4);
append_dev(button4, p3);
append_dev(div1, t10);
append_dev(div1, button5);
append_dev(button5, p4);
current = true; current = true;
}, },
p: function update(ctx, [dirty]) { p: function update(ctx, [dirty]) {
const button_changes = {}; const button0_changes = {};
if (dirty & /*$$scope*/ 4) { if (dirty & /*$$scope*/ 16) {
button_changes.$$scope = { dirty, ctx }; button0_changes.$$scope = { dirty, ctx };
} }
if (!updating_layout && dirty & /*layout*/ 1) { if (!updating_layout && dirty & /*layout*/ 1) {
updating_layout = true; updating_layout = true;
button_changes.layout = /*layout*/ ctx[0]; button0_changes.layout = /*layout*/ ctx[0];
add_flush_callback(() => updating_layout = false); add_flush_callback(() => updating_layout = false);
} }
button.$set(button_changes); button0.$set(button0_changes);
const button1_changes = {};
if (dirty & /*$$scope*/ 16) {
button1_changes.$$scope = { dirty, ctx };
}
if (!updating_layout_1 && dirty & /*layout*/ 1) {
updating_layout_1 = true;
button1_changes.layout = /*layout*/ ctx[0];
add_flush_callback(() => updating_layout_1 = false);
}
button1.$set(button1_changes);
const button2_changes = {};
if (dirty & /*$$scope*/ 16) {
button2_changes.$$scope = { dirty, ctx };
}
if (!updating_layout_2 && dirty & /*layout*/ 1) {
updating_layout_2 = true;
button2_changes.layout = /*layout*/ ctx[0];
add_flush_callback(() => updating_layout_2 = false);
}
button2.$set(button2_changes);
}, },
i: function intro(local) { i: function intro(local) {
if (current) return; if (current) return;
transition_in(button.$$.fragment, local); transition_in(button0.$$.fragment, local);
transition_in(button1.$$.fragment, local);
transition_in(button2.$$.fragment, local);
current = true; current = true;
}, },
o: function outro(local) { o: function outro(local) {
transition_out(button.$$.fragment, local); transition_out(button0.$$.fragment, local);
transition_out(button1.$$.fragment, local);
transition_out(button2.$$.fragment, local);
current = false; current = false;
}, },
d: function destroy(detaching) { d: function destroy(detaching) {
destroy_component(button, detaching); if (detaching) detach_dev(div3);
destroy_component(button0);
destroy_component(button1);
destroy_component(button2);
} }
}; };
@@ -3076,7 +3301,17 @@ var app = (function () {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_home> was created with unknown prop '${key}'`); if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_home> was created with unknown prop '${key}'`);
}); });
function button_layout_binding(value) { function button0_layout_binding(value) {
layout = value;
$$invalidate(0, layout);
}
function button1_layout_binding(value) {
layout = value;
$$invalidate(0, layout);
}
function button2_layout_binding(value) {
layout = value; layout = value;
$$invalidate(0, layout); $$invalidate(0, layout);
} }
@@ -3095,7 +3330,7 @@ var app = (function () {
$$self.$inject_state($$props.$$inject); $$self.$inject_state($$props.$$inject);
} }
return [layout, button_layout_binding]; return [layout, button0_layout_binding, button1_layout_binding, button2_layout_binding];
} }
class Layout_home extends SvelteComponentDev { class Layout_home extends SvelteComponentDev {
@@ -3123,8 +3358,9 @@ var app = (function () {
/* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */ /* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */
const file$c = "src/pieces/chat/Chat.svelte"; const file$c = "src/pieces/chat/Chat.svelte";
// (30:1) {:else} // (33:1) {:else}
function create_else_block$4(ctx) { function create_else_block$4(ctx) {
let div;
let button; let button;
let updating_layout; let updating_layout;
let current; let current;
@@ -3136,7 +3372,7 @@ var app = (function () {
let button_props = { let button_props = {
new_layout: "home", new_layout: "home",
my_class: "chat_item", my_class: "chat_item",
my_id: "#chat_chat", my_id: "chat_chat",
$$slots: { default: [create_default_slot$2] }, $$slots: { default: [create_default_slot$2] },
$$scope: { ctx } $$scope: { ctx }
}; };
@@ -3150,10 +3386,14 @@ var app = (function () {
const block = { const block = {
c: function create() { c: function create() {
div = element("div");
create_component(button.$$.fragment); create_component(button.$$.fragment);
attr_dev(div, "class", "grid_box svelte-z8twj9");
add_location(div, file$c, 33, 2, 646);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
mount_component(button, target, anchor); insert_dev(target, div, anchor);
mount_component(button, div, null);
current = true; current = true;
}, },
p: function update(ctx, dirty) { p: function update(ctx, dirty) {
@@ -3181,7 +3421,8 @@ var app = (function () {
current = false; current = false;
}, },
d: function destroy(detaching) { d: function destroy(detaching) {
destroy_component(button, detaching); if (detaching) detach_dev(div);
destroy_component(button);
} }
}; };
@@ -3189,14 +3430,14 @@ var app = (function () {
block, block,
id: create_else_block$4.name, id: create_else_block$4.name,
type: "else", type: "else",
source: "(30:1) {:else}", source: "(33:1) {:else}",
ctx ctx
}); });
return block; return block;
} }
// (28:1) {#if layout === "home"} // (30:1) {#if layout === "home"}
function create_if_block$6(ctx) { function create_if_block$6(ctx) {
let homelayout; let homelayout;
let updating_layout; let updating_layout;
@@ -3252,14 +3493,14 @@ var app = (function () {
block, block,
id: create_if_block$6.name, id: create_if_block$6.name,
type: "if", type: "if",
source: "(28:1) {#if layout === \\\"home\\\"}", source: "(30:1) {#if layout === \\\"home\\\"}",
ctx ctx
}); });
return block; return block;
} }
// (31:2) <Button bind:layout new_layout="home" my_class="chat_item" my_id="#chat_chat"> // (35:3) <Button bind:layout new_layout="home" my_class="chat_item" my_id="chat_chat">
function create_default_slot$2(ctx) { function create_default_slot$2(ctx) {
let t; let t;
@@ -3279,7 +3520,7 @@ var app = (function () {
block, block,
id: create_default_slot$2.name, id: create_default_slot$2.name,
type: "slot", type: "slot",
source: "(31:2) <Button bind:layout new_layout=\\\"home\\\" my_class=\\\"chat_item\\\" my_id=\\\"#chat_chat\\\">", source: "(35:3) <Button bind:layout new_layout=\\\"home\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_chat\\\">",
ctx ctx
}); });
@@ -3307,9 +3548,9 @@ var app = (function () {
c: function create() { c: function create() {
div = element("div"); div = element("div");
if_block.c(); if_block.c();
attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-ajhpyu")); attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-z8twj9"));
attr_dev(div, "id", "chat_box"); attr_dev(div, "id", "chat_box");
add_location(div, file$c, 26, 0, 496); add_location(div, file$c, 27, 0, 535);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3346,7 +3587,7 @@ var app = (function () {
if_block.m(div, null); if_block.m(div, null);
} }
if (!current || dirty & /*layout*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-ajhpyu"))) { if (!current || dirty & /*layout*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[0]) + " svelte-z8twj9"))) {
attr_dev(div, "class", div_class_value); attr_dev(div, "class", div_class_value);
} }
}, },

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

File diff suppressed because one or more lines are too long

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

@@ -22,6 +22,13 @@
<style> <style>
/* for grid
button.grid#chat {grid-area: chat;}
button.grid#close {grid-area: close;}
button.grid#new {grid-area: new;}
button.grid#settings {grid-area: settings;}
*/
button { button {
display: flex; display: flex;
width: auto; width: auto;

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

@@ -55,28 +55,6 @@
- WRITE - WRITE
--------------------------------- --> --------------------------------- -->
<!-- HOME -->
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<p class="__center">list of your rooms :</p>
<div id="chat_api_room_list" class="chat_api list_btn">
<div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
</div>
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">a room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">placeholder</p>
</button>
<!-- END placeholders -->
</div>
</div>
<!-- NEW --> <!-- NEW -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new"> <div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<button class="chat_create_btn btn"><p>create</p></button> <button class="chat_create_btn btn"><p>create</p></button>

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

@@ -3,6 +3,8 @@
import HomeLayout from './Layout_home.svelte'; import HomeLayout from './Layout_home.svelte';
import Button from './Buttons.svelte'; import Button from './Buttons.svelte';
//export let bg_color = "transparent";
let room = ""; let room = "";
let admin = false; let admin = false;
let last_layout = ""; let last_layout = "";
@@ -29,44 +31,53 @@
</script> </script>
<div class={layout} id="chat_box"> <div class={layout} id="chat_box">
{#if layout === "home"} {#if layout === "home"}
<HomeLayout bind:layout={layout} /> <HomeLayout bind:layout={layout} />
{:else} {:else}
<Button bind:layout new_layout="home" my_class="chat_item" my_id="#chat_chat"> <div class="grid_box">
chat <Button bind:layout new_layout="home" my_class="chat_item" my_id="chat_chat">
</Button> chat
</Button>
</div>
{/if} {/if}
</div> </div>
<style> <style>
/* chat_box default style /* chat_box and default style
*/ */
#chat_box { #chat_box {
display: grid; display: flex;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
gap: 5px;
padding: 5px; padding: 5px;
width: 300px; width: 300px;
height: 400px; height: 400px;
border: 1px solid black; border: 1px solid black;
/*
background-color: {bg_color};
*/
background-color: bisque;
} }
/* style if chat_box is closed /* style if chat_box is closed
*/ */
#chat_box.close { #chat_box.close .grid_box {
gap: 0px; gap: 0px;
padding: 0px;
width: auto;
height: auto;
grid: grid:
' chat ' auto ' chat ' auto
/ auto ; / auto ;
} }
#chat_box.close {
padding: 0px;
width: auto;
height: auto;
}
@@ -74,9 +85,16 @@
GLOBAL STYLES GLOBAL STYLES
* * * * * * * * */ * * * * * * * * */
/* for all childrens of chat_box /* for grid_box and all childrens
*/ */
:global(#chat_box *) { :global(#chat_box .grid_box) {
display: grid;
margin: 0px;
gap: 5px;
width: 100%;
height: 100%;
}
:global(#chat_box .grid_box *) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@@ -84,24 +102,23 @@
padding: 0px; padding: 0px;
margin: auto; margin: auto;
} }
:global(#chat_box .chat_item) { :global(#chat_box .grid_box .chat_item) {
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* all grid elements names /* all grid elements names
*/ */
:global(#chat_box .chat_item#chat_chat ){grid-area: chat;} :global(#chat_box .chat_item#chat_chat ){grid-area: chat;}
:global(#chat_box .chat_item#chat_close ){grid-area: close;} :global(#chat_box .chat_item#chat_close ){grid-area: close;}
:global(#chat_box .chat_item#chat_new ){grid-area: new;} :global(#chat_box .chat_item#chat_new ){grid-area: new;}
:global(#chat_box .chat_item#chat_settings ){grid-area: settings;} :global(#chat_box .chat_item#chat_settings ){grid-area: settings;}
:global(#chat_box .chat_item#chat_room_name ){grid-area: room_name;} :global(#chat_box .chat_item#chat_room_name ){grid-area: room_name;}
:global(#chat_box .chat_item#chat_send ){grid-area: send;} :global(#chat_box .chat_item#chat_send ){grid-area: send;}
:global(#chat_box .chat_item#chat_create ){grid-area: create;} :global(#chat_box .chat_item#chat_create ){grid-area: create;}
:global(#chat_box .chat_item#chat_user ){grid-area: user;} :global(#chat_box .chat_item#chat_user ){grid-area: user;}
:global(#chat_box .chat_item#chat_back ){grid-area: back;} :global(#chat_box .chat_item#chat_back ){grid-area: back;}
:global(#chat_box .chat_item#chat_panel_home ){grid-area: panel_home;} :global(#chat_box .chat_item#chat_panel_home ){grid-area: panel_home;}
:global(#chat_box .chat_item#chat_panel_new ){grid-area: panel_new;} :global(#chat_box .chat_item#chat_panel_new ){grid-area: panel_new;}
:global(#chat_box .chat_item#chat_panel_msg ){grid-area: panel_msg;} :global(#chat_box .chat_item#chat_panel_msg ){grid-area: panel_msg;}
:global(#chat_box .chat_item#chat_panel_write ){grid-area: panel_write;} :global(#chat_box .chat_item#chat_panel_write ){grid-area: panel_write;}
@@ -115,7 +132,7 @@
/* all p /* all p
*/ */
:global(#chat_box p) { :global(#chat_box .grid_box p) {
padding: 10px; padding: 10px;
font-size: 15px; font-size: 15px;
} }

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

@@ -4,10 +4,88 @@
export let layout; export let layout;
</script> </script>
<Button bind:layout new_layout="close" my_class="chat_item" my_id="#chat_close"> <div class="grid_box">
home
</Button> <Button bind:layout new_layout="settings" my_class="chat_item" my_id="chat_settings">
settings
</Button>
<Button bind:layout new_layout="new" my_class="chat_item" my_id="chat_new">
new
</Button>
<Button bind:layout new_layout="close" my_class="chat_item" my_id="chat_close">
close
</Button>
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<p class="__center">list of your rooms :</p>
<div id="chat_api_room_list" class="chat_api list_btn">
<div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
</div>
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">a room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">placeholder</p>
</button>
<!-- END placeholders -->
</div>
</div>
</div>
<style> <style>
/*
*/
.grid_box {
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_new {
width: auto;
background-color: transparent;
}
/* button "settings" as 3 dots
*/
#chat_box.home .chat_item#chat_settings p {
display: none;
}
#chat_box.home button.chat_item#chat_settings {
width: 30px;
height: 100%;
padding: 0px;
}
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_item#chat_settings {
background-color: transparent;
}
#chat_box.home .chat_item#chat_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;
}
</style> </style>

54
srcs/requirements/svelte/api_front/src/styles/chat/layout_home.css
View File

@@ -1,54 +0,0 @@
#chat_box.home {
grid:
' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto ;
}
#chat_box.home .chat_item#chat_settings,
#chat_box.home .chat_item#chat_new,
#chat_box.home .chat_item#chat_close,
#chat_box.home .chat_item#chat_panel_home {
display: flex;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_new {
width: auto;
background-color: transparent;
}
/* button "settings" as 3 dots
*/
#chat_box.home .chat_item#chat_settings p {
display: none;
}
#chat_box.home button.chat_item#chat_settings {
width: 30px;
height: 100%;
padding: 0px;
}
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_item#chat_settings {
background-color: transparent;
}
#chat_box.home .chat_item#chat_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;
/*
background-color: black;
*/
}