From 0135c9091251c19cab96354ec1ead67b0e1cf827 Mon Sep 17 00:00:00 2001
From: Mcat12 <newtoncat12@yahoo.com>
Date: Fri, 22 Mar 2019 19:25:49 -0700
Subject: [PATCH] Add time range selector to dashboard when in mobile view

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>
---
 src/components/dashboard/TimeRangeSelector.tsx | 11 +++++++++--
 src/scss/_custom.scss                          | 15 +++++++++++++++
 src/views/Dashboard.tsx                        |  6 ++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/TimeRangeSelector.tsx b/src/components/dashboard/TimeRangeSelector.tsx
index 53e73ea..dfe0a7c 100644
--- a/src/components/dashboard/TimeRangeSelector.tsx
+++ b/src/components/dashboard/TimeRangeSelector.tsx
@@ -36,6 +36,11 @@ export interface TimeRangeSelectorProps {
    * If the chosen label should be shown outside of the selector
    */
   showLabel: boolean;
+
+  /**
+   * The button size to use
+   */
+  size?: string;
 }
 
 /**
@@ -80,6 +85,7 @@ export const TimeRangeSelector = (
   const last24Hours = t("Last 24 Hours");
   const today = t("Today");
   const label = renderLabel(props);
+  const size = props.size ? props.size : "sm";
 
   return (
     <DateRangePicker
@@ -106,7 +112,7 @@ export const TimeRangeSelector = (
       showDropdowns={true}
       ranges={translatedDateRanges}
     >
-      <Button color="light" size="sm">
+      <Button color="light" size={size}>
         <i className="far fa-clock fa-lg" />
         {label ? (
           <Fragment>
@@ -123,13 +129,14 @@ export const TranslatedTimeRangeSelector = withNamespaces("time-ranges")(
   TimeRangeSelector
 );
 
-export const TimeRangeSelectorContainer = () => (
+export const TimeRangeSelectorContainer = ({ size }: { size?: string }) => (
   <TimeRangeContext.Consumer>
     {context => (
       <TranslatedTimeRangeSelector
         range={context.range}
         onSelect={context.update}
         showLabel={true}
+        size={size}
       />
     )}
   </TimeRangeContext.Consumer>
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 9f25269..2d4e32d 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -203,3 +203,18 @@ body {
   // Prevent reactstrap's modal from incorrectly adjusting the padding
   padding-right: 0 !important;
 }
+
+@media (max-width: 992px) {
+  // Show the time selector when the one in the header is hidden
+  .dashboard-time-selector {
+    text-align: center;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 993px) {
+  // Hide the time selector when the one in the header is showing
+  .dashboard-time-selector {
+    display: none;
+  }
+}
diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx
index f2a92ea..fec0d0a 100644
--- a/src/views/Dashboard.tsx
+++ b/src/views/Dashboard.tsx
@@ -18,9 +18,15 @@ import TopDomains from "../components/dashboard/TopDomains";
 import TopBlocked from "../components/dashboard/TopBlocked";
 import TopClients from "../components/dashboard/TopClients";
 import api from "../util/api";
+import { TimeRangeSelectorContainer } from "../components/dashboard/TimeRangeSelector";
 
 export default () => (
   <div className="animated fadeIn">
+    {api.loggedIn ? (
+      <div className="dashboard-time-selector">
+        <TimeRangeSelectorContainer size="md" />
+      </div>
+    ) : null}
     <div className="row">
       <SummaryStats />
     </div>