Mobile layout updates.

2024-11-15 09:45:04 +01:00 · 2022-03-01 19:28:44 -08:00 · 2022-03-01 19:28:44 -08:00 · 0b846b482d
commit 0b846b482d
parent 98b2ee29ef
17 changed files with 99 additions and 46 deletions
--- a/components/common/Link.module.css
+++ b/components/common/Link.module.css
@ -8,14 +8,12 @@ a.link:visited {
  align-items: center;
 }

-a.link:hover:before {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  width: 100%;
-  height: 2px;
-  background: var(--primary400);
-  opacity: 0.5;
+a.link span {
+  border-bottom: 2px solid transparent;
+}
+
+a.link:hover span {
+  border-bottom: 2px solid var(--primary400);
 }

 a.link.large {
--- a/components/common/MobileMenu.module.css
+++ b/components/common/MobileMenu.module.css
@ -28,6 +28,10 @@
  margin-top: 20px;
 }

+.item:last-child {
+  margin-top: 60px;
+}
+
 .button {
  margin-right: 15px;
 }
--- a/components/common/Table.js
+++ b/components/common/Table.js
@ -76,12 +76,13 @@ export default Table;

 export const TableRow = ({ columns, row }) => (
  <div className={classNames(styles.row, 'row')}>
-    {columns.map(({ key, render, className, style, cell }, index) => (
+    {columns.map(({ key, label, render, className, style, cell }, index) => (
      <div
        key={`${key}-${index}`}
        className={classNames(styles.cell, className, cell?.className)}
        style={{ ...style, ...cell?.style }}
      >
+        {label && <label>{label}</label>}
        {render ? render(row) : row[key]}
      </div>
    ))}
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@ -3,6 +3,12 @@
  flex-direction: column;
 }

+.table label {
+  display: none;
+  font-size: var(--font-size-xsmall);
+  font-weight: bold;
+}
+
 .header {
  border-bottom: 1px solid var(--gray300);
 }
@ -26,5 +32,24 @@

 .cell {
  display: flex;
+  flex-direction: column;
  align-items: flex-start;
 }
+
+@media only screen and (max-width: 992px) {
+  .table label {
+    display: block;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .row {
+    flex-direction: column;
+  }
+
+  .cell {
+    margin-bottom: 20px;
+  }
+}
--- a/components/layout/ButtonLayout.module.css
+++ b/components/layout/ButtonLayout.module.css
@ -1,6 +1,7 @@
 .buttons {
  display: flex;
  align-items: center;
+  width: 100%;
 }

 .buttons button + * {
--- a/components/metrics/BarChart.js
+++ b/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>
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@ -1,3 +1,10 @@
 .chart {
  position: relative;
+  height: 400px;
+}
+
+@media only screen and (max-width: 992px) {
+  .chart {
+    height: 200px;
+  }
 }
--- a/components/metrics/DataTable.module.css
+++ b/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;
+  }
+}
--- a/components/metrics/RealtimeViews.js
+++ b/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}
        />
      )}
    </>
--- a/components/metrics/WebsiteHeader.js
+++ b/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>
  );
 }
--- a/components/metrics/WebsiteHeader.module.css
+++ b/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;
  }
 }
--- a/components/pages/RealtimeDashboard.js
+++ b/components/pages/RealtimeDashboard.js
@ -145,7 +145,6 @@ export default function RealtimeDashboard() {
              metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
              data={countries}
              renderLabel={renderCountryName}
-              height={500}
            />
          </GridColumn>
          <GridColumn xs={12} lg={8}>
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@ -68,7 +68,7 @@ export default function TestConsole() {
          {show && (
            <div className={classNames(styles.test, 'row')}>
              <div className="col-4">
-                <PageHeader>Page links</PageHeader>
+                <PageHeader>Page links</PageHeader>Nmo
                <div>
                  <Link href={`?page=1`}>
                    <a>page one</a>
@ -79,6 +79,11 @@ export default function TestConsole() {
                    <a>page two</a>
                  </Link>
                </div>
+                <div>
+                  <Link href={`https://www.google.com`}>
+                    <a className="umami--click--external-link">external link</a>
+                  </Link>
+                </div>
              </div>
              <div className="col-4">
                <PageHeader>CSS events</PageHeader>
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@ -53,23 +53,23 @@ export default function AccountSettings() {
    {
      key: 'username',
      label: <FormattedMessage id="label.username" defaultMessage="Username" />,
-      className: 'col-4 col-md-3',
+      className: 'col-12 col-lg-4',
    },
    {
      key: 'is_admin',
      label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
-      className: 'col-4 col-md-3',
+      className: 'col-12 col-lg-3',
      render: Checkmark,
    },
    {
      key: 'dashboard',
      label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
-      className: 'col-4 col-md-3',
+      className: 'col-12 col-lg-3',
      render: DashboardLink,
    },
    {
      key: 'actions',
-      className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
+      className: classNames(styles.buttons, 'col-12 col-lg-2 pt-2 pt-md-0'),
      render: Buttons,
    },
  ];
--- a/components/settings/ThemeSetting.module.css
+++ b/components/settings/ThemeSetting.module.css
@ -7,5 +7,5 @@
 }

 .active {
-  border: 1px solid var(--gray500);
+  border: 1px solid var(--primary400);
 }
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@ -101,19 +101,19 @@ export default function WebsiteSettings() {
    {
      key: 'name',
      label: <FormattedMessage id="label.name" defaultMessage="Name" />,
-      className: 'col-4 col-xl-3',
+      className: 'col-12 col-lg-4 col-xl-3',
      render: DetailsLink,
    },
    {
      key: 'domain',
      label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
-      className: 'col-4 col-xl-3',
+      className: 'col-12 col-lg-4 col-xl-3',
      render: Domain,
    },
    {
      key: 'account',
      label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
-      className: 'col-4 col-xl-1',
+      className: 'col-12 col-lg-4 col-xl-1',
    },
    {
      key: 'action',
@ -126,13 +126,13 @@ export default function WebsiteSettings() {
    {
      key: 'name',
      label: <FormattedMessage id="label.name" defaultMessage="Name" />,
-      className: 'col-6 col-xl-4',
+      className: 'col-12 col-lg-6 col-xl-4',
      render: DetailsLink,
    },
    {
      key: 'domain',
      label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
-      className: 'col-6 col-xl-4',
+      className: 'col-12 col-lg-6 col-xl-4',
      render: Domain,
    },
    {
--- a/components/settings/WebsiteSettings.module.css
+++ b/components/settings/WebsiteSettings.module.css
@ -3,7 +3,9 @@
 }

 .buttons {
+  display: flex;
  justify-content: flex-end;
+  width: 100%;
 }

 .detailLink {