updated mobileui

shomilj · Nov 28, 2020 · 6a707ef · 6a707ef
1 parent 9077dba
commit 6a707ef
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,13 +10,15 @@
     "bootstrap": "^4.5.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
+    "react-device-detect": "^1.14.0",
     "react-dom": "^17.0.1",
     "react-ga": "^3.3.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-select": "^3.1.0",
     "react-spinkit": "^3.0.0",
+    "react-window-size": "^1.2.2",
     "redux-thunk": "^2.3.0",
     "web-vitals": "^0.2.4"
   },

diff --git a/client/src/.DS_Store b/client/src/.DS_Store
diff --git a/client/src/components/home/detailview.js b/client/src/components/home/detailview.js
@@ -2,6 +2,7 @@ import * as React from "react";
 import { Row, Col, Card, Badge } from "react-bootstrap";
 import { connect } from "react-redux";
 import { getSelectedPost } from "../../redux/selectors";
+import windowSize from 'react-window-size';
 
 /* The DetailView component is the component that displays detailed information about a post,
     including the post content and followups. */
@@ -143,7 +144,7 @@ class DetailView extends React.Component {
 
   render() {
     return (
-      <Col className="m-1" style={{ overflowY: "auto", height: "90vh" }}>
+      <Col className="m-1" style={this.props.windowWidth < 400 ? { overflowY: "auto"} : { overflowY: "auto", height: "90vh" }}>
         {this.props.selectedPost ? this.postPage() : this.emptyPage()}
       </Col>
     );
@@ -155,4 +156,4 @@ const mapStateToProps = (state) => {
   return { selectedPost: selectedPost };
 };
 
-export default connect(mapStateToProps)(DetailView);
+export default connect(mapStateToProps)(windowSize(DetailView));
diff --git a/client/src/components/home/filterview.js b/client/src/components/home/filterview.js
@@ -2,6 +2,7 @@
 import { Row, Col, Form } from 'react-bootstrap';
 import { connect } from "react-redux";
 import { updateSearch } from "../../redux/actions";
+import windowSize from 'react-window-size';
 
 import ReactGA from 'react-ga';
 import * as React from 'react';
@@ -87,7 +88,8 @@ class FilterBox extends React.Component {
 
   render() {
     return (
-      <Col style={{height: "90vh", maxWidth: "25%", minWidth: "200px",  overflowY: "auto", borderLeft: "0.1px solid #ecf0f1"}}>
+      <Col style={this.props.windowWidth < 400 ? {maxWidth: "100%", minWidth: "100%",  overflowY: "auto", borderLeft: "0.1px solid #ecf0f1"} : 
+                  {height: "90vh", maxWidth: "25%", minWidth: "200px",  overflowY: "auto", borderLeft: "0.1px solid #ecf0f1"}}>
         <Form className="m-3">
           <Row className="my-4">
             <h5>Filters</h5>
@@ -134,4 +136,4 @@ class FilterBox extends React.Component {
 export default connect(
   null,
   { updateSearch }
-)(FilterBox);
+)(windowSize(FilterBox));
diff --git a/client/src/components/home/listview.js b/client/src/components/home/listview.js
@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { getPosts } from "../../redux/selectors";
 
 import { selectPost } from "../../redux/actions";
+import windowSize from 'react-window-size';
 
 class ListView extends React.Component {
 
@@ -17,7 +18,8 @@ class ListView extends React.Component {
 
     render() {
         return (
-            <Col style={{height: "90vh", maxWidth: "25%", minWidth: "200px", overflowY: "auto", borderRight: "0.1px solid #ecf0f1", borderLeft: "0.1px solid #ecf0f1"}}>
+            <Col style={this.props.windowWidth < 400 ? {height: "30vh", maxWidth: "100%", minWidth: "100%", marginTop: "30px", marginBottom: "30px", overflowY: "auto", borderLeft: "0.1px solid #ecf0f1"}
+                            : {height: "90vh", maxWidth: "25%", minWidth: "200px", overflowY: "auto", borderRight: "0.1px solid #ecf0f1", borderLeft: "0.1px solid #ecf0f1"}}>
                 <div style={{height: "0px"}}>
                     {
                         this.props.posts && this.props.posts.allPosts.length ? this.props.posts.allPosts.map((post) => {
@@ -40,4 +42,4 @@ const mapStateToProps = state => {
 export default connect(
     mapStateToProps,
     { selectPost }
-)(ListView);
+)(windowSize(ListView));