From 41d43f816d8a7da4c22ca1bdf6820391fe3cab2f Mon Sep 17 00:00:00 2001 From: Lemony Date: Fri, 28 Sep 2018 17:43:51 +0100 Subject: [PATCH 1/8] Base webpage RTG --- index.html | 10 +- normalize.css | 341 +++++++++++++++++++++++++++++++++++++++ src/components/App.js | 51 +++++- src/components/Detail.js | 28 ++++ src/components/Movie.js | 61 +++++++ src/components/Movies.js | 21 +++ src/components/Paging.js | 31 ++++ src/components/Search.js | 29 ++++ style.css | 267 ++++++++++++++++++++++++++++++ 9 files changed, 835 insertions(+), 4 deletions(-) create mode 100644 normalize.css create mode 100644 src/components/Detail.js create mode 100644 src/components/Movie.js create mode 100644 src/components/Movies.js create mode 100644 src/components/Paging.js create mode 100644 src/components/Search.js diff --git a/index.html b/index.html index 5956140..7f609eb 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,19 @@ + Hello World -
+
+

Mouldy Lemons

+

Discover the zestiest flicks

+
+
+ diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..3d6624c --- /dev/null +++ b/normalize.css @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index 9520f77..ec83a35 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,15 +1,60 @@ import React from 'react'; +import Search from './Search'; +import Movies from './Movies'; +import Paging from './Paging'; class App extends React.Component { constructor(){ super(); + + this.state = { + movieresults: [], + query: "", + page: 1 + } + this.receiveQuery = this.receiveQuery.bind(this) + this.receiveSubmit = this.receiveSubmit.bind(this) + this.receiveMovies = this.receiveMovies.bind(this) + this.receivePages = this.receivePages.bind(this) } + fetchMovies() { + const moviesUrl = `http://www.omdbapi.com/?s=${this.state.query}&page=${this.state.page}&apikey=eabbbb71` + fetch(moviesUrl) + .then(response => response.json()) + .then(content => { + if(content.Response !=="False" ) { + this.setState({movieresults: content.Search}) + } + else { alert("oops")} + }) + } +// App component stores the query + receiveQuery(query) { + this.setState({query : query}) + } + receiveSubmit() { + this.fetchMovies() + } + receiveMovies() { + this.setState({movieresults: moviesresults}) + } + receivePages(num) { + // fetch movies when state is being set - not before + this.setState({page: num}, () => this.fetchMovies()) + } + render(){ return ( -
- React cinema app -
+
+ + + +
+ +
+ +
) } } diff --git a/src/components/Detail.js b/src/components/Detail.js new file mode 100644 index 0000000..6033fd3 --- /dev/null +++ b/src/components/Detail.js @@ -0,0 +1,28 @@ +import React from 'react'; + +class Detail extends React.Component { + constructor(){ + super(); + } + + + render(){ + return ( + + // need director, plot, actors, language, genre, guidance, ratings +
+
+
    + +
  • {this.props.movie.Director}
    • +
  • {this.props.movie.Plot}
    • +
  • {this.props.movie.Actors}
    • +
  • {this.props.movie.Language}
    • +
+
+
+ ) + } +} + +export default Detail; \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 0000000..584cf24 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,61 @@ +import React from 'react'; +import Detail from './Detail'; + +class Movie extends React.Component { + constructor(){ + super(); + + + this.state = {clicked: false, movieresult: {} }; + this.handleClick = this.handleClick.bind(this) + } + + handleClick(event){ + + this.setState({ + clicked: !this.state.clicked + + }); + } + + componentDidMount() { + const movieUrl = `http://www.omdbapi.com/?i=${this.props.movie.imdbID}&apikey=eabbbb71` + fetch(movieUrl) + .then(response => response.json()) + .then(content => { + this.setState({movieresult: content}) + }) + } + + + render(){ + + const posterurl = this.props.movie.Poster !== "N/A" ? this.props.movie.Poster : ""; + + + return ( + +
+
+ +
+
+

{this.props.movie.Title}{this.props.movie.Year}

+
+ + Show details + +
+ + {this.state.clicked ? : null} + +
+
+ + ) + } +} + +export default Movie; \ No newline at end of file diff --git a/src/components/Movies.js b/src/components/Movies.js new file mode 100644 index 0000000..7c82752 --- /dev/null +++ b/src/components/Movies.js @@ -0,0 +1,21 @@ +import React from 'react'; +import Movie from './Movie' + +class Movies extends React.Component { + + render(){ + return ( + +
+ {this.props.movieresults.map(movie => { + + return + + })} +
+ + ) + } +} + +export default Movies; \ No newline at end of file diff --git a/src/components/Paging.js b/src/components/Paging.js new file mode 100644 index 0000000..247aa2d --- /dev/null +++ b/src/components/Paging.js @@ -0,0 +1,31 @@ +import React from 'react'; + +class Paging extends React.Component { + constructor(){ + super(); + this.handleClickNext = this.handleClickNext.bind(this) + this.handleClickPrevious = this.handleClickPrevious.bind(this) + } + + handleClickNext(event) { + this.props.receivePages(this.props.currentPage+1) + } + handleClickPrevious(event) { + if (this.props.currentPage >1) { + this.props.receivePages(this.props.currentPage-1) + } + } + + render(){ + return ( + + ) + } +} + +export default Paging; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 0000000..7ad7715 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,29 @@ +import React from 'react'; + +class Search extends React.Component { + constructor(){ + super(); + this.handleSubmit = this.handleSubmit.bind(this) + this.handleChange = this.handleChange.bind(this) + } + handleSubmit(event) { + event.preventDefault() + this.props.receiveSubmit() + } + handleChange(event) { + this.props.receiveQuery(event.target.value) + } + + render(){ + return ( +
+ +
+ ) + } +} + +export default Search; \ No newline at end of file diff --git a/style.css b/style.css index e69de29..bb448a1 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,267 @@ +/** + * Notes BEM + * http://getbem.com/naming/ + */ + +/* Variables + ========= */ + + :root { + --main-txt-color: #0a0a0a; + --light-color: #EEE8CD; + --bright-color: #FFC220; + --dark-color: #2D363a; + + --main-padding: 1rem; +} + +/* ==== BASE ==== */ + +body { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + margin: 0; + padding: 0; + background: var(--dark-color); + line-height: 1.5; + color: var(--light-color); + -webkit-font-smoothing: antialiased; +} +.container { + padding-left: var(--main-padding); + padding-right: var(--main-padding); + margin: 0 auto; +} +.menu--settings { + list-style-type: none; + padding-left: 0; + padding-right: 0; + margin: 0; +} +img { +max-width: 100%; +height: auto; +border-style: none; +} + +/* ==== LINKS AND TYPOGRAPHY ==== */ +a { + text-decoration: none; + -webkit-transition: color 0.5s; + -moz-transition: color 0.5s; + transition: color 0.5s; + } + +/* ==== SEARCHFORM ==== */ + +.search__form { + width: 80%; + margin: 0 auto; +} +.search__input { + background: var(--light-color); + overflow: hidden; + white-space: nowrap; + padding: 0.35em 0; + text-align: center; + border: none; + font-size: 1.5rem; + text-decoration: none; + line-height: normal; + max-height: 3em; + width: 100%; +} +.search__btn { + background:var(--bright-color); + text-transform: uppercase; + color: var(-dark-color); + padding: 0.35em 0.75em; + border: none; + font-size: 1.5em; + text-decoration: none; + cursor: pointer; + width: 100%; +} +.search__btn:hover { + background: var(--main-txt-color); + color: var(--light-color); +} + +/* ==== MAIN ==== */ + +.maincontent { + padding: var(--main-padding 0); + margin-bottom: var(--main-padding); +} +.mainheader { + text-align: center; + padding: calc( 2.5 * var(--main-padding) ) 0 ; + border-bottom: 5px dashed var(--bright-color); + border-top: 5px dashed var(--bright-color); + margin-bottom: calc( 3 * var(--main-padding) ); + margin-top: 1px; +} +.mainheader__title, +.mainheader__subtitle { + margin: 0; +} +.search { + text-align: center; + margin-bottom: calc( 3 * var(--main-padding) ); +} +.moviesfeed article { + margin-bottom: calc( 4 * var(--main-padding) ); +} +.moviesfeed__full { + background-color: var(--main-txt-color); + background-repeat: no-repeat; + background-position: center center; + padding-top: 130%; + background-size: cover; + position: relative; +} +.moviesfeed__details { + background: var(--light-color); + color: var(--main-txt-color); + padding: var(--main-padding); +} +.movie__header { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } +.movie__title { + margin: 0; + padding: calc( 0.5 * var(--main-padding) ); + background-color: rgba(0, 0, 0, 0.75); +} +.movie__title em { + color: var(--bright-color); +} + +.moviesfeed__btn { + position: absolute; + bottom: -40px; + left: 0; + right: 0; + height: 30px; + line-height: 30px; + text-align: center; + padding: 5px; + text-transform: uppercase; + background-color: var(--bright-color); + color: var(--dark-color); +} + +/* show-hide */ +.moviesfeed__full .moviesfeed__details { + display: none; + } +.moviesfeed__full.details--open .moviesfeed__details { + display: block; +} +.moviesfeed__full.details--open .moviesfeed__content, +.moviesfeed__full.details--open .movie__header { + position: static; +} +.moviesfeed__full.details--open .moviesfeed__btn { + left: auto; + right: 0px; + bottom: auto; + top: 0px; + +} +.moviesfeed__full.details--open .moviesfeed__content, +.moviesfeed__full.details--open .movie__title { + background-color: var(--light-color); + color: var(--main-txt-color); + height: auto; + } +.moviesfeed__full.details--open .movie__title { +font-size: 1.75rem; +} + +/* paging */ +.paging { + text-align: center; + margin: var(--main-padding) 0 calc( 3 * var(--main-padding) ); +} +.paging__previous, .paging__next { + display: inline-block; + padding: var(--main-padding); + background: var(--light-color); + color: var(--dark-color); + font-weight: bold; +} +.paging__previous:hover, .paging__next:hover { + background: var(--bright-color); +} + +/* footer */ +.footer { + padding:calc( 2 * var(--main-padding) ) 0; + border-top: 5px dashed var(--bright-color); + color: var(--bright-color); + text-align: center; + } + + + /* MEDIA QUERIES + ============== */ + +@media (min-width: 768px) { + + .search-form { + display: flex; + flex-wrap: wrap; + } + .search__input { + width: auto; + padding: 0.35em 0.75em; + flex: 2; + } + .search__btn { + width: auto; + flex: 1; + } + + /* MAIN */ + .moviesfeed { + display: flex; + flex-flow: row wrap; + } + .moviesfeed article { + width: 25%; + } + .moviesfeed article.active { + width: 100%; + } + /* remove background image */ + .moviesfeed__full.details--open { + background-size: auto; + background-image: none; + padding-top: 0; + } + /* GRID PADDINGS */ + .moviesfeed__full { + margin-right: var(--main-padding); + margin-left: var(--main-padding); + } +} + +@media (min-width: 960px) { + .container {max-width: 930px} +} + +@media (min-width: 1200px) { + .container {max-width: 1170px} + .moviesfeed article { + width: 20%; + } +} + +@media (min-width: 1440px) { + .container { + max-width: 1410px + } +} \ No newline at end of file From d51f028bd33ff8e2e6c3972ce0196682a1c00387 Mon Sep 17 00:00:00 2001 From: Lemony Date: Sat, 29 Sep 2018 16:58:05 +0100 Subject: [PATCH 2/8] Paging limits --- index.html | 2 +- package-lock.json | 5 +++++ package.json | 1 + src/components/App.js | 21 ++++++++++++--------- src/components/Movie.js | 22 +++++++++++++++------- src/components/Paging.js | 13 +++++++++---- style.css | 2 +- 7 files changed, 44 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 7f609eb..03f8e96 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Hello World + Mouldy Lemons
diff --git a/package-lock.json b/package-lock.json index 8ca987c..5905a1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1915,6 +1915,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", diff --git a/package.json b/package.json index 26c045b..4c6f8e3 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ ] }, "dependencies": { + "classnames": "^2.2.6", "react": "^16.2.0", "react-dom": "^16.2.0" }, diff --git a/src/components/App.js b/src/components/App.js index ec83a35..18ff2f2 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -24,12 +24,12 @@ class App extends React.Component { .then(response => response.json()) .then(content => { if(content.Response !=="False" ) { - this.setState({movieresults: content.Search}) + this.setState({movieresults: content.Search, moviestotal: content.totalResults}) } else { alert("oops")} - }) + }) } -// App component stores the query + receiveQuery(query) { this.setState({query : query}) } @@ -42,18 +42,21 @@ class App extends React.Component { receivePages(num) { // fetch movies when state is being set - not before this.setState({page: num}, () => this.fetchMovies()) - } - + } + render(){ + return (
-
- -
- +
+ +
+ + {this.state.movieresults.length !== 0 ? : null} +
) } diff --git a/src/components/Movie.js b/src/components/Movie.js index 584cf24..531e5e2 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,5 +1,6 @@ import React from 'react'; import Detail from './Detail'; +import cx from 'classnames'; class Movie extends React.Component { constructor(){ @@ -14,7 +15,6 @@ class Movie extends React.Component { this.setState({ clicked: !this.state.clicked - }); } @@ -27,16 +27,23 @@ class Movie extends React.Component { }) } + render(){ + const articleclasses = cx('moviesfeed__article', { + 'active': this.state.clicked, + '': !this.state.clicked + }); + + const moviesfull = cx('moviesfeed__full', { + 'details--open': this.state.clicked, + 'details--closed': !this.state.clicked + }); - render(){ - const posterurl = this.props.movie.Poster !== "N/A" ? this.props.movie.Poster : ""; - return ( -
-
+
@@ -45,7 +52,8 @@ class Movie extends React.Component {

{this.props.movie.Title}{this.props.movie.Year}

- Show details + + {!this.state.clicked ? "Show details" : "Hide Details"} diff --git a/src/components/Paging.js b/src/components/Paging.js index 247aa2d..24bae75 100644 --- a/src/components/Paging.js +++ b/src/components/Paging.js @@ -17,12 +17,17 @@ class Paging extends React.Component { } render(){ + const totalpages = this.props.totalresults/10; + return ( ) } diff --git a/style.css b/style.css index bb448a1..5cbc897 100644 --- a/style.css +++ b/style.css @@ -186,7 +186,7 @@ font-size: 1.75rem; text-align: center; margin: var(--main-padding) 0 calc( 3 * var(--main-padding) ); } -.paging__previous, .paging__next { +.paging__previous, .paging__next, .paging__count { display: inline-block; padding: var(--main-padding); background: var(--light-color); From 4930774d02a88952797ef62d88880068c62ec3a3 Mon Sep 17 00:00:00 2001 From: Lemony Date: Sat, 29 Sep 2018 23:36:59 +0100 Subject: [PATCH 3/8] Tweak styles --- index.html | 6 +++--- src/components/Movie.js | 3 --- src/components/Movies.js | 3 ++- src/components/Paging.js | 11 ++++++++--- style.css | 27 +++++++++++++++++++++++---- 5 files changed, 36 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 03f8e96..44300bc 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@

Mouldy Lemons

Discover the zestiest flicks

-
-