Exclude the avatar image from the width calculations (so 0 HP is hitt…

…ing its edge)
Rosuav · Aug 12, 2024 · 191435a · 191435a
1 parent b0ef5ff
commit 191435a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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;}
 </style>
 
 Preview | Actions | Link

diff --git 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;}
 </style>
 <main>
 <div id=display></div>