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

svelte architecture separation of global css and layouts and websockets init

Browse Source
This commit is contained in:
simplonco
2022-12-28 18:43:14 +01:00
parent 2c61864551 2e10bbf9f0
commit cad9dd464c
11 changed files with 1477 additions and 1125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -112,6 +112,7 @@
- [websocket rfc](https://www.rfc-editor.org/rfc/rfc6455.html) - [websocket rfc](https://www.rfc-editor.org/rfc/rfc6455.html)
- [ws doc npm](https://www.npmjs.com/package/ws) - [ws doc npm](https://www.npmjs.com/package/ws)
- [exemple chat implementation](https://github.com/mdn/samples-server/tree/master/s/websocket-chat) - [exemple chat implementation](https://github.com/mdn/samples-server/tree/master/s/websocket-chat)
- [websocket and nginx](https://www.nginx.com/blog/websocket-nginx/)
### css ### css
- [separation of concern](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) - [separation of concern](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

7
srcs/requirements/nestjs/api_back/src/chat/chat.gateway.ts
View File

@@ -8,11 +8,8 @@ import {
} from '@nestjs/websockets'; } from '@nestjs/websockets';
@WebSocketGateway({ @WebSocketGateway(5000, {
path: '/api/v2/chat', path: '/chat',
cors: {
origin: '*',
},
}) })
export class ChatGateway implements OnGatewayConnection { export class ChatGateway implements OnGatewayConnection {
@WebSocketServer() @WebSocketServer()

12
srcs/requirements/nginx/conf/default.conf
View File

@@ -12,16 +12,12 @@ server {
proxy_pass http://backend_dev:3000; proxy_pass http://backend_dev:3000;
} }
location /chat { location /chat {
# proxy_set_header Host $host; proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-Proto $scheme;
# proxy_pass http://backend_dev:8080/api/v2/chat;
proxy_pass http://backend_dev:8080/api/v2/chat;
proxy_http_version 1.1; proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade; proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade; proxy_set_header Connection "upgrade";
proxy_set_header Host $host; proxy_pass http://backend_dev:5000/chat;
} }
location / { location / {
proxy_set_header Host $host; proxy_set_header Host $host;

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

@@ -28,4 +28,5 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
/ auto 1fr auto }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::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.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}.grid_box.svelte-1fj8iha .back {grid-area:back}.grid_box.svelte-1fj8iha .user {grid-area:user}.grid_box.svelte-1fj8iha .close {grid-area:close}.grid_box.svelte-1fj8iha .room_name {grid-area:room_name}.grid_box.svelte-1fj8iha .panel_user{grid-area:panel_user}.grid_box.svelte-1fj8iha{grid:' back user close ' auto / auto 1fr auto }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::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.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}.grid_box.svelte-1fj8iha .back {grid-area:back}.grid_box.svelte-1fj8iha .user {grid-area:user}.grid_box.svelte-1fj8iha .close {grid-area:close}.grid_box.svelte-1fj8iha .room_name {grid-area:room_name}.grid_box.svelte-1fj8iha .panel_user{grid-area:panel_user}.grid_box.svelte-1fj8iha{grid:' back user close ' auto
' room_name room_name room_name ' auto ' room_name room_name room_name ' auto
' panel_user panel_user panel_user ' 1fr ' panel_user panel_user panel_user ' 1fr
/ auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin:5px auto;padding:5px;border-radius:5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-14xxpbz p.svelte-14xxpbz{padding:0px}.chat_msg.svelte-14xxpbz p.name.svelte-14xxpbz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:5px 0px}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz *{display:inline}.chat_msg.me.svelte-14xxpbz.svelte-14xxpbz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz.svelte-14xxpbz{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)} / auto 1fr auto }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin:5px auto;padding:5px;border-radius:5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-14xxpbz p.svelte-14xxpbz{padding:0px}.chat_msg.svelte-14xxpbz p.name.svelte-14xxpbz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:5px 0px}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz *{display:inline}.chat_msg.me.svelte-14xxpbz.svelte-14xxpbz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz.svelte-14xxpbz{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm{display:flex;position:fixed;bottom:20px;right:20px;padding:0px;width:auto;height:auto;border:1px solid black}.chat_box.svelte-auy6qm *{-ms-overflow-style:none;scrollbar-width:none}.chat_box.svelte-auy6qm *::-webkit-scrollbar{display:none}.chat_box.svelte-auy6qm .grid_box{display:grid;margin:5px;gap:5px;width:300px;height:400px}.chat_box.svelte-auy6qm .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}.chat_box.svelte-auy6qm .grid_box p{padding:10px;font-size:15px}.chat_box.svelte-auy6qm .panel{overflow-y:scroll}.chat_box.svelte-auy6qm .panel > *{margin-top:10px;margin-bottom:10px}.chat_box.svelte-auy6qm .__show_if_only_child{display:none}.chat_box.svelte-auy6qm .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__center{margin-left:auto;margin-right:auto}.chat_box.svelte-auy6qm .__border_top{border-top:1px solid black}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_show{display:flex}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block,.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block *{pointer-events:none;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__to_show{display:none}.grid_box.svelte-fc4a40 .chat{grid-area:chat}.grid_box.svelte-fc4a40{gap:0px;grid:' chat ' auto
/ auto }.chat_box.close .grid_box.svelte-fc4a40{margin:0px;width:auto;height:auto}.chat_box.svelte-auy6qm{display:flex;position:fixed;bottom:20px;right:20px;padding:0px;width:auto;height:auto;border:1px solid black}.chat_box.svelte-auy6qm *{-ms-overflow-style:none;scrollbar-width:none}.chat_box.svelte-auy6qm *::-webkit-scrollbar{display:none}.chat_box.svelte-auy6qm .grid_box{display:grid;margin:5px;gap:5px;width:300px;height:400px}.chat_box.svelte-auy6qm .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}.chat_box.svelte-auy6qm .grid_box p{padding:10px;font-size:15px}.chat_box.svelte-auy6qm .panel{overflow-y:scroll}.chat_box.svelte-auy6qm .panel > *{margin-top:10px;margin-bottom:10px}.chat_box.svelte-auy6qm .__show_if_only_child{display:none}.chat_box.svelte-auy6qm .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__center{margin-left:auto;margin-right:auto}.chat_box.svelte-auy6qm .__border_top{border-top:1px solid black}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_show{display:flex}.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block,.chat_box.svelte-auy6qm .__check_change_next:checked ~ .__to_block *{pointer-events:none;color:rgb(100, 100, 100)}.chat_box.svelte-auy6qm .__to_show{display:none}

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

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

@@ -1,19 +1,8 @@
<script lang="ts"> <script lang="ts">
import Debug from './tmp_debug.svelte'; import Layouts from './Chat_layouts.svelte';
export let color = "transparent";
import Button from './Chat_button.svelte';
import HomeLayout from './Layout_home.svelte';
import RoomLayout from './Layout_room.svelte';
import NewLayout from './Layout_new.svelte';
import SettingsLayout from './Layout_settings.svelte';
import RoomsetLayout from './Layout_room_set.svelte';
import ProtectedLayout from './Layout_protected.svelte';
import CreateLayout from './Layout_create.svelte';
import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte';
/* web sockets with socket.io /* web sockets with socket.io
*/ */
@@ -61,207 +50,9 @@
}); });
}); });
/* global variables
*/
export let color = "transparent";
let room = "";
let admin = false;
let layout = "close";
let layouts = ["home", "home"];
/* hold previous version of layout, to go back
*/
function set_layouts(layout)
{
if (layout === "close")
return;
if (layout === layouts[0])
return;
if (layout === layouts[1])
layouts = [layout, "home"];
else
layouts = [layout, layouts[0]];
}
$: set_layouts(layout);
</script> </script>
<div class="{layout} chat_box" style="background-color: {color};"> <Layouts color={color} />
{#if layout === "home"} <style></style>
<HomeLayout bind:layout />
{:else if layout === "room"}
<RoomLayout bind:layout back={layouts[1]} />
{:else if layout === "new"}
<NewLayout bind:layout back={layouts[1]} />
{:else if layout === "settings"}
<SettingsLayout bind:layout back={layouts[1]} />
{:else if layout === "room_set"}
<RoomsetLayout bind:layout back={layouts[1]} />
{:else if layout === "protected"}
<ProtectedLayout bind:layout back={layouts[1]} />
{:else if layout === "create"}
<CreateLayout bind:layout back={layouts[1]} />
{:else if layout === "mute"}
<MuteLayout bind:layout back={layouts[1]} />
{:else if layout === "user"}
<UserLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
chat
</Button>
</div>
{/if}
</div>
<!-- TMP DEBUG -->
<Debug bind:layout />
<style>
/* chat_box and default style
*/
.chat_box {
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
}
/* style if chat_box is closed
*/
.chat {grid-area: chat;}
.chat_box.close .grid_box {
gap: 0px;
grid:
' chat ' auto
/ auto ;
}
.chat_box.close {
padding: 0px;
width: auto;
height: auto;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL STYLES
*/
/* Hide scrollbar
*/
.chat_box :global(*) {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat_box :global(*::-webkit-scrollbar) {
display: none; /* Chrome, Safari and Opera */
}
/* 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 p
*/
.chat_box :global(.grid_box p) {
padding: 10px;
font-size: 15px;
}
/* all panel
*/
.chat_box :global(.panel) {
overflow-y: scroll;
}
.chat_box :global(.panel > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL UTILITIES
*/
/* __show_if_only_child
*/
.chat_box :global(.__show_if_only_child) {
display: none;
}
.chat_box :global(.__show_if_only_child:only-child) {
display: flex;
color: rgb(100, 100, 100);
}
/* __center
*/
.chat_box :global(.__center) {
margin-left: auto;
margin-right: auto;
}
/* __border_top
*/
.chat_box :global(.__border_top) {
border-top: 1px solid black;
}
/* __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>

132
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte Normal file
View File

@@ -0,0 +1,132 @@
<script lang="ts">
export let color;
export let layout;
</script>
<div class="{layout} chat_box" style="background-color: {color};">
<slot></slot>
</div>
<style>
/* chat_box and default style
*/
.chat_box {
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
padding: 0px;
width: auto;
height: auto;
border: 1px solid black;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL STYLES
*/
/* Hide scrollbar
*/
.chat_box :global(*) {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat_box :global(*::-webkit-scrollbar) {
display: none; /* Chrome, Safari and Opera */
}
/* for grid_box and all childrens
*/
.chat_box :global(.grid_box) {
display: grid;
margin: 5px;
gap: 5px;
width: 300px;
height: 400px;
}
.chat_box :global(.grid_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
/* all p
*/
.chat_box :global(.grid_box p) {
padding: 10px;
font-size: 15px;
}
/* all panel
*/
.chat_box :global(.panel) {
overflow-y: scroll;
}
.chat_box :global(.panel > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL UTILITIES
*/
/* __show_if_only_child
*/
.chat_box :global(.__show_if_only_child) {
display: none;
}
.chat_box :global(.__show_if_only_child:only-child) {
display: flex;
color: rgb(100, 100, 100);
}
/* __center
*/
.chat_box :global(.__center) {
margin-left: auto;
margin-right: auto;
}
/* __border_top
*/
.chat_box :global(.__border_top) {
border-top: 1px solid black;
}
/* __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>

203
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
View File

@@ -3,8 +3,9 @@
import Debug from './tmp_debug.svelte'; import Debug from './tmp_debug.svelte';
import Button from './Chat_button.svelte'; import ChatBox from './Chat_box_css.svelte';
import CloseLayout from './Layout_close.svelte';
import HomeLayout from './Layout_home.svelte'; import HomeLayout from './Layout_home.svelte';
import RoomLayout from './Layout_room.svelte'; import RoomLayout from './Layout_room.svelte';
import NewLayout from './Layout_new.svelte'; import NewLayout from './Layout_new.svelte';
@@ -15,55 +16,11 @@
import MuteLayout from './Layout_mute.svelte'; import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte'; import UserLayout from './Layout_user.svelte';
/* web sockets with socket.io import Button from './Chat_button.svelte';
*/
import { onMount } from 'svelte';
import io from 'socket.io-client';
const socket = io('http://transcendance:8080', {
path: '/chat/socket.io'
});
onMount(async => {
socket.on('connect', function(){
console.log("socket.io connected");
});
socket.on('disconnect', function(){
console.log("socket.io disconnected");
});
socket.on('connect_error', function(){
console.log("socket.io connect_error");
});
socket.on('connect_timeout', function(){
console.log("socket.io connect_timeout");
});
socket.on('error', function(){
console.log("socket.io error");
});
socket.on('reconnect', function(){
console.log("socket.io reconnect");
});
socket.on('reconnect_attempt', function(){
console.log("socket.io reconnect_attempt");
});
socket.on('reconnecting', function(){
console.log("socket.io reconnecting");
});
socket.on('reconnect_error', function(){
console.log("socket.io reconnect_error");
});
socket.on('reconnect_failed', function(){
console.log("socket.io reconnect_failed");
});
socket.on('ping', function(){
console.log("socket.io ping");
});
socket.on('pong', function(){
console.log("socket.io pong");
});
});
/* global variables /* global variables
*/ */
export let color = "transparent"; export let color;
let room = ""; let room = "";
let admin = false; let admin = false;
let layout = "close"; let layout = "close";
@@ -86,11 +43,14 @@
</script> </script>
<div class="{layout} chat_box" style="background-color: {color};"> <ChatBox layout={layout} color={color}>
{#if layout === "home"} {#if layout === "home"}
<HomeLayout bind:layout /> <HomeLayout bind:layout />
{:else if layout === "close"}
<CloseLayout bind:layout />
{:else if layout === "room"} {:else if layout === "room"}
<RoomLayout bind:layout back={layouts[1]} /> <RoomLayout bind:layout back={layouts[1]} />
@@ -115,153 +75,12 @@
{:else if layout === "user"} {:else if layout === "user"}
<UserLayout bind:layout back={layouts[1]} /> <UserLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
chat
</Button>
</div>
{/if} {/if}
</div> </ChatBox>
<!-- TMP DEBUG --> <!-- TMP DEBUG -->
<Debug bind:layout /> <Debug bind:layout bind:layouts />
<style> <style></style>
/* chat_box and default style
*/
.chat_box {
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
}
/* style if chat_box is closed
*/
.chat {grid-area: chat;}
.chat_box.close .grid_box {
gap: 0px;
grid:
' chat ' auto
/ auto ;
}
.chat_box.close {
padding: 0px;
width: auto;
height: auto;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL STYLES
*/
/* Hide scrollbar
*/
.chat_box :global(*) {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat_box :global(*::-webkit-scrollbar) {
display: none; /* Chrome, Safari and Opera */
}
/* 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 p
*/
.chat_box :global(.grid_box p) {
padding: 10px;
font-size: 15px;
}
/* all panel
*/
.chat_box :global(.panel) {
overflow-y: scroll;
}
.chat_box :global(.panel > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL UTILITIES
*/
/* __show_if_only_child
*/
.chat_box :global(.__show_if_only_child) {
display: none;
}
.chat_box :global(.__show_if_only_child:only-child) {
display: flex;
color: rgb(100, 100, 100);
}
/* __center
*/
.chat_box :global(.__center) {
margin-left: auto;
margin-right: auto;
}
/* __border_top
*/
.chat_box :global(.__border_top) {
border-top: 1px solid black;
}
/* __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>

137
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte Normal file
View File

@@ -0,0 +1,137 @@
<script>
import Button from './Chat_button.svelte';
export let layout;
</script>
<div class="grid_box">
<Button bind:layout new_layout="home" my_class="chat">
chat
</Button>
</div>
<style>
/* layout "close"
*/
.grid_box :global(.chat) {grid-area: chat;}
.grid_box {
gap: 0px;
grid:
' chat ' auto
/ auto ;
}
:global(.chat_box.close) .grid_box {
margin: 0px;
width: auto;
height: auto;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL STYLES
*/
/* Hide scrollbar
*/
.chat_box :global(*) {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat_box :global(*::-webkit-scrollbar) {
display: none; /* Chrome, Safari and Opera */
}
/* 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 p
*/
.chat_box :global(.grid_box p) {
padding: 10px;
font-size: 15px;
}
/* all panel
*/
.chat_box :global(.panel) {
overflow-y: scroll;
}
.chat_box :global(.panel > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* * * * * * * * * * * * * * * * * * * * *
GLOBAL UTILITIES
*/
/* __show_if_only_child
*/
.chat_box :global(.__show_if_only_child) {
display: none;
}
.chat_box :global(.__show_if_only_child:only-child) {
display: flex;
color: rgb(100, 100, 100);
}
/* __center
*/
.chat_box :global(.__center) {
margin-left: auto;
margin-right: auto;
}
/* __border_top
*/
.chat_box :global(.__border_top) {
border-top: 1px solid black;
}
/* __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>

5
srcs/requirements/svelte/api_front/src/pieces/chat/tmp_debug.svelte
View File

@@ -1,5 +1,8 @@
<script> <script>
export let layout;
export let layout = "";
export let layouts = [];
</script> </script>
<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;"> <div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">