Update website details layout.

components/common/Button.module.css

@@ -29,7 +29,7 @@
 }
 
 .large {
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-lg);
 }
 
 .small {

components/common/Link.module.css

@@ -17,7 +17,7 @@ a.link:hover span {
 }
 
 a.link.large {
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-lg);
 }
 
 a.link.small {

components/common/MobileMenu.module.css

@@ -21,7 +21,7 @@
 }
 
 .item {
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-lg);
 }
 
 .item + .item {

components/layout/GridRow.js

@@ -0,0 +1,18 @@
+import { Row, cloneChildren } from 'react-basics';
+import styles from './GridRow.module.css';
+import classNames from 'classnames';
+
+export default function GridRow(props) {
+  const { children, className, ...rowProps } = props;
+  return (
+    <Row {...rowProps} className={className}>
+      {breakpoint =>
+        cloneChildren(children, () => {
+          return {
+            className: classNames(styles.column, styles[breakpoint]),
+          };
+        })
+      }
+    </Row>
+  );
+}

components/layout/GridRow.module.css

@@ -0,0 +1,21 @@
+.column {
+  padding: 20px;
+  border-top: 1px solid var(--base200);
+  border-left: 1px solid var(--base200);
+}
+
+.column:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.column:last-child {
+  padding-right: 0;
+}
+
+.column.xs,
+.column.sm,
+.column.md {
+  border-left: 0;
+  border-right: 0;
+}

components/layout/Header.js

@@ -1,6 +1,6 @@
+import { Row, Column } from 'react-basics';
 import { useRouter } from 'next/router';
 import { FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Icon from 'components/common/Icon';
 import LanguageButton from 'components/settings/LanguageButton';
@@ -25,31 +25,33 @@ export default function Header() {
   return (
     <>
       {allowUpdate && <UpdateNotice />}
-      <header className={classNames(styles.header, 'row')}>
-        <div className={styles.title}>
-          <Icon icon={<Logo />} size="large" className={styles.logo} />
-          <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
-        </div>
-        <HamburgerButton />
-        {user && !adminDisabled && (
-          <div className={styles.links}>
-            <Link href="/dashboard">
-              <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-            </Link>
-            <Link href="/realtime">
-              <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-            </Link>
-            <Link href="/settings">
-              <FormattedMessage id="label.settings" defaultMessage="Settings" />
-            </Link>
-          </div>
-        )}
-        <div className={styles.buttons}>
-          <ThemeButton />
-          <LanguageButton menuAlign="right" />
-          <SettingsButton />
-          {user && !adminDisabled && <UserButton />}
-        </div>
+      <header className={styles.header}>
+        <Row>
+          <Column className={styles.title}>
+            <Icon icon={<Logo />} size="large" className={styles.logo} />
+            <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
+          </Column>
+          <HamburgerButton />
+          {user && !adminDisabled && (
+            <div className={styles.links}>
+              <Link href="/dashboard">
+                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
+              </Link>
+              <Link href="/realtime">
+                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+              </Link>
+              <Link href="/settings">
+                <FormattedMessage id="label.settings" defaultMessage="Settings" />
+              </Link>
+            </div>
+          )}
+          <Column className={styles.buttons}>
+            <ThemeButton />
+            <LanguageButton menuAlign="right" />
+            <SettingsButton />
+            {user && !adminDisabled && <UserButton />}
+          </Column>
+        </Row>
       </header>
     </>
   );

components/layout/Header.module.css

@@ -10,7 +10,7 @@
   font-size: var(--font-size-lg);
   display: flex;
   align-items: center;
-  line-height: 1.4;
+  flex-direction: row;
 }
 
 .logo {
@@ -33,6 +33,7 @@
 .buttons {
   flex: 1;
   display: flex;
+  flex-direction: row;
   justify-content: flex-end;
   align-items: center;
 }

components/metrics/WebsiteChart.js

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import classNames from 'classnames';
+import { useMemo } from 'react';
+import { Row, Column } from 'react-basics';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import WebsiteHeader from './WebsiteHeader';
@@ -20,7 +20,6 @@ export default function WebsiteChart({
   title,
   domain,
   stickyHeader = false,
-  showLink = false,
   showChart = true,
   onDataLoad = () => {},
 }) {
@@ -80,33 +79,34 @@ export default function WebsiteChart({
   }
 
   return (
-    <div className={styles.container}>
-      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
-      <div className={classNames(styles.header, 'row')}>
-        <StickyHeader
-          className={classNames(styles.metrics, 'col row')}
-          stickyClassName={styles.sticky}
-          enabled={stickyHeader}
-        >
-          <FilterTags
-            params={{ url, referrer, os, browser, device, country }}
-            onClick={handleCloseFilter}
-          />
-          <div className="col-12 col-lg-9">
+    <>
+      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} />
+
+      <StickyHeader
+        className={styles.metrics}
+        stickyClassName={styles.sticky}
+        enabled={stickyHeader}
+      >
+        <FilterTags
+          params={{ url, referrer, os, browser, device, country }}
+          onClick={handleCloseFilter}
+        />
+        <Row className={styles.header}>
+          <Column xs={12} sm={12} md={12} defaultSize={10}>
             <MetricsBar websiteId={websiteId} />
-          </div>
-          <div className={classNames(styles.filter, 'col-12 col-lg-3')}>
+          </Column>
+          <Column className={styles.filter} xs={12} sm={12} md={12} defaultSize={2}>
             <DateFilter
               value={value}
               startDate={startDate}
               endDate={endDate}
               onChange={handleDateChange}
             />
-          </div>
-        </StickyHeader>
-      </div>
-      <div className="row">
-        <div className={classNames(styles.chart, 'col')}>
+          </Column>
+        </Row>
+      </StickyHeader>
+      <Row>
+        <Column className={styles.chart}>
           {error && <ErrorMessage />}
           {showChart && (
             <PageviewsChart
@@ -117,8 +117,8 @@ export default function WebsiteChart({
               loading={loading}
             />
           )}
-        </div>
-      </div>
-    </div>
+        </Column>
+      </Row>
+    </>
   );
 }

components/metrics/WebsiteChart.module.css

@@ -7,10 +7,11 @@
 
 .chart {
   position: relative;
+  padding-bottom: 20px;
 }
 
 .title {
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-lg);
   line-height: 60px;
   font-weight: 600;
 }
@@ -37,13 +38,5 @@
 }
 
 .filter {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-@media only screen and (max-width: 992px) {
-  .filter {
-    display: block;
-  }
+  align-self: center;
 }

components/metrics/WebsiteHeader.js

@@ -1,8 +1,6 @@
 import { Row, Column } from 'react-basics';
 import Favicon from 'components/common/Favicon';
 import OverflowText from 'components/common/OverflowText';
-import RefreshButton from 'components/common/RefreshButton';
-import ButtonLayout from 'components/layout/ButtonLayout';
 import PageHeader from 'components/layout/PageHeader';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
@@ -11,18 +9,13 @@ export default function WebsiteHeader({ websiteId, title, domain }) {
   return (
     <PageHeader>
       <Row>
-        <Column className={styles.title} xs={12} sm={12} md={4} lg={4}>
+        <Column className={styles.title} variant="two">
           <Favicon domain={domain} />
           <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
         </Column>
-        <Column className={styles.active} xs={12} sm={12} md={4} lg={4}>
+        <Column className={styles.active} variant="two">
           <ActiveUsers websiteId={websiteId} />
         </Column>
-        <Column xs={12} sm={12} md={4} lg={4}>
-          <ButtonLayout align="right">
-            <RefreshButton websiteId={websiteId} />
-          </ButtonLayout>
-        </Column>
       </Row>
     </PageHeader>
   );

components/pages/WebsiteDetails.js

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Row, Column } from 'react-basics';
+import { Column } from 'react-basics';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
 import Page from 'components/layout/Page';
+import GridRow from 'components/layout/GridRow';
 import MenuLayout from 'components/layout/MenuLayout';
 import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
@@ -15,11 +16,8 @@ import OSTable from 'components/metrics/OSTable';
 import DevicesTable from 'components/metrics/DevicesTable';
 import CountriesTable from 'components/metrics/CountriesTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
-import EventsTable from 'components/metrics/EventsTable';
-import EventsChart from 'components/metrics/EventsChart';
 import ScreenTable from 'components/metrics/ScreenTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
-import EventDataButton from 'components/common/EventDataButton';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
@@ -35,7 +33,6 @@ const messages = defineMessages({
   devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
   countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
   languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
-  events: { id: 'metrics.events', defaultMessage: 'Events' },
   query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
 });
 
@@ -48,7 +45,6 @@ const views = {
   screen: ScreenTable,
   country: CountriesTable,
   language: LanguagesTable,
-  event: EventsTable,
   query: QueryParametersTable,
 };
 
@@ -56,7 +52,6 @@ export default function WebsiteDetails({ websiteId }) {
   const { data } = useFetch(`/websites/${websiteId}`);
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
-  const [eventsData, setEventsData] = useState();
   const {
     resolve,
     query: { view },
@@ -65,7 +60,7 @@ export default function WebsiteDetails({ websiteId }) {
 
   const BackButton = () => (
     <div key="back-button" className={classNames(styles.backButton, 'col-12')}>
-      <Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small">
+      <Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} sizes="small">
         <FormattedMessage id="label.back" defaultMessage="Back" />
       </Link>
     </div>
@@ -107,10 +102,6 @@ export default function WebsiteDetails({ websiteId }) {
       label: formatMessage(messages.screens),
       value: resolve({ view: 'screen' }),
     },
-    {
-      label: formatMessage(messages.events),
-      value: resolve({ view: 'event' }),
-    },
     {
       label: formatMessage(messages.query),
       value: resolve({ view: 'query' }),
@@ -137,57 +128,44 @@ export default function WebsiteDetails({ websiteId }) {
 
   return (
     <Page>
-      <Row>
-        <Column className={styles.chart}>
-          <WebsiteChart
-            websiteId={websiteId}
-            title={data.name}
-            domain={data.domain}
-            onDataLoad={handleDataLoad}
-            showLink={false}
-            stickyHeader
-          />
-          {!chartLoaded && <Loading />}
-        </Column>
-      </Row>
+      <WebsiteChart
+        websiteId={websiteId}
+        title={data.name}
+        domain={data.domain}
+        onDataLoad={handleDataLoad}
+        showLink={false}
+        stickyHeader
+      />
+      {!chartLoaded && <Loading />}
       {chartLoaded && !view && (
         <>
-          <Row>
-            <Column md={12} lg={6}>
+          <GridRow>
+            <Column variant="two" className={styles.column}>
               <PagesTable {...tableProps} />
             </Column>
-            <Column md={12} lg={6}>
+            <Column variant="two" className={styles.column}>
               <ReferrersTable {...tableProps} />
             </Column>
-          </Row>
-          <Row>
-            <Column md={12} lg={4}>
+          </GridRow>
+          <GridRow>
+            <Column variant="three" className={styles.column}>
               <BrowsersTable {...tableProps} />
             </Column>
-            <Column md={12} lg={4}>
+            <Column variant="three" className={styles.column}>
               <OSTable {...tableProps} />
             </Column>
-            <Column md={12} lg={4}>
+            <Column variant="three" className={styles.column}>
               <DevicesTable {...tableProps} />
             </Column>
-          </Row>
-          <Row>
-            <Column xs={12} md={12} lg={8}>
+          </GridRow>
+          <GridRow>
+            <Column xs={12} sm={12} md={12} defaultSize={8}>
               <WorldMap data={countryData} />
             </Column>
-            <Column xs={12} md={12} lg={4}>
+            <Column xs={12} sm={12} md={12} defaultSize={4}>
               <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </Column>
-          </Row>
-          <Row className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
-            <Column xs={12} md={12} lg={4}>
-              <EventsTable {...tableProps} onDataLoad={setEventsData} />
-            </Column>
-            <Column xs={12} md={12} lg={8}>
-              <EventDataButton websiteId={websiteId} />
-              <EventsChart className={styles.eventschart} websiteId={websiteId} />
-            </Column>
-          </Row>
+          </GridRow>
         </>
       )}
       {view && chartLoaded && (

components/pages/WebsiteDetails.module.css

@@ -29,14 +29,3 @@
 .hidden {
   display: none;
 }
-
-.eventschart {
-  padding-top: 30px;
-}
-
-@media only screen and (max-width: 992px) {
-  .menu {
-    display: flex;
-    flex-direction: column;
-  }
-}