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

wip css organisation for chat

Browse Source
This commit is contained in:
simplonco
2022-12-25 00:34:33 +01:00
parent 06bca96853
commit 4f0d1be6e3
8 changed files with 298 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@
-->
<script lang="ts">
export let my_id = "";
export let my_class = "";
export let layout = "";
@@ -14,6 +15,7 @@
layout = new_layout;
console.log(layout);
}
</script>
<button class={my_class} id={my_id} on:click={update_layout}>
@@ -22,18 +24,13 @@
<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;}
*/
/* default config
*/
button {
display: flex;
width: auto;
padding: 0px;
margin: auto;
width: 100%;
cursor: pointer;
outline: none;
border: none;
@@ -41,6 +38,7 @@
}
button p {
width: 100%;
margin: auto;
text-align: center;
}
button:hover {
@@ -51,15 +49,10 @@
}
/* for btn list
add or remove '.btn' to toggle the hover effect
.list_btn button {
margin: 0px;
background-color: transparent;
}
.list_btn {
*/
button.list:not(:hover) {
background-color: rgb(240, 240, 240);
}
*/
</style>

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

@@ -67,6 +67,7 @@
/* style if chat_box is closed
*/
#chat_box .chat_item#chat_chat {grid-area: chat;}
#chat_box.close .grid_box {
gap: 0px;
grid:
@@ -87,38 +88,31 @@
/* for grid_box and all childrens
*/
:global(#chat_box .grid_box) {
#chat_box :global(.grid_box) {
display: grid;
margin: 0px;
gap: 5px;
width: 100%;
height: 100%;
}
:global(#chat_box .grid_box *) {
#chat_box :global(.grid_box *) {
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
padding: 0px;
margin: auto;
}
:global(#chat_box .grid_box .chat_item) {
width: 100%;
height: 100%;
}
/* all grid elements names
*/
: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_new ){grid-area: new;}
: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_new ){grid-area: new;}
: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_send ){grid-area: send;}
: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_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_msg ){grid-area: panel_msg;}
:global(#chat_box .chat_item#chat_panel_write ){grid-area: panel_write;}
@@ -128,11 +122,17 @@
:global(#chat_box .chat_item#chat_panel_create ){grid-area: panel_create;}
:global(#chat_box .chat_item#chat_panel_user ){grid-area: panel_user;}
:global(#chat_box .chat_item#chat_panel_mute ){grid-area: panel_mute;}
*/
/* all panels
*/
#chat_box :global(.chat_panel) {
overflow-y: scroll;
}
/* all p
*/
:global(#chat_box .grid_box p) {
#chat_box :global(.grid_box p) {
padding: 10px;
font-size: 15px;
}

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

@@ -16,7 +16,7 @@
close
</Button>
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<div class="chat_item chat_panel" 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">
@@ -24,15 +24,15 @@
</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>
<Button bind:layout new_layout="room" my_class="list">
a room
</Button>
<Button bind:layout new_layout="room" my_class="list">
another room
</Button>
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
<!-- END placeholders -->
</div>
</div>
@@ -41,16 +41,19 @@
<style>
/*
/* grid layout "home"
*/
.grid_box :global(.chat_item#chat_settings ) {grid-area: settings;}
.grid_box :global(.chat_item#chat_close ) {grid-area: close;}
.grid_box :global(.chat_item#chat_new ) {grid-area: new;}
.grid_box :global(.chat_item#chat_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 ;
}
/* button "new"
*/
.grid_box :global(button#chat_new:not(:hover)) {
@@ -63,10 +66,9 @@
.grid_box :global(button#chat_settings p) {
display: none;
}
.grid_box :global(button#chat_settings) {
:global(#chat_box) .grid_box :global(button#chat_settings) {
width: 30px;
height: 100%;
padding: 0px;
}
.grid_box :global(button#chat_settings:not(:hover)) {
background-color: transparent;
@@ -84,5 +86,12 @@
cursor: pointer;
}
/* panel home
#panel_home > * {
margin: 0px;
}
*/
</style>

3
srcs/requirements/svelte/api_front/src/styles/chat/chat_panels.css
View File

@@ -1,3 +0,0 @@
#chat_box .chat_panel {
overflow-y: scroll;
}

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