diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 6ec13a630..4fbcd0425 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -23,6 +23,7 @@ .txt-nowrap { white-space: nowrap; } .txt-break { word-break: break-word; } .txt-uppercase { text-transform: uppercase; } + .txt-capitalize { text-transform: capitalize; } .txt-link { color: var(--color-link); text-decoration: underline; } /* Flexbox and Grid */ diff --git a/app/javascript/controllers/local_time_controller.js b/app/javascript/controllers/local_time_controller.js index 3bc77b769..7fe903c85 100644 --- a/app/javascript/controllers/local_time_controller.js +++ b/app/javascript/controllers/local_time_controller.js @@ -2,7 +2,9 @@ import { Controller } from "@hotwired/stimulus" import { differenceInDays } from "helpers/date_helpers" export default class extends Controller { - static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ] + static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago", "agoorweekday" ] + static values = { refreshInterval: Number } + static classes = [ "local-time-value"] #timer @@ -13,7 +15,10 @@ export default class extends Controller { this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" }) this.agoFormatter = new AgoFormatter() this.daysagoFormatter = new DaysAgoFormatter() + this.datewithweekdayFormatter = new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric" }) + this.datewithweekdayFormatter = new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric" }) this.indaysFormatter = new InDaysFormatter() + this.agoorweekdayFormatter = new DaysAgoOrWeekdayFormatter() } connect() { @@ -60,6 +65,10 @@ export default class extends Controller { this.#formatTime(this.daysagoFormatter, target) } + agoorweekdayTargetConnected(target) { + this.#formatTime(this.agoorweekdayFormatter, target) + } + #refreshRelativeTimes() { this.agoTargets.forEach(target => { this.#formatTime(this.agoFormatter, target) @@ -111,6 +120,18 @@ class DaysAgoFormatter { } } +class DaysAgoOrWeekdayFormatter { + format(date) { + const days = differenceInDays(date, new Date()) + + if (days <= 1) { + return new DaysAgoFormatter().format(date) + } else { + return new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric" }).format(date) + } + } +} + class InDaysFormatter { format(date) { const days = differenceInDays(new Date(), date) diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb index 387f42a1c..e4eaf5f3d 100644 --- a/app/views/events/_day.html.erb +++ b/app/views/events/_day.html.erb @@ -4,7 +4,7 @@

<% # TODO: Create proper format to match desired behavior: Today, tomorrow or date %> - <%= local_datetime_tag day_timeline.day, style: :daysago, class: "txt-ink" %> + <%= local_datetime_tag day_timeline.day, style: :agoorweekday, class: "txt-ink" %>

@@ -19,7 +19,7 @@ <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %> <% end %> - <% end %> + <% end %> <% end %> diff --git a/app/views/events/_empty_days.html.erb b/app/views/events/_empty_days.html.erb index 4ba5687e3..93be21058 100644 --- a/app/views/events/_empty_days.html.erb +++ b/app/views/events/_empty_days.html.erb @@ -3,12 +3,12 @@ <% if earliest.present? %> <% if earliest == latest %>
-

<%= event_day_title(earliest) %>

+

<%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %>

No activity

<% elsif earliest < latest %>
-

<%= event_day_title(earliest) %> – <%= event_day_title(latest) %>

+

<%= local_datetime_tag earliest, style: :agoorweekday, class: "txt-ink txt-capitalize" %> – <%= local_datetime_tag latest, style: :agoorweekday, class: "txt-ink txt-capitalize" %>

No activity for <%= (latest - earliest).seconds.in_days.round + 1 %> days

<% end %>