Skip to content
Permalink
Browse files

change date preset options + styling. closes #149

  • Loading branch information...
dannyvankooten committed Nov 21, 2018
1 parent 072addd commit 5143265dee16ddd0effd055c36eb9d09a96921cc
Showing with 92 additions and 49 deletions.
  1. +19 −4 assets/src/css/styles.css
  2. +10 −0 assets/src/css/util.css
  3. +61 −41 assets/src/js/components/DatePicker.js
  4. +2 −4 assets/src/js/pages/dashboard.js
@@ -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; }

@@ -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; }
}
@@ -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 (
<li class={classNames({ active: id == state.period })}>
<li class={classNames({ current: id == state.period })}>
<a href="javascript:void(0);" data-value={id} onClick={this.setPeriod}>{p.label}</a>
</li>
);
});

return (
<ul class="date-nav cf">
{links}
<li class="custom">
<Pikadayer value={this.dateValue(state.startDate)} onSelect={this.setStartDate} />
<span style="margin: 0 8px"> to </span>
<Pikadayer value={this.dateValue(state.endDate)} onSelect={this.setEndDate} />
</li>
</ul>
<nav class="date-nav sm ac">
<ul>
{links}
</ul>
<ul>
<li><Pikadayer value={this.dateValue(state.startDate)} onSelect={this.setStartDate} /> <span></span> <Pikadayer value={this.dateValue(state.endDate)} onSelect={this.setEndDate} /></li>
</ul>
</nav>
)

/*
<ul>
<li class="current"><a href="#">Daily</a></li>
<li><a href="#">Monthly</a></li>
</ul>
*/

}
}

@@ -160,11 +160,9 @@ class Dashboard extends Component {
</nav>
</header>

<section class="section">
<nav>
<DatePicker onChange={this.changeDateRange} />
</nav>
<DatePicker onChange={this.changeDateRange} />

<section class="section">
<div class="boxes">
<Sidebar siteId={state.site.id} before={state.before} after={state.after} />

0 comments on commit 5143265

Please sign in to comment.
You can’t perform that action at this time.