From f18491a818904fb22969dca8bf9637297dac0b7a Mon Sep 17 00:00:00 2001 From: "sur.la.route" Date: Sat, 19 Feb 2022 17:15:44 -0600 Subject: [PATCH 1/4] add netlify.toml for part of #731 Netlify next functions plugin is no longer copying in the build files. This adds the db file from the build into the functions. --- netlify.toml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 netlify.toml diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 00000000..c7168738 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,2 @@ +[functions] +included_files = ["public/geo/*.mmdb"] From 07e782ca393503b56edbd8ac55a5a43ee6dbaf4f Mon Sep 17 00:00:00 2001 From: Sophia Willows <20146550+sophiabits@users.noreply.github.com> Date: Sun, 20 Feb 2022 14:08:43 +1300 Subject: [PATCH 2/4] Truncate text in domain & name columns of website settings table when text content doesn't fit within the cell. --- components/common/OverflowText.js | 66 +++++++++++++++++++ components/common/OverflowText.module.css | 6 ++ components/settings/WebsiteSettings.js | 15 ++++- .../settings/WebsiteSettings.module.css | 4 ++ 4 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 components/common/OverflowText.js create mode 100644 components/common/OverflowText.module.css diff --git a/components/common/OverflowText.js b/components/common/OverflowText.js new file mode 100644 index 00000000..d67c4923 --- /dev/null +++ b/components/common/OverflowText.js @@ -0,0 +1,66 @@ +import PropTypes from 'prop-types'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import ReactTooltip from 'react-tooltip'; + +import styles from './OverflowText.module.css'; + +const OverflowText = ({ children, tooltipId }) => { + const measureEl = useRef(); + const [isOverflown, setIsOverflown] = useState(false); + + const measure = useCallback( + el => { + if (!el) return; + setIsOverflown(el.scrollWidth > el.clientWidth); + }, + [setIsOverflown], + ); + + // Do one measure on mount + useEffect(() => { + measure(measureEl.current); + }, [measure]); + + // Set up resize listener for subsequent measures + useEffect(() => { + if (!measureEl.current) return; + + // Destructure ref in case it changes out from under us + const el = measureEl.current; + + if ('ResizeObserver' in global) { + // Ideally, we have access to ResizeObservers + const observer = new ResizeObserver(() => { + measure(el); + }); + observer.observe(el); + return () => observer.unobserve(el); + } else { + // Otherwise, fall back to measuring on window resizes + const handler = () => measure(el); + + window.addEventListener('resize', handler, { passive: true }); + return () => window.removeEventListener('resize', handler, { passive: true }); + } + }); + + return ( + + {children} + {isOverflown && {children}} + + ); +}; + +OverflowText.propTypes = { + children: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + tooltipId: PropTypes.string.isRequired, +}; + +export default OverflowText; diff --git a/components/common/OverflowText.module.css b/components/common/OverflowText.module.css new file mode 100644 index 00000000..c2066631 --- /dev/null +++ b/components/common/OverflowText.module.css @@ -0,0 +1,6 @@ +.root { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js index 998df40e..8d61f8ae 100644 --- a/components/settings/WebsiteSettings.js +++ b/components/settings/WebsiteSettings.js @@ -5,6 +5,7 @@ import classNames from 'classnames'; import Link from 'components/common/Link'; import Table from 'components/common/Table'; import Button from 'components/common/Button'; +import OverflowText from 'components/common/OverflowText'; import PageHeader from 'components/layout/PageHeader'; import Modal from 'components/common/Modal'; import WebsiteEditForm from 'components/forms/WebsiteEditForm'; @@ -84,12 +85,20 @@ export default function WebsiteSettings() { ); const DetailsLink = ({ website_id, name, domain }) => ( - + - {name} + {name} ); + const Domain = ({ domain, website_id }) => ( + {domain} + ); + const adminColumns = [ { key: 'name', @@ -101,6 +110,7 @@ export default function WebsiteSettings() { key: 'domain', label: , className: 'col-4 col-xl-3', + render: Domain, }, { key: 'account', @@ -125,6 +135,7 @@ export default function WebsiteSettings() { key: 'domain', label: , className: 'col-6 col-xl-4', + render: Domain, }, { key: 'action', diff --git a/components/settings/WebsiteSettings.module.css b/components/settings/WebsiteSettings.module.css index 444235b3..6ecb34c7 100644 --- a/components/settings/WebsiteSettings.module.css +++ b/components/settings/WebsiteSettings.module.css @@ -5,3 +5,7 @@ .buttons { justify-content: flex-end; } + +.detailLink { + width: 100%; +} From ef3f08788f54a6d6bf9da70c1fe0044790d5a98f Mon Sep 17 00:00:00 2001 From: Sophia Willows <20146550+sophiabits@users.noreply.github.com> Date: Sun, 20 Feb 2022 14:25:33 +1300 Subject: [PATCH 3/4] Don't show metric change indicator when metric delta is 0 --- components/metrics/MetricCard.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js index 9b407f37..429a37d6 100644 --- a/components/metrics/MetricCard.js +++ b/components/metrics/MetricCard.js @@ -19,7 +19,6 @@ const MetricCard = ({ {props.x.interpolate(x => format(x))}
{label} - {~~change === 0 && !hideComparison && {format(0)}} {~~change !== 0 && !hideComparison && ( Date: Sun, 20 Feb 2022 14:32:54 +1300 Subject: [PATCH 4/4] Truncate website title on website list & website details pages --- components/metrics/WebsiteHeader.js | 15 ++++++++++----- components/metrics/WebsiteHeader.module.css | 8 ++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index db68cd54..a4fb7df0 100644 --- a/components/metrics/WebsiteHeader.js +++ b/components/metrics/WebsiteHeader.js @@ -1,6 +1,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import Link from 'components/common/Link'; +import OverflowText from 'components/common/OverflowText'; import PageHeader from 'components/layout/PageHeader'; import RefreshButton from 'components/common/RefreshButton'; import ButtonLayout from 'components/layout/ButtonLayout'; @@ -13,15 +14,19 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal const header = showLink ? ( <> - - {title} + + {title} ) : ( -
+ <> - {title} -
+ {title} + ); return ( diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css index 5b5876c6..4c9670fa 100644 --- a/components/metrics/WebsiteHeader.module.css +++ b/components/metrics/WebsiteHeader.module.css @@ -2,6 +2,14 @@ color: var(--gray900); font-size: var(--font-size-large); line-height: var(--font-size-large); + align-items: center; + display: flex; + max-width: 100%; + overflow: hidden; +} + +.titleLink { + max-width: 100%; } .link {