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 { 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 ? ( - + this.props.graph && !this.state.isProcessingNeighbors && !hasNeighbors && !hasLocalGraph ? ( +

This instance doesn't have any neighbors that we know of, so it's hidden from the graph.

-
+ ) : ( undefined ); @@ -211,13 +221,16 @@ class InstanceScreenImpl extends React.PureComponent { - 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 ( 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;