soktdeer wl client

From db84220e2bc60b637cc5736c556e2c0bc34d6ae3 Mon Sep 17 00:00:00 2001 From: WlodekM Date: Sat, 30 Nov 2024 20:15:09 +0200 Subject: use less, topbar (wip) also warkdown --- index.html | 11 ++++++- pages/login/page.js | 1 + pages/main/page.js | 23 ++++++++------ shitstylse.css | 75 -------------------------------------------- styles.less | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 114 insertions(+), 85 deletions(-) delete mode 100644 shitstylse.css create mode 100644 styles.less diff --git a/index.html b/index.html index a094a56..8c9eccc 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,18 @@ soktdeer wl client - + + +

diff --git a/pages/login/page.js b/pages/login/page.js index f0c5994..dcc6f20 100644 --- a/pages/login/page.js +++ b/pages/login/page.js @@ -8,6 +8,7 @@ export function onload() { ev.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; + document.getElementById('topbar').classList.remove('hidden') try { await stores.sdlib.login(username, password) } catch (error) { diff --git a/pages/main/page.js b/pages/main/page.js index bd51d53..9edb966 100644 --- a/pages/main/page.js +++ b/pages/main/page.js @@ -1,5 +1,8 @@ import { shiftHeld } from "../../lib/key.js" import html from "../../lib/htmlbuilder.js" +import markdwonits from "https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/+esm" + +const md = markdwonits() async function fetchJSON(url, opts) { let resp = await fetch(url, opts); @@ -10,12 +13,7 @@ function scrollToBottomOfElement(element) { element.scrollTo(0, element.scrollHeight); } -function handleNewPost() { - console.debug('posting of the poster', post) - let scrolledToBottom = msgArea.parentElement.scrollTopMax == msgArea.parentElement.scrollTop; - createMessage(post.data) - if(scrolledToBottom) scrollToBottomOfElement(msgArea.parentElement); -} +let handleNewPost; function deHTML(t) { t = t.replaceAll("<", "<") @@ -30,6 +28,13 @@ function getUsernameHTML(msg) { export function onload() { const msgArea = document.getElementById("messages"); + handleNewPost = function handleNewPost(post) { + console.debug('posting of the poster', post) + let scrolledToBottom = msgArea.parentElement.scrollTopMax == msgArea.parentElement.scrollTop; + createMessage(post.data) + if(scrolledToBottom) scrollToBottomOfElement(msgArea.parentElement); + } + let replies = [] function rednerReplyThingy() { @@ -41,7 +46,7 @@ export function onload() { html('div') .class('reply') .child('span') - .html(getUsernameHTML(r) + ": " + deHTML(r.content)) + .html(getUsernameHTML(r) + ": " + deHTML(String(r.content).slice(0, 50))) .up() .child('button') .text('x') @@ -62,7 +67,7 @@ export function onload() { .class('message') .for(msg.replies, r => html('div') .class('reply') - .html(`→ ${getUsernameHTML(r)}: ${deHTML(r.content)}`)) + .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`)) .child('div') .class('message-header') .child('span') @@ -83,7 +88,7 @@ export function onload() { .up() .child('span') .class('post-content') - .text(msg?.content) + .html(md.render(msg?.content)) .child('div') .for(msg.attachments, a => html('img').class('attachment').attr('src', a)) .up() diff --git a/shitstylse.css b/shitstylse.css deleted file mode 100644 index 0b7cc65..0000000 --- a/shitstylse.css +++ /dev/null @@ -1,75 +0,0 @@ -/* i have no idea what im doing so */ -body { - /* why */ - margin: 0; - height: 100vh; -} - -.main { - height: 100%; - width: 100%; - line-break: anywhere; - word-break: break-all; -} - -.channel { - flex-grow: 1; - display: flex; - flex-direction: column; - height: 100%; - overflow: auto; -} - -.messages { - flex-grow: 1; -} - -.messageInput { - background: white; - position: sticky; - bottom: 0; -} - -.messageInputForm { - display: flex; -} - -.reply { - color: #000000aa -} - -.attachment { - max-height: 25vw; - max-width: 25vw; - width: auto; - height: auto; -} - -#messageInput { - flex-grow: 1; -} - -.messageInput.disabled { - display: none; -} - -.message-header { - display: flex; - justify-content: space-between; -} - -.action-buttons { - display: none; -} - -.message:hover { - background: #0004; -} - -.message:hover .action-buttons { - display: block; -} - -.message-header .username { - font-size: 1.3em; -} diff --git a/styles.less b/styles.less new file mode 100644 index 0000000..b1938ea --- /dev/null +++ b/styles.less @@ -0,0 +1,89 @@ +/* i have no idea what im doing so */ +body { + /* why */ + margin: 0; + height: 100vh; +} + +.main { + height: 100%; + width: 100%; + line-break: anywhere; + word-break: break-all; +} + +.channel { + flex-grow: 1; + display: flex; + flex-direction: column; + height: 100%; + overflow: auto; +} + +.messages { + flex-grow: 1; +} + +.topbar { + background: white; + position: sticky; + top: 0; + display: flex; + justify-content: space-between; +} + +.topbar.hidden { + display: none; +} + +.messageInput { + background: white; + position: sticky; + bottom: 0; +} + +.messageInputForm { + display: flex; +} + +.reply { + color: #000000aa +} + +.attachment { + max-height: 25vw; + max-width: 25vw; + width: auto; + height: auto; +} + +#messageInput { + flex-grow: 1; +} + +.messageInput.disabled { + display: none; +} + +.message { + p, h1, h2, h3, h4, h5, h6 { + margin: 0; + } +} + +.message-header { + display: flex; + justify-content: space-between; + .username { + font-size: 1.3em; + } + .action-buttons { + display: none; + } +} +.message:hover { + background: #0004; + .action-buttons { + display: block; + } +} \ No newline at end of file -- cgit 1.4.1-2-gfad0