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

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

@@ -22,6 +22,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;}
*/
button {
display: flex;
width: auto;

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

@@ -55,28 +55,6 @@
- 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 -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<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 Button from './Buttons.svelte';
//export let bg_color = "transparent";
let room = "";
let admin = false;
let last_layout = "";
@@ -29,44 +31,53 @@
</script>
<div class={layout} id="chat_box">
{#if layout === "home"}
<HomeLayout bind:layout={layout} />
{:else}
<Button bind:layout new_layout="home" my_class="chat_item" my_id="#chat_chat">
chat
</Button>
<div class="grid_box">
<Button bind:layout new_layout="home" my_class="chat_item" my_id="chat_chat">
chat
</Button>
</div>
{/if}
</div>
<style>
/* chat_box default style
/* chat_box and default style
*/
#chat_box {
display: grid;
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid black;
/*
background-color: {bg_color};
*/
background-color: bisque;
}
/* style if chat_box is closed
*/
#chat_box.close {
#chat_box.close .grid_box {
gap: 0px;
padding: 0px;
width: auto;
height: auto;
grid:
' chat ' auto
/ auto ;
}
#chat_box.close {
padding: 0px;
width: auto;
height: auto;
}
@@ -74,9 +85,16 @@
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;
flex-direction: column;
position: relative;
@@ -84,24 +102,23 @@
padding: 0px;
margin: auto;
}
:global(#chat_box .chat_item) {
display: flex;
: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;}
@@ -115,7 +132,7 @@
/* all p
*/
:global(#chat_box p) {
:global(#chat_box .grid_box p) {
padding: 10px;
font-size: 15px;
}

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

@@ -4,10 +4,88 @@
export let layout;
</script>
<Button bind:layout new_layout="close" my_class="chat_item" my_id="#chat_close">
home
</Button>
<div class="grid_box">
<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>
/*
*/
.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>

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;
*/
}