From 9accafebeabd0113207a8b7bc0abd5656e92dfbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?=
 <2803708-taobojlen@users.noreply.gitlab.com>
Date: Wed, 24 Jul 2019 09:43:36 +0000
Subject: [PATCH] frontend/fix mobile

---
 CHANGELOG.md                                  |  1 +
 .../src/components/molecules/Cytoscape.tsx    |  1 +
 .../components/organisms/SidebarContainer.tsx |  4 ++-
 .../src/components/screens/InstanceScreen.tsx | 25 ++++++++++++++-----
 frontend/src/redux/actions.ts                 |  2 ++
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b759a1d..dddc937 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - You can now link directly to instances at e.g. /instance/mastodon.social.
 - Instance details now have a link to the corresponding fediverse.network page.
 - The reset-graph-view button now explains what it's for when you hover over it.
+- The main graph is no longer displayed on mobile. Instead, a smaller neighborhood graph is shown.
 
 ### Changed
 
diff --git a/frontend/src/components/molecules/Cytoscape.tsx b/frontend/src/components/molecules/Cytoscape.tsx
index c6c76bb..2d44e3b 100644
--- a/frontend/src/components/molecules/Cytoscape.tsx
+++ b/frontend/src/components/molecules/Cytoscape.tsx
@@ -8,6 +8,7 @@ import { DEFAULT_NODE_COLOR, SELECTED_NODE_COLOR } from "../../constants";
 const CytoscapeContainer = styled.div`
   width: 100%;
   height: 100%;
+  flex: 1;
 `;
 
 interface ICytoscapeProps {
diff --git a/frontend/src/components/organisms/SidebarContainer.tsx b/frontend/src/components/organisms/SidebarContainer.tsx
index 27f41f5..7e390de 100644
--- a/frontend/src/components/organisms/SidebarContainer.tsx
+++ b/frontend/src/components/organisms/SidebarContainer.tsx
@@ -6,12 +6,14 @@ const RightDiv = styled.div`
   align-self: right;
   background-color: grey;
   flex: 1;
-  overflow: scroll;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
 `;
 const StyledCard = styled(Card)`
   min-height: 100%;
   width: 100%;
+  padding: 20px 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
diff --git a/frontend/src/components/screens/InstanceScreen.tsx b/frontend/src/components/screens/InstanceScreen.tsx
index ae4f7fe..aa2b252 100644
--- a/frontend/src/components/screens/InstanceScreen.tsx
+++ b/frontend/src/components/screens/InstanceScreen.tsx
@@ -43,6 +43,7 @@ const HeadingContainer = styled.div`
   flex-direction: row;
   align-items: center;
   width: 100%;
+  padding: 0 20px;
 `;
 const StyledHeadingH2 = styled(H2)`
   margin: 0;
@@ -61,11 +62,18 @@ const StyledLinkToFdNetwork = styled.div`
   text-align: center;
   margin-top: auto;
 `;
+const StyledCallout = styled(Callout)`
+  margin: 10px 20px;
+  width: auto;
+`;
 const StyledTabs = styled(Tabs)`
   width: 100%;
+  padding: 0 20px;
 `;
 const StyledGraphContainer = styled.div`
-  height: 50%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
   margin-bottom: 10px;
 `;
 interface IInstanceScreenProps {
@@ -177,11 +185,13 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
   private renderTabs = () => {
     const hasNeighbors = this.state.neighbors && this.state.neighbors.length > 0;
 
+    const hasLocalGraph =
+      !!this.state.localGraph && this.state.localGraph.nodes.length > 0 && this.state.localGraph.edges.length > 0;
     const insularCallout =
-      this.props.graph && !this.state.isProcessingNeighbors && !hasNeighbors && !this.state.localGraph ? (
-        <Callout icon={IconNames.INFO_SIGN} title="Insular instance">
+      this.props.graph && !this.state.isProcessingNeighbors && !hasNeighbors && !hasLocalGraph ? (
+        <StyledCallout icon={IconNames.INFO_SIGN} title="Insular instance">
           <p>This instance doesn't have any neighbors that we know of, so it's hidden from the graph.</p>
-        </Callout>
+        </StyledCallout>
       ) : (
         undefined
       );
@@ -211,13 +221,16 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
   };
 
   private maybeRenderLocalGraph = () => {
-    if (!this.state.localGraph) {
+    const { localGraph } = this.state;
+    const hasLocalGraph =
+      !!this.state.localGraph && this.state.localGraph.nodes.length > 0 && this.state.localGraph.edges.length > 0;
+    if (!hasLocalGraph) {
       return;
     }
     return (
       <StyledGraphContainer>
         <Cytoscape
-          elements={this.state.localGraph}
+          elements={localGraph!}
           currentNodeId={this.props.instanceName}
           navigateToInstancePath={this.props.navigateToInstance}
         />
diff --git a/frontend/src/redux/actions.ts b/frontend/src/redux/actions.ts
index 7dd34be..3e44a1f 100644
--- a/frontend/src/redux/actions.ts
+++ b/frontend/src/redux/actions.ts
@@ -91,6 +91,8 @@ export const loadInstance = (instanceName: string | null) => {
 
 export const updateSearch = (query: string) => {
   return (dispatch: Dispatch, getState: () => IAppState) => {
+    query = query.trim();
+
     if (!query) {
       dispatch(resetSearch());
       return;