From 62bb309df7b27a805bf068d66843cebab2ee2db2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bror=20Bojl=C3=A9n?= <tao@btao.org>
Date: Fri, 2 Aug 2019 23:25:28 +0300
Subject: [PATCH] add mobile warning

---
 CHANGELOG.md                                   |  1 +
 .../src/components/screens/SearchScreen.tsx    | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be8d4f6..8a483c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Clarify that the admin page only works for Mastodon and Pleroma instances.
+- Added a warning on mobile devices suggesting to view the site on a larger computer.
 
 ### Changed
 
diff --git a/frontend/src/components/screens/SearchScreen.tsx b/frontend/src/components/screens/SearchScreen.tsx
index 6608036..2876a72 100644
--- a/frontend/src/components/screens/SearchScreen.tsx
+++ b/frontend/src/components/screens/SearchScreen.tsx
@@ -1,4 +1,4 @@
-import { Button, Classes, H2, NonIdealState, Spinner } from "@blueprintjs/core";
+import { Button, Callout, Classes, H2, Intent, NonIdealState, Spinner } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import { push } from "connected-react-router";
 import React from "react";
@@ -7,6 +7,7 @@ import { Dispatch } from "redux";
 import styled from "styled-components";
 import { setResultHover, updateSearch } from "../../redux/actions";
 import { IAppState, ISearchResultInstance } from "../../redux/types";
+import { isSmallScreen } from "../../util";
 import { SearchResult } from "../molecules";
 
 const SearchContainer = styled.div`
@@ -25,6 +26,11 @@ const SearchResults = styled.div`
 const StyledSpinner = styled(Spinner)`
   margin-top: 10px;
 `;
+const CalloutContainer = styled.div`
+  width: 90%;
+  margin: 0 auto 20px auto;
+  text-align: left;
+`;
 
 interface ISearchScreenProps {
   error: boolean;
@@ -69,6 +75,7 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
 
     return (
       <SearchContainer>
+        {isSmallScreen && results.length === 0 && this.renderMobileWarning()}
         <H2>Find an instance</H2>
         {this.renderSearchBar()}
         <SearchResults>
@@ -133,6 +140,15 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
       />
     </SearchBarContainer>
   );
+
+  private renderMobileWarning = () => (
+    <CalloutContainer>
+      <Callout intent={Intent.WARNING} title="Desktop site">
+        This is a desktop-optimized site with large visualizations. You can view a simplified version on smaller
+        devices, but for the full experience, open it on a computer.
+      </Callout>
+    </CalloutContainer>
+  );
 }
 
 const mapStateToProps = (state: IAppState) => ({