Mobile layout updates.

components/metrics/BarChart.js

@@ -7,7 +7,7 @@ import { dateFormat } from 'lib/date';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import useForceUpdate from 'hooks/useForceUpdate';
-import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 import ChartTooltip from './ChartTooltip';
 
@@ -16,7 +16,6 @@ export default function BarChart({
   datasets,
   unit,
   records,
-  height = DEFAUL_CHART_HEIGHT,
   animationDuration = DEFAULT_ANIMATION_DURATION,
   className,
   stacked = false,
@@ -215,7 +214,6 @@ export default function BarChart({
         data-tip=""
         data-for={`${chartId}-tooltip`}
         className={classNames(styles.chart, className)}
-        style={{ height }}
       >
         <canvas ref={canvas} />
       </div>

components/metrics/BarChart.module.css

@@ -1,3 +1,10 @@
 .chart {
   position: relative;
+  height: 400px;
+}
+
+@media only screen and (max-width: 992px) {
+  .chart {
+    height: 200px;
+  }
 }

components/metrics/DataTable.module.css

@@ -95,3 +95,9 @@
   background: var(--primary400);
   z-index: -1;
 }
+
+@media only screen and (max-width: 992px) {
+  .body {
+    height: auto;
+  }
+}

components/metrics/RealtimeViews.js

@@ -96,7 +96,6 @@ export default function RealtimeViews({ websiteId, data, websites }) {
           title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
           metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
           data={referrers}
-          height={400}
         />
       )}
       {filter === FILTER_PAGES && (
@@ -105,7 +104,6 @@ export default function RealtimeViews({ websiteId, data, websites }) {
           metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
           renderLabel={renderLink}
           data={pages}
-          height={400}
         />
       )}
     </>

components/metrics/WebsiteHeader.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import OverflowText from 'components/common/OverflowText';
@@ -30,24 +31,28 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
   );
 
   return (
-    <PageHeader>
-      <div className={styles.title}>{header}</div>
-      <ActiveUsers className={styles.active} websiteId={websiteId} />
-      <ButtonLayout align="right">
-        <RefreshButton websiteId={websiteId} />
-        {showLink && (
-          <Link
-            href="/website/[...id]"
-            as={`/website/${websiteId}/${title}`}
-            className={styles.link}
-            icon={<Arrow />}
-            size="small"
-            iconRight
-          >
-            <FormattedMessage id="label.view-details" defaultMessage="View details" />
-          </Link>
-        )}
-      </ButtonLayout>
+    <PageHeader className="row">
+      <div className={classNames(styles.title, 'col-12 col-lg-4')}>{header}</div>
+      <div className={classNames(styles.active, 'col-6 col-lg-4')}>
+        <ActiveUsers websiteId={websiteId} />
+      </div>
+      <div className="col-6 col-lg-4">
+        <ButtonLayout align="right">
+          <RefreshButton websiteId={websiteId} />
+          {showLink && (
+            <Link
+              href="/website/[...id]"
+              as={`/website/${websiteId}/${title}`}
+              className={styles.link}
+              icon={<Arrow />}
+              size="small"
+              iconRight
+            >
+              <FormattedMessage id="label.view-details" defaultMessage="View details" />
+            </Link>
+          )}
+        </ButtonLayout>
+      </div>
     </PageHeader>
   );
 }

components/metrics/WebsiteHeader.module.css

@@ -16,8 +16,12 @@
   font-weight: 600;
 }
 
-@media only screen and (max-width: 576px) {
+.active {
+  justify-content: center;
+}
+
+@media only screen and (max-width: 992px) {
   .active {
-    display: none;
+    justify-content: flex-start;
   }
 }