From fc5bd47f53cea2153dc553b93e5cbeb34d5c4b64 Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@gmail.com>
Date: Wed, 10 Oct 2018 16:43:36 +0200
Subject: [PATCH] move table components to row 1 if showing less than 1 day of
 data

---
 assets/src/js/components/Chart.js | 2 ++
 assets/src/js/pages/dashboard.js  | 3 ++-
 assets/src/sass/styles.scss       | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/assets/src/js/components/Chart.js b/assets/src/js/components/Chart.js
index 589d8497..93313b34 100644
--- a/assets/src/js/components/Chart.js
+++ b/assets/src/js/components/Chart.js
@@ -136,6 +136,8 @@ class Chart extends Component {
   @bind
   redrawChart() {
     let data = this.state.data;
+
+    // hide chart & bail if we're trying to show less than 1 day worth of data
     this.base.parentNode.style.display = data.length <= 1 ? 'none' : '';
     if(data.length <= 1) {
       return;
diff --git a/assets/src/js/pages/dashboard.js b/assets/src/js/pages/dashboard.js
index 008316f2..4a15f5f5 100644
--- a/assets/src/js/pages/dashboard.js
+++ b/assets/src/js/pages/dashboard.js
@@ -12,6 +12,7 @@ import Table from '../components/Table.js';
 import Chart from '../components/Chart.js';
 import { bind } from 'decko';
 import Client from '../lib/client.js';
+import classNames from 'classnames';
 
 const defaultSite = { 
   id: window.localStorage.getItem('site_id') || 1, 
@@ -146,7 +147,7 @@ class Dashboard extends Component {
 
     return (
   <div class="app-page ">
-     <div class={"rapper animated fadeInUp delayed_02s " + state.period }>
+     <div class={`rapper animated fadeInUp delayed_02s ${state.period} ` + classNames({ ltday: state.before - state.after < 86400 })}>
 
       <header class="section">
         <nav class="main-nav">
diff --git a/assets/src/sass/styles.scss b/assets/src/sass/styles.scss
index 5498a9d0..1c91bd81 100644
--- a/assets/src/sass/styles.scss
+++ b/assets/src/sass/styles.scss
@@ -129,7 +129,8 @@ body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; p
     .box-pages { grid-column: 2; grid-row: 2 ; }
     .box-referrers { grid-column: 3; grid-row: 2; }
 
-    .today .box-pages, .today .box-referrers{ grid-row: 1; }
+    /* since we hide chart for views with less than a day worth of data, move tables to row 1 */
+    .ltday .box-pages, .ltday .box-referrers{ grid-row: 1; }
     
     .half { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; align-items: center; }
     .half div { text-align: right; }