Merge pull request #47 from eurunuela/mobile

Add main page for mobile phones
ME-ICA · May 18, 2022 · 1d48ab8 · 1d48ab8
2 parents 659ee34 + 1148f04
commit 1d48ab8
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 222 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,4 @@
 INLINE_RUNTIME_CHUNK=false
 GENERATE_SOURCEMAP=false
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_VERSION=1.0.13
+REACT_APP_VERSION=1.0.14
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rica",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
   "dependencies": {
     "@blueprintjs/core": "^3.53.0",

diff --git a/src/Mobile.js b/src/Mobile.js
@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+
+class MobileMain extends Component {
+  render() {
+    return (
+      <div className="h-screen bg-gradient-to-tr from-indigo-200 via-red-200 to-yellow-100">
+        <div className="fixed z-10 flex items-center justify-center w-full h-full">
+          <div className="px-6 m-auto">
+            <h1 className="mb-8 text-3xl font-extrabold">
+              Hi, this is Rica{" "}
+              <span role="img" aria-label="wave">
+                👋
+              </span>
+            </h1>
+            <div className="my-8">
+              <p className="text-base">
+                It looks like you're visiting from a small screen. Bookmark me
+                and visit me again from your computer.
+              </p>
+            </div>
+            <div className="my-8">
+              <a href="https://www.github.com/ME-ICA/rica" target="_blank">
+                <div className="inline-block w-auto px-4 py-2 font-bold text-white bg-indigo-400 rounded hover:bg-indigo-700">
+                  Learn more
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MobileMain;
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import Info from "./Info/Info";
 import Plots from "./Plots/Plots";
 import IntroPopup from "./PopUps/IntroPopUp";
 import AboutPopup from "./PopUps/AboutPopUp";
+import MobileMain from "./Mobile";
 
 import "./styles/output.css";
 import "./styles.css";
@@ -37,6 +38,7 @@ class App extends Component {
       showAboutPopup: false,
       showTabs: false,
       originalData: [],
+      width: window.innerWidth,
     };
   }
 
@@ -97,97 +99,122 @@ class App extends Component {
     this.setState({ originalData: childData[4] });
   };
 
+  componentWillMount() {
+    window.addEventListener("resize", this.handleWindowSizeChange);
+  }
+
+  // make sure to remove the listener
+  // when the component is not mounted anymore
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleWindowSizeChange);
+  }
+
+  handleWindowSizeChange = () => {
+    this.setState({ width: window.innerWidth });
+  };
+
   render() {
-    return (
-      <div className="h-full min-h-full overflow-hidden text-center ">
-        {this.state.showIntroPopup ? (
-          <IntroPopup
-            callBack={this.callbackFunction}
-            closePopup={this.toggleIntroPopup.bind(this)}
-          />
-        ) : null}
-        {this.state.showAboutPopup ? (
-          <AboutPopup
-            callBack={this.callbackFunction}
-            closePopup={this.toggleAboutPopup.bind(this)}
-          />
-        ) : null}
-        {this.state.showTabs ? (
-          <AnimatedTabs>
-            <TabList
-              className="text-base border-b z-5 border-b-gray-300"
-              style={{ justifyContent: "space-around" }}
-            >
-              <AnimatedTab index={0} style={{ flex: 1 }}>
-                <FontAwesomeIcon
-                  icon={["fas", "info-circle"]}
-                  size="lg"
-                  className="mx-2"
-                />
-                <span>Info</span>
-              </AnimatedTab>
-              <AnimatedTab index={1} style={{ flex: 2 }}>
-                <FontAwesomeIcon
-                  icon={["fas", "chart-pie"]}
-                  size="lg"
-                  className="mx-2"
-                />
-                <span>ICA</span>
-              </AnimatedTab>
-              <AnimatedTab index={2} style={{ flex: 1 }}>
-                <FontAwesomeIcon
-                  icon={["fas", "layer-group"]}
-                  size="lg"
-                  className="mx-2"
-                />
-                <span>Carpets</span>
-              </AnimatedTab>
-              <ul className="absolute top-0 right-0 mr-40">
-                <div
-                  className="absolute top-0 right-0 flex mr-24 text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
-                  onClick={this.toggleIntroPopup.bind(this)}
-                  style={{ padding: "8px 16px" }}
-                >
+    const { width } = this.state;
+    const isMobile = width <= 1024;
+
+    if (isMobile) {
+      return (
+        <div>
+          <MobileMain />
+        </div>
+      );
+    } else {
+      return (
+        <div className="h-full min-h-full overflow-hidden text-center ">
+          {this.state.showIntroPopup ? (
+            <IntroPopup
+              callBack={this.callbackFunction}
+              closePopup={this.toggleIntroPopup.bind(this)}
+            />
+          ) : null}
+          {this.state.showAboutPopup ? (
+            <AboutPopup
+              callBack={this.callbackFunction}
+              closePopup={this.toggleAboutPopup.bind(this)}
+            />
+          ) : null}
+          {this.state.showTabs ? (
+            <AnimatedTabs>
+              <TabList
+                className="text-base border-b z-5 border-b-gray-300"
+                style={{ justifyContent: "space-around" }}
+              >
+                <AnimatedTab index={0} style={{ flex: 1 }}>
                   <FontAwesomeIcon
-                    icon={["fas", "plus"]}
+                    icon={["fas", "info-circle"]}
                     size="lg"
                     className="mx-2"
                   />
-                  <span>New</span>
-                </div>
-                <div
-                  className="absolute right-0 flex text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
-                  onClick={this.toggleAboutPopup.bind(this)}
-                  style={{ padding: "8px 16px" }}
-                >
+                  <span>Info</span>
+                </AnimatedTab>
+                <AnimatedTab index={1} style={{ flex: 2 }}>
                   <FontAwesomeIcon
-                    icon={["fas", "question"]}
+                    icon={["fas", "chart-pie"]}
                     size="lg"
                     className="mx-2"
                   />
-                  <span>About</span>
-                </div>
-              </ul>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <Info info={this.state.info} />
-              </TabPanel>
-              <TabPanel>
-                <Plots
-                  componentData={this.state.componentData}
-                  componentFigures={this.state.componentFigures}
-                  originalData={this.state.originalData}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Carpets images={this.state.carpetFigures} />
-              </TabPanel>
-            </TabPanels>
-          </AnimatedTabs>
-        ) : null}
-      </div>
-    );
+                  <span>ICA</span>
+                </AnimatedTab>
+                <AnimatedTab index={2} style={{ flex: 1 }}>
+                  <FontAwesomeIcon
+                    icon={["fas", "layer-group"]}
+                    size="lg"
+                    className="mx-2"
+                  />
+                  <span>Carpets</span>
+                </AnimatedTab>
+                <ul className="absolute top-0 right-0 mr-40">
+                  <div
+                    className="absolute top-0 right-0 flex mr-24 text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
+                    onClick={this.toggleIntroPopup.bind(this)}
+                    style={{ padding: "8px 16px" }}
+                  >
+                    <FontAwesomeIcon
+                      icon={["fas", "plus"]}
+                      size="lg"
+                      className="mx-2"
+                    />
+                    <span>New</span>
+                  </div>
+                  <div
+                    className="absolute right-0 flex text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
+                    onClick={this.toggleAboutPopup.bind(this)}
+                    style={{ padding: "8px 16px" }}
+                  >
+                    <FontAwesomeIcon
+                      icon={["fas", "question"]}
+                      size="lg"
+                      className="mx-2"
+                    />
+                    <span>About</span>
+                  </div>
+                </ul>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <Info info={this.state.info} />
+                </TabPanel>
+                <TabPanel>
+                  <Plots
+                    componentData={this.state.componentData}
+                    componentFigures={this.state.componentFigures}
+                    originalData={this.state.originalData}
+                  />
+                </TabPanel>
+                <TabPanel>
+                  <Carpets images={this.state.carpetFigures} />
+                </TabPanel>
+              </TabPanels>
+            </AnimatedTabs>
+          ) : null}
+        </div>
+      );
+    }
   }
 }