Browse Source

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.
master
Juhani Krekelä 11 months ago
committed by Abigail Magalhães
parent
commit
a4cd401e2a
2 changed files with 7 additions and 5 deletions
  1. +5
    -2
      src/main.tsx
  2. +2
    -3
      style.css

+ 5
- 2
src/main.tsx View File

@ -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 <div class="mg-user">
<div class="mg-pfp">
<img src={`https://offtopia.org/pages/people/${u.name.toLocaleLowerCase()}.jpg`} alt={`${u.name}'s profile picture`} />
<img src={`https://offtopia.org/pages/people/${u.name.toLocaleLowerCase()}.jpg`} alt={`${u.name}'s profile picture`} width={pfp_size} height={pfp_size} />
</div>
<div class="mg-contents">
<span class="mg-ts-u">
@ -267,4 +270,4 @@ const elem = <html lang="en">
</html>;
console.log(elem.toHtmlStr());
console.log(elem.toHtmlStr());

+ 2
- 3
style.css View File

@ -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));
}
}

Loading…
Cancel
Save