Responsive CSS updates.

components/WebsiteDetails.module.css

@@ -12,6 +12,7 @@
 
 .content {
   min-height: 600px;
+  padding: 20px 0;
 }
 
 .backButton {
@@ -30,7 +31,7 @@
 
 .row > [class*='col-'] {
   border-left: 1px solid var(--gray300);
-  padding: 0 20px;
+  padding: 20px;
 }
 
 .row > [class*='col-']:first-child {

components/common/Button.module.css

@@ -19,7 +19,7 @@
 }
 
 .button:active {
-  color: var(--gray700);
+  color: var(--gray900);
 }
 
 .large {

components/common/Calendar.module.css

@@ -17,7 +17,7 @@
   text-align: center;
   vertical-align: center;
   height: 40px;
-  min-width: 40px;
+  width: 40px;
   border-radius: 5px;
   border: 1px solid transparent;
 }
@@ -103,3 +103,9 @@
 .icon {
   margin-left: 10px;
 }
+
+@media only screen and (max-width: 992px) {
+  .calendar table {
+    max-width: calc(100vw - 30px);
+  }
+}

components/common/MenuButton.js

@@ -37,7 +37,7 @@ export default function MenuButton({
     <div className={styles.container} ref={ref}>
       <Button
         icon={icon}
-        className={classNames({ [styles.open]: showMenu })}
+        className={classNames(styles.button, { [styles.open]: showMenu })}
         onClick={toggleMenu}
         variant="light"
       >

components/common/MenuButton.module.css

@@ -4,6 +4,11 @@
   cursor: pointer;
 }
 
+.button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
 .menu {
   z-index: 100;
 }
@@ -12,10 +17,8 @@
   font-size: var(--font-size-small);
 }
 
-.open {
-  background: var(--gray200);
-}
-
+.open,
 .open:hover {
-  background: var(--gray200);
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
 }

components/layout/ButtonLayout.js

@@ -2,6 +2,16 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './ButtonLayout.module.css';
 
-export default function ButtonLayout({ className, children }) {
-  return <div className={classNames(styles.buttons, className)}>{children}</div>;
+export default function ButtonLayout({ className, children, align = 'center' }) {
+  return (
+    <div
+      className={classNames(styles.buttons, className, {
+        [styles.left]: align === 'left',
+        [styles.center]: align === 'center',
+        [styles.right]: align === 'right',
+      })}
+    >
+      {children}
+    </div>
+  );
 }

components/layout/ButtonLayout.module.css

@@ -6,3 +6,15 @@
 .buttons button + * {
   margin-left: 10px;
 }
+
+.center {
+  justify-content: center;
+}
+
+.left {
+  justify-content: flex-start;
+}
+
+.right {
+  justify-content: flex-end;
+}

components/layout/Page.module.css

@@ -1,6 +1,7 @@
 .page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   padding: 0 30px;
   background: var(--gray50);
-  height: 100%;
-  overflow: hidden;
 }

components/layout/PageHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ children }) {
-  return <div className={styles.header}>{children}</div>;
+export default function PageHeader({ children, className }) {
+  return <div className={classNames(styles.header, className)}>{children}</div>;
 }

components/metrics/BarChart.js

@@ -24,7 +24,7 @@ export default function BarChart({
 }) {
   const canvas = useRef();
   const chart = useRef();
-  const [tooltip, setTooltip] = useState({});
+  const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
   const colors = {
@@ -69,18 +69,19 @@ export default function BarChart({
   function renderTooltip(model) {
     const { opacity, title, body, labelColors } = model;
 
-    if (!opacity) {
+    if (!opacity || !title) {
       setTooltip(null);
-    } else {
-      const [label, value] = body[0].lines[0].split(':');
-
-      setTooltip({
-        title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
-        value,
-        label,
-        labelColor: labelColors[0].backgroundColor,
-      });
+      return;
     }
+
+    const [label, value] = body[0].lines[0].split(':');
+
+    setTooltip({
+      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      value,
+      label,
+      labelColor: labelColors[0].backgroundColor,
+    });
   }
 
   function getTooltipFormat(unit) {

components/metrics/MetricCard.module.css

@@ -3,7 +3,6 @@
   flex-direction: column;
   justify-content: center;
   min-width: 140px;
-  padding-right: 20px;
 }
 
 .value {

components/metrics/MetricsBar.module.css

@@ -3,11 +3,15 @@
   cursor: pointer;
 }
 
+.bar > div + div {
+  padding-left: 20px;
+}
+
 @media only screen and (max-width: 992px) {
   .bar {
     justify-content: space-between;
   }
-  .bar > div:last-child {
+  .bar > div:nth-child(n + 3) {
     display: none;
   }
 }

components/metrics/MetricsTable.js

@@ -24,7 +24,6 @@ export default function MetricsTable({
   dataFilter,
   filterOptions,
   limit,
-  headerComponent,
   renderLabel,
   onDataLoad = () => {},
   onExpand = () => {},
@@ -85,7 +84,6 @@ export default function MetricsTable({
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>
-            {headerComponent}
             <div className={styles.metric} onClick={handleSetFormat}>
               {metric}
             </div>

components/metrics/MetricsTable.module.css

@@ -2,7 +2,6 @@
   position: relative;
   min-height: 460px;
   font-size: var(--font-size-small);
-  padding: 20px 0;
   display: flex;
   flex-direction: column;
 }

components/metrics/PagesTable.js

@@ -4,6 +4,7 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { urlFilter } from 'lib/filters';
 import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import MetricsTable from './MetricsTable';
+import ButtonLayout from '../layout/ButtonLayout';
 
 export default function PagesTable({ websiteId, token, websiteDomain, limit, onExpand }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
@@ -17,24 +18,28 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, onE
   ];
 
   return (
-    <MetricsTable
-      title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
-      type="url"
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      headerComponent={
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
-      }
-      websiteId={websiteId}
-      token={token}
-      limit={limit}
-      dataFilter={urlFilter}
-      filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
-      renderLabel={({ x }) => decodeURI(x)}
-      onExpand={onExpand}
-    />
+    <>
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+        type="url"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        token={token}
+        limit={limit}
+        dataFilter={urlFilter}
+        filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
+        renderLabel={({ x }) => decodeURI(x)}
+        onExpand={onExpand}
+      />
+    </>
   );
 }
 
 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };

components/metrics/ReferrersTable.js

@@ -4,6 +4,7 @@ import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
 import ButtonGroup from 'components/common/ButtonGroup';
 import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
+import ButtonLayout from '../layout/ButtonLayout';
 
 export default function ReferrersTable({
   websiteId,
@@ -37,29 +38,33 @@ export default function ReferrersTable({
   };
 
   return (
-    <MetricsTable
-      title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
-      type="referrer"
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      headerComponent={
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
-      }
-      websiteId={websiteId}
-      websiteDomain={websiteDomain}
-      token={token}
-      limit={limit}
-      dataFilter={refFilter}
-      filterOptions={{
-        domain: websiteDomain,
-        domainOnly: filter === FILTER_DOMAIN_ONLY,
-        raw: filter === FILTER_RAW,
-      }}
-      onExpand={onExpand}
-      renderLabel={renderLink}
-    />
+    <>
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+        type="referrer"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        websiteDomain={websiteDomain}
+        token={token}
+        limit={limit}
+        dataFilter={refFilter}
+        filterOptions={{
+          domain: websiteDomain,
+          domainOnly: filter === FILTER_DOMAIN_ONLY,
+          raw: filter === FILTER_RAW,
+        }}
+        onExpand={onExpand}
+        renderLabel={renderLink}
+      />
+    </>
   );
 }
 
 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };

components/metrics/WebsiteHeader.js

@@ -14,7 +14,7 @@ export default function WebsiteHeader({ websiteId, token, title, showLink = fals
     <PageHeader>
       <div className={styles.title}>{title}</div>
       <ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
-      <ButtonLayout>
+      <ButtonLayout align="right">
         <RefreshButton websiteId={websiteId} />
         {showLink && (
           <Link

components/settings/AccountSettings.js

@@ -40,7 +40,7 @@ export default function AccountSettings() {
 
   const Buttons = row =>
     row.username !== 'admin' ? (
-      <ButtonLayout>
+      <ButtonLayout align="right">
         <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
           <div>
             <FormattedMessage id="button.edit" defaultMessage="Edit" />

components/settings/ThemeButton.module.css

@@ -1,3 +1,7 @@
+.button {
+  width: 50px;
+}
+
 .button svg {
   position: absolute;
 }

components/settings/WebsiteSettings.js

@@ -32,7 +32,7 @@ export default function WebsiteSettings() {
   const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
 
   const Buttons = row => (
-    <ButtonLayout>
+    <ButtonLayout align="right">
       {row.share_id && (
         <Button
           icon={<LinkIcon />}

styles/index.css

@@ -5,11 +5,11 @@ body {
   line-height: 1.8;
   padding: 0;
   margin: 0;
-  height: 100%;
-  overflow: auto;
   box-sizing: border-box;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
+  flex: 1;
 
   font-size: var(--font-size-normal);
   color: var(--gray900);
@@ -90,6 +90,8 @@ dd {
 
 main {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 svg {