Quick fixes for mobile

2026-06-08 03:18:36 +03:00 · 2022-03-20 08:16:47 +01:00
parent 0af5bb7b14
commit 28a5f644fc
6 changed files with 252 additions and 231 deletions
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <style>
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,7 @@

        gtag('config', 'G-MHZTGLZ67Y');
    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

 <body>
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -41,14 +41,14 @@ class Dashboard extends React.Component {
  }

  componentDidMount() {
-    if (!this.props.app.isMobile) {
-      this.props.actions.fetchDomain().then((domain) =>
-        this.props.actions.updateDomain({
-          domain,
-          features: this.props.features,
-        })
-      );
-    }
+    // if (!this.props.app.isMobile) {
+    this.props.actions.fetchDomain().then((domain) =>
+      this.props.actions.updateDomain({
+        domain,
+        features: this.props.features,
+      })
+    );
+    // }
    // NOTE: hack to get the timeline to always show. Not entirely sure why
    // this is necessary.
    window.dispatchEvent(new Event("resize"));
@@ -244,15 +244,14 @@ class Dashboard extends React.Component {
  }

  renderIntroPopup(isMobile, styles) {
+    const checkMobile = isMobileOnly || window.innerWidth < 600;
    const { app, actions } = this.props;

-    const extraContent = isMobile ? (
+    const extraContent = checkMobile ? (
      <div style={{ position: "relative", bottom: 0 }}>
        <h3 style={{ color: "var(--error-red)" }}>
-          This platform is not suitable for mobile.
-          <br />
-          <br />
-          Please re-visit the site on a device with a larger screen.
+          This platform may not work correctly on mobile. If possible, please
+          re-visit the site on a device with a larger screen.
        </h3>
      </div>
    ) : null;
@@ -262,11 +261,14 @@ class Dashboard extends React.Component {
      <Popup
        title="Introduction to the platform"
        theme="dark"
-        isOpen={app.flags.isIntropopup && (!searchParams.has('cover') || searchParams.get('cover') !== 'false')}
+        isOpen={
+          app.flags.isIntropopup &&
+          (!searchParams.has("cover") || searchParams.get("cover") !== "false")
+        }
        onClose={actions.toggleIntroPopup}
        content={app.intro}
        styles={styles}
-        isMobile={isMobile}
+        isMobile={false}
      >
        {extraContent}
      </Popup>
@@ -285,60 +287,62 @@ class Dashboard extends React.Component {
      width: checkMobile
        ? "100vw"
        : window.innerWidth > 768
-          ? "60vw"
-          : "calc(100vw - var(--toolbar-width))",
+        ? "60vw"
+        : "calc(100vw - var(--toolbar-width))",
      maxWidth: checkMobile ? "100vw" : 600,
      maxHeight: checkMobile
        ? "100vh"
        : window.innerHeight > 768
-          ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)`
-          : "100vh",
+        ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)`
+        : "100vh",
      left: checkMobile ? padding : "var(--toolbar-width)",
      top: 0,
      overflowY: "scroll",
-      textAlign: "justify"
+      textAlign: "justify",
    };

-    if (checkMobile) {
-      const msg =
-        "This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.";
-      return (
-        <div>
-          {features.USE_COVER && !app.intro && (
-            <StaticPage showing={app.flags.isCover}>
-              {/* enable USE_COVER in config.js features, and customise your header */}
-              {/* pass 'actions.toggleCover' as a prop to your custom header */}
-              <TemplateCover
-                showAppHandler={() => {
-                  /* eslint-disable no-undef */
-                  alert(msg);
-                  /* eslint-enable no-undef */
-                }}
-              />
-            </StaticPage>
-          )}
-          {app.intro && <>{this.renderIntroPopup(true, popupStyles)}</>}
-          {!app.intro && !features.USE_COVER && (
-            <div className="fixedTooSmallMessage">{msg}</div>
-          )}
-        </div>
-      );
-    }
+    // if (checkMobile) {
+    //   const msg =
+    //     "This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.";
+    //   return (
+    //     <div>
+    //       {features.USE_COVER && !app.intro && (
+    //         <StaticPage showing={app.flags.isCover}>
+    //           {/* enable USE_COVER in config.js features, and customise your header */}
+    //           {/* pass 'actions.toggleCover' as a prop to your custom header */}
+    //           <TemplateCover
+    //             showAppHandler={() => {
+    //               /* eslint-disable no-undef */
+    //               alert(msg);
+    //               /* eslint-enable no-undef */
+    //             }}
+    //           />
+    //         </StaticPage>
+    //       )}
+    //       {app.intro && <>{this.renderIntroPopup(true, popupStyles)}</>}
+    //       {!app.intro && !features.USE_COVER && (
+    //         <div className="fixedTooSmallMessage">{msg}</div>
+    //       )}
+    //     </div>
+    //   );
+    // }

    return (
      <div>
-        <Toolbar
-          isNarrative={!!app.associations.narrative}
-          methods={{
-            onTitle: actions.toggleCover,
-            onSelectFilter: (filters) =>
-              actions.toggleAssociations("filters", filters),
-            onCategoryFilter: (categories) =>
-              actions.toggleAssociations("categories", categories),
-            onShapeFilter: actions.toggleShapes,
-            onSelectNarrative: this.setNarrative,
-          }}
-        />
+        {checkMobile ? null : (
+          <Toolbar
+            isNarrative={!!app.associations.narrative}
+            methods={{
+              onTitle: actions.toggleCover,
+              onSelectFilter: (filters) =>
+                actions.toggleAssociations("filters", filters),
+              onCategoryFilter: (categories) =>
+                actions.toggleAssociations("categories", categories),
+              onShapeFilter: actions.toggleShapes,
+              onSelectNarrative: this.setNarrative,
+            }}
+          />
+        )}
        <Space
          kind={"map" in app ? "map" : "space3d"}
          onKeyDown={this.onKeyDown}
@@ -350,16 +354,18 @@ class Dashboard extends React.Component {
              : (ev) => this.handleSelect(ev, 1),
          }}
        />
-        <Timeline
-          onKeyDown={this.onKeyDown}
-          methods={{
-            onSelect: app.associations.narrative
-              ? this.selectNarrativeStep
-              : (ev) => this.handleSelect(ev, 0),
-            onUpdateTimerange: actions.updateTimeRange,
-            getCategoryColor: this.getCategoryColor,
-          }}
-        />
+        {checkMobile ? null : (
+          <Timeline
+            onKeyDown={this.onKeyDown}
+            methods={{
+              onSelect: app.associations.narrative
+                ? this.selectNarrativeStep
+                : (ev) => this.handleSelect(ev, 0),
+              onUpdateTimerange: actions.updateTimeRange,
+              getCategoryColor: this.getCategoryColor,
+            }}
+          />
+        )}
        <CardStack
          timelineDims={app.timeline.dimensions}
          onViewSource={this.handleViewSource}
@@ -374,9 +380,9 @@ class Dashboard extends React.Component {
          narrative={
            app.associations.narrative
              ? {
-                ...app.associations.narrative,
-                current: this.props.narrativeIdx,
-              }
+                  ...app.associations.narrative,
+                  current: this.props.narrativeIdx,
+                }
              : null
          }
          methods={{
--- a/src/components/space/carto/Map.js
+++ b/src/components/space/carto/Map.js
@@ -3,6 +3,7 @@ import "leaflet";
 import React from "react";
 import { Portal } from "react-portal";
 import Supercluster from "supercluster";
+import { isMobileOnly } from "react-device-detect";

 import { connect } from "react-redux";
 import * as selectors from "../../../selectors";
@@ -101,10 +102,11 @@ class Map extends React.Component {
      .setView(mapConfig.anchor, mapConfig.startZoom)
      .setMinZoom(mapConfig.minZoom)
      .setMaxZoom(mapConfig.maxZoom)
-      .setMaxBounds(mapConfig.maxBounds)
-      ;
+      .setMaxBounds(mapConfig.maxBounds);
    // This assumes your map is the constant 'map'
-    map.attributionControl.addAttribution(`<a href="http://mapbox.com/about/maps" class='mapbox-logo' target="_blank">Mapbox</a>© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>`);
+    map.attributionControl.addAttribution(
+      `<a href="http://mapbox.com/about/maps" class='mapbox-logo' target="_blank">Mapbox</a>© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>`
+    );

    // Initialize supercluster index
    this.superclusterIndex = new Supercluster(clusterConfig);
@@ -479,9 +481,12 @@ class Map extends React.Component {

  render() {
    const { isShowingSites, isFetchingDomain } = this.props.app.flags;
-    const classes = this.props.app.narrative
-      ? "map-wrapper narrative-mode"
-      : "map-wrapper";
+    const checkMobile = isMobileOnly || window.innerWidth < 600;
+
+    const classes =
+      (this.props.app.narrative
+        ? "map-wrapper narrative-mode"
+        : "map-wrapper") + (checkMobile ? " mobile" : "");
    const innerMap = this.map ? (
      <>
        {this.renderTiles()}
--- a/src/scss/cardstack.scss
+++ b/src/scss/cardstack.scss
@@ -4,7 +4,8 @@
 $card-stack-header-height: 38px;
 .card-stack {
  position: absolute;
-  top: calc(#{$card-right} + #{$card-stack-header-height});
+  top: #{$card-right};
+  padding-top: #{$card-stack-header-height};
  right: $card-right;
  max-height: calc(100% - #{$timeline-height} + 60px);
  height: auto;
@@ -15,6 +16,7 @@ $card-stack-header-height: 38px;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
+  max-width: 100vw;

  &.narrative-mode {
    right: $card-right;
@@ -32,7 +34,8 @@ $card-stack-header-height: 38px;
    top: $card-right;
    min-height: $card-stack-header-height;
    line-height: $card-stack-header-height;
-    width: $card-width;
+    width: 100%;
+    max-width: $card-width;
    box-sizing: border-box;
    padding: 0 5px;
    background: $black;
@@ -41,6 +44,7 @@ $card-stack-header-height: 38px;
    font-size: $large;
    transition: 0.2s ease;
    text-align: left;
+    z-index: 20;

    &:hover {
      transition: 0.2s ease;
@@ -73,7 +77,8 @@ $card-stack-header-height: 38px;
  }

  .card-stack-content {
-    width: $card-width;
+    width: 100%;
+    max-width: $card-width;

    ul {
      padding: 0;
--- a/src/scss/map.scss
+++ b/src/scss/map.scss