From a4cd401e2ac233d34da88eb98df4ae782125d3ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juhani=20Krekel=C3=A4?= Date: Sat, 23 Oct 2021 14:59:00 +0300 Subject: [PATCH] Add width and height attributes to profile images Currently profile images are sized using CSS. If images whose actual size in pixels is larger than the defined pfp-size in CSS pixels is used and the page is viewed on a web browser that does not support the latest CSS standards, the profile images appear larger than intended. This change moves the size information into the HTML code. Since HTML sizes are also in terms of CSS pixels, this does not change the results for browsers that implement modern standards, but will provide better rendering on older or more limited browsers. --- src/main.tsx | 7 +++++-- style.css | 5 ++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 45c87c2..fb147a2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -42,6 +42,9 @@ type IrcMessage = { const URL = /(((?:https?|gopher):\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/|spotify:track:)((?:\(?[^\s()<>]+\)?)*[^ \s`!\[\]{};:\'".,<>?\xab\xbb\u201c\u201d\u2018\u2019]))/i; +// NOTE: When chaging, also update --pfp-size in style.css +const pfp_size = 48; + function parseMessage(m: string): MessageFrag[] { m = m.trimEnd(); const parts: MessageFrag[] = []; @@ -217,7 +220,7 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt { if (u !== undefined) { return
- {`${u.name}'s + {`${u.name}'s
@@ -267,4 +270,4 @@ const elem = ; -console.log(elem.toHtmlStr()); \ No newline at end of file +console.log(elem.toHtmlStr()); diff --git a/style.css b/style.css index 15f94ca..30bf3b4 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,7 @@ html { font-family: sans-serif; padding: 2px; + /* NOTE: When chaging, also update pfp_size in src/main.tsx */ --pfp-size: 48px; --font-size: 14pt; --ts-font-size: calc(var(--font-size) - 2pt); @@ -27,8 +28,6 @@ body { } .mg-user > .mg-pfp > img { - width: var(--pfp-size); - height: var(--pfp-size); clip-path: url(#squircle); } @@ -141,4 +140,4 @@ body { font-weight: bold; font-size: calc(1.2 * var(--font-size)); -} \ No newline at end of file +}