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

created some utilities class styling

Browse Source
This commit is contained in:
simplonco
2022-12-25 23:04:50 +01:00
parent ebf5d72116
commit bf4326f7ff
12 changed files with 1554 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,16 +41,6 @@
- WRITE
--------------------------------- -->
<!-- PROTECTED -->
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
<p class="__center" id="chat_protected_title">this room is protected</p>
<form>
<label for="chat_pswd"><p>password :</p></label>
<input id="chat_pswd" type="password" required>
<input type="submit" value="&#x2BA1">
</form>
</div>
<!-- CREATE -->
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
<form>

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

@@ -7,6 +7,7 @@
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';
export let color = "transparent";
@@ -33,7 +34,7 @@
layout room
layout new
layout settings
layout room_set
layout room_set
layout protected
layout create
layout mute
@@ -59,6 +60,9 @@
{:else if layout === "room_set"}
<RoomsetLayout bind:layout back={layouts[1]} />
{:else if layout === "protected"}
<ProtectedLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">
@@ -161,13 +165,6 @@
}
/* all panels
*/
#chat_box :global(.chat_panel) {
overflow-y: scroll;
}
/* all p
*/
#chat_box :global(.grid_box p) {
@@ -183,7 +180,7 @@
*/
/* show child only if it's alone
/* __show_if_only_child
*/
#chat_box :global(.__show_if_only_child) {
display: none;
@@ -194,11 +191,34 @@
}
/* center text
/* __center
*/
#chat_box :global(.__center) {
margin: auto;
}
/* __border_top
*/
#chat_box :global(.__border_top) {
border-top: 1px solid black;
}
/* __top
*/
#chat_box :global(.__top > *) {
margin-top: 10px;
margin-bottom: 10px;
}
/* __overflow_y_scroll
*/
#chat_box :global(.__overflow_y_scroll) {
overflow-y: scroll;
}
</style>

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

@@ -24,14 +24,13 @@
</Button>
<!-- panel home -->
<div class="chat_panel panel_home">
<div class="panel_home __overflow_y_scroll __border_top __top">
<p class="title">list of your rooms :</p>
<div class="room_list">
<div class="__show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
</div>
<!-- placeholders
------------- -->
<Button bind:layout new_layout="room" my_class="list">
a room
</Button>
@@ -41,6 +40,7 @@
<Button bind:layout new_layout="room" my_class="list">
placeholder
</Button>
------------- -->
<!-- END placeholders -->
</div>
</div>
@@ -65,9 +65,6 @@
/* panel home
*/
.panel_home {
border-top: 1px solid black;
}
.panel_home p.title {
margin: 10px auto 0px auto;
}

13
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
View File

@@ -25,7 +25,7 @@
</Button>
<!-- panel_new -->
<div class="chat_panel panel_new">
<div class="panel_new __overflow_y_scroll __border_top __top">
<Button bind:layout new_layout="create" my_class="create">
create
</Button>
@@ -85,17 +85,6 @@
}
/* panel_new
*/
.panel_new {
border-top: 1px solid black;
}
:global(#chat_box) .panel_new > :global(*) {
margin-top: 10px;
margin-bottom: 0px;
}
/* button "create" appearance
*/
button.create {

64
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script>
import Button from './Chat_button.svelte';
export let layout = "";
export let back = "";
</script>
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- room_name -->
<Button my_class="deactivate">
&lt;room_name&gt;
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_protected -->
<div class="panel_protected __overflow_y_scroll __border_top __top">
<p class="title __center">this room is protected</p>
<form>
<label for="chat_pswd"><p>password :</p></label>
<input id="chat_pswd" type="password" required>
<input type="submit" value="&#x2BA1">
</form>
</div>
</div>
<style>
/* grid layout "room_set"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_protected) {grid-area: panel_protected;}
#chat_box.protected {
grid:
' back room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
/ auto 1fr auto ;
}
.title {
margin-top: 30px;
}
</style>

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -15,7 +15,7 @@
</Button>
<!-- room_name -->
<Button bind:layout new_layout="room_set" my_class="room_name transparent">
<Button bind:layout new_layout="room_set" my_class="transparent">
&lt;room_name&gt;
</Button>
@@ -89,14 +89,6 @@
}
/* button "<room_name>" appearance
*/
#chat_box.room button.chat_room_name {
width: auto;
background-color: transparent;
}
/* write area
*/
:global(#chat_box) .panel_write {

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

@@ -15,7 +15,7 @@
</Button>
<!-- room_name -->
<Button my_class="new deactivate">
<Button my_class="deactivate">
&lt;room_name&gt;
</Button>
@@ -25,7 +25,7 @@
</Button>
<!-- panel_room_set -->
<div class="chat_panel panel_room_set">
<div class="panel_room_set __overflow_y_scroll __border_top __top">
<Button bind:layout new_layout="create" my_class="create">
leave
</Button>
@@ -71,17 +71,6 @@
}
/* panel room_set
*/
.panel_room_set {
border-top: 1px solid black;
}
:global(#chat_box) .panel_room_set > :global(*) {
margin-top: 10px;
margin-bottom: 0px;
}
</style>

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

@@ -15,7 +15,7 @@
</Button>
<!-- settings -->
<Button my_class="new deactivate">
<Button my_class="deactivate">
settings
</Button>
@@ -25,7 +25,7 @@
</Button>
<!-- panel_settings -->
<div class="chat_panel panel_settings">
<div class="panel_settings __overflow_y_scroll __border_top __top">
<p>blocked users :</p>
<div class="blocked_users">
<div class="__show_if_only_child">
@@ -47,8 +47,19 @@
------------- -->
<!-- END placeholders -->
</div>
</div>
<!-- TEMP for test -->
<Button bind:layout new_layout="close" >close</Button>
<Button bind:layout new_layout="home" >home</Button>
<Button bind:layout new_layout="room" >room</Button>
<Button bind:layout new_layout="new" >new</Button>
<Button bind:layout new_layout="settings" >settings</Button>
<Button bind:layout new_layout="room_set" >room_set</Button>
<Button bind:layout new_layout="protected">protected</Button>
<Button bind:layout new_layout="create" >create</Button>
<Button bind:layout new_layout="mute" >mute</Button>
<Button bind:layout new_layout="user" >user</Button>
</div>
</div>
@@ -68,12 +79,6 @@
}
/* panel_settings
*/
.panel_settings {
border-top: 1px solid black;
}
</style>

36
srcs/requirements/svelte/api_front/src/styles/chat/layout_protected.css
View File

@@ -1,36 +0,0 @@
#chat_box.protected {
grid:
' back room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
/ auto 1fr auto ;
}
#chat_box.protected .chat_item#chat_back,
#chat_box.protected .chat_item#chat_room_name,
#chat_box.protected .chat_item#chat_close,
#chat_box.protected .chat_item#chat_panel_protected {
display: flex;
}
/* back btn
*/
#chat_box.protected .chat_item.chat_back button.back_new {
display: flex;
}
/* button "<room_name>" appearance
add or remove '.chat_item' to toggle the hover effect
*/
#chat_box.protected button.chat_item.chat_room_name {
width: auto;
background-color: transparent;
pointer-events: none;
}
#chat_box #chat_protected_title {
margin-top: 30px;
}