diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 83d137151..254c75be2 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -86,6 +86,10 @@ inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2); } + .local-time-value { + font-weight: bold; + } + @media (prefers-color-scheme: dark) { --border-color: var(--color-subtle-dark); --border-size: 1px; diff --git a/app/javascript/controllers/local_time_controller.js b/app/javascript/controllers/local_time_controller.js index 497fbd37b..bdfbe677a 100644 --- a/app/javascript/controllers/local_time_controller.js +++ b/app/javascript/controllers/local_time_controller.js @@ -1,7 +1,8 @@ import { Controller } from "@hotwired/stimulus" +import { differenceInDays } from "helpers/date_helpers" export default class extends Controller { - static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays" ] + static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ] #timer @@ -11,7 +12,7 @@ export default class extends Controller { this.shortDateFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }) this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" }) this.agoFormatter = new AgoFormatter() - this.daysAgoFormatter = new DaysAgoFormatter() + this.daysagoFormatter = new DaysAgoFormatter() this.indaysFormatter = new InDaysFormatter() } @@ -43,14 +44,14 @@ export default class extends Controller { this.#formatTime(this.agoFormatter, target) } - daysAgoTargetConnected(target) { - this.#formatTime(this.daysAgoFormatter, target) - } - indaysTargetConnected(target) { this.#formatTime(this.indaysFormatter, target) } + daysagoTargetConnected(target) { + this.#formatTime(this.daysagoFormatter, target) + } + #refreshRelativeTimes() { this.agoTargets.forEach(target => { this.#formatTime(this.agoFormatter, target) @@ -59,7 +60,7 @@ export default class extends Controller { #formatTime(formatter, target) { const dt = new Date(target.getAttribute("datetime")) - target.textContent = formatter.format(dt) + target.innerHTML = formatter.format(dt) target.title = this.dateTimeFormatter.format(dt) } } @@ -93,38 +94,25 @@ class AgoFormatter { } class DaysAgoFormatter { - format(dt) { - const now = new Date() + format(date) { + const days = differenceInDays(date, new Date()) - const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()) - const startOfGivenDay = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) - - const msPerDay = 1000 * 60 * 60 * 24 - const dayDiff = Math.floor((startOfToday - startOfGivenDay) / msPerDay) - - if (dayDiff === 0) return "Today" - if (dayDiff === 1) return "Yesterday" - return `${dayDiff} days ago` + if (days <= 0) return styleableValue("today") + if (days === 1) return styleableValue("yesterday") + return `${styleableValue(days)} days ago` } } class InDaysFormatter { - format(dt) { - const target = this.#beginningOfDay(dt) - const today = this.#beginningOfDay(new Date()) - const days = Math.round((target - today) / (1000 * 60 * 60 * 24)) + format(date) { + const days = differenceInDays(new Date(), date) - if (days <= 0) { - return "today" - } - if (days === 1) { - return "tomorrow" - } - - return `in ${Math.round(days)} days` - } - - #beginningOfDay(dt) { - return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) + if (days <= 0) return styleableValue("today") + if (days === 1) return styleableValue("tomorrow") + return `in ${styleableValue(days)} days` } } + +function styleableValue(value) { + return `${value}` +} diff --git a/app/javascript/helpers/date_helpers.js b/app/javascript/helpers/date_helpers.js new file mode 100644 index 000000000..9f3dffc4d --- /dev/null +++ b/app/javascript/helpers/date_helpers.js @@ -0,0 +1,7 @@ +export function differenceInDays(fromDate, toDate) { + return Math.round(Math.abs((beginningOfDay(toDate) - beginningOfDay(fromDate)) / (1000 * 60 * 60 * 24))) +} + +export function beginningOfDay(date) { + return new Date(date.getFullYear(), date.getMonth(), date.getDate()) +} diff --git a/app/views/bubbles/cards/_mini.html.erb b/app/views/bubbles/cards/_mini.html.erb index f90fd167d..298658446 100644 --- a/app/views/bubbles/cards/_mini.html.erb +++ b/app/views/bubbles/cards/_mini.html.erb @@ -7,7 +7,7 @@