Skip to content

Commit

Permalink
Respect user's locale when rendering the date range in the repo activ…
Browse files Browse the repository at this point in the history
…ity page (go-gitea#21410)

# Description
Previously, to make the date range understood by all, we used the format
"2006-01-02" for the dates as it's locale-generic.

This commit changes the rendering logic. Instead of rendering the date
on the server, we send a formatted computer-readable timestamp. The
client's javascript then renders it according to the user's locale.

This approach is reusable across the codebase, any `<time></time>` tag
with the data-format="date" attribute would get rendered according to
the user's chosen locale.

## Previous View

![image](https://user-images.githubusercontent.com/20454870/195099143-e1c5df86-282a-42f1-898f-a36bb5fe7c2f.png)

## New View

### English

![image](https://user-images.githubusercontent.com/20454870/195099301-5cda4eab-4012-49d5-97e5-b1f9cada9c06.png)

### French

![image](https://user-images.githubusercontent.com/20454870/195099434-ce23e394-8d65-4c4c-8ac8-8b96bc9044f3.png)

### Portuguese

![image](https://user-images.githubusercontent.com/20454870/195099559-9a7aed28-944a-45ec-bedb-64403e3faede.png)

### Italian

![image](https://user-images.githubusercontent.com/20454870/195099661-17758d55-3fe0-4797-879b-d45de0ee8ba3.png)

# References
* go-gitea#21380 
* go-gitea#21387
* go-gitea#21396

Inspiration:

I think either differentiating by class, or probably better by a custom
attribute such as `data-format` or similar, is the best course of
action.

_Originally posted by @delvh in
go-gitea#21396 (comment)
      


Resolves go-gitea#21380

Signed-off-by: Yarden Shoham <hrsi88@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
  • Loading branch information
yardenshoham and silverwind authored Oct 12, 2022
1 parent ac3a61e commit 6a6dc97
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 3 deletions.
4 changes: 2 additions & 2 deletions routers/web/repo/activity.go
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ func Activity(ctx *context.Context) {
ctx.Data["Period"] = "weekly"
timeFrom = timeUntil.Add(-time.Hour * 168)
}
ctx.Data["DateFrom"] = timeFrom.Format("2006-01-02")
ctx.Data["DateUntil"] = timeUntil.Format("2006-01-02")
ctx.Data["DateFrom"] = timeFrom.UTC().Format(time.RFC3339)
ctx.Data["DateUntil"] = timeUntil.UTC().Format(time.RFC3339)
ctx.Data["PeriodText"] = ctx.Tr("repo.activity.period." + ctx.Data["Period"].(string))

var err error
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/activity.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="page-content repository commits">
{{template "repo/header" .}}
<div class="ui container">
<h2 class="ui header">{{.DateFrom}} - {{.DateUntil}}
<h2 class="ui header"><time data-format="date" datetime="{{.DateFrom}}">{{.DateFrom}}</time> - <time data-format="date" datetime="{{.DateUntil}}">{{.DateUntil}}</time>
<div class="ui right">
<!-- Period -->
<div class="ui floating dropdown jump filter">
Expand Down
7 changes: 7 additions & 0 deletions web_src/js/features/formatting.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {prettyNumber} from '../utils.js';

const {lang} = document.documentElement;
const dateFormatter = new Intl.DateTimeFormat(lang, {year: 'numeric', month: 'long', day: 'numeric'});

export function initFormattingReplacements() {
// replace english formatted numbers with locale-specific separators
Expand All @@ -11,4 +12,10 @@ export function initFormattingReplacements() {
el.textContent = formatted;
}
}

// for each <time></time> tag, if it has the data-format="date" attribute, format
// the text according to the user's chosen locale
for (const timeElement of document.querySelectorAll('time[data-format="date"]')) {
timeElement.textContent = dateFormatter.format(new Date(timeElement.dateTime));
}
}

0 comments on commit 6a6dc97

Please sign in to comment.