diff --git a/explorer/Explorer.tsx b/explorer/Explorer.tsx index 69f28e1c52a..976c29fb399 100644 --- a/explorer/Explorer.tsx +++ b/explorer/Explorer.tsx @@ -89,7 +89,6 @@ export interface ExplorerProps extends SerializedGridProgram { isPreview?: boolean canonicalUrl?: string selection?: SelectionArray - shouldOptimizeForHorizontalSpace?: boolean // only relevant for explorers with hidden controls } const renderLivePreviewVersion = (props: ExplorerProps) => { @@ -213,17 +212,6 @@ export class Explorer this.setGrapher(this.grapherRef!.current!) this.updateGrapherFromExplorer() - // Optimizing for horizontal space makes only sense if the controls are hidden - // and the explorer in fact looks like an ordinary grapher chart. - // Since switching between charts is not possible when the controls are hidden, - // we only need to run this code once. - if ( - this.queryParams.hideControls && - this.props.shouldOptimizeForHorizontalSpace - ) { - this.grapher!.shouldOptimizeForHorizontalSpace = true - } - let url = Url.fromQueryParams(this.initialQueryParams) if (this.props.selection?.hasSelection) { diff --git a/explorer/ExplorerConstants.ts b/explorer/ExplorerConstants.ts index ec54c6e51d9..9abb472f8bc 100644 --- a/explorer/ExplorerConstants.ts +++ b/explorer/ExplorerConstants.ts @@ -66,7 +66,6 @@ export const EMBEDDED_EXPLORER_PARTIAL_GRAPHER_CONFIGS = "\n//EMBEDDED_PARTIAL_EXPLORER_GRAPHER_CONFIGS\n" export const EXPLORER_EMBEDDED_FIGURE_SELECTOR = "data-explorer-src" -export const EXPLORER_EMBEDDED_FIGURE_PROPS_ATTR = "data-explorer-props" export const ExplorerContainerId = "ExplorerContainer" diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss index b2f19a066a2..b44d634451b 100644 --- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss +++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss @@ -51,25 +51,3 @@ $controlRowHeight: 32px; // keep in sync with CONTROLS_ROW_HEIGHT vertical-align: unset; } } - -// when embedded in an owid page and viewed on a narrow screen, -// grapher bleeds onto the edges horizontally and the top and bottom borders -// stretch across the entire page. the top border of the related question element -// should do the same. -&.GrapherComponent.optimizeForHorizontalSpace .relatedQuestion { - border-top: 0; - - // adds a top border that stretches across the entire page. - // since we don't know the width of the page, we use a large number (200vw) - // and offset it by another large number (-50vw) to make sure the border - // stretches across the entire page. - &::before { - content: ""; - position: absolute; - left: -50vw; - height: 1px; - width: 200vw; - background: $frame-color; - top: 0; - } -} diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index d4e08a3b8b4..1d29a9788b5 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -302,7 +302,6 @@ export interface GrapherProgrammaticInterface extends GrapherInterface { bindUrlToWindow?: boolean isEmbeddedInAnOwidPage?: boolean isEmbeddedInADataPage?: boolean - shouldOptimizeForHorizontalSpace?: boolean manager?: GrapherManager instanceRef?: React.RefObject @@ -460,19 +459,6 @@ export class Grapher isEmbeddedInAnOwidPage?: boolean = this.props.isEmbeddedInAnOwidPage isEmbeddedInADataPage?: boolean = this.props.isEmbeddedInADataPage - // if true, grapher bleeds onto the edges horizontally and the left and right borders - // are removed while the top and bottom borders stretch across the entire page - @observable shouldOptimizeForHorizontalSpace = false - - @computed private get optimizeForHorizontalSpace(): boolean { - return ( - this.isNarrow && - this.shouldOptimizeForHorizontalSpace && - // in full-screen mode, we prefer padding on the sides - !this.isInFullScreenMode - ) - } - /** * todo: factor this out and make more RAII. * @@ -2517,7 +2503,6 @@ export class Grapher GrapherPortraitClass: this.isPortrait, isStatic: this.isStatic, isExportingToSvgOrPng: this.isExportingToSvgOrPng, - optimizeForHorizontalSpace: this.optimizeForHorizontalSpace, GrapherComponentNarrow: this.isNarrow, GrapherComponentSemiNarrow: this.isSemiNarrow, GrapherComponentSmall: this.isSmall, @@ -2648,11 +2633,8 @@ export class Grapher return this.props.baseFontSize ?? this.baseFontSize } - // when optimized for horizontal screen, grapher bleeds onto the edges horizontally @computed get framePaddingHorizontal(): number { - return this.optimizeForHorizontalSpace - ? 0 - : DEFAULT_GRAPHER_FRAME_PADDING + return DEFAULT_GRAPHER_FRAME_PADDING } @computed get framePaddingVertical(): number { diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss index 99d90ee1bd1..9fcd8eb90df 100644 --- a/packages/@ourworldindata/grapher/src/core/grapher.scss +++ b/packages/@ourworldindata/grapher/src/core/grapher.scss @@ -173,35 +173,6 @@ $zindex-controls-drawer: 140; padding: 0 !important; } -// when optimized for horizontal space, grapher bleeds onto the edges horizontally -// and the left and right borders are hidden. the top and bottom borders are visible, -// but stretch across the entire page. -.GrapherComponent.optimizeForHorizontalSpace { - border: none; - - // adds top and bottom borders that stretch across the entire page. - // since we don't know the width of the page, we use a large number (200vw) - // and offset it by another large number (-50vw) to make sure the borders - // stretch across the entire page. - &::before, - &::after { - content: ""; - position: absolute; - left: -50vw; - height: 1px; - width: 200vw; - background: $frame-color; - } - - &::before { - top: 0; - } - - &::after { - bottom: 0; - } -} - .Tooltip { z-index: $zindex-Tooltip; } diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx index 409fc635cdd..d551ebb59c5 100644 --- a/site/gdocs/components/ArticleBlock.tsx +++ b/site/gdocs/components/ArticleBlock.tsx @@ -209,6 +209,7 @@ export default function ArticleBlock({ ) }) diff --git a/site/gdocs/components/Chart.scss b/site/gdocs/components/Chart.scss index 17645ed9212..b9db840e33c 100644 --- a/site/gdocs/components/Chart.scss +++ b/site/gdocs/components/Chart.scss @@ -9,3 +9,11 @@ figure.explorer { div.margin-0 figure { margin: 0; } + +@include sm-only { + .full-width-on-mobile { + width: auto; + margin-left: calc(-1 * var(--grid-gap)); + margin-right: calc(-1 * var(--grid-gap)); + } +} diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx index 86bd964e51e..7d661d91e07 100644 --- a/site/gdocs/components/Chart.tsx +++ b/site/gdocs/components/Chart.tsx @@ -15,16 +15,15 @@ import { } from "@ourworldindata/utils" import { renderSpans, useLinkedChart } from "../utils.js" import cx from "classnames" -import { ExplorerProps } from "../../../explorer/Explorer.js" export default function Chart({ d, className, - shouldOptimizeForHorizontalSpace = true, + fullWidthOnMobile = false, }: { d: EnrichedBlockChart className?: string - shouldOptimizeForHorizontalSpace?: boolean + fullWidthOnMobile?: boolean }) { const refChartContainer = useRef(null) useEmbedChart(0, refChartContainer) @@ -42,18 +41,6 @@ export default function Chart({ const isExplorer = url.isExplorer const hasControls = url.queryParams.hideControls !== "true" - // applies to both charts and explorers - const common = { - // On mobile, we optimize for horizontal space by having Grapher bleed onto the edges horizontally - shouldOptimizeForHorizontalSpace, - } - - // props passed to explorers - const explorerProps: Pick< - ExplorerProps, - "shouldOptimizeForHorizontalSpace" - > = merge({}, common) - // config passed to grapher charts let customizedChartConfig: GrapherProgrammaticInterface = {} const isCustomized = d.title || d.subtitle @@ -92,11 +79,13 @@ export default function Chart({ } } - const chartConfig = merge({}, customizedChartConfig, common) + const chartConfig = customizedChartConfig return (
@@ -109,11 +98,6 @@ export default function Chart({ isExplorer ? undefined : JSON.stringify(chartConfig) } data-explorer-src={isExplorer ? resolvedUrl : undefined} - data-explorer-props={ - isExplorer && !hasControls - ? JSON.stringify(explorerProps) - : undefined - } style={{ width: "100%", border: "0px none", diff --git a/site/gdocs/components/KeyIndicator.tsx b/site/gdocs/components/KeyIndicator.tsx index 98b30bfd3dd..a88ed4bde25 100644 --- a/site/gdocs/components/KeyIndicator.tsx +++ b/site/gdocs/components/KeyIndicator.tsx @@ -60,7 +60,6 @@ export default function KeyIndicator({ type: "chart", parseErrors: [], }} - shouldOptimizeForHorizontalSpace={false} /> + return ( + + ) } return null diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx index 71455cb0501..e10b0c33e6a 100644 --- a/site/multiembedder/MultiEmbedder.tsx +++ b/site/multiembedder/MultiEmbedder.tsx @@ -30,7 +30,6 @@ import { EMBEDDED_EXPLORER_DELIMITER, EMBEDDED_EXPLORER_GRAPHER_CONFIGS, EMBEDDED_EXPLORER_PARTIAL_GRAPHER_CONFIGS, - EXPLORER_EMBEDDED_FIGURE_PROPS_ATTR, EXPLORER_EMBEDDED_FIGURE_SELECTOR, } from "../../explorer/ExplorerConstants.js" import { @@ -164,12 +163,6 @@ class MultiEmbedder { const html = await fetchText(fullUrl) if (isExplorer) { - const explorerPropsAttr = figure.getAttribute( - EXPLORER_EMBEDDED_FIGURE_PROPS_ATTR - ) - const localProps = explorerPropsAttr - ? JSON.parse(explorerPropsAttr) - : {} let grapherConfigs = deserializeJSONFromHTML( html, EMBEDDED_EXPLORER_GRAPHER_CONFIGS @@ -197,7 +190,6 @@ class MultiEmbedder { const props: ExplorerProps = { ...common, ...deserializeJSONFromHTML(html, EMBEDDED_EXPLORER_DELIMITER), - ...localProps, grapherConfigs, partialGrapherConfigs, queryStr,