Merge pull request #169 from pi-hole/fix/mobile-long-term-stats

Add time range selector to dashboard when in mobile view

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>

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

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>