mirror of
https://github.com/go-gitea/gitea.git
synced 2026-03-17 14:24:07 +00:00
28e09ffc67
Replace the `@github/relative-time-element` npm dependency with a vendored, simplified implementation. - Support 24h format rendering [PR 329](https://github.com/github/relative-time-element/pull/329) - Enable `::selection` styling in Firefox [PR 341](https://github.com/github/relative-time-element/pull/341) - Remove timezone from tooltips (It's always local timezone) - Clean up previous `title` workaround in tippy - Remove unused features - Use native `Intl.DurationFormat` with fallback for older browsers, remove dead polyfill - Add MIT license header to vendored file - Add unit tests - Add dedicated devtest page for all component variants --------- Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude claude-opus-4-6 20250630 <noreply@anthropic.com>
67 lines
4.6 KiB
Handlebars
67 lines
4.6 KiB
Handlebars
{{template "devtest/devtest-header"}}
|
|
<div class="page-content devtest ui container">
|
|
<div class="tw-grid tw-grid-cols-3 tw-gap-4">
|
|
<div>
|
|
<h2>Relative (auto)</h2>
|
|
<div>now: <relative-time datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>3m ago: <relative-time datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>3h ago: <relative-time datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>1d ago: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>3d ago: <relative-time datetime="{{.TimePast3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>3d future: <relative-time datetime="{{.TimeFuture3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>40d ago (threshold): <relative-time datetime="{{.TimePast40d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>tense=past</h2>
|
|
<div>3m ago: <relative-time tense="past" datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>future clamped: <relative-time tense="past" datetime="{{.TimeFuture1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>60d ago: <relative-time tense="past" datetime="{{.TimePast60d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>tense=future</h2>
|
|
<div>3h future: <relative-time tense="future" datetime="{{.TimeFuture3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>past clamped: <relative-time tense="future" datetime="{{.TimePast1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>Duration</h2>
|
|
<div>0s: <relative-time format="duration" datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>3h: <relative-time format="duration" datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>1d 2h: <relative-time format="duration" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>short: <relative-time format="duration" format-style="short" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>narrow: <relative-time format="duration" format-style="narrow" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>Datetime (absolute)</h2>
|
|
<div>default: <relative-time format="datetime" datetime="2024-03-11"></relative-time></div>
|
|
<div>month=short: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
|
|
<div>month=long: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
|
|
<div>numeric: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
|
|
<div>weekday: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
|
|
<div>with time: <relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>Threshold</h2>
|
|
<div>P0Y: <relative-time threshold="P0Y" prefix="" weekday="" year="numeric" month="short" datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>P1D: <relative-time threshold="P1D" datetime="{{.TimePast2d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
<div>P30D: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>Prefix</h2>
|
|
<div>default: <relative-time datetime="2024-03-11"></relative-time></div>
|
|
<div>prefix="": <relative-time prefix="" datetime="2024-03-11"></relative-time></div>
|
|
<div>prefix="at": <relative-time prefix="at" datetime="2024-03-11"></relative-time></div>
|
|
</div>
|
|
<div>
|
|
<h2>TimeSince (Go helper)</h2>
|
|
<div>now: {{DateUtils.TimeSince .TimeNow}}</div>
|
|
<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
|
|
<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
|
|
<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
|
|
<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
|
|
<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
|
|
<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "devtest/devtest-footer"}}
|