From ccb0ffdc8ad72bef462ba21bb4aae8a09f83012a Mon Sep 17 00:00:00 2001 From: Oneric Date: Tue, 24 Oct 2023 18:23:47 +0200 Subject: [PATCH 1/2] Don't show direction in notification timestamps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently all notifications except follow-related once include and explicit direction text. (It missing in follow notifs is due to an omission in 804ba0cdb6b353e0c959c68f44c6a1316c0d6b10 which only added the newly introduced with-direction to status-related notifs. Before, presumably all notifs included direction text.) But in the notification tray horizontal space is scarce and notifs can already be assumed to only come from the past. While it might not be too bad for the English localisation’s 4-letter ' ago' suffix, e.g. the Indonesian localisation’s ' yang lalu' needs 10 letters. Thus instead of fixing the omission for follow-related notifs, drop direction text from all notification timestamps. --- src/components/notification/notification.vue | 1 - src/components/status/status.vue | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 76101865..5ea6ab04 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -151,7 +151,6 @@ > diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a54782e3..c34d38f0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -190,7 +190,7 @@ > From beee99e733a6508e3744140ee73e8b7be8194d85 Mon Sep 17 00:00:00 2001 From: Oneric Date: Wed, 18 Oct 2023 22:51:24 +0200 Subject: [PATCH 2/2] Stop notifications boxes from change size over time MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Notifications about favourites and follows use .notification-right, notifications about replies instead use .heading-right. Previously only the former set a min-width, however the chosen value of 3em was too small to fit the worst case. As a consequence, when the timestamp text changes over time, its element width changes, which may result in neighbouring text (no longer) needing to wrap to a new line in turn changing the size of the whole notification box pushing older notification boxes down/up. These constant movements at the side of the screen can be quite annoying and confusing when the cause cannot be immediately discerned. Avoid this, by reserving enough space for any timestamp. For English, the worst case is the five-character 'XXmin', since the short identifier for minutes is the longest with three letters. With two exceptions, all other current localisation also do not exceed three letters in any short unit identifier up to days. However, some localisations (e.g. Polish) additionally insert a space between numerical value and unit. This matches SI recommendations pushing the worst case to 6 characters. 6 characters will be sufficient for timestamps up to 3 weeks in all languages (minus prev exceptions), which seems reasonable enough as beyond this timestamps rarely change anyway. The aforementioned exceptions being Vietnamese and Occitan, but in the current localisation all or the relevant short unit identifiers are identical to the long forms indicating this is just due to incomplete translation. Indeed, Vietnamese Wikipedia (read through machine translation) suggests “ph” is commonly used as unit identifiers for minutes, but the current localisation fully spells it out as “phút”. --- src/components/notifications/notifications.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3d3408f7..635a0a9b 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -105,9 +105,12 @@ flex: 1; padding-left: 0.8em; min-width: 0; + } + .heading-right, .notification-right { .timeago { - min-width: 3em; + display: inline-block; + min-width: 6em; text-align: right; } }