diff options
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | pages/login/page.js | 1 | ||||
| -rw-r--r-- | pages/main/page.js | 23 | ||||
| -rw-r--r-- | styles.less (renamed from shitstylse.css) | 42 |
4 files changed, 53 insertions, 24 deletions
diff --git a/index.html b/index.html index a094a56..8c9eccc 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,18 @@ <title>soktdeer wl client</title> <!-- original name, ik --> <script type="module" src="main.js"></script> - <link rel="stylesheet" href="shitstylse.css"> + <link rel="stylesheet/less" type="text/css" href="styles.less" /> + <script src="https://cdn.jsdelivr.net/npm/less" ></script> </head> <body> + <div class="topbar hidden" id="topbar"> + SD-WL + <div> + <button onclick="window.pages.goToPage('main')">home</button> + <button onclick="window.pages.goToPage('settings')" disabled>settings</button> + <button onclick="throw new Error('A')" disabled>log out</button> + </div> + </div> <div class="main"> </div> 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/[email protected]/+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/styles.less index 0b7cc65..b1938ea 100644 --- a/shitstylse.css +++ b/styles.less @@ -24,6 +24,18 @@ body { 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; @@ -53,23 +65,25 @@ body { 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; + } } - -.action-buttons { - display: none; -} - .message:hover { background: #0004; -} - -.message:hover .action-buttons { - display: block; -} - -.message-header .username { - font-size: 1.3em; -} + .action-buttons { + display: block; + } +} \ No newline at end of file |