aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2026-01-06 07:34:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Date display improvements (#4191)

Browse Source 
Fixes styling issues introduced in #4074, because the `max-width` was to small for localized dates.

Also adds the ability to choose the prefered initial display format, which can be the localized or relative date.
This commit is contained in:
d11n
2022-10-07 06:29:03 +02:00
committed by GitHub
parent b48986bfd6
commit b334e1aa00
6 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
BTCPayServer/Views/UIInvoice/ListInvoices.cshtml
View File

@@ -282,9 +282,11 @@
<tr>
<th style="width:2rem;" class="only-for-js">
<input id="selectAllCheckbox" type="checkbox" class="form-check-input" />
<th style="min-width:90px;" class="col-md-auto">
Date
<a id="switchTimeFormat" href="#" class="fa fa-clock-o" title="Switch date format"></a>
<th class="w-150px">
<div class="d-flex align-items-center gap-1">
Date
<button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format"></button>
</div>
</th>
<th class="text-nowrap">Order Id</th>
<th class="text-nowrap">Invoice Id</th>

8
BTCPayServer/Views/UINotifications/Index.cshtml
View File

@@ -39,9 +39,11 @@
<input name="selectedItems" id="selectAllCheckbox" type="checkbox" class="form-check-input" />
}
</th>
<th>
Date
<a href="#" id="switchTimeFormat" class="fa fa-clock-o" title="Switch date format"></a>
<th class="w-150px">
<div class="d-flex align-items-center gap-1">
Date
<button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format"></button>
</div>
</th>
<th>Message</th>
<th class="text-end">Actions</th>

8
BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
View File

@@ -206,9 +206,11 @@
<th style="width:2rem;" class="only-for-js">
<input id="selectAllCheckbox" type="checkbox" class="form-check-input" />
</th>
<th style="max-width:125px;">
Date
<a id="switchTimeFormat" class="fa fa-clock-o" title="Switch date format" href="#"></a>
<th class="w-150px">
<div class="d-flex align-items-center gap-1">
Date
<button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format" id="switchTimeFormat"></button>
</div>
</th>
<th class="text-start">Label</th>
<th>Transaction Id</th>

8
BTCPayServer/wwwroot/main/site.css
View File

@@ -96,14 +96,6 @@ a.unobtrusive-link {
transform: rotate(-180deg);
}
time[datetime] {
display: block;
max-width: 125px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Badges */
.badge-new {
background: #d4edda;

6
BTCPayServer/wwwroot/main/site.js
View File

@@ -3,14 +3,14 @@ const flatpickrInstances = [];
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
const dtFormatOpts = { dateStyle: 'short', timeStyle: 'short' };
const formatDateTimes = mode => {
if (!mode) mode = 'localized';
const formatDateTimes = format => {
// select only elements which haven't been initialized before, those without data-localized
document.querySelectorAll("time[datetime]:not([data-localized])").forEach($el => {
const date = new Date($el.getAttribute("datetime"));
// initialize and set localized attribute
$el.dataset.localized = new Intl.DateTimeFormat('default', dtFormatOpts).format(date);
// set text to chosen mode
const mode = format || $el.dataset.initial;
if ($el.dataset[mode]) $el.innerText = $el.dataset[mode];
});
};
@@ -139,7 +139,7 @@ document.addEventListener("DOMContentLoaded", () => {
});
// Time Format
delegate('click', '#switchTimeFormat', switchTimeFormat);
delegate('click', '.switch-time-format', switchTimeFormat);
// Theme Switch
delegate('click', '.btcpay-theme-switch', e => {