status-im/fathom
2
0
Fork 0
mirror of https://github.com/status-im/fathom.git synced 2025-03-01 11:30:28 +00:00
Code Issues Projects Releases Wiki Activity

show current date range in date-nav, #32

Browse Source
This commit is contained in:
Danny 2018-05-16 11:51:40 +02:00
parent 50771a6314
commit 7d8d0b9c42
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/js/components/DatePicker.js
View File

@ -38,32 +38,42 @@ class DatePicker extends Component {
@bind
setTimeRange(period) {
const timezoneOffset = (new Date()).getTimezoneOffset() * 60;
let beforeDate = new Date();
beforeDate.setHours(24);
beforeDate.setMinutes(0);
let afterDate = new Date();
afterDate.setHours(0);
afterDate.setMinutes(0);
let startDate = new Date();
startDate.setHours(0);
startDate.setMinutes(0);
let endDate = new Date();
endDate.setHours(24);
endDate.setMinutes(0);
switch(period) {
case "week":
afterDate.setDate(afterDate.getDate() - (afterDate.getDay() + 6) % 7);
startDate.setDate(startDate.getDate() - (startDate.getDay() + 6) % 7);
endDate.setDate(startDate.getDate() + 7);
break;
case "month":
afterDate.setDate(1);
startDate.setDate(1);
endDate.setMonth(endDate.getMonth() + 1);
endDate.setDate(0);
break;
case "year":
afterDate.setDate(1);
afterDate.setMonth(0);
startDate.setDate(1);
startDate.setMonth(0);
endDate.setYear(startDate.getFullYear() + 1);
endDate.setMonth(0);
endDate.setDate(0);
break;
}
let before, after;
before = Math.round(((+beforeDate) / 1000) - timezoneOffset);
after = Math.round(((+afterDate) / 1000) - timezoneOffset);
before = Math.round(((+endDate) / 1000) - timezoneOffset);
after = Math.round(((+startDate) / 1000) - timezoneOffset);
this.setState({
period: period,
startDate: startDate,
endDate: endDate,
before: before,
after: after,
});
@ -92,6 +102,7 @@ class DatePicker extends Component {
<ul>
{links}
<li><span style="padding: 0 8px 0 0;">&mdash;</span> <strong>{state.startDate.toLocaleDateString()}</strong> to <strong>{state.endDate.toLocaleDateString()}</strong></li>
</ul>
)
}

8
assets/sass/styles.scss
View File

@ -67,8 +67,12 @@ body {
nav.main-nav li a { padding: 6px 8px 6px 0; }
nav li a:hover { color: #98a0a6; }
.date-nav ul { padding: 0; margin: 0; }
nav.date-nav li a { color: #46494d; }
.date-nav ul { padding: 0; margin: 0; font-size: 12px; text-transform: uppercase; }
.date-nav li,
.date-nav li a {
color: #46494d;
}
nav.date-nav li a { }
nav.date-nav li a:hover { color: #98a0a6; }
nav.date-nav li.active a:hover { color: #46494d; }
nav.date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 4px; z-index: -1; margin: 0 0 0 -4px; transition: all .4s ease; }