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

home layout three dots working and found a better way to use css with partial global

Browse Source
This commit is contained in:
simplonco
2022-12-24 22:43:20 +01:00
parent 05d5f2a3ec
commit 06bca96853
5 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,6 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
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-u17qy1.svelte-u17qy1{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-u17qy1 .grid_box.svelte-u17qy1{gap:0px;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-u17qy1.svelte-u17qy1{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-u17qy1 .grid_box.svelte-u17qy1{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-u17qy1.svelte-u17qy1{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 / auto }#chat_box.close.svelte-u17qy1.svelte-u17qy1{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-qfa864{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr ' 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)} / auto 1fr auto }.grid_box.svelte-qfa864 button#chat_new:not(:hover){background-color:transparent}.grid_box.svelte-qfa864 button#chat_settings p{display:none}.grid_box.svelte-qfa864 button#chat_settings{width:30px;height:100%;padding:0px}.grid_box.svelte-qfa864 button#chat_settings:not(:hover){background-color:transparent}.grid_box.svelte-qfa864 button#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}button.svelte-1tnc64v.svelte-1tnc64v{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1tnc64v p.svelte-1tnc64v{width:100%;text-align:center}button.svelte-1tnc64v.svelte-1tnc64v:hover{background-color:rgb(200, 200, 200)}button.svelte-1tnc64v.svelte-1tnc64v:active{background-color:rgb(190, 190, 190)}

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

@@ -2786,9 +2786,9 @@ 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-nupzli"); attr_dev(p, "class", "svelte-1tnc64v");
add_location(p, file$e, 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-nupzli")); attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-1tnc64v"));
attr_dev(button, "id", /*my_id*/ ctx[0]); attr_dev(button, "id", /*my_id*/ ctx[0]);
add_location(button, file$e, 17, 0, 304); 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-nupzli"))) { if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-1tnc64v"))) {
attr_dev(button, "class", button_class_value); attr_dev(button, "class", button_class_value);
} }
@@ -3188,7 +3188,7 @@ var app = (function () {
attr_dev(div2, "class", "chat_item chat_panel chat_panel_home"); attr_dev(div2, "class", "chat_item chat_panel chat_panel_home");
attr_dev(div2, "id", "chat_panel_home"); attr_dev(div2, "id", "chat_panel_home");
add_location(div2, file$d, 18, 1, 410); add_location(div2, file$d, 18, 1, 410);
attr_dev(div3, "class", "grid_box svelte-1tjf2m9"); attr_dev(div3, "class", "grid_box svelte-qfa864");
add_location(div3, file$d, 6, 0, 81); add_location(div3, file$d, 6, 0, 81);
}, },
l: function claim(nodes) { l: function claim(nodes) {

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

@@ -29,6 +29,8 @@
button.grid#settings {grid-area: settings;} button.grid#settings {grid-area: settings;}
*/ */
/* default config
*/
button { button {
display: flex; display: flex;
width: auto; width: auto;
@@ -59,5 +61,6 @@
} }
*/ */
</style> </style>

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

@@ -51,30 +51,27 @@
} }
/* button "new" appearance /* button "new"
*/ */
/* add or remove '.chat_item' to toggle the hover effect */ .grid_box :global(button#chat_new:not(:hover)) {
#chat_box.home button.chat_new {
width: auto;
background-color: transparent; background-color: transparent;
} }
/* button "settings" as 3 dots /* button "settings" as 3 dots
*/ */
#chat_box.home .chat_item#chat_settings p { .grid_box :global(button#chat_settings p) {
display: none; display: none;
} }
#chat_box.home button.chat_item#chat_settings { .grid_box :global(button#chat_settings) {
width: 30px; width: 30px;
height: 100%; height: 100%;
padding: 0px; padding: 0px;
} }
/* add or remove '.chat_item' to toggle the hover effect */ .grid_box :global(button#chat_settings:not(:hover)) {
#chat_box.home button.chat_item#chat_settings {
background-color: transparent; background-color: transparent;
} }
#chat_box.home .chat_item#chat_settings::after { .grid_box :global(button#chat_settings::after) {
content: '\2807'; content: '\2807';
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;