From e18010a1efc8d88a56fc60732393d5e60bd3ba5e Mon Sep 17 00:00:00 2001 From: lenovo Date: Wed, 14 Dec 2022 20:32:41 +0100 Subject: [PATCH] wip style of chat layouts, alreade done home and room --- docs/transcendence_chat.drawio.html | 2 +- .../svelte/api_front/public/build/bundle.css | 4 +- tests_hugo/chat_node/chat_client/chat.html | 78 +++++++++++------ .../chat_node/chat_client/chat_add_msg.js | 2 +- .../chat_client/style/_chat_thread.css | 85 ------------------- .../chat_node/chat_client/style/chat.css | 25 +++--- .../chat_client/style/chat__global.css | 3 + .../chat_node/chat_client/style/chat_back.css | 4 +- .../chat_client/style/chat_buttons.css | 7 +- .../chat_client/style/chat_close.css | 20 +++++ .../chat_node/chat_client/style/chat_msg.css | 73 ++++++++++++++++ .../style/{_chat_write.css => chat_write.css} | 6 +- .../chat_client/style/layout_home.css | 40 +++++++++ .../chat_client/style/layout_new.css | 8 ++ .../chat_client/style/layout_room.css | 22 +++-- .../chat_client/style/layout_settings.css | 1 + 16 files changed, 240 insertions(+), 140 deletions(-) delete mode 100644 tests_hugo/chat_node/chat_client/style/_chat_thread.css create mode 100644 tests_hugo/chat_node/chat_client/style/chat__global.css create mode 100644 tests_hugo/chat_node/chat_client/style/chat_close.css create mode 100644 tests_hugo/chat_node/chat_client/style/chat_msg.css rename tests_hugo/chat_node/chat_client/style/{_chat_write.css => chat_write.css} (68%) diff --git a/docs/transcendence_chat.drawio.html b/docs/transcendence_chat.drawio.html index 1f8be42d..01e30d92 100644 --- a/docs/transcendence_chat.drawio.html +++ b/docs/transcendence_chat.drawio.html @@ -6,7 +6,7 @@ -
+
diff --git a/srcs/requirements/svelte/api_front/public/build/bundle.css b/srcs/requirements/svelte/api_front/public/build/bundle.css index 8915ac39..c697a1d2 100644 --- a/srcs/requirements/svelte/api_front/public/build/bundle.css +++ b/srcs/requirements/svelte/api_front/public/build/bundle.css @@ -1,4 +1,4 @@ -.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'), +.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'), url('/fonts/Bondi.ttf.svg#Bondi') format('svg'), url('/fonts/Bondi.ttf.eot'), - url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3} \ No newline at end of file + url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3} \ No newline at end of file diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html index a7ac2888..97aed3b3 100644 --- a/tests_hugo/chat_node/chat_client/chat.html +++ b/tests_hugo/chat_node/chat_client/chat.html @@ -21,25 +21,42 @@
- - - - - - -

create

-

placeholder

-
-
- - - - + + + + + + +

create

+

placeholder

+ + + + + -
+ +
+
+ +
+

bob

+

hello

+
+
+

me

+

hello

+
+ +
+
+ +

you don't have any chat yet

@@ -57,41 +74,50 @@
-
- - panel room -
-
+ +
panel new
-
+ +
panel settings
-
+ +
panel room settings
-
+ +
panel protected
-
+ +
panel create
-
+ +
panel user
-
+ +
panel mute
+
+
+
+ +