chat almost works too

4 files changed, 23 insertions, 24 deletions

diff --git a/client-web/source/index.ts b/client-web/source/index.ts
index 859329a..2ec6a1c 100644
--- a/client-web/source/index.ts
+++ b/client-web/source/index.ts
@@ -6,7 +6,7 @@
 /// <reference lib="dom" />
 
 import { init_serviceworker } from "./sw/client.ts";
-import { ediv, enav } from "./helper.ts";
+import { ediv } from "./helper.ts";
 import { setup_keybinds } from "./keybinds.ts";
 import { log, LOGGER_CONTAINER } from "./logger.ts"
 import { load_params, PREFS } from "./preferences/mod.ts";
@@ -83,7 +83,7 @@ export async function main() {
 
     setup_keybinds(r)
     r.on_ready = () => {
-        const sud = enav({ class: "side-ui" })
+        const sud = ediv({ class: "side-ui" })
         const center = ediv({ class: "main" }, r.element, info_br(), sud)
         document.body.append(center, control_bar(r, sud))
     }
diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass
index b877333..800e729 100644
--- a/client-web/style/chat.sass
+++ b/client-web/style/chat.sass
@@ -4,18 +4,8 @@
  Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
 
 .chat
-    position: fixed
-    z-index: 70
-
-    right: 1em
-    bottom: 5em
-
-    width: min(30em, 50vw)
-    height: min(50em, 70vh)
-
-    background-color: var(--bg)
-    border-radius: 1em
-    padding: 2em
+    display: flex
+    flex-direction: column
 
     .message
         margin: 0.2em
@@ -28,11 +18,14 @@
         max-height: 50em // TODO squishes the image if too high
 
     .messages
-        height: calc(100% - 3em)
+        flex: 1
         width: 100%
         overflow: scroll
+
     .controls
+        flex: 0
         padding: 1em
+    
     input
         font-size: x-large
         width: 100%
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index 67313b9..f818e68 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -47,7 +47,6 @@ body
 .control-bar
     flex: 0
 
-
 h1
     text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
     font-size: 5em
diff --git a/client-web/style/side.sass b/client-web/style/side.sass
index 0f4e97c..89679f8 100644
--- a/client-web/style/side.sass
+++ b/client-web/style/side.sass
@@ -1,25 +1,32 @@
 
-.side-ui 
+.side-ui
     flex: 0
-    >div
-        width: 50em
+    >*
+        height: 100%
+        padding: 2em
+        background-color: var(--bg)
         float: right
 
-    >div.animate-in
+    >.animate-in
         animation-name: side-slide-in
-        animation-duration: 0.5s
-    >div.animate-out
+        animation-duration: 0.3s
+    >.animate-out
         animation-name: side-slide-out
-        animation-duration: 0.5s
+        animation-duration: 0.3s
+        transform: translateX(100%)
 
 @keyframes side-slide-in
     from
         transform: translateX(100%)
     to
         transform: translateX(0%)
-
 @keyframes side-slide-out
     from
         transform: translateX(0%)
     to
         transform: translateX(100%)
+
+.preferences
+    width: 50em
+.chat
+    width: 30em