diff options
| -rw-r--r-- | client-web/source/index.ts | 4 | ||||
| -rw-r--r-- | client-web/style/chat.sass | 19 | ||||
| -rw-r--r-- | client-web/style/master.sass | 1 | ||||
| -rw-r--r-- | client-web/style/side.sass | 23 |
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 |