From 191435adfd82f5c95dce0193a9d2d4023556b268 Mon Sep 17 00:00:00 2001 From: Chris Angelico Date: Tue, 13 Aug 2024 08:34:56 +1000 Subject: [PATCH] Exclude the avatar image from the width calculations (so 0 HP is hitting its edge) --- httpstatic/monitor.js | 7 ++++--- templates/chan_monitors.md | 1 + templates/monitor.html | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/httpstatic/monitor.js b/httpstatic/monitor.js index 6536163d..a8fe45ea 100644 --- a/httpstatic/monitor.js +++ b/httpstatic/monitor.js @@ -85,13 +85,14 @@ export function update_display(elem, data) { //Used for the preview as well as t const maxhp = t.t[0]; const curhp = maxhp - m[1], avatar = m[2], name = m[3]; const pos = curhp/maxhp * 100; - elem.style.background = `linear-gradient(.25turn, ${t.fillcolor} ${pos}%, ${t.barcolor} ${pos}%, ${t.barcolor})`; elem.style.display = "flex"; - const img = elem.querySelector("img") || IMG({src: avatar}); + const img = elem.querySelector("img") || IMG({class: "avatar", src: avatar}); if (img.src !== avatar) img.src = avatar; //Avoid flicker set_content(elem, [ img, - DIV(name), DIV(curhp + "/" + maxhp), DIV() + DIV({style: `flex-grow: 1; display: flex; background: linear-gradient(.25turn, ${t.fillcolor} ${pos}%, ${t.barcolor} ${pos}%, ${t.barcolor})`}, [ + DIV(name), DIV(curhp + "/" + maxhp), DIV(), + ]), ]); return; } diff --git a/templates/chan_monitors.md b/templates/chan_monitors.md index 8b96fa6d..42125843 100644 --- a/templates/chan_monitors.md +++ b/templates/chan_monitors.md @@ -14,6 +14,7 @@ input[type=number] {width: 4em;} .preview div:nth-of-type(3) {text-align: right;} .optionset {display: flex; padding: 0.125em 0;} .optionset fieldset {padding: 0.25em; margin-left: 1em;} +.preview .avatar {max-width: 40px; padding-right: 2px;} Preview | Actions | Link diff --git a/templates/monitor.html b/templates/monitor.html index bf33a47c..939fa801 100644 --- a/templates/monitor.html +++ b/templates/monitor.html @@ -10,7 +10,7 @@ #display div {width: 33%;} #display div:nth-of-type(2) {text-align: center;} #display div:nth-of-type(3) {text-align: right;} -img {max-width: 40px; background: #eee; padding-right: 2px;} +.avatar {max-width: 40px; padding-right: 2px;}