change date preset options + styling. closes #149

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; }
+	.main-nav li,
-	nav li.sites { width: 204px; margin-right: 0; }
+	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; }
 

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; }
 }

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();
-  let now = new Date()
+window.setInterval(() => {
-  return now
+  now = new Date();
-}
+}, 60000 );
 
 // today, yesterday, this week, last 7 days, last 30 days
 const availablePeriods = {
-  'today': {
+  '1w': {
-    label: 'Today',
+    label: '1w',
     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',
-    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': {
+ '4w': {
-    label: 'Last 30 days',
+    label: '4w',
     start: function() {
-      const now = getNow();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate()-4*7+1);
-      return new Date(now.getFullYear(), now.getMonth(), now.getDate()-29);
     },
     end: function() {
-      const now = getNow();
       return new Date(now.getFullYear(), now.getMonth(), now.getDate());
     },
  },
-  'this-year': {
+ 'mtd': {
-    label: 'This year',
+    label: 'Mtd',
+    start: function() {
+      return new Date(now.getFullYear(),  now.getMonth(), 1);
+    },
+    end: function() {
+      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() {
-      const now = getNow();
     return new Date(now.getFullYear(), 0, 1);
   },
   end: function() {
-      const now = getNow();
+    return new Date(now.getFullYear()+1, 0, 0);
-      return new Date(this.start().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">
+      <nav class="date-nav sm ac">
+        <ul>
           {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>
+        <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>
+    */
+
   }
 }
 

assets/src/js/pages/dashboard.js

@@ -160,11 +160,9 @@ class Dashboard extends Component {
         </nav>
       </header>
 
-      <section class="section">
-        <nav>
       <DatePicker onChange={this.changeDateRange} />
-        </nav>
 
+      <section class="section">
         <div class="boxes">
           <Sidebar siteId={state.site.id} before={state.before} after={state.after} />