From 0b846b482d1e3062288e9674b1f732ddc7bf1084 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 1 Mar 2022 19:28:44 -0800 Subject: [PATCH] Mobile layout updates. --- components/common/Link.module.css | 14 +++---- components/common/MobileMenu.module.css | 4 ++ components/common/Table.js | 3 +- components/common/Table.module.css | 25 +++++++++++ components/layout/ButtonLayout.module.css | 1 + components/metrics/BarChart.js | 4 +- components/metrics/BarChart.module.css | 7 ++++ components/metrics/DataTable.module.css | 6 +++ components/metrics/RealtimeViews.js | 2 - components/metrics/WebsiteHeader.js | 41 +++++++++++-------- components/metrics/WebsiteHeader.module.css | 8 +++- components/pages/RealtimeDashboard.js | 1 - components/pages/TestConsole.js | 7 +++- components/settings/AccountSettings.js | 8 ++-- components/settings/ThemeSetting.module.css | 2 +- components/settings/WebsiteSettings.js | 10 ++--- .../settings/WebsiteSettings.module.css | 2 + 17 files changed, 99 insertions(+), 46 deletions(-) diff --git a/components/common/Link.module.css b/components/common/Link.module.css index e37c0105..dd2f92f9 100644 --- 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 { diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css index 5bc2a377..416376f0 100644 --- 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; } diff --git a/components/common/Table.js b/components/common/Table.js index 004b5af6..77a07712 100644 --- a/components/common/Table.js +++ b/components/common/Table.js @@ -76,12 +76,13 @@ export default Table; export const TableRow = ({ columns, row }) => (
- {columns.map(({ key, render, className, style, cell }, index) => ( + {columns.map(({ key, label, render, className, style, cell }, index) => (
+ {label && } {render ? render(row) : row[key]}
))} diff --git a/components/common/Table.module.css b/components/common/Table.module.css index 4d7cd24b..f92338f8 100644 --- 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; + } +} diff --git a/components/layout/ButtonLayout.module.css b/components/layout/ButtonLayout.module.css index ef7707e4..5b979360 100644 --- 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 + * { diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js index e2617012..c38cad9d 100644 --- 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 }} >
diff --git a/components/metrics/BarChart.module.css b/components/metrics/BarChart.module.css index aea86a4c..593bff91 100644 --- 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; + } } diff --git a/components/metrics/DataTable.module.css b/components/metrics/DataTable.module.css index b21b92b9..5831d837 100644 --- 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; + } +} diff --git a/components/metrics/RealtimeViews.js b/components/metrics/RealtimeViews.js index dca82f2e..d96f0c45 100644 --- a/components/metrics/RealtimeViews.js +++ b/components/metrics/RealtimeViews.js @@ -96,7 +96,6 @@ export default function RealtimeViews({ websiteId, data, websites }) { title={} metric={} data={referrers} - height={400} /> )} {filter === FILTER_PAGES && ( @@ -105,7 +104,6 @@ export default function RealtimeViews({ websiteId, data, websites }) { metric={} renderLabel={renderLink} data={pages} - height={400} /> )} diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index a4fb7df0..d484e708 100644 --- 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 ( - -
{header}
- - - - {showLink && ( - } - size="small" - iconRight - > - - - )} - + +
{header}
+
+ +
+
+ + + {showLink && ( + } + size="small" + iconRight + > + + + )} + +
); } diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css index 4c9670fa..d869b91b 100644 --- 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; } } diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js index a7e69726..cd6d2a80 100644 --- a/components/pages/RealtimeDashboard.js +++ b/components/pages/RealtimeDashboard.js @@ -145,7 +145,6 @@ export default function RealtimeDashboard() { metric={} data={countries} renderLabel={renderCountryName} - height={500} /> diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js index 2767de01..c4297acc 100644 --- a/components/pages/TestConsole.js +++ b/components/pages/TestConsole.js @@ -68,7 +68,7 @@ export default function TestConsole() { {show && (
- Page links + Page linksNmo
page one @@ -79,6 +79,11 @@ export default function TestConsole() { page two
+
+ + external link + +
CSS events diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js index 14304bc2..4929b244 100644 --- a/components/settings/AccountSettings.js +++ b/components/settings/AccountSettings.js @@ -53,23 +53,23 @@ export default function AccountSettings() { { key: 'username', label: , - className: 'col-4 col-md-3', + className: 'col-12 col-lg-4', }, { key: 'is_admin', label: , - className: 'col-4 col-md-3', + className: 'col-12 col-lg-3', render: Checkmark, }, { key: 'dashboard', label: , - 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, }, ]; diff --git a/components/settings/ThemeSetting.module.css b/components/settings/ThemeSetting.module.css index b74d21f1..a827c88f 100644 --- 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); } diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js index 77f923ba..257876be 100644 --- a/components/settings/WebsiteSettings.js +++ b/components/settings/WebsiteSettings.js @@ -101,19 +101,19 @@ export default function WebsiteSettings() { { key: 'name', label: , - className: 'col-4 col-xl-3', + className: 'col-12 col-lg-4 col-xl-3', render: DetailsLink, }, { key: 'domain', label: , - className: 'col-4 col-xl-3', + className: 'col-12 col-lg-4 col-xl-3', render: Domain, }, { key: 'account', label: , - 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: , - className: 'col-6 col-xl-4', + className: 'col-12 col-lg-6 col-xl-4', render: DetailsLink, }, { key: 'domain', label: , - className: 'col-6 col-xl-4', + className: 'col-12 col-lg-6 col-xl-4', render: Domain, }, { diff --git a/components/settings/WebsiteSettings.module.css b/components/settings/WebsiteSettings.module.css index 6ecb34c7..a69d4101 100644 --- 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 {