diff options
| -rw-r--r-- | pages/main/page.js | 51 | ||||
| -rw-r--r-- | styles.less | 43 |
2 files changed, 58 insertions, 36 deletions
diff --git a/pages/main/page.js b/pages/main/page.js index 9edb966..370b525 100644 --- a/pages/main/page.js +++ b/pages/main/page.js @@ -65,33 +65,42 @@ export function onload() { function createMessage(msg) { let elem = html('div') .class('message') - .for(msg.replies, r => html('div') - .class('reply') - .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`)) .child('div') - .class('message-header') - .child('span') - .class('username') - .html(getUsernameHTML(msg)) + .class('message-container') + .child('img') + .attr('src', msg.author.avatar) .up() .child('div') - .class('action-buttons') - .child('button') - .text('reply') - .ev('click', e => { - if(msg.length >= 3) return; - replies.push(msg); - rednerReplyThingy(); - }) + .class('message-content-container') + .for(msg.replies, r => html('div') + .class('reply') + .html(`→ ${getUsernameHTML(r)}: ${deHTML(String(r.content).slice(0, 50))}`)) + .child('div') + .class('message-header') + .child('span') + .class('username') + .html(getUsernameHTML(msg)) + .up() + .child('div') + .class('action-buttons') + .child('button') + .text('reply') + .ev('click', e => { + if(msg.length >= 3) return; + replies.push(msg); + rednerReplyThingy(); + }) + .up() + .up() + .up() + .child('span') + .class('post-content') + .html(md.render(msg?.content)) + .child('div') + .for(msg.attachments, a => html('img').class('attachment').attr('src', a)) .up() .up() .up() - .child('span') - .class('post-content') - .html(md.render(msg?.content)) - .child('div') - .for(msg.attachments, a => html('img').class('attachment').attr('src', a)) - .up() .up() msgArea.appendChild(elem) } diff --git a/styles.less b/styles.less index 98bf87f..d67b084 100644 --- a/styles.less +++ b/styles.less @@ -9,6 +9,7 @@ body { background: white; display: flex; justify-content: space-between; + border-bottom: gray inset 2px; } .main { flex-grow: 1; @@ -45,15 +46,33 @@ body { display: flex; } -.reply { - color: #000000aa -} - -.attachment { - max-height: 25vw; - max-width: 25vw; - width: auto; - height: auto; +.message { + .message-container { + display: flex; + img { + height: 5em; + aspect-ratio: 1/1; + border: gray inset 2px; + } + .message-content-container { + flex-grow: 1; + .reply { + color: #000000aa + } + .message-header { + width: 100%; + } + p, h1, h2, h3, h4, h5, h6 { + margin: 0; + } + .attachment { + max-height: 25vw; + max-width: 25vw; + width: auto; + height: auto; + } + } + } } #messageInput { @@ -64,12 +83,6 @@ body { display: none; } -.message { - p, h1, h2, h3, h4, h5, h6 { - margin: 0; - } -} - .message-header { display: flex; justify-content: space-between; |