From 5143265dee16ddd0effd055c36eb9d09a96921cc Mon Sep 17 00:00:00 2001 From: Danny van Kooten Date: Wed, 21 Nov 2018 14:12:40 +0100 Subject: [PATCH] change date preset options + styling. closes #149 --- assets/src/css/styles.css | 23 +++++- assets/src/css/util.css | 10 +++ assets/src/js/components/DatePicker.js | 102 +++++++++++++++---------- assets/src/js/pages/dashboard.js | 6 +- 4 files changed, 92 insertions(+), 49 deletions(-) diff --git a/assets/src/css/styles.css b/assets/src/css/styles.css index 8ffe5fe3..57751754 100644 --- a/assets/src/css/styles.css +++ b/assets/src/css/styles.css @@ -27,7 +27,6 @@ footer { font-size: 12px; color: #aaa; } a { transition: ease color .2s; } nav { position: relative; font-size: 12px; } - nav a { color: #222; } footer nav a { color: #aaa; padding: 4px 0; display: inline-block; } footer nav a:hover { color: #222; } @@ -50,6 +49,17 @@ nav .settings svg { width: 16px; display: inline-block; transition: ease all .2s nav .settings svg path { fill: #533feb; } nav .settings svg:hover { transform: rotate(45deg); } +nav.date-nav { margin: 32px 0 8px; } +nav.date-nav ul { margin: 0 8px 0 0; border-radius: 4px; background: #e8ecee; padding: 8px 8px 8px 16px; display: inline-block; } +nav.date-nav li { display: inline-block; padding: 0; } +nav.date-nav li a, +nav.date-nav li input { margin-right: 8px; color: #98a0a6; } +nav.date-nav li input { background: transparent; border: 0; font-size: inherit; padding: 0; cursor: pointer; display: inline-block; width: 75px; } +nav.date-nav li.current a { color: #533feb; } +nav.date-nav li a:hover { color: #2b2d2f; } +nav.date-nav li span { margin-right: 8px; } + +/* .date-nav { margin-bottom: 12px; } .date-nav li a { position: relative; font-size: 12px; text-transform: uppercase; padding-right: 8px; } .date-nav li.custom { color: #aaa; float: right; margin: 0; } @@ -65,7 +75,7 @@ nav .settings svg:hover { transform: rotate(45deg); } .date-nav li a:hover { color: #aaa; } .date-nav li.active a { padding-right: 8px; z-index: 1; color: #222; } .date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 6px; z-index: -1; margin: 0 0 0 -4px; } - +*/ .box { background: #fff; border-radius: 4px; margin-bottom: 16px; padding: 16px; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); } .box-totals { background: #222; color: #ddd; } @@ -118,8 +128,13 @@ div.delete a { color: red; } body { padding: 0; } header, footer { margin: 32px 0; } - nav li { display: inline-block; position: relative; margin-right: 16px; } - nav li.sites { width: 204px; margin-right: 0; } + .main-nav li, + footer li { + display: inline-block; + margin-right: 16px; + } + + nav li.sites { display: inline-block; width: 204px; margin-right: 0; } nav li.sites, nav li.settings { float: right; } nav li.sites, nav li.sites.expanded { background-position: 184px 8px; } diff --git a/assets/src/css/util.css b/assets/src/css/util.css index fbd5faab..ac52a325 100644 --- a/assets/src/css/util.css +++ b/assets/src/css/util.css @@ -9,6 +9,16 @@ clear: both; } +.ac { + text-transform: uppercase; +} + +.sm { + font-size: 11px; + font-weight: 500; + color: #98a0a6; +} + @media(max-width: 600px) { .hide-on-mobile { display: none !important; } } diff --git a/assets/src/js/components/DatePicker.js b/assets/src/js/components/DatePicker.js index d146fd34..50bc536b 100644 --- a/assets/src/js/components/DatePicker.js +++ b/assets/src/js/components/DatePicker.js @@ -8,57 +8,69 @@ import classNames from 'classnames'; const defaultPeriod = 'last-7-days'; const padZero = function(n){return n<10? '0'+n:''+n;} -function getNow() { - let now = new Date() - return now -} +let now = new Date(); +window.setInterval(() => { + now = new Date(); +}, 60000 ); // today, yesterday, this week, last 7 days, last 30 days const availablePeriods = { - 'today': { - label: 'Today', - start: function() { - const now = getNow(); - return new Date(now.getFullYear(), now.getMonth(), now.getDate()); - }, - end: function() { - const now = getNow(); - return new Date(now.getFullYear(), now.getMonth(), now.getDate()); - }, - }, - 'last-7-days': { - label: 'Last 7 days', + '1w': { + label: '1w', start: function() { - const now = getNow(); return new Date(now.getFullYear(), now.getMonth(), now.getDate()-6); }, end: function() { - const now = getNow(); return new Date(now.getFullYear(), now.getMonth(), now.getDate()); }, }, - 'last-30-days': { - label: 'Last 30 days', + '4w': { + label: '4w', start: function() { - const now = getNow(); - return new Date(now.getFullYear(), now.getMonth(), now.getDate()-29); + return new Date(now.getFullYear(), now.getMonth(), now.getDate()-4*7+1); }, end: function() { - const now = getNow(); return new Date(now.getFullYear(), now.getMonth(), now.getDate()); }, }, - 'this-year': { - label: 'This year', + 'mtd': { + label: 'Mtd', start: function() { - const now = getNow(); - return new Date(now.getFullYear(), 0, 1); + return new Date(now.getFullYear(), now.getMonth(), 1); }, end: function() { - const now = getNow(); - return new Date(this.start().getFullYear() + 1, 0, 0); + return new Date(now.getFullYear(), now.getMonth()+1, 0); }, }, +'qtd': { + label: 'Qtd', + start: function() { + return new Date(now.getFullYear(), Math.ceil(now.getMonth() / 3), 1); + + }, + end: function() { + let start = this.start(); + return new Date(start.getFullYear(), start.getMonth() + 3, 0); + }, + }, + 'ytd': { + label: 'Ytd', + start: function() { + return new Date(now.getFullYear(), 0, 1); + }, + end: function() { + return new Date(now.getFullYear()+1, 0, 0); + }, + }, + 'all': { + label: 'All', + start: function() { + return new Date(2018, 6, 1); + }, + end: function() { + return new Date(); + }, + } } class DatePicker extends Component { @@ -86,7 +98,7 @@ class DatePicker extends Component { @bind updateDatesFromPeriod(period) { if(typeof(availablePeriods[period]) !== "object") { - return; + period = "1w"; } let p = availablePeriods[period]; this.setDateRange(p.start(), p.end(), period); @@ -125,7 +137,7 @@ class DatePicker extends Component { window.localStorage.setItem('period', this.state.period) window.history.replaceState(this.state, null, `#!${this.state.period}`) - }, 2) + }, 5) } } @@ -188,22 +200,30 @@ class DatePicker extends Component { const links = Object.keys(availablePeriods).map((id) => { let p = availablePeriods[id]; return ( -
  • +
  • {p.label}
    • ); }); return ( - + ) + + /* + + */ + } } diff --git a/assets/src/js/pages/dashboard.js b/assets/src/js/pages/dashboard.js index d42144f3..89fcef17 100644 --- a/assets/src/js/pages/dashboard.js +++ b/assets/src/js/pages/dashboard.js @@ -160,11 +160,9 @@ class Dashboard extends Component { -
    - + +