diff --git a/package-lock.json b/package-lock.json index c59ad6e..09419bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2569,6 +2569,11 @@ } } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "css-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", @@ -6772,6 +6777,14 @@ "object-visit": "1.0.1" } }, + "matchmediaquery": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz", + "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=", + "requires": { + "css-mediaquery": "0.1.2" + } + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -9322,6 +9335,16 @@ "warning": "3.0.0" } }, + "react-responsive": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz", + "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==", + "requires": { + "hyphenate-style-name": "1.0.2", + "matchmediaquery": "0.2.1", + "prop-types": "15.6.1" + } + }, "react-router": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz", diff --git a/package.json b/package.json index c27263b..53981b2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-dropdown": "^1.4.0", "react-loading": "^2.0.0", "react-modal": "^3.4.2", + "react-responsive": "^4.1.0", "react-router-dom": "^4.2.2", "react-scripts": "1.1.1", "react-time-picker": "^2.3.2" diff --git a/src/Components/FormContainer.js b/src/Components/FormContainer.js index e0cf447..7f325cd 100644 --- a/src/Components/FormContainer.js +++ b/src/Components/FormContainer.js @@ -4,6 +4,7 @@ import '../styles/FormContainer.css'; import { Button } from 'react-bootstrap'; + class FormContainer extends Component { constructor(props) { super(props); //access props @@ -39,11 +40,15 @@ class FormContainer extends Component { description = {"Username"} placeholder = {"ex) user@gmail.com"} type={"text"} + className = {"input"} /> + type={"password"} + + />
diff --git a/src/Components/InputField.js b/src/Components/InputField.js index 3cb66ff..1a376d0 100644 --- a/src/Components/InputField.js +++ b/src/Components/InputField.js @@ -1,10 +1,19 @@ import React from 'react'; +import '../styles/InputField.css'; +import '../styles/FormContainer.css'; const InputField = (props) => { return(
{props.description}
- +
); }; diff --git a/src/Components/ListContainer.js b/src/Components/ListContainer.js index d6ffca8..75264d7 100644 --- a/src/Components/ListContainer.js +++ b/src/Components/ListContainer.js @@ -68,6 +68,7 @@ class ListContainer extends Component{ onclick = { this.handleClick.bind(this) } selected = {this.state.selectedRequest} userName = {this.props.userName} + {...this.props} /> + Request a Share! +
+ ) + } const renderedRequestList = this.props.requestData.map((currentReq, index) =>
diff --git a/src/Components/RequestModal.js b/src/Components/RequestModal.js index ba65786..ac9f07b 100644 --- a/src/Components/RequestModal.js +++ b/src/Components/RequestModal.js @@ -84,6 +84,7 @@ class RequestModal extends Component{ this.state.time_buffer ) + this.setState({destination: "", time_buffer: "", time: ""}) this.props.onclick() window.location.reload(); } @@ -124,7 +125,9 @@ class RequestModal extends Component{ Value = {this.state.time_buffer} description = {"How long can you wait? (Minutes)"} placeholder = {"ex) 30"} - type={"text"}/> + type={"text"} + className = {"form-control"} + />
diff --git a/src/Pages/Landing.js b/src/Pages/Landing.js index fc6b760..8a3f5ee 100644 --- a/src/Pages/Landing.js +++ b/src/Pages/Landing.js @@ -3,6 +3,8 @@ import LandingNav from '../Components/LandingNav' import '../styles/Landing.css'; import { Navbar, Nav, NavItem, Jumbotron } from 'react-bootstrap'; import Login from "./Login"; +import LoginMobile from './LoginMobile' +import MediaQuery from "react-responsive"; @@ -12,12 +14,24 @@ class Landing extends Component{ render(){ return (
- - -

Riding,
simplified.

-

Share Uber fares to airports with Northwestern Students, fairly.

- - + + +
+
+ + + + +
+ +

Riding,
simplified.

+

Share Uber fares to airports with Northwestern Students, fairly.

+ +
+ + + +
); diff --git a/src/Pages/Login.js b/src/Pages/Login.js index 3610655..ac089e3 100644 --- a/src/Pages/Login.js +++ b/src/Pages/Login.js @@ -27,7 +27,7 @@ class Login extends Component { :
-

Sign In to FareShare!

+

Sign In

); diff --git a/src/Pages/LoginMobile.js b/src/Pages/LoginMobile.js new file mode 100644 index 0000000..d686b9a --- /dev/null +++ b/src/Pages/LoginMobile.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react'; +import '../styles/Login.css'; +import FormContainer from '../Components/FormContainer'; +import Loader from '../Components/Loader'; + + + + +class LoginMobile extends Component { + + constructor(props) + { + super(); + this.state = { isLoading: true } + } + + componentDidMount() + { + this.setState({isLoading: false}) + } + + render() { + return ( + + this.state.isLoading + ? + + : +
+

Sign In

+ +
+ ); + } +} + +export default LoginMobile; diff --git a/src/Pages/Main.js b/src/Pages/Main.js index fe36097..6179487 100644 --- a/src/Pages/Main.js +++ b/src/Pages/Main.js @@ -85,7 +85,10 @@ class Main extends Component{ - + diff --git a/src/styles/FormContainer.css b/src/styles/FormContainer.css index 953281b..7661e80 100644 --- a/src/styles/FormContainer.css +++ b/src/styles/FormContainer.css @@ -1,27 +1,40 @@ .background-rect { - text-align: center; - width: 380px; - height: 300px; + width: 30vw; + height: 100%; - - - border-radius: 10px; - border: 2px solid #f4f4f4; - display: table-cell; - vertical-align: middle; + padding: 30px; } -.inputs{ - margin-bottom: 30px; -} .form-button{ margin-top: 10px; width: 100%; } + +.input-login { + width: 100%; +} + + + +.inputs{ + margin-bottom: 30px; + text-align: left; + text-decoration-color: black; +} + + +@media screen and (max-width: 1224px){ + .background-rect{ + background: wheat; + + width: 50vw; + height: 50vw; + } +} \ No newline at end of file diff --git a/src/styles/Header.css b/src/styles/Header.css index 9f4cbfc..332b2ea 100644 --- a/src/styles/Header.css +++ b/src/styles/Header.css @@ -8,7 +8,7 @@ font-size: 3vh; - width: 15%; + width: 100%; } .headerContainer{ diff --git a/src/styles/InputField.css b/src/styles/InputField.css new file mode 100644 index 0000000..5610fc4 --- /dev/null +++ b/src/styles/InputField.css @@ -0,0 +1,19 @@ +.input { + width: 100%; + border: none; + border-bottom: 1px solid #e8e8e8 !important; + margin: 15% auto; + outline: none; +} + +.input:focus { + border-bottom: 1px solid black !important; + +} + +@media screen and (max-width: 1224px) { + input{ + + width: 100vw; + } +} \ No newline at end of file diff --git a/src/styles/Landing.css b/src/styles/Landing.css index 4d4a191..3cd1fc0 100644 --- a/src/styles/Landing.css +++ b/src/styles/Landing.css @@ -1,5 +1,6 @@ html { - height: 100%; + width: 100vw; + height: 100vh; margin: 0; background-image: url("https://images.unsplash.com/uploads/1413259835094dcdeb9d3/6e609595?ixlib=rb-0.3.5&s=6e10b98782f25fb337a3c1cb2e88a7c7&auto=format&fit=crop&w=2704&q=80"); background-position: center; @@ -7,21 +8,43 @@ html { background-size: cover; } +.landing{ + height: 100vh; + width: 100vw; + display: flex; + +} + .container { margin-left: none; } +.LandingMain{ + height: 100vh; +} -/* -.landing-text { - color: white; - font-size: 30px; - font-weight: 100; - width: 100%; -}*/ +/* Mobile Login Container */ + +.mobile-login-landing{ + height: 50vh; + +} + +/*******************/ .landing-jumbo { - padding-top: 25%; + margin-bottom: 0; + height: 50vh; + padding-left: 5vw; + padding-top: 10vh; + width: 70vw; + background-color: inherit; color: white; } + +@media screen and (max-width: 1224px) { + .landing-jumbo{ + width: 100vw; + } +} \ No newline at end of file diff --git a/src/styles/LandingNav.css b/src/styles/LandingNav.css index 5a7bb50..dd21889 100644 --- a/src/styles/LandingNav.css +++ b/src/styles/LandingNav.css @@ -12,3 +12,4 @@ font-weight: bold; } + diff --git a/src/styles/Login.css b/src/styles/Login.css index 9d94399..4eb3cee 100644 --- a/src/styles/Login.css +++ b/src/styles/Login.css @@ -12,12 +12,11 @@ body { .loginContainer{ - position: absolute; - top: 10vh; - left: 68vw; + - color: white; + background: white; + color: black; display: block; text-align: center; @@ -25,7 +24,20 @@ body { + width: 30vw; + height: 100vh; +} + +.loginMobileContainer{ + + + color: black; + + text-align: center; + font-family: 'Open Sans', sans-serif; + + - height: 90vh; - padding-top: 10vh; + width: 100%; + height: 50vh; } diff --git a/src/styles/UserMatch.css b/src/styles/UserMatch.css index 01a5153..7309404 100644 --- a/src/styles/UserMatch.css +++ b/src/styles/UserMatch.css @@ -15,6 +15,17 @@ background: rgb(226, 226, 226); } +.emptyRequest{ + color: rgb(88, 88, 88); + + vertical-align: middle; + line-height: 80vh; + + height: 80%; + text-align: center; + font-size: 30px; +} + .requestContainer{