Mobile layout updates.

components/common/Link.module.css

@@ -8,14 +8,12 @@ a.link:visited {
   align-items: center;
 }
 
-a.link:hover:before {
+a.link span {
-  content: '';
+  border-bottom: 2px solid transparent;
-  position: absolute;
+}
-  bottom: -2px;
+
-  width: 100%;
+a.link:hover span {
-  height: 2px;
+  border-bottom: 2px solid var(--primary400);
-  background: var(--primary400);
-  opacity: 0.5;
 }
 
 a.link.large {

components/common/MobileMenu.module.css

@@ -28,6 +28,10 @@
   margin-top: 20px;
 }
 
+.item:last-child {
+  margin-top: 60px;
+}
+
 .button {
   margin-right: 15px;
 }

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>
     ))}

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

components/layout/ButtonLayout.module.css

@@ -1,6 +1,7 @@
 .buttons {
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .buttons button + * {

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>
+    <PageHeader className="row">
-      <div className={styles.title}>{header}</div>
+      <div className={classNames(styles.title, 'col-12 col-lg-4')}>{header}</div>
-      <ActiveUsers className={styles.active} websiteId={websiteId} />
+      <div className={classNames(styles.active, 'col-6 col-lg-4')}>
-      <ButtonLayout align="right">
+        <ActiveUsers websiteId={websiteId} />
-        <RefreshButton websiteId={websiteId} />
+      </div>
-        {showLink && (
+      <div className="col-6 col-lg-4">
-          <Link
+        <ButtonLayout align="right">
-            href="/website/[...id]"
+          <RefreshButton websiteId={websiteId} />
-            as={`/website/${websiteId}/${title}`}
+          {showLink && (
-            className={styles.link}
+            <Link
-            icon={<Arrow />}
+              href="/website/[...id]"
-            size="small"
+              as={`/website/${websiteId}/${title}`}
-            iconRight
+              className={styles.link}
-          >
+              icon={<Arrow />}
-            <FormattedMessage id="label.view-details" defaultMessage="View details" />
+              size="small"
-          </Link>
+              iconRight
-        )}
+            >
-      </ButtonLayout>
+              <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;
   }
 }

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

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>

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,
     },
   ];

components/settings/ThemeSetting.module.css

@@ -7,5 +7,5 @@
 }
 
 .active {
-  border: 1px solid var(--gray500);
+  border: 1px solid var(--primary400);
 }

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,
     },
     {

components/settings/WebsiteSettings.module.css

@@ -3,7 +3,9 @@
 }
 
 .buttons {
+  display: flex;
   justify-content: flex-end;
+  width: 100%;
 }
 
 .detailLink {