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

move table components to row 1 if showing less than 1 day of data

Browse Source
This commit is contained in:
Danny van Kooten 2018-10-10 16:43:36 +02:00
parent f92d04a4ba
commit fc5bd47f53
3 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/src/js/components/Chart.js vendored
View File

@ -136,6 +136,8 @@ class Chart extends Component {
@bind @bind
redrawChart() { redrawChart() {
let data = this.state.data; 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' : ''; this.base.parentNode.style.display = data.length <= 1 ? 'none' : '';
if(data.length <= 1) { if(data.length <= 1) {
return; return;

3
assets/src/js/pages/dashboard.js
View File

@ -12,6 +12,7 @@ import Table from '../components/Table.js';
import Chart from '../components/Chart.js'; import Chart from '../components/Chart.js';
import { bind } from 'decko'; import { bind } from 'decko';
import Client from '../lib/client.js'; import Client from '../lib/client.js';
import classNames from 'classnames';
const defaultSite = { const defaultSite = {
id: window.localStorage.getItem('site_id') || 1, id: window.localStorage.getItem('site_id') || 1,
@ -146,7 +147,7 @@ class Dashboard extends Component {
return ( return (
<div class="app-page "> <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"> <header class="section">
<nav class="main-nav"> <nav class="main-nav">

3
assets/src/sass/styles.scss
View File

@ -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-pages { grid-column: 2; grid-row: 2 ; }
.box-referrers { grid-column: 3; 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 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; align-items: center; }
.half div { text-align: right; } .half div { text-align: right; }