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 + {isSmallScreen && results.length === 0 && this.renderMobileWarning()}

Find an instance

{this.renderSearchBar()} @@ -133,6 +140,15 @@ class SearchScreen extends React.PureComponent ); + + private renderMobileWarning = () => ( + + + 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. + + + ); } const mapStateToProps = (state: IAppState) => ({