From 6ce4c809208b82f4d4f132e29abc2565ba55a23d Mon Sep 17 00:00:00 2001 From: ralph kemp Date: Sat, 2 Feb 2019 15:53:47 +0000 Subject: [PATCH] literally just working on various styling, made it look a lot more pretty. Going to now work more on logic. --- public/index.html | 4 ++- src/components/Homepage.js | 10 +++++-- src/components/Inputs.js | 35 ++++++++++++++--------- src/components/Results.js | 34 +++++++++++++++------- src/components/Search.js | 58 ++++++++++++++++++++++++++++++-------- src/index.css | 1 + 6 files changed, 103 insertions(+), 39 deletions(-) diff --git a/public/index.html b/public/index.html index 323182f..d7900e9 100755 --- a/public/index.html +++ b/public/index.html @@ -13,6 +13,8 @@ homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> + + - React App + WORDz diff --git a/src/components/Homepage.js b/src/components/Homepage.js index 865fe02..da5d3d0 100644 --- a/src/components/Homepage.js +++ b/src/components/Homepage.js @@ -8,17 +8,21 @@ const MainDiv = styled.div` height: 100vh; background-color: pink; display: flex; - justift-content: center; + justify-content: center; align-items: center; + flex-direction: column; + @media (min-width: 600px) { + flex-direction: row; + } `; const Homepage = () => { return ( - + ); -} +}; export default Homepage; diff --git a/src/components/Inputs.js b/src/components/Inputs.js index 7b38604..741dda5 100644 --- a/src/components/Inputs.js +++ b/src/components/Inputs.js @@ -1,26 +1,35 @@ -import React from "react"; -import Search from "./Search"; -import styled from "styled-components"; +import React from 'react'; +import Search from './Search'; +import styled from 'styled-components'; const MainInputsDiv = styled.div` - height: 100vh; - width: 50vw; - background-color: grey; + height: 50vh; + width: 100vw; + background-color: #f1ecec; display: flex; - flex-direction: column; - justify-content: space-between; + justify-content: center; align-items: center; - input { - width: 30%; - height: 20px; - font-size: 20px; + @media (min-width: 600px) { + height: 100vh; + width: 50vw; } `; +const SearchContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + height: 50vh; + margin-bottom: 30px; +`; + const Inputs = () => { return ( - + + + ); }; diff --git a/src/components/Results.js b/src/components/Results.js index a7d6bfa..05325bc 100644 --- a/src/components/Results.js +++ b/src/components/Results.js @@ -1,14 +1,18 @@ -import React, { Component } from "react"; -import { connect } from "react-redux"; -import styled from "styled-components"; -import { data } from "../data/words"; -import { puzzleSolver } from "../helpers/puzzleSolver"; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import styled from 'styled-components'; +import { data } from '../data/words'; +import { puzzleSolver } from '../helpers/puzzleSolver'; const MainResultsDiv = styled.div` - min-height: 100vh; - width: 50vw; + min-height: 50vh; + width: 100vw; background-color: blue; color: white; + @media (min-width: 600px) { + height: 100vh; + width: 50vw; + } `; const WordsContainer = styled.div` @@ -17,6 +21,16 @@ const WordsContainer = styled.div` justify-content: center; `; +const Title = styled.div` + width: 100%; + text-align: center; + padding-top: 20px; +`; + +const Words = styled.div` + margin: 20px 0px 0px 20px; +`; + class Results extends Component { renderWords(x, y) { return ( @@ -30,9 +44,9 @@ class Results extends Component { render() { return ( - currently we're trying to go from COSY to RINK. + currently we're trying to go from COSY to RINK. {this.props.words ? ( -
+ {puzzleSolver( this.props.words.firstWord, this.props.words.secondWord, @@ -40,7 +54,7 @@ class Results extends Component { ).map(x => { return
{x}
; })} -
+ ) : null} ); diff --git a/src/components/Search.js b/src/components/Search.js index 5a31391..5023597 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -1,16 +1,50 @@ -import React, { Component } from "react"; -import { connect } from "react-redux"; -import * as actions from "../actions"; -import { Field, reduxForm } from "redux-form"; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import * as actions from '../actions'; +import { Field, reduxForm } from 'redux-form'; +import styled from 'styled-components'; + +const Fields = styled.div` + display: flex; + * { + margin-right: 20px; + margin-top: 20px; + width: 40%; + height: 30px; + font-size: 16px; + padding-left: 6px; + } +`; + +const Label = styled.label` + font-size: 20px; +`; + +const Form = styled.form` + height: 80px; + width: 80%; +`; + +const Button = styled.button` + idth: 155px; + height: 42px; + background-color: green; + color: white; + margin-top: 20px; + font-size: 16px; +`; class Search extends Component { render() { const { handleSubmit, pristine, reset, submitting, setWords } = this.props; return ( -
setWords(values))} autoComplete='off'> + setWords(values))} + autoComplete="off" + > +
- -
+ -
+
- +
-
+ ); } } @@ -40,7 +74,7 @@ export default connect( actions )( reduxForm({ - form: "search" + form: 'search' // onSubmitSuccess: afterSubmit })(Search) ); diff --git a/src/index.css b/src/index.css index 06cc543..7745975 100755 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,4 @@ body { margin: 0px; + font-family: "Marmelad", sans-serif; }